The UX Design Process
May 17th, 2010
I recently had the opportunity to attend a UX workshop that was part of . The workshop speaker was and he outlined an excellent UX design process. In this post, I’ll outline the process, combined with a few points from my own system for designing a website.
The Web Design Process
At the start of designing a new website, there are a number of risk factors that we need to consider. Many times, designers and clients alike can fall victim to not thinking a design through. Why does this happen? For any number of reasons like deadlines to the excitement of jumping into a new project. To get the best end product for your client, it’s always an excellent idea to hash out the scope of the project, identify any problems, and evaluate your user before you start designing anything. How do we do this? By using a UX design process.
Step 1 – Define The Project
Defining a project can be accomplished by asking your client the following questions:
What type of website will this be? Marketing? Branding? Web App?
What are the main objectives of the website? Sales? Marketing? Education?
What’s the content? This one is a bit more a grey area. Someone might be a competent writer, but they might not know anything about writing for the web. Generally what I find works best is to have the client submit their content in point form (a rough draft will work too). From that draft, read it through and suggest some edits to your client that better gear the copy for the web. If you’re interested in learning more about writing for the web, I’d suggest reading Rockable Press’ book or ebook.
At this point, you should also create a content plan, outlining who is responsible for what content. In some cases, you may have multiple people submitting content for a single website. You should also include deadlines for when the content is due.
Are there any reference materials for the design? This could include things like reference websites, colors, styles, and mood-boards.
Define a style guide. This is the last step in this section. It includes designing a style guide for the site that includes stuff like: types of page titles, style of copy, certain keywords to focus on for search, etc…
Part 2 – User Research
User research is the defining of your audience and market.
Who is the user group(s)? Web Designers? Bankers? Doctors? IT Professionals?
Define Personas. In many cases, you may have more than one user group. We use personas to create a profile for each user type the website will have.
Part 3 – Features
In the third step, you’ll define any special features the website requires.
What are the special features the website will have? Web Store? Video Player?
Prioritize your features. Which features are the biggest priority? Which ones are most important?
Part 4 – Wireframing
The next step in the process is to create a wireframe for the project. Wireframing is a rough outline of each webpage and the content on it. There are a number of different ways you can create a wireframe for a website. Some designers prefer to do it on paper, personally I like to do mine using HTML, while others prefer to user a tool like .
Define your task flows or paths. Task flows are paths that the user will follow to complete a desired action. An example of this would be the checkout process in a web store, or signing up for a new account on a web app.
Create a sitemap.
A sitemap is a wireframe of all the website pages. A tool that I find really useful for this is the web app.
Part 5 – Design Comps
In the design comp phase, we start jumping into Photoshop and creating some rough comps for the website’s user interface. Once you have designed your comps, you should provide them to your client for feedback. Taking your client’s feedback, make any changes to the UI that they would like.
Create style guide documentation. At this point it’s always a good idea to create a style guide for the website. Using a style guide will help you keep the interface consistent across all pages. Therefore, optimizing the user experience.
Your style guide should include a list of all the styles that have been defined for the website. This can include a list of css styles, and a User Interface Design Kit. For an example of a UI kit, check out Freshbooks’ .
Step 6 – Coding
At this point, you are ready to begin coding your website. I’m not going to get into a long explanation for that as this post is supposed to be about user experience! Just follow your style guide and all should be fine.
Print This Post
Follow me