A few weeks ago I stumbled on yet another protein waffle photo from one of my favorite Instagram people, Jazzythings. Breakfast (including tacos) is my favor
It's not every day that the world of food and technology intersect so elegantly.
Once, in Air Force boot camp, they let me fly a T-37 training jet. At the instructor pilot's suggestion, I pulled a relatively high-G maneuver (well, 4.3 Gs but who's counting) and came very close to passing out. The IP saved our lives by taking control of the aircraft, and I totally didn't puke in my oxygen mask or anything. On an unrelated note, I cannot swim and elevators make me nervous.
oh my god I didn't know you were in the air force! I can't even imagine, congratulations on not puking. I don't know if our reasons are similar, but I don't really like elevators either. I don't trust them or the noises they make.
UX Process in Action: Consistently pushing myself toward a better design
Describing the new Coaster Crew website, which launched in September, has been a long story. I began this project by learning more about the site's target audience and developing personas, including the primary persona for CoasterCrew.net: Javier, a male in his mid-20s who typically visits parks in the Southeast US once or twice a year and loves big roller coasters and drop towers. The ideas and design process for each page of the site have been centered on showing people like Javier, who typically aren't familiar with coaster clubs or coaster enthusiast terminology, two things:
Why should I be in a coaster club?
What can I do in a coaster club - specifically, in The Coaster Crew?
In later articles, I described my design process for several of the pages on the site: the new homepage, the new In the Loop page, the events list, and a page inviting users to participate in the Coaster Crew Network Forums. Most recently, I explained the Coaster Crew Network bar, which appears in the footer of each page of CoasterCrew.net and (in the future) the fansites to allow users to navigate around the network more easily and be more aware of all of the sites the organization offers.
I skipped over the About page intentionally. Because it is a complex page with multiple sections and many iterations in its design, I wanted to describe it last.
Read on to see how several sections within About the Coaster Crew came to life.
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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
You asked for it? Our oven may be on the fritz, two weeks before the first Thanksgiving we're hosting at our house. The bugger intermittently kicks over into self-cleaning mode and burns the shit out of whatever is in there. Also we are not currently tripping over bags of money in the hallway, so up and buying a new oven isn't something we're eager to do.
Bags of money in the hallway would be a HUGE HAZARD, so thank goodness you guys don't have that!
Seriously, though, while acknowledging that the situation and the timing sucks monkeyballs, it represents one of the most important things I've ever learned: holidays are still just a day. Our expectations of that day can be set SO HIGH that they are impossible to live up to, leaving us disappointed, and when things like this happen they feel even more frustrating and insurmountable. I hope you are able to find a solution for this, whether it's a handyman or a new oven or borrowing a friend's kitchen. Most of all I hope you and yours enjoy each other's company. Good luck!
