Screenshot showing the redesigned live About page for The Coaster Crew. This section of the page explains the different tiers of membership, which build on each other to include more benefits for individuals, families, and Platinum members.

UX Process in Action: Consistently pushing myself toward a better design

image

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:

  1. Why should I be in a coaster club?
  2. 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.

image

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.

image

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.

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.

image

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.

image

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.

image

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

image

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

image

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.

image

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

image

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.

image

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

image

The infographic displays like this on a mobile device.

image

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.

image

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

image

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.

image

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.

image

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.

image

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

image

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. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.

In their redesign, the Coaster Crew's fansites have a new Network Bar at the bottom of every page for easier navigation to the other fansites. The Network Bar uses the fansites' individual color schemes. An example of the network bar for one fansite is shown here.

UX Process in Action: Navigating a network of 10 sites and counting

image

Ever since the new Coaster Crew website launched in September, I have been writing articles describing my design process and design decisions.  The series began with a post about how I learned about both the roller coaster enthusiasts and the “general public” segment of The Coaster Crew’s audience and determined how to best target the site toward the general public while still meeting enthusiasts’ needs.  Later posts outlined how several of the pages on the site came to be: 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.  I also went over a new membership signup flow which is not currently on the live site due to technical limitations.

Today, I’ll discuss how the Coaster Crew Network ties together with a feature that you can see now on CoasterCrew.net.

The Coaster Crew currently owns and operates ten live websites.  Their official site has been live in various incarnations and web addresses since 2004.  They started operating fansites for amusement parks several years ago when the Kings Dominion Fan Site went under their ownership.  (Prior to this, several Kings Dominion fansites had come and gone over the years.  Usually, these sites had one or two owners and would be maintained well for several years before the owners no longer had time or no longer had interest in working on the sites.)

They later launched fansites for Busch Gardens Williamsburg and Six Flags America.  Most recently, they have added fansites for Cedar Point, Kings Island, Canada’s Wonderland, Dollywood, and Valleyfair.  The Coaster Crew Network site originally just served as a gateway to their forums.  Earlier this year, I launched a complete, responsive redesign of that site with a focus on tying together all of their fansites and social media channels and providing a consistent look and feel with the other sites I have been redesigning for them.

Selling users on the idea of the fansites as being part of a network is important for the Coaster Crew.  The fansites have not always had a consistent way to navigate between them, and it can be hard to remember which fansites are in the network.  The staff suggested a network bar in the sites’ header or footer.  I decided that since tall footers with site maps are common in designs today, I could merge the network bar into a tall footer.

image

I sketched five different ideas for the network bar at the beginning of the project.  The first was a simple listing of all of the fansites across one row.  The second divided the list of sites into four columns.  The third put the names of the parks with the fansites.  The fourth arranged the sites in columns by the park chains represented by each fansite.

image

The layout that seemed to scale best arranged the parks by geographic region.  It seemed to be the best at handling new sites’ being added to the network bar.  If park chains sold a park, we would not need to update the network bar and users would not be wondering if we still had a fansite for that park.

image image image image image

I tested each idea’s strength by creating wireframes for them.  The first three ideas seemed to work for a header or a footer, while the last two were definitely for footers.  In addition to scalability, the fifth idea also seemed the best for the design since a tall footer on each page would allow for some strong design ideas there.  I continued to work on that idea through the prototype and later stages.

image

In Axure, I initially added bright colors for the network bar before I knew what the background pictures would be.  The copyright and footer links were initially very minimal at the bottom of the page.

image

I took this background picture of El Toro with a point-and-shoot camera. It has remained the desktop background on my old desktop computer for several years. This picture seemed to go very well with the network bar, so it became the background.

I built the network bar locally using Zurb Foundation 4.3.  The fansite’s logos fill 100% of their container’s width with auto height.  The copyright and map statements were minimal.  User testers seemed to receive this layout well, but I thought more could be done with it.  It also didn’t have the ribbon yet.

image

For performance reasons, the live site on mobile doesn’t keep the background in one place.  It shows the fansites two to a row instead of four to a row to size the logos ideally for the smaller screen.

image

The footer now features a panel with the Coaster Crew’s mission statement.

image

The network bar currently takes almost exactly one screenful for a tablet in landscape orientation.

image

In portrait mode, most of the blue footer panel can also be seen.  Zurb Foundation 4.3 automatically hyphenates words on mobile devices to keep the parks’ names from becoming too wide for their columns.

image

The desktop layout shows the blue footer panel mostly obscuring the roller coaster hill behind it.  It gives clear access to The Coaster Crew’s social media channels under the club’s logo in the footer.

image

Lastly, here is a preview of how the network bar will look on the redesigned fansites.  I did this as an overlay, similar to the In the Loop background, because each fansite has a different color scheme and that will allow each fansite’s personality to translate into its network bar design.  This is a prototype and still subject to change as the sites move toward going live.

You can see the Coaster Crew network bar live on any page of the Coaster Crew site.  The next and last article in this series will discuss the About page: the best example in this project of my consistently pushing myself toward a better design.

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. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.

We redesigned a membership signup form for The Coaster Crew which used a more natural-language approach. This screenshot shows a step of the new membership signup process as shown on a beta site.

UX Process in Action: Designing a new signup flow for a roller coaster club

image

The new Coaster Crew website launched in September. I’ve been writing articles about our target audience and how each page on the site came to be (Homepage, In the Loop, Events, and Forums).

Today, I’ll show you something that isn’t on the live site. I designed a new membership signup form, which was available in the prototypes that we tested with users.

image

My original idea was to allow people to fill out their own membership badge.  This would have been displayed next to completed membership badges.

image

Fresh off of conducting a round of surveys for this project using AYTM, I was used to pretty robust tools.  So my design for this form had a good deal of skip logic, custom buttons, and a full order review.  I tried adding input fields within labels as the third slide depicts, but our plugin did not support that.  To allow a quicker checkout process (and probably boost conversions), I made it possible for users to bypass the Coaster Crew merch and charity donation steps.

image

I added some space for the badge background and some copy in the wireframe.  The low-fidelity prototype already had a full set of input fields and logic for navigating between the pages of the form.

image

For internationalization reasons, I used “First/Given Name” and “Last Name / Surname” language.

In this form design, I really wanted to highlight natural language. Interacting with one of these sites should not feel like interacting with a computer. I recently saw an insurance website whose search form is just “I drive a (car’s year, make, and model), and I live in (ZIP code).” That language makes a website feel human. Websites’ forms are often terse, and interacting with them feels like interacting directly with a machine.

image

It is likely that we would have needed a premium e-commerce form to handle the skip logic and purchasing logic here, even though the choices are quite simple for users.

image

This screen would have detected whether users had selected an option in the beginning that would have not given them the best possible deal on their membership.  Another way to do this would have been to ask for the user’s and their guests’ information and recommended a membership type based on what they had entered.  This may have required disclosing the price to be a later step and felt like bait and switch to people who had seen a low membership price advertised on the pages that gave them links into this checkout process.

image

This order review slide cannot be developed with the plugins available to us at this time.  This is how it was intended to work.

There were actually 12 steps in this signup process, including all guest information pages.  I have omitted the rest from this post for brevity, but for the near future I will make the wireframe and prototype available online.  Submitting that form does not actually submit any data, so feel free to try it out.

A few screenshots of the prototype are available below.

image

The overall page used some copy which did more to highlight the benefits of membership in our club.

image

The Family memberships step allows for a quick checkout but also has options for extras.  Most of our test users actually did buy extra merch and donate to the ALS Association.  (The form they tested was not actually submitting anything.  I had them do what they would have done normally.)

image

If users opted to go to this screen, they could add Coaster Crew merchandise to their membership order. Some users in early rounds of testing had not remembered that some merchandise was included with their platinum memberships, so I added that copy here.

image

The charity slide had a quick writeup explaining that the ALS Association raises money for research related to ALS (Lou Gehrig’s disease).  I recently launched a site for a non-profit, and I know that people want to know more about the charities they are giving to without being asked to give out of guilt.

image

The payment page would have included the order total, calculated from previous slides’ data.  Users really needed to know this, and Coaster Crew staff required it, but we couldn’t find a free plugin that would meet our needs.

image

This confirmation page assumed that Coaster Crew staff needed to process PayPal payments manually, but the staff wanted that to be an automatic process.  That is the technical reason why we needed to be able to calculate the payment amount.

The prototype’s form had 12 pages, like the wireframe’s.  The prototype will still be available online for the near future.

image

Our beta site, which is still online as of this writing, had the signup form implemented with the closest plugin we could find to what we needed.  Here is how it looked in the desktop layout.  The benefits of each membership type were reprinted here so that this page could serve as a landing page.  Commonly, The Coaster Crew shares out the link to their membership page directly rather than sending out a link to their homepage or another page.

image

Because our plugin did not have skip logic, I combined all of the guest signup information onto one longer page and made all fields optional so that users signing up for individual memberships could skip it with one click.

image

This confirmation page shows up when users submit their membership information.

image image

Here is an example of how the form displayed on mobile.  I wrapped our form plugin instance within a Foundation framework (4.3) column class so that it would be responsive.

So due to technical limitations, the new membership signup form didn’t go live.  The live site shows the first page of the signup form but with a button at the bottom to take users into the old signup process on a separate server.

I had basic assumptions at the outset about WordPress plugins for forms. We assumed we could find a form plugin that was:

  1. Multi-page,
  2. Responsive to any device,
  3. Able to calculate prices based on what users enter in previous steps, and
  4. Free.

The closest we could get while I was working on this project was BreezingForms, which lets you build multi-page forms for free.  This plugin was in use on the beta site.  Since we were using this form for e-commerce, being able to carry prices forward was very important.  Our site’s new store runs on WooCommerce, but the free version of that doesn’t do the calculations that we need for memberships and event signups.

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. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.