Posts

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.

The first 23 responses to a user survey for The Coaster Crew

Lessons Learned: Coaster Crew User Surveys

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.

The user surveys are based at AYTM.  The initial respondents were recruited through Facebook and Twitter.  To get more respondents, I created new rounds of similar surveys at Mechanical Turk, ultimately targeting users in the USA and Canada.

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.

Screenshot showing our redesign for the SFAFansite (Six Flags America Fansite) homepage.

Our Process: User experience design

Note: We originally published this post in 2012 on our previous company site. There have been some changes to our process since then, though this article fleshes out some steps that we use in our process today. Our current Process page supersedes any steps in this process which may conflict with it.

If you compare the rates for freelance UX designers against the rates for freelance web designers, you may see quite a disparity.  Some people ask, “Isn’t ‘user experience design’ just another way to say ‘web design’?  Isn’t it just a ploy to charge us more money?”

No.  ”Web design” can take on many different definitions:

Some people equate “web design” with “web development”.  They want to code up cool features that haven’t been done before, and most of them don’t care a great deal how it looks; it’s “somebody else’s problem”.  Sites can turn over 100% like Microsoft.com from 1994 to 1995.  While sites like this would look terrible by our standards today, they were really groundbreaking in 1994.

Some people equate “web design” with “graphic design”.  They want the site to look as cool as possible.  In the early 2000s, there was a trend toward hidden navigation menus.  You had to run your mouse over a series of dots to find out what the navigation options were.  It looked minimalistic and flashy at the same time, but it was hardly user-friendly.  It made users think about where to go next instead of thinking about purchasing a product.  Still, without graphic designers’ help, the web might still look as it did in the 1990s – table-heavy, frame-heavy, and much more interested in function than in fashion.

User experience designers say that both of these camps have made valuable contributions to the web and applications, but they are both wrong in what they value.  Neither developers who only focus on development nor visual designers who only focus on visual design are meeting the needs of the actual audience.  To use an amusement analogy, their site may be like a roller coaster that breaks some records (great features) and has excellent theming (great visual design) but gives people severe headaches (bad user experience).  To make a successful ride that doesn’t put people in pain, you have to understand your riders – their physical dimensions, their health, how they would react to different maneuvers – and design the ride accordingly.

So my work as a user experience designer involves this:

  1. Usability expert
  2. User researcher
  3. Information architect
  4. Interaction designer
  5. Visual designer
  6. Prototyper
  7. User tester

Usability expert

I have to understand, academically, what makes an interface usable.  Certain tools in my toolbox are job skills that I can apply to any project.  I took a class on human-computer interaction in college and applied my knowledge in it as a user interface developer for several small companies.  And you’re welcome to see what usability books I’ve been reading if we are connected on LinkedIn.

This approach has to be much more than academic – which is why I include the other roles below.

I will write another article in the near future about my usability consulting process, so the rest of this article will concentrate on design.

User researcher

I have to understand your specific customer base, both those who you are currently targeting and those who you plan to target.  Amusement companies have to understand which segment of the population they are targeting with a specific ride.  Building a gigacoaster in a park for small children doesn’t make sense.

Though, admittedly, we don’t have to know much about physics, UX practitioners have more than age, height, and health to consider.  We have to consider demographic information such as nationality, ethnicity, and location.  This is even more important for cross-cultural projects and companies that target a global audience.  I study international UX as part of my research to help accomplish this.  In addition to demographic data, we have to think about how often (and how well) they use computers and mobile devices and what their goals and frustrations are.  This makes my research involve psychology as much as computer science, sociology, and business.

The general categories of users fuel what the UX world terms personas.  The personas get names and descriptions and stand in for people during much of the design process.  They also must accurately represent the entire user base; I can’t choose who my site will cater to and say that I accurately advocate for users.  I write a persona worksheet for every new project.  The one for the upcoming redesign of my company’s website has 14 personas and 27 rows of information for each.

Information architect

Information architecture on the Web boils down to how your site is laid out and how individual pages are laid out.  In short, information architects are like librarians for the internet.  They deal just with the information, not with the visual presentation.

In the early stages, IA work can involve pencil-and-paper sketches.  Ultimately, IAs produce wireframes that provide the structure for each page (or type of page) that will ultimately be delivered.  I produce wireframes using Axure, an industry-leading wireframing and prototyping tool.  Anyone, whether they have Axure or not, can view these wireframes in their web browsers.

Overall site layout deals with your site’s navigation options, site map, site index, and any layout rules that apply to any page.  It also involves helping your users find the information they are looking for on your site.  Even the smallest sites must have clear ways to find information.  This necessity only scales up with the size of your site.  In e-commerce, if users are confused while they are trying to find a product, they will most likely give up and go to another site.  For that reason, well thought-out navigation menus and search are paramount in building an effective website.

Individual page layout primarily involves presenting your information in a way that is aesthetically pleasing, user-friendly, accessible, and findable.  When I work on HTML prototypes (as I will describe later), I test them for compliance with international accessibility standards so that your site will reach the largest audience possible.  The information on a page needs to not compete inappropriately for your users’ attention.  And the layout of each individual page needs to support easy site maintenance.

If you run multiple websites or microsites, information architects can help you unify your brand.  IA certainly plays a role in determining how users access the information in a large site that is relevant to them.

Relatively few companies employ full-time information architects for their websites.  Many smaller sites rely on part-time consultants who specialize in information architecture.

Interaction designer

Interaction design involves both the form and behavior of your website or app.  It deals with making sure that your site meets the needs of its users.  Thus, it involves researching your current customer base and your targeted new customers.  Personas, as I described earlier, play a central role in interaction design.

Amusement and tourism companies have a great need for triggering their users’ emotions.  Their websites play a very strong role in this.  Sally Corporation uses their website to convey newness, nostalgia, realism, and technological breakthroughs.  Loro Parque uses their backgrounds and a “TICKETS” callout toward the top of each page to sell their park as a ticket to fun.  And NewZealand.com uses clear callouts in each category page to take its visitors on a journey of discovery.

Psychologically, interaction design also involves eliminating distractions so that users can focus on what matters.  Amusement and tourism companies can draw on this by testing their sales processes with users and then streamlining it.

Visual designer

Visual design encompasses many subdisciplines, including advertising, marketing, copywriting, infographics, and visual arts.  These designers can work in both print and online formats.  My visual design work focuses mainly on typography and color schemes.

During the prototyping process, a visual designer who has been given wireframes has to understand which direction to go to produce the best-looking result.  Visual designers work within organizations’ brand guidelines and integrate their skills into designing appealing interfaces and experiences.  Their role strongly influences your users’ perception of your brand.

Prototyper

Prototypes allow me to build early designs of your site without the huge additional cost of development.  Wireframes are an earlier stage of prototyping, and even at that stage I can still start understanding how your site will work with its users.

Prototypes are interactive; users can start seeing how the actual site will work, without the up-front development work.  They can focus horizontally to show your site’s overall structure, vertically to show how one feature of your site (such as a ticket-buying process) would work from start to finish, or a combination of the two.

A low-fidelity prototype, also called a mockup, could involve the paper sketches that I mentioned previously with information architecture.  There, we can start determining how pages interact on a basic level.  Interaction at this level is minimal, and it definitely does not look like a finished product yet.  However, we can use this stage to help guide the future direction of the project.

A medium-fidelity prototype includes more interaction and starts involving more graphics.  Since they are made on a computer, changing them involves more risk – but still not nearly as much risk as making these changes after development.  Changes at this level are still relatively quick, and your actual end users have more confidence testing this kind of prototype since it looks more like an actual website or app to them.

A high-fidelity prototype, in essence, appears as the finished site or app will.  It involves any and all graphics or animation that the site is expected to have, so graphic designers and animators have invested much more time and effort by this stage.  There are two major caveats regarding this stage:

  • Making additional major changes could cost a great deal of time and effort and cause delivery dates to slip.
  • People who see or test a high-fidelity prototype tend to think the site is done already.  In fact, the code that drives prototypes is not yet ready to be used in the real world yet.  A developer or team of developers needs to make sure that the site will still withstand the rigors of everyday use without going down.

I like to use Adobe Dreamweaver for high-fidelity, HTML/CSS prototypes because that starts pushing the project toward development.  From there, I can turn over templates that already emphasize accessibility to web development specialists.

User tester

The user research doesn’t stop when the persona spreadsheet is done.  True user-centered design involves at least several rounds of usability testing throughout a project.  If I did not both consider your business objectives and involve users, I would not be a true UX designer.

When we know what pages should be part of the site, I would arrange one or more card sort tests via Optimal Workshop to help determine how these pages should be categorized.  Their OptimalSort tool automatically aggregates everyone’s responses and tells us which layout(s) make the most sense to your audience.

Layouts of individual pages and interactions between pages would be ready to test with your audience after I have completed the wireframe.  Then more rounds of testing would take place on the prototype, primarily on its interaction and visual design, to ensure that it meets users’ needs.  All of this testing can be done remotely.

Axure has a sharing server which lets me share wireframes and prototypes with your potential users in a password-protected manner – so that only the testers will see your site or app before it is live.  I encourage you to give your testers non-disclosure agreements when they participate in these studies.

User testers typically are compensated.  If not with money, you could give them gift cards, merchandise, or some other reward.  For an amusement park, I’d suggest letting people do a test or two in exchange for their choice of a free first-in-line pass, a free or heavily discounted ticket, or free lunch and dinner.

Where I would hire outside contractors

I would typically hire outside contractors (who you would also approve) early in the project to do the following:

  • Illustration / animation / complicated graphic design – I can edit photos in PhotoShop, Fireworks, and GIMP, and determine color schemes and fonts.
  • Development – I can make prototypes with HTML5 and CSS3.
  • Web hosting – if you need a web host.
  • Content management system (CMS) installation and management

I believe that if I concentrate on UX and hire other people for other specialties, you will get the best value and the best results.  If you have artists or developers in-house, even better; I can work with them!

Also, I do not work on clones of existing sites or apps because I believe that each of my clients deserves a site or app that is uniquely theirs.  Cloning the hard work of others and charging you for it is stealing.  Having said that, design patterns are quite common and accepted in the UX design community, and I do find working with those important to help myself work more efficiently and to give you work products that have been accepted by the design community at large.

My typical task breakdown

So, with all of the above roles in mind, my task breakdown for your project could look like this:

Existing design

  • Review and evaluate functional specs
  • Review and evaluate existing design, if applicable
  • Current production version
  • Design artifacts if available

User research

  • Analyzing your prospective customers
  • Interviewing stakeholders, if possible
  • Developing personas
  • Adapt the personas’ tasks into a list of tasks and feedback questions to use for usability testing (see below)
  • Deliverable/Milestone: Spreadsheet of personas

Wireframe

  • Develop look and feel (new wireframe) using Axure
  • Brainstorming based on the personas
  • Idea selection based on which ideas will best fulfill the specifications and are most practical to implement.
  • Review ideas with client
  • Start on a wireframe.
  • Deliverables/Milestones: Excel spreadsheet listing ideas generated during brainstorming and selected during idea selection.
  • Create the wireframes:
  • App navigation (site-level information architecture)
  • Page-level information architecture
  • Run a remote card-sorting test with testers in your product’s target demographic.
  • Deliverable: Completed wireframes.

Prototype

  • Create higher-fidelity prototype using Axure:
  • Visual design
  • Display font face and sizes
  • Copy font face and sizes
  • Interactions between pages
  • Validation logic and error checking for the prototype, depending on requirements
  • Determine other interface details: Task breakdown depends on what other interface details are needed.

Functional testing of the prototype

Usability testing

  • Have a group of testers complete the tasks in the list of tasks developed earlier. They will answer the feedback questions after the test.
  • Deliverables: User testers’ videos and written reviews.
  • Review user feedback with you to determine what changes we should incorporate into the final deliverable.
  • If any changes are required, incorporate users’ feedback into new versions of the wireframes (if necessary) and prototypes.
  • Iterate on usability testing and incorporating feedback until you are satisfied with the result.
  • Final deliverables: The prototype that has passed usability testing and reviews, along with intermediate versions used for usability testing.

The exact tasks depend on what services I am performing for you, and the durations are different for each project.

Further reading

If you are a beginning UX practitioner or would like to understand how UX works further, here are some books and blogs I’ve been reading on these topics:

Information architecture: Information Architecture for the World Wide Web by Peter Morville and Louis Rosenfeld.

Usability and prototyping: Usability First blog.

Interaction design: The Inmates Are Running the Asylum by Alan Cooper.  The title refers to a conference speech that Alan gave, when he explained that most business executives have left design decisions for software in the hands of programmers instead of designers.

UX project management: A Project Guide to UX Design by Ross Unger and Carolyn Chandler.