Posts

Screenshot showing the redesigned live About page for The Coaster Crew. This section of the page explains the different tiers of membership, which build on each other to include more benefits for individuals, families, and Platinum members.

UX Process in Action: Consistently pushing myself toward a better design

image

Describing the new Coaster Crew website, which launched in September, has been a long story.  I began this project by learning more about the site’s target audience and developing personas, including the primary persona for CoasterCrew.net: Javier, a male in his mid-20s who typically visits parks in the Southeast US once or twice a year and loves big roller coasters and drop towers.  The ideas and design process for each page of the site have been centered on showing people like Javier, who typically aren’t familiar with coaster clubs or coaster enthusiast terminology, two things:

  1. Why should I be in a coaster club?
  2. What can I do in a coaster club – specifically, in The Coaster Crew?

In later articles, I described my design process for several of the pages on the site: the new homepage, the new In the Loop page, the events list, and a page inviting users to participate in the Coaster Crew Network Forums.  Most recently, I explained the Coaster Crew Network bar, which appears in the footer of each page of CoasterCrew.net and (in the future) the fansites to allow users to navigate around the network more easily and be more aware of all of the sites the organization offers.

I skipped over the About page intentionally.  Because it is a complex page with multiple sections and many iterations in its design, I wanted to describe it last.

Read on to see how several sections within About the Coaster Crew came to life.

image

The original sketch envisioned an infographic with a playful design below an attention-getting mission statement in a blockquote.  The infographic was going to tell the Coaster Crew’s story of how they increased from 4 members to more than 1000 in less than 15 years.  The copy for the infographic was already on the old Coaster Crew site’s About page, but it had not been styled to get users’ attention more.

image

The original mission statement in my redesign looked like a block quote printed for a poster.  Here is the original wireframe.  At this point, no decisions had been made about the background image.

image

The second iteration of the prototype included the fonts and the first background image.  I decided to use Intimidator 305 for this picture because it has been the centerpiece of several of Coaster Crew’s biggest events since its opening in 2010.

image

After two rounds of usability testing and feedback from the Coaster Crew staff, I used a more traditional row layout and dropped the novelty fonts. The text was easier to read after adding shadows behind it in development, but user testers still found it too hard to read.

The new background picture, also of Intimidator 305, was taken by a member of the KDFansite staff and donated for this site.

image

To enhance readability and make the mission statement pop more, I put a full-width yellow panel behind the mission statement text.  I also switched the fonts to different-weight fonts in the same typeface to keep a common theme with the fansites’ design, which are currently using different weights of Open Sans.  The About Us header was added for consistency with other pages of the site after we switched the layout back to multi-page.

image

On mobile, the mission statement displays as one long, single column.  The emphases on different phrases within the mission statement becomes more obvious.

image

Here is the original layout for the infographic, which was focused on the pictures.

image

Here is the first round of the infographic with pictures.  I was unhappy with the broadcast icon used here because its background was still visible.  Several of the graphics were full-width and did not scale well for mobile, so I changed them after receiving this feedback in testing.

image

The layout changed slightly after I migrated it to Zurb Foundation 4.3’s responsive grid system in development.

image

Throughout this project, I challenged myself at several junctures to find the part of the design that I liked the least and improve it.  The About page, especially its infographic, easily stood out the most.

I decided to edit every image I had used in the infographic.  I switched to a four-column layout with the last two columns empty to show a train for Great Bear going by.  The focus moved more toward the number of members an events and away from the less important number of states where we have offices.  That is because users are more interested in an organization’s benefit to them (and the organization’s proving it) than in an organization’s structure.  The infographic would lead to a call to action for people to join The Coaster Crew and attend events.

image

Here is the call to action to join Coaster Crew at the bottom of the infographic.

image

The infographic displays like this on a mobile device.

image

The mobile layout’s single column keeps viewers more focused on the statistics that the infographic is presenting.  The state icons display in three columns to save space and keep viewers’ attention on the statistics.

image

The original layout took on a zigzag pattern and provided space for other content such as images in the empty parts of the page.

image

Testers had trouble trying to find the part of the site which talked about membership benefits.  Changing the more creative but less obvious “You may ride again.” header to “Why join?” was the first move toward rectifying this.

image

I redesigned the rest of the About page, including the Rules section, after the second round of usability testing.  After the icons in the Events section received very positive feedback in testing for being able to attract users’ attention, icons were added in the Forums and Membership Benefits sections.  I added the prices in the left column based on tester feedback.

image

Some usability practitioners speculate that on mobile devices, the first page has replaced “above the fold” with regard to page content.  Mobile users are more likely to scroll up and down pages than to tap links to other pages.  So I added a quick blurb of copy about the events to the Membership Benefits header.

image

Per a tester’s recommendation, I added dividers to distinguish between the levels of memberships.

image

The Coaster Crew Network row moved below the Membership Benefits in the final layout.  Users were generally more able to comprehend the membership benefits and network when each was presented across one full row.  They are more able to think of this as one unit rather than having their eyes bounce back and forth between columns with unrelated information.

You can see the About page live on the Coaster Crew site.  You may also view my design stories for the other pages on this site here: Intro, Personas, Homepage, In the Loop Podcast, Events, Forums, Signup, and Coaster Crew Network Bar.

I am a user experience designer specializing in the amusement industry. I work for amusement parks, ride companies, coaster clubs, and any other company or organization affiliated with amusement. If you would like to hire me, please contact me through my website or tweet at @AmusementUX. You can also like my company’s Facebook page or follow me on Twitter.

We redesigned a membership signup form for The Coaster Crew which used a more natural-language approach. This screenshot shows a step of the new membership signup process as shown on a beta site.

UX Process in Action: Designing a new signup flow for a roller coaster club

image

The new Coaster Crew website launched in September. I’ve been writing articles about our target audience and how each page on the site came to be (Homepage, In the Loop, Events, and Forums).

Today, I’ll show you something that isn’t on the live site. I designed a new membership signup form, which was available in the prototypes that we tested with users.

image

My original idea was to allow people to fill out their own membership badge.  This would have been displayed next to completed membership badges.

image

Fresh off of conducting a round of surveys for this project using AYTM, I was used to pretty robust tools.  So my design for this form had a good deal of skip logic, custom buttons, and a full order review.  I tried adding input fields within labels as the third slide depicts, but our plugin did not support that.  To allow a quicker checkout process (and probably boost conversions), I made it possible for users to bypass the Coaster Crew merch and charity donation steps.

image

I added some space for the badge background and some copy in the wireframe.  The low-fidelity prototype already had a full set of input fields and logic for navigating between the pages of the form.

image

For internationalization reasons, I used “First/Given Name” and “Last Name / Surname” language.

In this form design, I really wanted to highlight natural language. Interacting with one of these sites should not feel like interacting with a computer. I recently saw an insurance website whose search form is just “I drive a (car’s year, make, and model), and I live in (ZIP code).” That language makes a website feel human. Websites’ forms are often terse, and interacting with them feels like interacting directly with a machine.

image

It is likely that we would have needed a premium e-commerce form to handle the skip logic and purchasing logic here, even though the choices are quite simple for users.

image

This screen would have detected whether users had selected an option in the beginning that would have not given them the best possible deal on their membership.  Another way to do this would have been to ask for the user’s and their guests’ information and recommended a membership type based on what they had entered.  This may have required disclosing the price to be a later step and felt like bait and switch to people who had seen a low membership price advertised on the pages that gave them links into this checkout process.

image

This order review slide cannot be developed with the plugins available to us at this time.  This is how it was intended to work.

There were actually 12 steps in this signup process, including all guest information pages.  I have omitted the rest from this post for brevity, but for the near future I will make the wireframe and prototype available online.  Submitting that form does not actually submit any data, so feel free to try it out.

A few screenshots of the prototype are available below.

image

The overall page used some copy which did more to highlight the benefits of membership in our club.

image

The Family memberships step allows for a quick checkout but also has options for extras.  Most of our test users actually did buy extra merch and donate to the ALS Association.  (The form they tested was not actually submitting anything.  I had them do what they would have done normally.)

image

If users opted to go to this screen, they could add Coaster Crew merchandise to their membership order. Some users in early rounds of testing had not remembered that some merchandise was included with their platinum memberships, so I added that copy here.

image

The charity slide had a quick writeup explaining that the ALS Association raises money for research related to ALS (Lou Gehrig’s disease).  I recently launched a site for a non-profit, and I know that people want to know more about the charities they are giving to without being asked to give out of guilt.

image

The payment page would have included the order total, calculated from previous slides’ data.  Users really needed to know this, and Coaster Crew staff required it, but we couldn’t find a free plugin that would meet our needs.

image

This confirmation page assumed that Coaster Crew staff needed to process PayPal payments manually, but the staff wanted that to be an automatic process.  That is the technical reason why we needed to be able to calculate the payment amount.

The prototype’s form had 12 pages, like the wireframe’s.  The prototype will still be available online for the near future.

image

Our beta site, which is still online as of this writing, had the signup form implemented with the closest plugin we could find to what we needed.  Here is how it looked in the desktop layout.  The benefits of each membership type were reprinted here so that this page could serve as a landing page.  Commonly, The Coaster Crew shares out the link to their membership page directly rather than sending out a link to their homepage or another page.

image

Because our plugin did not have skip logic, I combined all of the guest signup information onto one longer page and made all fields optional so that users signing up for individual memberships could skip it with one click.

image

This confirmation page shows up when users submit their membership information.

image image

Here is an example of how the form displayed on mobile.  I wrapped our form plugin instance within a Foundation framework (4.3) column class so that it would be responsive.

So due to technical limitations, the new membership signup form didn’t go live.  The live site shows the first page of the signup form but with a button at the bottom to take users into the old signup process on a separate server.

I had basic assumptions at the outset about WordPress plugins for forms. We assumed we could find a form plugin that was:

  1. Multi-page,
  2. Responsive to any device,
  3. Able to calculate prices based on what users enter in previous steps, and
  4. Free.

The closest we could get while I was working on this project was BreezingForms, which lets you build multi-page forms for free.  This plugin was in use on the beta site.  Since we were using this form for e-commerce, being able to carry prices forward was very important.  Our site’s new store runs on WooCommerce, but the free version of that doesn’t do the calculations that we need for memberships and event signups.

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.

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.

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.