Screenshot of the Coaster Crew's new Events page. The page begins by listing the perks that guests can expect, such as exclusive ride time and behind-the-scenes tours.

UX Process in Action: Evolution of a coaster club’s events list in 17 screenshots

image

The new Coaster Crew site went live recently. I designed it, and in a series of articles I have been explaining how. First, I explained some of the design considerations for refocusing a coaster club’s site toward the general public and not only toward coaster enthusiasts. Then, I showed how the new Coaster Crew site moved from a multi-page layout to a single-page layout and back. Most recently, I walked through the new In the Loop homepage – from sketches to wireframes to prototypes to a live site on several different devices.

Today, let’s look at how the design for the Events page changed over time. It’s one of the more visually striking pages on the live CoasterCrew.net site now, but the design today is a radical departure from how it looked earlier in this project.

image

As with the other pages, I began by sketching some ideas that I had selected earlier.  This first idea called a lot of attention to the very next event in hopes that 1) people wanting to go to multiple events would be able to keep track of what is next and 2) Coaster Crew might get more signups to events that they need to fill up soon.  This is the idea which got selected early on and lasted well into usability testing.

image

The final design turned out more like this idea.  This idea highlighted the next three events, which are usually all at different parks around North America.  Site visitors could easily see which events would be closest to them.  The top row of 3 was the idea that persisted and became part of the live site’s homepage.  In reality, we went with a hybrid of these two original sketches.

image

In the first wireframe, I used the original idea of highlighting the next event on the left.  ”Join us at our next event!” would have been the page title.

image

The page would continue with more future events, “save the date” notices, and a way to sign up for The Coaster Crew newsletter to find out about more events.

image

With no background image, the first prototype looked like a Windows 8 style flat design.  That’s not what we were trying for here.  I also later decided after a round of usability testing that less was more regarding the fancy typography.  Rather than using multiple fancy typefaces, I opted for multiple weights of one typeface with other fancier display fonts used sparingly.  This design strategy will be used on the fansites too.

image

I liked how the newsletter call to action turned out in this layout.  I never liked this transition between the events list and the forums.  In later iterations, I used background pictures more liberally to help the flow between the sections.

image

This background image overlay came from BGWFansite‘s special hard hat tour of Verbolten.  My intention here was to show an example of one of the perks that Coaster Crew members get at events.  I edited the background image the way I did to have consistency with the previous section (Podcast).

image

The events section received a lot of requests for changes during the second round of usability testing.  Testers didn’t like how the section was very long.  Scalability would have been a problem when the staff adds the Coaster Crew events for 2014 to the page.  Coaster Crew already has a lot of events on their schedule for next year.  Testers also wanted to know what they could expect at events, and they thought the existing page wasn’t doing this well enough.

After The Coaster Crew’s Big Bang event at Kings Island with exclusive ride time (ERT) on The Beast, they posted new pictures to their Facebook page from the event.  Using an ERT picture in the background for the Events section gives the page a much more human feel and helps visitors to the site connect with the organization more.  Testers could tell that this was a picture from a real Coaster Crew event and were much more interested in the content because of it.

image

I kept the page’s attention on the next event, having it fill the whole top row.  The future events list switched to a 3-to-a-row layout as in the second sketched idea.  The second idea also had future events 4-to-a-row after the first row, but I decided against this because it would not give enough room to display the event info on tablets.

image

I added this What to Expect section after the list of events.  It used similar icons to the rest of the site.  Testers eventually wanted this further up the page because it was below the fold and they thought people new to Coaster Crew wouldn’t see it soon enough to notice it.  In the live site, I tightened these icons to one row and moved it above all of the listed events.

image

Here is the live site on desktop.  When the 2014 events are populated, they will fill in three to a row, left to right.

image

The activities list shows up for all devices because users who are unfamiliar with our events may be using any device.  For performance reasons, and because iOS doesn’t currently support fixed-position backgrounds, I stacked several images from Coaster Crew’s Big Bang event at Kings Island and made that one background image.  The top image is a sign Kings Island had for their event group.  The bottom image, shown if you scroll down on a tablet, is from a behind-the-scenes tour of The Beast.

image

The stack of images shows up more obviously in portrait mode.  You won’t see The Beast’s logo after the 2014 events are populated here.  This section has the live event data that is currently in the system.

image

Mobile users see what exclusive ride time is front and center before they are told about events that have it.

image

After users see what they can experience at Coaster Crew events, they are invited to the next event.  More events are listed further down the page.

image

The fall colors for the More Future Events list really stand out on mobile.  Calls to action take users to places where they can get more information about the event or register.  Some registrations are handled through the Coaster Crew site, while parks’ sites take care of others.

image

The way to see pictures from past events shows up more clearly on phones. It allows users to go to the Coaster Crew Facebook page, fansites, or forums for more information.

I hope you’ve enjoyed seeing how Coaster Crew’s new events list came to be. The next article is already ready to launch soon, and it will walk you through how the Forums page got built. It shows how I responded to users’ feedback to grab their attention with the design of the page and tell them why they should register for the forums.

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.