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).
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.
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.
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.
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.
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.
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.
Here is the podcast section at mobile width after the second round of development and second round of usability testing.
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.
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.
Here are the Events and Podcast sections on the live CoasterCrew.net homepage. The merch section is below this.
Here is the Podcast section on the live CoasterCrew.net homepage at mobile width. The site adapts to any device and window size.
Tablets were the main reason why I changed the Guests and Archives sections to be part of the same column.
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.