Posts

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.

Screenshot of a page explaining why users should join The Coaster Crew's forums. This screenshot for this responsive website shows how the site adapts on an iPad 2.

UX shows 8 reasons why you should join this roller coaster forum

image

I have recently been explaining the design decisions for the new Coaster Crew website, which launched in September.  During this series, I have demonstrated how I came to understand our target audience and have illustrated my design process for the homepage (this site went from a multi-page layout to a one-page layout and back!), the new In the Loop homepage, and the Coaster Crew events list.

Today, I’ll look at a page which received some very interesting feedback from users: the Forums page.

As a freelance user experience (UX) designer, I wear a lot of hats for my one-person business.  Part of this means I maintain accounts on a lot of websites: social media sites, sites for freelancers, software vendors, and many more.  Before I started using a password manager, I was forgetting a lot of passwords.  When I evaluate a website or app, one of my first gripes tends to be this: they assume I will create an account without telling me why I should.  The worst offenders make me sign in before I even see what their site is!

Yet, this is almost exactly what I was doing with an early design for the Coaster Crew forums page.  I was giving a quick description of what the forums were and leaving them hanging.  When they tested one of my old one-page layouts, some users told me that this section “doesn’t look important, so I skipped over it.”

That’s one of the big reasons why every park, every ride company, every coaster club, and every other amusement-related organization with a website needs to have their target users test their site.

image

Here is my initial wireframe for the Forums section.  Part of a one-page layout, users would have seen this after the Events section.  The content seemed to stand out well enough at this stage of development.  But as other sections of the page evolved throughout my design process, this section got lost.  And that was a problem because The Coaster Crew is trying to increase their forum activity.

image

The original prototype gave the Forums section a similar white-on-orange color scheme to the Podcast section.  This provided good consistency through the one-page layout.  I was planning to add a background picture but had not yet decided which ride it should be.

image

I decided on Dominator at Kings Dominion for the background picture. Several years ago, the KDFansite forum merged with the Coaster Crew Network forums, where it became a board within the larger network’s forums. It’s still the most active part of the forums. The most active topic was the Intimidator 305 announcement, but I decided to use an I305 picture as the background for the mission statement. More users would see that in the one-page layout because that was almost prime real estate in that layout.

The background picture in this mockup was just a placeholder. I had taken it on the way out of Kings Dominion several years before I bought a professional camera, and it was an old Facebook upload. It did the job for a prototype even though I needed to make the picture bigger, but I wouldn’t use a background picture like this in a live site. Our first round of user testers saw the prototype with this background image.

image

By now, I had a much better picture of Dominator thanks to Nikki at KDFansite.  I darkened the picture slightly to make the section’s text easier to read.  I also decided to put the calls to action on their own row instead of in front of the picture.  Users did their second round of testing on this beta site.

image

Here’s the forums section at this stage in mobile width.

One of my questions for user testers in the first two rounds was, “Do we present good enough reasons to join the forums?” One positive thing they mentioned was actually the Register call to action. They didn’t want to see spam on the boards. But users also didn’t find the Forums section that eye-catching in this layout. By this stage, I had added icons in several other sections of the site. They found those sections drew their attention more.

image

Going to the next round of user testing to the third was a big leap. I added a panel for readability and icons to draw users’ eyes.

image

Some users in the last round of testing remarked that I had drawn attention to the wrong features of the forums.  The number of members and number of posts sounded more intimidating and tedious than helpful when it was placed in the top row.  I ended up moving those down and putting the visit tips and trip reports at the top on the live site.

image

The site looks very similar on a tablet.

image

Here is the row of calls to action on a tablet.

image

At mobile width, the page draws users’ attention toward viewing the forums before registering.  This width is the best for this flow of events.  Users now expect to be given concrete value before they register for a site.

image

When I was directed to split the site back into a multi-page layout, this created a new challenge because each section needed to be represented well on the homepage.  I opted for a shorter section of copy and just a few of the forums’ features to make it onto the homepage.

image

In the live site, the social media section appears right below the forums section to enhance the feeling of being part of a community of coaster fans.  Further up the page, users are given a list of events for real-life meetups.  The forums and social media sections encourage discussions at any time of the year, regardless of whether or not parks are open.  Actually, in my experience as a Coaster Crew forum moderator, forums get quite a lot of activity in the offseason too because members take the offseason to speculate on what will happen at the parks in the following season.

image

In the mobile width, I hide the icons on the homepage and try to just communicate the right things with the text. I didn’t want to go too far off of the desktop width for this because the mobile site and desktop site are the same site. The design both adapts to users’ devices and responds to their window size.

Thanks for reading about Coaster Crew’s new forums page. You can see it live here. The next article will detail a new signup flow I designed for the Coaster Crew site, which could not be delivered yet due to technical limitations. I’ll close the series with posts about the new Coaster Crew Network bar and the About page.

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.

Live screenshot from the Coaster Crew's homepage

UX Process in Action: From a Multi-Page Site to a One Page Site and Back Again

image

I recently launched the Coaster Crew site and explained how I came to understand its target audience.  Today, I will discuss the design of its homepage.

The site began as a multi-page site with separate pages for In the Loop, About, Events, and many more.  These screenshots will walk through my plan to turn this into a one-page site – and how I was able to change it back into a multi-page site, keeping many features of the one-page design.

image

The new Coaster Crew homepage differs significantly from any of their previous designs.  In the first sketches, I originally envisioned the new CoasterCrew.net as a single-page site. About, Podcast (In the Loop), Events, Forums, and the store would have been sections within this one page.

image

I conducted card sorting studies, where participants helped me determine the navigation menus for CoasterCrew.net and the fansites.  This also told me what I should include in each section of the one-page site.  The navigation menus’ links went to different parts of that one page.

image

Then I created a wireframe.  This had the layout and content of the site.  This first screenshot is the whole page zoomed out.  It’s hard to read the page at this distance, so here are some of the sections.  I will include more pictures of this in future articles about the individual pages.

The header of the site is largely the same as what you see on the site now.  The current site’s header just uses a full-width background image and has only one button.  I changed this later in the prototype.

image

Here is the first prototype with no images yet.  In the theme we decided on using later, the logo is on top of the background image and the background image is full-width.

image

This shows one of the segues between sections on the one long page.

image

This prototype had the logo and background image.  The top section in this screenshot looks a lot more like the homepage’s header today.  In development, I toyed around with putting the logo on the left and in the middle.  Ultimately, I decided to leave it in the middle.

image

Our first round of usability testing was on the aforementioned prototype.   I took the testers’ feedback into account on this first development version of the page.  This is a local version of the page rather than the actual WordPress site, so it only shows the page’s body.  I developed this using the 1180px grid.  Later, I switched to Foundation 4.3 because that framework was able to do more.

image

This shows the About to Podcast segue and a technical problem with WordPress that took me weeks to resolve.  Its auto-paragraph feature (wpautop, for those who know WordPress) was needed by our staff so that they wouldn’t have to know code to write content.  In the layout I was developing, this feature added a lot of unnecessary spacing in the layout.

Here’s how I fixed extra wpautop spacing in our theme (The One Pager by WooThemes).  This goes in the custom.css file.  #network-bar is one of my custom styles for this client’s site.

/* Removes empty paragraphs. */ p:empty { display: none; /* hides all truly empty paragraphs. Paragraphs with spaces will still show! */ }

/* Remove whitespace between sections by displaying only non-empty paragraphs in the entry */ .home p { display: none; }

#header p, #network-bar p, .home .entry div p:not(:empty) /* all non-empty paragraphs in a post/page, header, or network bar */ { display: block; /* default for p */ }

image image

That development version was deployed to a beta site for the second round of usability testing. Based on that feedback, parts of the prototype went back to the drawing board. The biggest changes were to our Events and Forums sections. These had a lot of content added to them in order to help the users of our site. Stay tuned for future posts about these two sections.

By now, several sections of the site had become quite long. Linking to different sections of the single-page site was not as straightforward either. So our staff requested that I convert the site back to a multi-page layout. This involved substantial rework in the homepage design, including new sketches and a lot of tinkering with the design in the browser with Firebug.

image

Moving back to a multi-page design takes more than copy and paste because, as a designer, I have to keep in mind the paths that users will take through the site. I have to make sure people will still visit all of the pages by making sure that the homepage gave a fair amount of space with them. I ultimately decided to shorten the sections of the one-page layout, link to the full pages, and add one more section for The Coaster Crew’s social media feeds. This screenshot shows the segue from the shortened Events section to the shortened Podcast section. On desktops, the sections feature fixed-position backgrounds.

I then did a third round of usability testing, incorporated nearly all of the feedback, and sent off the project for final launch prep. The site finished going live in early September.

image image image

This is how the top of the live homepage looks at desktop, tablet, and mobile widths. Any of these layouts can display on your computer depending on how wide your browser window is.

Stay tuned for the next article in this series. It will explain how my process enables Coaster Crew podcast listeners to stay In the Loop on the new site.

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.

The new Coaster Crew Network Portal acquaints users with the Coaster Crew's network of fansites and invites them to join The Coaster Crew.

Introducing the new Coaster Crew Network portal

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:

image

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.

image image

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.

image

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.

image

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.

image image image image image

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.