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:
- Usability expert
- User researcher
- Information architect
- Interaction designer
- Visual designer
- User tester
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.
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 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 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 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.
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.
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:
- Review and evaluate functional specs
- Review and evaluate existing design, if applicable
- Current production version
- Design artifacts if available
- 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
- 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.
- 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
- Other mobile devices (with Opera Mobile Emulator)
- 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.
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.