Posts

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.

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.

Spreadsheet describing the five personas being considered for The Coaster Crew's redesigns.

The 5 kinds of people who would visit a coaster club’s website – and what I learned about them

Last week, I started a new series of articles about The Coaster Crew’s new site. So that I can expand my design portfolio, The Coaster Crew has graciously allowed me to redesign all of their sites. The new Coaster Crew site, which recently went live, follows the new Coaster Crew Network Portal site.

Many people who aren’t familiar with my exact field would read all of this and think, “He redesigns websites. He is trying to build a design portfolio. He must be a web designer.”

Not quite.

I am a user experience designer.

User experience (UX) includes a lot more than just web design. In effect, in a UX project like this one, I am dealing with affecting how you feel about the Coaster Crew and how you feel about the fansites. UX designers use established methods. This is to make sure that their sites are meeting the needs of their users. These needs include being able to find what you are looking for easily, having a pleasant experience browsing the sites, and wanting to come back to this community of people who love the same parks that you do.

As a field of work, UX involves a lot. UX designers come into the UX field from graphic design, human factors engineering, computer science, marketing, and many other fields. My background is in computer science. I was a software developer before becoming a full-time freelancer in UX.

UX also has a lot of sub-fields within it. Most commonly, people would divide UX into information architecture, interaction design, human-computer interaction, and visual design. In other words, as a UX designer I deal with how websites and pages are arranged (IA), how you interact with the site (IxD and HCI), and how it looks (visual design). Many people also say that industrial design (for example, design of iPhones and iPads), sound design, copywriting, sound and video production, and architecture of buildings play a role in user experience too.

Today, I will describe how I used some common interaction design practices, surveys and personas, to help the Coaster Crew sites reach out to a broader audience.

The Coaster Crew sites have long done a great job reaching out to coaster fanatics: people who ride coasters anytime they can, who know a dive loop from an Immelmann and a B&M from an Intamin. 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 I 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. My premise, which seems to have held up so far, is that coaster enthusiasts would still be served well even if the sites were designed for the general public as top priority.

I took surveys and began to understand the average park visitor, not from just my general observations at parks (which helped), but from real data – from them. Here are a few of the questions I asked in the survey:

  1. How often do you visit amusement parks?
  2. If you were to visit an amusement park’s fansite, what would you want to find out while you’re there?
  3. What frustrates you the most at parks, fansites, and forums?
  4. What do you think of the current fansites?

Based on the whole survey, I came up with personas. Personas stand in for users throughout the rest of the design process. They are based on what designers find out in surveys, interviews, and contextual inquiries (watching people use their computers, tablets, and phones in the real world). But they’re not an average. No one has exactly 2.1 kids or visits parks exactly 3.5 times a year.

So our personas included these people:

  1. A coaster enthusiast who visits a lot of parks and rides coasters quite frequently
  2. A young coaster enthusiast who is quickly learning a lot about coasters but doesn’t have as much budget or opportunity for visiting parks out of town
  3. A young adult general public visitor who loves coasters but only visits parks once or twice a year
  4. A general public mother of two young children who doesn’t ride coasters but is interested in learning about fun things she and her kids can do together.
  5. A mid-level manager at a theme park (we did not include them in our surveys)

I designed the fansites with Karen (4th column) as the primary persona since she is more interested in family activities at parks. She wouldn’t be served well by a fansite that only talks about roller coasters. Javier (3rd column) is the primary persona for the Coaster Crew site since he is more interested in coasters and Coaster Crew keeps coasters front and center in their activities.Here are a few highlights of what we found in our surveys:

  1. Long lines were the top frustration for both enthusiasts and the general public, but a much bigger problem for the general public. I think this is because coaster enthusiasts tend to visit parks more often at off-peak times. The next-biggest frustrations for general public guests were costs and crowds. Coaster enthusiasts were more frustrated by a lack of appealing food options and ride closures.
  2. The general public’s biggest frustration with fansites was that it was too hard to find what they were looking for on the site. Coaster enthusiasts overwhelmingly reported that a lack of recent updates is their biggest frustration. More general public respondents than coaster enthusiasts reported that they were frustrated with fansites’ professionalism and look and feel.
  3. On fansite forums, coaster enthusiasts’ biggest frustration was that discussions go off topic. The general public’s biggest frustrations were 1) “I can’t post as a guest” and 2) “Rude/annoying people”.
  4. Both enthusiasts and general public visit fansites mainly to learn more about a park’s rides. Among other goals, coaster enthusiasts were most interested in special events, food at the park, and construction updates. General public were most interested in construction updates, special events, and visit tips.
  5. None of the general public respondents I polled have ever been a member of a coaster club, and only 1 of more than 60 had heard of Coaster Crew before the survey. Just over a third of the enthusiasts I polled had been in a coaster club, and over half had heard of Coaster Crew.
  6. Coaster enthusiasts liked the existing design more. They gave it higher marks in visual appeal, layout, and findability (the ability to find information they are looking for easily).

Since many people reported that they hate long lines, the new Coaster Crew site reports in plain view that our group usually has at least one ride to ourselves during our Exclusive Ride Time (ERT) sessions.  Many people who tested the new Coaster Crew site noticed this and had very positive feedback.

The mobile site brings Exclusive Ride Time and behind the scenes tours even more to the forefront.

Right after the list of event perks, we give an invitation to our next event and a list of more future events.  Many events list ERT as one of their perks, so this combination goes very well.

In later articles, I’ll explain how several of the pages in the new CoasterCrew.net design came to be. I’ll begin with the homepage design, which is a radical departure from their previous 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.

Live screenshot from the Coaster Crew's homepage

In 15 Pictures: The new Coaster Crew site goes live

The new site for The Coaster Crew has now gone live. Seven months in the making, this is my second site for Coaster Crew, after their new Coaster Crew Network Portal was launched in June. Like the Portal, the new Coaster Crew site uses a responsive design. This means that it is designed to look good on desktop computers, laptops, tablets, and smartphones.

The Coaster Crew is a roller coaster club with over 1000 members in the US and Canada. I’ve attended several of their events in the past and really enjoyed interacting with other roller coaster enthusiasts, riding coasters in Exclusive Ride Time, and going on behind the scenes tours! I hope my schedule will allow me to attend their events again soon.

image image image

One of the most interesting challenges of this site was helping Coaster Crew expand their audience of coaster enthusiasts to reach more of the general public. General public guests who enjoy riding roller coasters often don’t know about coaster clubs and tend to visit parks less often than enthusiasts do. However, there is not as much disparity between enthusiasts and GP in terms of which rides they tend to like, save for “hidden gem” rides at lesser-known parks that tend to receive much of their attention among only enthusiasts and small parks’ regional audiences.

Over the coming weeks, I will continue to work on redesigns for the Coaster Crew fansites. The fansites have a more direct benefit for the general public, who should find several new sections for the fansites helpful.

image

I began this project by researching the current and prospective users of the Coaster Crew sites.  This is a common strategy for people in my profession, user experience design.  I’ve written a whole article on how I did the user research for these sites.  It will be the next article to go live in this series.

image

Next, I sketched out every page of the new site.  Many ideas in this original sketch for the In the Loop section were included in what is now the live site.

image

After that, I created wireframes for each page.  This was an early idea for what is now the header on the homepage.

image

Then, I created the prototype for the site in three iterations.  This is the second round of the prototype for the In the Loop page, as depicted in Axure.

image

After a second round of user testing on a beta site, I created a final prototype.  This Forums section is from that prototype.

image

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

image

The BGWFansite and KDFansite staff and I donated some pretty striking pictures of coasters to use on the site.  The mission statement appears over a picture of Intimidator 305 at Kings Dominion.

image

An infographic and call to action for membership highlight the new About section on CoasterCrew.net.  A future article will show more about the design process for this infographic.  I took the background picture at Hersheypark this season.

image

This is the first Coaster Crew site designed to be easy to use on mobile phones.  This page allows users to listen to In the Loop on their phones.

image

I mixed different font weights throughout the new Coaster Crew site design.  This is the event list at mobile width.

image

The new homepage features 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.

image

A new network bar unites the entire Coaster Crew network.  (It does have a title, Coaster Crew Network, which is not in this screenshot so that I could show the full footer.)

This has been a great project to do. Explore the live site at http://coastercrew.net, and stay tuned for more articles describing how each page was built! The next one will describe how I learned more about the types of people in our current and target audiences.

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.