My first site for the Coaster Crew, the Coaster Crew Network portal, has now gone live.
When I started working for Coaster Crew in January, I intended to redesign their main site and their fansites. I would redesign one fansite as a template for the other fansites’ staff to roll out the changes to their fansites.
During the design process, I realized that the sites needed more than a bar across the top or bottom of each page for unifying the network’s brand. They needed a portal site to raise awareness of their brand and the different sites that they provide. The new portal site provides this in a responsive design which adapts to any device and window width.
These screenshots show the design process:
Findability was an interesting problem to tackle with the Coaster Crew fansites. Each of their fansites currently have very similar names, such as KDFansite, KIFansite, and SFAFansite. I thought about classifying the fansites by park owner, but the primary persona for the design would have been confused for any park chain other than Six Flags. Of all parks represented by their fansites, only one has the park chain’s full common name in its name (Six Flags America). Parks change hands over time too, and this can be a point of confusion for the users.
I decided to solve this by classifying the parks by region and listing the parks’ names and locations with the fansite logo. It makes the webpage longer, but it enforces the correlation between fansite, park, and location to people who may have trouble with it.
I mimicked the final site as well as possible using Axure RP 6.5. Certain features, such as the pinned background, work differently in Axure than they intend to work in the final product. Axure RP 7 will have more features for responsive design and is coming later this year.
The site went through quite a few color schemes. CWFansite’s manager sent me the nice background picture of Canada’s Wonderland’s B&M gigacoaster, Leviathan, which served as a nice frame of reference for the rest of the page.
Next, I coded the page using the latest version (4) of Zurb‘s Foundation Framework, with custom CSS. Due to licensing, we had to switch out a font that we had planned to use in the Portal and in the forthcoming CoasterCrew.net redesign. We’re now making better use of different weights of the same typeface, a theme you will also see in the fansites when their redesigns go live.
Until now, the site had been using a color scheme based on Leviathan’s. The users who tested our site (in exchange for free Coaster Crew memberships) gave us overwhelming feedback that the text was too hard to read. GIMP came to the rescue. Putting two directional lights to focus the viewer’s eyes on the passing train made the background behind the text darker, and adding a translucent overlay or panel to the main content column made the text easier to read as well.
One last change got us to the design that you see now. The “Coaster Crew” text in the header was replaced by a Coaster Crew logo, with “Network” placed to the right or below it depending on the window size.
I would like to thank the many others from Coaster Crew, listed in the site credits, who contributed in various ways to this design and launch. If you are interested in doing usability testing for the other forthcoming redesigns, test opportunities will be announced via the Coaster Crew Facebook page.
I am a freelance user experience designer focusing on the amusement industry: amusement and theme parks, ride companies, and other related companies. If you are interested in hiring me to work on a site or app for you on a freelance/corp-to-corp basis, please contact me via my website.