You are In The Loop - with my UX design process for The Coaster Crew
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 (1920x1080) 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.
I am looking for new projects to start after the new Coaster Crew fansites go live this fall. If you would like to hire me, please contact me through my website or tweet at @DalandanUX. You can also like my company's Facebook page or follow me on Twitter.
Dalandan v.1.2: Going responsive, plus Coaster Crew update
The Dalandan Concepts website has gone responsive. Like the Coaster Crew Network Portal, which we recently launched, it is now built on the Zurb Foundation 4 framework. This is version 1.2. The v2 redesign in WordPress is still in the works.
Here is my bio in the About section at the mobile width. Thanks, @WesLinda, for the professional headshot.
The official site redesign for Coaster Crew is scheduled to launch soon. We are in the midst of our third round of usability tests on the beta site. If you would like to participate later today, tweet at @DalandanUX and we will set up a time. Participants get a free 1-year membership in Coaster Crew.
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 email me at [email protected] or use this contact form on my site.
My first site for the Coaster Crew, the Coaster Crew Network portal, has now gone live.
When I started working for Coaster Crew in January, I intended to redesign their main site and their fansites. I would redesign one fansite as a template for the other fansites' staff to roll out the changes to their fansites.
During the design process, I realized that the sites needed more than a bar across the top or bottom of each page for unifying the network's brand. They needed a portal site to raise awareness of their brand and the different sites that they provide. The new portal site provides this in a responsive design which adapts to any device and window width.
These screenshots show the design process:
Findability was an interesting problem to tackle with the Coaster Crew fansites. Each of their fansites currently have very similar names, such as KDFansite, KIFansite, and SFAFansite. I thought about classifying the fansites by park owner, but the primary persona for the design would have been confused for any park chain other than Six Flags. Of all parks represented by their fansites, only one has the park chain's full common name in its name (Six Flags America). Parks change hands over time too, and this can be a point of confusion for the users.
I decided to solve this by classifying the parks by region and listing the parks' names and locations with the fansite logo. It makes the webpage longer, but it enforces the correlation between fansite, park, and location to people who may have trouble with it.
I mimicked the final site as well as possible using Axure RP 6.5. Certain features, such as the pinned background, work differently in Axure than they intend to work in the final product. Axure RP 7 will have more features for responsive design and is coming later this year.
The site went through quite a few color schemes. CWFansite's manager sent me the nice background picture of Canada's Wonderland's B&M gigacoaster, Leviathan, which served as a nice frame of reference for the rest of the page.
Next, I coded the page using the latest version (4) of Zurb's Foundation Framework, with custom CSS. Due to licensing, we had to switch out a font that we had planned to use in the Portal and in the forthcoming CoasterCrew.net redesign. We're now making better use of different weights of the same typeface, a theme you will also see in the fansites when their redesigns go live.
Until now, the site had been using a color scheme based on Leviathan's. The users who tested our site (in exchange for free Coaster Crew memberships) gave us overwhelming feedback that the text was too hard to read. GIMP came to the rescue. Putting two directional lights to focus the viewer's eyes on the passing train made the background behind the text darker, and adding a translucent overlay or panel to the main content column made the text easier to read as well.
One last change got us to the design that you see now. The "Coaster Crew" text in the header was replaced by a Coaster Crew logo, with "Network" placed to the right or below it depending on the window size.
I would like to thank the many others from Coaster Crew, listed in the site credits, who contributed in various ways to this design and launch. If you are interested in doing usability testing for the other forthcoming redesigns, test opportunities will be announced via the Coaster Crew Facebook page.
I am a freelance user experience designer focusing on the amusement industry: amusement and theme parks, ride companies, and other related companies. If you are interested in hiring me to work on a site or app for you on a freelance/corp-to-corp basis, please email me at [email protected].
I landed a new UX redesign project in January for Coaster Crew and their network of fansites. So far, it is going great and is ahead of schedule. Currently, I am almost done with user surveys and about to make the personas.
Here are some of my lessons learned:
1. To take a survey for free, people must already be passionately interested in your subject. In other words, people in audiences that your organization is trying to expand into will most likely not take your surveys for free.
When the first surveys were launched, I expected a relatively even split between coaster enthusiasts and general public. We had announced the surveys throughout Coaster Crew's social media channels. Instead, the first round gave us less than 30 responses. When I noticed that most of the respondents had ridden hundreds of different coasters, I realized that this only catered to coaster enthusiasts. So I had to split the survey in two to get both coaster enthusiasts and general public (GP) to respond.
2. Therefore, if you want a big sample size, expect to pay up.
Workers want a fair rate. And they deserve it. Turker Nation, a large community of Mechanical Turk workers, accused me of promoting slave labor on Twitter for the rates that I was paying.
I have a few rationales for my low rate:
a) I'm not getting paid for this project. In their tweet, Turker Nation said, "Would YOU work for that?" (shouting theirs). I am working on this project for free - because I love theme parks, because I love being part of Coaster Crew, because I see it as a way to give back to Coaster Crew for years of letting me go to their events, and because I need work for my UX portfolio (particularly in amusement - my main target industry). Therefore, when I was writing the proposal for this project, I was assuming I wouldn't have to pay my respondents - or, for that matter, my usability testers.
b) Our budget is low. To my knowledge, Coaster Crew has no full-time employees. All of us have outside jobs, have our own companies, or are students. The organization is on a lean budget and interested in branching out to have events at more parks and fansites for more parks. I want this project to further these initiatives and not cause them to be disrupted in the short run. Within the past year, they have launched several new fansites. I would rather concentrate money on making sure the end result is as professional as possible. So if I were to only have a couple hundred dollars to work with, I'd invest in high-quality, responsive WordPress themes as the highest priority. For the record, I do not send my Adobe receipts to my clients and tell them to pay me for the tools I use to do the job.
c) Surveys need a representative board of respondents. For that, you need a lot of respondents. I was trying to get the most respondents within my budget as I could.
I would use MTurk for low- or medium-budget projects such as these. If money were no object, I would just use AYTM's panel. Originally, I was dreaming big - 3000 respondents would answer my survey for free. Doing this on AYTM's panel would cost about $90,000, and double that if there is even one prequalification question on the survey. However, for a smaller-scale, still high-budget survey, AYTM's panel would produce amazing results. I can target it not only by country but by states and counties, so it would be very easy (if expensive) for me to hire a similar set of respondents as the parks would want in their own marketing surveys. AYTM's tools for doing this are truly powerful. Their interface is a lot easier to figure out than MTurk, and (even in their free surveys) you can slice and dice presentation data almost any way you like to get great data to back up your personas.
3. Target your surveys by location.
Fortunately, the free first round of our survey gave us great results for the coaster enthusiasts - because the results we paid for in the coaster enthusiast survey did not. Coaster Crew presently serves the fans of parks in the US and Canada. Only 3 of our 69 respondents to the "enthusiasts" survey were based in either of those two countries. Most of the others were based in India.
The problems with India on a survey for our coaster club are these:
a) Coaster Crew doesn't target the parks in India, so these are the wrong users to research even if they have the necessary coaster count to qualify for taking this survey.
b) Per RCDB, there aren't even 100 currently operating roller coasters in India.
c) Most of the respondents indicated they would not drive more than 6 hours to visit an amusement park. So most likely, they have not ridden any coasters outside India.
So, combining b) and c), most of these respondents did not really qualify to take this survey. But I couldn't reject them (although I rejected some for failing to follow the instructions), because the acceptance criteria didn't spell this out. I paid the price for this. Fortunately, the free survey in the first round gave me at least some data on the enthusiasts, and I've been part of that community for years as well.
Interestingly, the GP survey got no respondents at its original reward price. I canceled that batch and launched two new GP batches for the US and Canada. With the tricks below, I got much better data.
4. Clarify your qualification questions.
We had a "coaster enthusiasts' survey" that was intended for those who had ridden at least 100 different roller coasters. By comparison, I've ridden about 80 so far. So I am close to the cutoff for "enthusiasts" even though I plan whole vacations around roller coasters, have been to several ERT sessions for members of coaster clubs, know what ERT is (exclusive ride time), know coasters by their make and model more than their names, and so on.
"Coaster count" is a widely understood term in the coaster enthusiasts' community. However, the general public seems to not think in those terms. They're not going around the world to ride kiddie coasters at special club events just so they can have 700. Add to that the cross-cultural challenges I had in the first round of the survey (as I described earlier), and people took this qualification question to mean, "Have you ridden a roller coaster at least 100 times?" I think that is what tripped up the respondents in the first enthusiasts' survey on MTurk.
5. Have written questions that require people to post relevant answers - and reject anyone who gives a nonsensical response.
In that survey, I got some truly absurd answers. Survey respondents were asked a standard question: "When you use the website of any coaster club, do you find anything frustrating that you wish was easier? If so, what?" One person responded, "last month". I couldn't reject their task because I didn't ask for a Worker ID. So that was one thing I added in the next round of surveys.
Most importantly, I added two standard questions: 1) What is your favorite ride at any amusement park? and 2) What is your favorite amusement park?. These are great ways to understand both enthusiasts and the GP, as well as guards against nonsensical data showing up in the surveys. In AYTM, I can easily reject or filter out answers that don't make sense when I publish my survey results.
6. Ask MTurk's support team for help whenever needed.
MTurk's interface for new requesters is daunting, to put it nicely. Commands like "Cancel this batch" leave me with more questions than answers: if a batch is canceled, do I get the money back? Are workers that completed the survey still paid? ... and so on.
I am also not sure what republishing a rejected assignment for other workers to complete means. I rejected 18 of 69 respondents in the enthusiasts' survey based on my acceptance criteria. Several emailed me asking why, and in only one or two cases (with all of my surveys) have they actually come back and submitted the survey properly, allowing me to approve their previously rejected assignment. The interface and UX for this are backwards, though the task itself does not take very long after you figure out how. Their support team was responsive in telling me how to do this. Between their UX and their lack of clear documentation, I had to call MTurk's support team about 3 times in the first week.
So those are some lessons I learned in using MTurk to do user surveys. Next, after all of the surveys have concluded, I will share some of my findings from the surveys themselves - to help you all understand a bit about how roller coaster enthusiasts and general public amusement park visitors use the web and coaster club sites.
Interesting video from "The Legend" of Coastercrew.net. He video documented his 6am to 6am day at Disney! Talk about a tiring day! A 12 hour day is a killer, but to think, 24 hours straight at an amusement park!? That would be tough to do. I'm upset I didn't get to go.
