#iterative-improvement

The original sketch envisioned an infographic with a playful design below an attention-getting mission statement in a blockquote.  The infographic was going to tell the Coaster Crew's story of how they increased from 4 members to more than 1000 in less than 15 years.  The copy for the infographic was already on the old Coaster Crew site's About page, but it had not been styled to get users' attention more.

The original mission statement in my redesign looked like a block quote printed for a poster.  Here is the original wireframe.  At this point, no decisions had been made about the background image.

The second iteration of the prototype included the fonts and the first background image.  I decided to use Intimidator 305 for this picture because it has been the centerpiece of several of Coaster Crew's biggest events since its opening in 2010.

After two rounds of usability testing and feedback from the Coaster Crew staff, I used a more traditional row layout and dropped the novelty fonts. The text was easier to read after adding shadows behind it in development, but user testers still found it too hard to read.

The new background picture, also of Intimidator 305, was taken by a member of the KDFansite staff and donated for this site.

To enhance readability and make the mission statement pop more, I put a full-width yellow panel behind the mission statement text.  I also switched the fonts to different-weight fonts in the same typeface to keep a common theme with the fansites' design, which are currently using different weights of Open Sans.  The About Us header was added for consistency with other pages of the site after we switched the layout back to multi-page.

On mobile, the mission statement displays as one long, single column.  The emphases on different phrases within the mission statement becomes more obvious.

Here is the original layout for the infographic, which was focused on the pictures.

Here is the first round of the infographic with pictures.  I was unhappy with the broadcast icon used here because its background was still visible.  Several of the graphics were full-width and did not scale well for mobile, so I changed them after receiving this feedback in testing.

The layout changed slightly after I migrated it to Zurb Foundation 4.3's responsive grid system in development.

Throughout this project, I challenged myself at several junctures to find the part of the design that I liked the least and improve it.  The About page, especially its infographic, easily stood out the most.

I decided to edit every image I had used in the infographic.  I switched to a four-column layout with the last two columns empty to show a train for Great Bear going by.  The focus moved more toward the number of members an events and away from the less important number of states where we have offices.  That is because users are more interested in an organization's benefit to them (and the organization's proving it) than in an organization's structure.  The infographic would lead to a call to action for people to join The Coaster Crew and attend events.

Here is the call to action to join Coaster Crew at the bottom of the infographic.

The infographic displays like this on a mobile device.

The mobile layout's single column keeps viewers more focused on the statistics that the infographic is presenting.  The state icons display in three columns to save space and keep viewers' attention on the statistics.

The original layout took on a zigzag pattern and provided space for other content such as images in the empty parts of the page.

Testers had trouble trying to find the part of the site which talked about membership benefits.  Changing the more creative but less obvious "You may ride again." header to "Why join?" was the first move toward rectifying this.

I redesigned the rest of the About page, including the Rules section, after the second round of usability testing.  After the icons in the Events section received very positive feedback in testing for being able to attract users' attention, icons were added in the Forums and Membership Benefits sections.  I added the prices in the left column based on tester feedback.

Some usability practitioners speculate that on mobile devices, the first page has replaced "above the fold" with regard to page content.  Mobile users are more likely to scroll up and down pages than to tap links to other pages.  So I added a quick blurb of copy about the events to the Membership Benefits header.

Per a tester's recommendation, I added dividers to distinguish between the levels of memberships.

The Coaster Crew Network row moved below the Membership Benefits in the final layout.  Users were generally more able to comprehend the membership benefits and network when each was presented across one full row.  They are more able to think of this as one unit rather than having their eyes bounce back and forth between columns with unrelated information.

You can see the About page live on the Coaster Crew site.  You may also view my design stories for the other pages on this site here: Intro, Personas, Homepage, In the Loop Podcast, Events, Forums, Signup, and Coaster Crew Network Bar.

I am a user experience designer specializing in the amusement industry. I work for amusement parks, ride companies, coaster clubs, and any other company or organization affiliated with amusement.