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.

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.

We redesigned the homepage for In the Loop, the longest-running podcast for the amusement industry, now in its tenth season. This screenshot shows what this page looks like live.

You are In The Loop – with my UX design process for The Coaster Crew

image

Designing the new In the Loop homepage, at http://coastercrew.net/podcast/, gave me a great opportunity to try out and refine my user experience (UX) design process.

Coaster Crew’s old In the Loop page provided a podcast player and a place to chat when the show was live. Beyond that, it was pretty bare-bones. It didn’t really have a design per se. And for an audience of coaster enthusiasts, many would say that was enough.

However, as a designer, I am interested not only in the great features of a site but also the presentation. The site appeals to a different audience based on how it is designed. I decided to give this page the same design process as I gave all of the other sections of the site that I worked on (the only exception being the store, which is from a third-party vendor).

image

Here is my original list of ideas and idea selections for the new In the Loop page.  Most of these ideas made it into the final design.

image

I sketched two primary design concepts based on the ideas that I selected.  This first one was selected by the staff and refined through several rounds of usability testing.  The basic structure of the page is still intact today.

image

This was a more aggressive design concept which was not selected.  It would have lent a more retro feel to this section of the site.  The first idea allowed for better consistency with the rest of the site.

image

The sketches translated directly to the wireframe.  After testing the beta site on other devices, I would decide to make two changes to this layout.  I moved the Listen Live player below the summary of the show and converted the Our Guests and Archives sections from two narrow columns to one wider row with the guests listed first.

image image

When I colored in the prototype, the “cutout” look of the Meet the Hosts section became much more apparent.  So did the problems reading the black text on the orange background.  That would become even harder to read after the background image was added.

image

Then I added images to the prototype.  The hosts’ images would become circular during the development phase with CSS.  The ride in the background image is Dragon Fire at Canada’s Wonderland.  Joshua from CWFansite took this picture, which I edited so that it would fit with the orange background.  Fellow enthusiasts may point out to me that the train is in a corkscrew, not in a vertical loop.  That’s true, but the user testers didn’t have a problem with this.

The background for the About page actually does have a train in a vertical loop.  That image uses Great Bear at Hersheypark.  The Dragon Fire picture gave a stronger silhouette which I felt better communicated the nature of the show.

image

Here is the podcast section at mobile width after the second round of development and second round of usability testing.

image

The In the Loop page was the hardest page in the site for our user testers to read.  I added some translucent backgrounds behind the sections with text in this prototype.

image

By this time, I was also switching the site back to a multi-page layout.  I sketched some more ideas for the new homepage design and made a new wireframe of it to collect my ideas before moving forward with development again.

image

Here are the Events and Podcast sections on the live CoasterCrew.net homepage.  The merch section is below this.

image

Here is the Podcast section on the live CoasterCrew.net homepage at mobile width.  The site adapts to any device and window size.

image image

Tablets were the main reason why I changed the Guests and Archives sections to be part of the same column.

image image

The layout at desktop uses a wide layout grid and a fixed-position background to let the train in the loop stand out more.  I widened the Foundation framework’s maximum width to about 1600 pixels for this design.  In this screenshot, the browser window is maximized on a 1080p (1920×1080) display.

I hope you’ve enjoyed seeing how the new In the Loop site came to life.  The next article is already ready to launch soon, and it will show you how the Events page got built.  That page went through a lot of layout changes to get to where it is today.

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.