You know user experience is vital for your website’s success. Great UX means happy customers and more conversions, whilst poor UX will send them to your competition. But at a practical level, how exactly do you implement UX design when creating your website?
Enter the UX design process.
The UX design process is a step-by-step approach to creating a website or app which puts your users at the heart of your design decisions. That means you can optimise your website’s UX throughout its creation.
But, the process can change depending on the kind of project you’re working on and your level of experience. In fact, everyone has a different take on what UX design process steps are needed for your website to succeed. How do you find out which steps really matter?
In this guide, I’ll give you the 4 essential steps for any project, whether you’re an industry professional, a design student or a business looking to improve your website. I’ll also give you practical tips on how to carry out each step, so you can create a website that’s optimised for customers from start to finish.
Before you start…
UX design is much more effective if you approach it with the right mindset. Before you dive into the UX design process, there’s a couple of principles you’ll want to keep in mind throughout your website’s creation:
Always put the user first
OK, this sounds obvious. But it’s surprisingly easy to get side-tracked when you’re immersed in the details of your design. Keeping users central to all aspects of your web design means a fundamental shift in a business’s perspective, from what the business wants to tell its users, to what the user wants to learn and do.
Business goals are important, but it’s a good idea to implement them in the context of helping the user achieve theirs. For example, to meet a goal of increasing engagement, focus on making info the user wants to know easy to access, visually appealing and interesting to read.
Communicate and collaborate
When it comes to UX design, think all hands on deck. Your website’s creation will involve different areas of expertise, so whether you’ve a team of 2 or 200 it’s good practice to keep everyone on the same page and encourage feedback. This means you’ll stay focussed on a common goal for a consistent design. Plus, you’ll benefit from more ideas.
Similarly, there’s no harm collaborating with a specialist outside your team if you need to. The benefit of getting specialist help – apart from the level of expertise – is fresh eyes. Specialist designers and developers provide a new perspective and spot issues that you don’t (because you’re too close to the project).
Test, refine, and test again
Good UX design relies on iteration – testing and improving your design several times at each stage to perfect it.
While some designers choose to test at the end of the process, it’s best practice to start testing as early as possible. Problems spotted early are easier to fix. Budget and time constraints mean you can’t give every version of your design to users, but always try to seek feedback where you can.
The 4 key stages of a UX design process
Next up, on to the 4 stages:
- Research – Who are your users and what do they want?
- Analysis – Identify your users’ key goals and generate design ideas to meet them
- Design and usability testing – Work out the structure and layout, then refine the visuals to finish your design, testing as you go
- Evaluate – How is the new site performing? Iron out any glitches
Research
Before you start your design, you need to learn about your target users and what motivates them to visit your site. It’s a good idea to check out your competition too, so you can identify the ways they’ve met user’s needs.
User research will dispel any assumptions you’ve made about your customers and help you see where your user’s needs are different from your own. Ever been on an app and got confused by an array of options you don’t even need? That’s down to poor user research. The more you know about what your users want, the more you’re able to give it to them.
How to do it:
Customer statistics
Look at customer data from mailing lists and Google Analytics to find out your typical customers’ demographics such as age, gender and income. User surveys are also helpful at this stage to uncover the most common goals and frustrations.
Interviews and focus groups
Qualitative research, like interviews and focus groups, will help you really get to know your users. You can learn about their attitudes, beliefs, motives, and expectations they’ll have when visiting your website. If you have time and budget constraints, a key benefit of interviews is they can be held over the phone or via Skype.
Examine current user behaviour
If you’re redesigning your website, examine user behaviour via your existing site’s web analytics to identify what needs to change. Are users trying to access your site on mobile and experiencing layout issues? Are they dropping out at a certain page before conversion? Now’s the time to find out.
Competitor research
Finally, it’s a good idea to check out your competition. What are they offering? How can you offer something that better meets your user’s needs? Visiting competitors’ sites is also a great way to step into your user’s shoes and experience browsing from their perspective.
Analysis
Here’s where you review the research you’ve collected to pinpoint the traits of your typical users and their key goals when using your site. You’ll use these goals to generate ideas for your design.
How to do it:
User personas
From the data you’ve gathered, create 3-5 user personas: fictitious but realistic representations of your typical users. These will help you empathise with your users as you design your site.
To create a persona, look at your demographic data and review your interviews for the most frequently expressed goals and expectations. Give each persona a name, age, occupation and background. Include what goal they want to achieve from visiting your site, and how tech-savvy they are.
Scenario maps
Next, create a scenario map for each persona: a timeline of the actions they will take to meet their goal. There’s lots of ways you can do this; you can use post-it notes, flowcharts or even sketch out images to create a storyboard. The basic idea is to break down into stages how your users will interact with your site to get what they want.
Under each action, jot down ideas for making the action easier. These could include potential frustration points and how to change them, layout considerations and helpful features.
For example, if a persona for a florist’s website has the goal of buying flowers for his mother’s birthday, his first actions would be to navigate to the site then look for birthday themed bouquets. Below these the team might note the persona would be pleased to see a ‘Birthdays’ section clearly accessible from the homepage, engage with the site and continue to the next action.
Keep in mind customers expect to follow certain processes when using your website, based on previous experiences with other sites. So there’s nothing wrong with using familiar features provided they’re the best fit for your personas.
Design and usability testing
Now you’ve established your users’ actions and identified key features, you’re ready to design your website.
Start with your website’s basic structure: how the content on each page is organised, and how the pages link together so they’re intuitive to navigate.
Once you’ve perfected this, you can move on to developing an interactive prototype. Here’s where you conduct a series of usability tests to refine the performance of the design and establish the website’s visual elements.
How to do it:
Wireframes
Wireframes are basic screenshots of webpages which display how content on each page will be arranged. The screens connect to each other to describe your website’s structure. You can check the structure is efficient by plotting the steps your users will take to meet their goals. Ideally, you want users to meet their goals in as few steps as possible.
It can be handy to start your wireframes as rough hand-drawn sketches, then progress to creating them electronically. You’ll want to create several versions of your wireframes, making improvements to each one after feedback and testing.
To test each version, give participants a goal to achieve and watch them interact with your wireframe. Ask your participants to think out loud as they do this, so you can learn their expectations and spot any areas they find confusing.
Prototyping
When you’ve perfected your wireframe, you’re ready to evolve the design into a prototype. This is an interactive model that mimics the experience of using the actual site.
Many prototyping tools allow you to customise transitions, mobile gestures and visual elements, so here’s where you can focus on the visual side of your design. Visuals are crucial for setting the right tone and meeting users’ expectations. Visual elements are also important to help guide users around your site, for example using a contrasting colour to draw attention to a CTA button.
Usability testing tools
Interactive prototypes look and behave like a real website, but they’re much quicker (and cheaper) to create and modify. This is the point where you can really put your design through its paces with usability tests.
Give your participants goals to complete and measure how easily they can interact with your prototype. As well as observing users and inviting feedback, it’s a good idea to get more insights via usability testing tools.
Popular tools include heatmaps which show areas of a page that receive the most clicks, so you can see which features are getting the most attention and which are redundant. Session recordings of individuals interacting with your prototype are another way to analyse the effectiveness of your design. These give you an insight into what elements users are drawn to first and highlight misdirection issues such as an image that’s mistaken for a link.
After each test, review your results and modify your prototype for any required improvements. Then, test again to check the improvements have been effective. It’s best practice to do several rounds of usability testing, refining your prototype at each stage.
Evaluate
Once your design is finalised, you’re ready to build the real thing. Whether you’re handing the design to developers or using a platform like WordPress, schedule some time to check the site’s functions and features work as expected before launch.
Even a well-designed website will need some tweaking after it’s gone live. Is there an icon that needs to be more prominent? Is there a feature that’s more popular than you expected and could be extended to other areas? Here’s where you fine-tune your site to give it that final polish. That means – you guessed it – testing.
How to do it:
Usability testing
Before you launch your site, it’s a good idea to repeat the same tests you conducted at the prototyping stage. Heatmaps and session recordings will confirm the site is performing true to design and bring to light any coding issues that are impacting your site’s efficiency.
Once your website’s gone live, you’ve now got the chance to use your testing tools to track how customers are interacting with your site ‘in the wild’. Here’s where you can get beyond the data from sample users to spot and fix any unanticipated issues your customers encounter while browsing.
Website analytics
After your new site’s received sufficient traffic, you can check your quantitative metrics like conversion funnels to pick up on any issues that might be causing some users to drop out. Web analytics can also help you keep track of your users’ demographics. Has your improved website broadened your customer base? Find out, and you can adjust your marketing to appeal to your new audience.
User feedback surveys
Just as you did at the start of your design process, using surveys will give you insights into how your customers feel when interacting with the site. Comparing your data with the research you initially collected is a good way to assess improvements.
Ongoing evaluation
Because your business and your user’s needs will evolve, your website should, too. It’s a good idea to evaluate your site periodically, check new features are helping users and make any tweaks as needed.
And there you have the complete UX design process for creating a user-focussed website. Research, analysis, design and testing, and evaluate. Follow these steps to create a website that will appeal to your customers, boost engagement and conversions.
What do you think of the process? If you’ve found a UX method that works for you, let us know. And if you found this article helpful, feel free to share it.