The Coaster Crew

User research, usability consulting, and responsive redesign

 
CCNet-home-mobile-1500x630.png

About

The Coaster Crew is a large roller coaster enthusiasts’ club based in Virginia, Massachusetts, and Florida. They were founded in 1999 and have hosted special events for roller coaster enthusiasts at dozens of parks in the United States and Canada.

My task

  • Redesign The Coaster Crew’s official website.
  • Increase awareness of Coaster Crew events.
  • Increase awareness and downloads of the In the Loop podcast.

Project team

  • My role included user research, usability consulting, UX design, and custom HTML5/CSS3 development.
  • My main point of contact was their webmaster.
  • My secondary points of contact were their president and vice president.
  • Their staff also has about 15 other content contributors, who gave feedback on my work.
 

Process

 
01-CCAll-Process-Personas-Top-768.jpg

Personas

The Coaster Crew sites have long done a great job reaching out to coaster fanatics. However, not very many park visitors are this crazy about coasters. Most people who go to parks love coasters and/or the other great experiences that amusement parks provide. But they don’t often know the makes, the models, the engineering behind all these great rides, or the terms that coaster enthusiasts use a lot. Reaching out to the general public more would give Coaster Crew a much larger base of park fans to join the club, invite to their events, and contribute to their sites.

So we began this redesign project a different way. Instead of jumping right in to writing code or sketching new designs, I began by trying to understand the people that we are trying to attract to the site. The Coaster Crew sites had five personas. The primary persona for CoasterCrew.net was a 24-year-old man who loved roller coasters but rode them infrequently.

2-CCNet-Process-IA-Card-Sort-Results.jpg

Card Sort Results

Roughly 80 participants took part in card sorting studies to determine the best navigation structure for the Coaster Crew websites. In its first iteration, CoasterCrew.net was planned as a one-page site, so its card sort categories helped determine not only the sections of the one page but also the sections’ contents.

 
CoasterCrew-Before-Wide.jpg

Homepage Before

The original Coaster Crew homepage was desktop-only and fixed-width.

3a-CCN-Wire-Home-Top.jpg

Homepage Wireframe

Using the personas, card sort results, and generated ideas, we developed a wireframe using an industry-standard prototyping tool, Axure RP. Wireframes depict the structure of a site and do not show fonts, color schemes, or graphics.

6-CCN-Prototype2-Home-Top.jpg

Homepage Prototype

Then, I created the prototype for the site in three iterations. This is the second round of the prototype for the homepage’s top section, as depicted in Axure.

11-CCN-Live-Home-Events-Desktop.png

Homepage on Desktop

The site was one single page for its first several iterations. Now back to a multi-page structure, the site’s new homepage preserves part of the one-page idea by featuring teasers of each section of the site. User testers loved how the background for each section stayed in one place as they scrolled it into view.

9-CCN-AxurePostUT2-Home-Events-CTA.jpg

Prototype post-usability testing

The second round of user testing revealed new user needs and required some layout changes. This iteration of the prototype helped us collect our ideas before testing them with users on our live beta site.

 
CoasterCrew-Events-Before-Wide.jpg

Events Before

The original Coaster Crew events page resided on a separate site which was linked from the old Coaster Crew site’s navigation menu. In the redesign, we wanted to move the events list to the main Coaster Crew site to aid in brand unification.

06-CCN-Live-Events-Top-Desktop.png

Events on desktop

The third round of user testing on the beta site yielded some great feedback, like moving a section showing people what to expect at a Coaster Crew event to the top of the Events section.

12-On-Mobile-Tablet-Landscape-Events-Top-768.jpg

Events on tablet

The Events page has three stacked background images in a tablet layout to show the VIP treatment that The Coaster Crew’s members can experience at parks. The pictures show a Guest Relations area with a Coaster Crew sign, The Coaster Crew on a night Exclusive Ride Time (ERT) session, and The Coaster Crew on a behind-the-scenes tour of a record-setting roller coaster.

CCN-Events-Mobile-Width-Screenshots.jpg

Events on mobile

Screenshots of The Coaster Crew’s redesigned Events page at mobile width. To see this live, visit http://coastercrew.net/events/ on a smartphone, or view that page in a very narrow browser window. The page’s layout adapts to fit the width of your screen, similarly to this site.

 
CoasterCrew-CoasterCrew-Before-Wide.jpg

About Before

The old Coaster Crew site had two About pages. The one labeled About in their main navigation was under construction indefinitely. This page, labeled Coaster Crew, had much of the content on the About page today. As with the other pages, this was a fixed-width, desktop-only page.

19-CCN-Live-About-Benefits-Desktop.png

About on Desktop

The new About page has separate sections for the club’s mission statement, history, benefits, and network of sites. The Benefits section uses eye-catching icons to help users focus on each benefit of each membership type.

CCN-About-Mobile-Width-Screenshots.jpg

About on Mobile

The About page adapts to a narrower width when it is shown in a narrower browser window or a mobile device.

16-CCN-Live-Network-Bar.jpg

Coaster Crew Network Bar

This network bar appears in several variations in the footers of The Coaster Crew’s official site and fansites. The fansite redesign concepts used a more abstract version of the background picture which highlights each fansite’s color scheme.

 

Live site

 

Results

 

60%

increase in The Coaster Crew’s website traffic in the first month after launch

300%

increase in In the Loop podcast downloads in the first month since launch

16%

increase in the average session duration on CoasterCrew.net (summer 2014 vs. summer 2013)

14%

decrease in bounce rate on CoasterCrew.net (summer 2014 vs. summer 2013)

 

From the client

“David performed usability testing and design for amusement park related websites that I help run. David took the time to understand our needs along with the need of our clients. He showed us many ways we could improve our offerings and client experience.

“David produced numerous mockups of possible design changes and met with our site visitors to discuss what they liked and didn’t like about the proposed changes. In addition, David also hand crafted a responsive website template from the HTML to the CSS. I highly recommend David.”
— Matthew Rydzik, Webmaster – The Coaster Crew

From a user

“While the $30 cost for our whole family to join [The Coaster Crew] was ultimately a fantastic value and deciding factor, I also liked that their website was one of the most modern looking, and they were very active in social media and scheduling events around the country. Many of the other clubs offer very dated looking websites, and as a web designer, it swayed my decision. Everything combined showed me that Coaster Crew was a dedicated team of enthusiasts not only providing value for families, but also their members.”
— InACents
 

Let's work together.