Posts

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.

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.

Partial results of a usability evaluation for the Coaster Crew fansites, prior to redesign work.

Our Process: Usability consulting

My earlier article about my user experience design process gave definitions of some of the subdisciplines within UX, such as information architecture, interaction design, and visual design.  Usability consulting touches upon all three from a more academic point of view.

I’ve evaluated website usability for over 50 clients, including repeat business regarding different features of their sites for several of them.  In usability consulting, I take a deep-dive approach tailored to each client, to provide more specific feedback.

Usability consultants take some criticism for being critical about every little thing.  While it’s important to identify all of the places where your site can be improved so that your in-house designers (or I) can fix them, I also want to identify areas where I think your site performs well.  As a software developer, I was part of several code reviews of large features that went on for hours and given me a whole slew of things to change, with no positive feedback.  I don’t want to do that to you.

A list of usability consulting recommendations from me could involve very specific recommendations, such as “your checkout button needs to be __% bigger” or “it takes too long to find this button to click on it”.  It could also be much more general feedback like “change the background so that the text is easier to read”.

I would begin this sort of project by researching your target audience and developing personas – like the personas list I create for a new design project.  If you already have personas, I would make sure they address all areas that personas need to address (at minimum: demographics, role, main points, goals, frustrations, and some biographical details).

Then, I would ask you what areas you want me to target most.  I want you to get the best value for your budget in this study, while also making sure that your site gets the best results it can.

From there, I could draft a list of tasks (and/or use a list from you) to go through in using your site.  I’d go through them and also recommend usability tests with a group of customers that represents an accurate cross-section of your actual and/or target audience.  The goal in this is to find out what’s working in your site and what isn’t – for your customers.

At the same time, I would go through your site in much finer detail with a lengthy evaluation checklist.  In this step, I would identify underlying problems that testers might not be able to articulate within the few minutes that they would normally spend on your site – but things that they would still notice nonetheless.  This checklist can give your web developer or development team a very specific list of what they will need to change (or what they need to pay attention to when they receive specifications for a redesign).

Ultimately, I would also give you sketches or wireframes for a suggested redesign.  You could work from this directly, hire me for follow-on work to complete the redesign, or send it to another contractor for him or her to flesh out further.

A word on developers and “the user”

If you hire anyone for a redesign, hire a designer or design company that will employ a user-centered design process – and find out from them what that process is before you hire.  Make sure that they really practice it and don’t treat it like a buzzword to cover up a developer-centered design process.  Look for them to use regular cycles of user testing, rely on other people in your company and audience (rather than starting the project and saying, “Thanks, I’ll get back to you in a few months when the design is done”), design for every possible condition, and take your company’s goals seriously in their designs.  If they don’t do these things, among others, they are not user experience designers.

Many developers talk about “the user” as though they know who this mythical “user” is.  However, they have no contact with, and little understanding of, the people who will actually use your site.  Thus, they may have good intentions but still create a site that doesn’t meet your users’ needs and does cost you sales and customers.  One development book, 97 Things Every Programmer Should Know, has a chapter called “You Are Not The User” – because many developers don’t know that experientially.

A sample task breakdown

Task breakdowns need to be customized to your site or app.  Here is one that I proposed for evaluating the usability of a purchasing path.

Customer Analysis & Personas:

  • Work with you to analyze your site’s customers and target audience.
  • Develop personas with the following, based on your user base:
    • Demographics
    • Scenarios
    • Goals
    • Frustrations
    • Brief biographical details
  • Adapt the personas’ list of tasks into a list of tasks and feedback questions for usability testing (see below).
  • Milestone/Deliverable: Personas spreadsheet.

Usability evaluation based on your personas:

Usability testing

  • Perform a cognitive walkthrough of the personas’ common tasks
  • Recruit usability testers representing each persona category (your budget and schedule determine the group size)
  • Usability testing with recruited testers, using the task list above.
  • Conduct a usability review based on your site and user test feedback
  • Milestone/Deliverable: Results of cognitive walkthrough and summary of usability test findings

Accessibility testing

  • Run an accessibility checker for your site overall or for the part of the site in question
  • Perform a manual accessibility evaluation using Web Content Accessibility Group (WCAG) 2.0 guidelines
  • Milestone/Deliverable: Recommendations for allowing you to appeal to a broader base of users

Purchasing path evaluation

  • Evaluate your site’s process to help users find the products that they want to buy and make recommendations for helping you get more people to add items to their carts
  • Evaluate your checkout process to help you move your users forward in the checkout process and get them to check out
  • Preliminary redesign (mockup) for new purchasing path:
  • Develop quick mockups of your purchasing path.  (These would not be detailed, but could serve as a starting point for follow-on redesign work.)
  • Milestone/Deliverable: New purchasing path mockup images.

Next steps

Our final deliverables would include our usability recommendations and reviews. If a redesign is desired based on the above recommendations, we would then write a proposal for that redesign work.

Further reading

This is a partial list of books that have taught me about usability for applications and the internet.

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.