UXWeb Design
A Guide to UX Research and Design
The key to business success is to put the customer at the heart of everything you do. That’s why having a good understanding of the UX design process is essential.
Contents
- Research
- Interviews
- Surveys
- User data
- Analyse
- User personas
- User journey maps
- Design
- Card sorting
- Wireframe
- Sitemap
- User flow
- Mockup
- Prototype
- Launch
- User testing
- Beta testing
- Analyse
- A/B testing
- Heatmaps
- Want to know more about the UX design process?
Unless you know the process of discovering who your customers are and what they need, you can’t design an effective interface to meet their requirements.
That’s not the only benefit, of course. The UX design process also gives your design team numerous opportunities to tweak the design based on feedback and data that will improve the overall user journey.
So without further ado, let’s take a deep dive into the different stages of the design process to see the steps you should take to create a satisfying user experience. Curious what a heatmap is? What exactly is card sorting? (And no, it’s not something that will get you banned from every casino in Vegas.) Let’s find out.
Research
Unless you know your users, you don’t know your end goal. To help you identify your typical user and therefore the pathway for your design project, research is your best friend.
Interviews
Nothing beats a good old-fashioned chat. Whether it’s one-to-one or in a small group, going face to face (or Zoom to Zoom) with your target audience is the best way to get unfiltered and direct feedback. To get the most from interviews, prepare questions beforehand that will help you define your user personas, their current pain points, and their journey maps for your intended solution.
Surveys
If you don’t have the time and resources to arrange interviews, a questionnaire can be an effective research tool for gathering user data. Unlike interviews where physical space or video conferencing technology may limit numbers, surveys can be sent to a wider audience. As it’s a Q&A rather than a conversation, take care not to pose leading questions that could influence the responses.
User data
This is a great option if your website, app, or product already exists in some form. In a nutshell, this is where you observe someone using your product.
So, for example, if you have an app that sells pizzas, you could ask your user to order a large pepperoni with extra pepperoni and a side order of garlic bread with cheese…oh, and some potato wedges (can you tell that we’re hungry?), then observe them as they use your app to complete the task, before asking them how easy they found the process or if there is anything that could make the task easier to complete.
Analyse
Whereas the research stage involves gathering data, the next stage is to analyse the data This can be done in the following ways:
User personas
Your data can be moulded into user personas, which are essentially identikit descriptions of your target audience. By collating information such as age, gender, behaviours, spending patterns, pain points, and needs, you can create a composite description of your ideal (or typical) user or users.
Having concrete data about your perfect user gives you a solid foundation on which to plan the rest of the UX Design process, based on fact rather than gut instinct.
User journey maps
Your data can also provide the breadcrumbs (or pizza crumbs) that make up a typical interaction between a user and your product. You can use these nuggets of information to formulate a user journey map from the user’s perspective. This big picture overview can give you an understanding of (and empathy with) the steps that your user will take whilst using your product.
Design
So, you’ve done your research, then analysed your data, and now it’s time to get building. When it comes to building out your design, there are a few options available. Let’s have a look at some of the most popular choices.
Card sorting
This is where you list everything that you plan to include in your product architecture on individual cards (one piece of info per card). You then ask potential users of your product to group together the cards into a structure that feels most logical to them. After all, they’re the ones who will (hopefully) be using it post-launch. This process of card sorting is an inexpensive and effective technique for validating that your UX design meets their needs.
Wireframe
A wireframe is your product’s skeleton. It allows you to see what information will be included and how it all fits together (e.g. navigation and interface design) without having to spend the time fleshing it out. Creating this low-fidelity version of your end product helps everyone involved get a visual overview of the structure. It’s also far cheaper to make adjustments at this stage than later in the UX design process.
Sitemap
A sitemap gives you a high-level view of how your product’s information is organised. Like a floorplan for a house, it presents a visual hierarchical guide to how different information is linked and prioritised.
User flow
A user flow is a diagram that details every step a user takes when using your product. There won’t just be one user flow but many to illustrate the different ways in which a user could start interacting with your product through to the action they take to end their interaction. Having a visual overview of this process empowers design teams to tweak the site structure to optimise conversion rates.
Mockup
A mockup is a mid to high-fidelity visualisation of how the product is going to look. Like a wireframe, it’s not clickable, which allows you to focus on the design. That’s why mockups are often used to tweak and make final decisions about your product’s graphical elements, such as typography and colour schemes.
Prototype
A prototype is the first iteration of your final product…but it’s not your final product. Its purpose is to give you a first impression of the final product. It allows you (and your test users) to test drive how the final product will look and work. As such, it’s the perfect opportunity to identify anything that needs changing or fixing before launch. For more fascinating insights (if we say so ourselves) about prototypes check out our guide to low-fidelity vs. high-fidelity prototypes.
Launch
By this stage of the process, your product is good to go. Yet that doesn’t mean the UX design process is complete. Oh no. The following methods will help ensure your launch goes off with a bang rather than a fizzle.
User testing
Like the user data step in the research stage, user testing involves observing users as they test your product. But you probably guessed that from the name. For best results, one-to-one user observations are preferable as they give you the chance to discover the thought processes behind the user behaviour. Feedback gathered at this point can be used to inform later releases of your product.
Beta testing
Rather than opting for an all-guns-blazing launch, you may prefer to start small and beta test your product on a small group of users. The advantage of this approach is that it allows you to discover and address any potential issues with your live product before you give the whole world access.
Analyse
Post-launch it’s time to get your analysis hat on again. It’s good practice to look back over the complete UX design process and evaluate what went well and what could be improved with both the process and your product. What you discover at this stage will shape your approach towards the UX design process in the future.
Now that your product is ‘in the wild’ there are still options available to you to test the effectiveness of the product design even though it is live. For example…
A/B testing
This is the process of testing two slightly different versions of your product to see which one your users prefer. For a website, this could be two landing pages that are identical in every way but one. For example, they might have different call-to-actions. A/B testing lets you get real-time feedback on which option converts best.
Heatmaps
If you’re keen to know which areas of your website are most popular with users, you need heatmaps. The name refers to the colour scheme used to highlight the areas that generate the most activity.
- Click heatmaps give you a visual map of where visitors are clicking
- Scroll heatmaps show you how far visitors scroll through webpages
- Mouse movement heatmaps highlight the areas over which users hover their mouse
Whichever heatmap you use, you will gain a stronger understanding of which areas of your website you should focus on – either to optimise the hot areas or tweak cold areas to generate more heat.
Want to know more about the UX design process?
We’d be happy to help. First, there’s our guide to how good UX design will improve your google ranking. Plus, there’s our summary of the benefits of UX design for your business. Or, if you’d prefer to chat about your upcoming UX plans, please get in touch.