A great UX design delivers a pleasurable experience for users while solving their problems and fulfilling their needs. The output is clear, but how about the process itself? What are the stages of user experience design, where it starts, where it ends (spoiler: it never ends), and what are the deliverables along the way? Let’s break down the design process and have a look at how every stage brings your business closer to more satisfied, loyal customers.
What is the user experience?
The term “user experience” or “UX” was invented by Apple’s former vice president Donald Norman to describe how a user feels when interacting with a specific product. Encompassing tactile experience, senses, and emotions, a great user experience boosts customer confidence by making them feel special and valued OR – if the company doesn’t care about the user experience – frustrated and angry.
The goal of UX design is to improve accessibility, usability, and pleasure of interaction based on continual user feedback. All products benefit from UX design. Even when you use an out-of-the-box design solution such as the Boxmode free website builder, you can (and should) make changes to design to satisfy your users.
To ensure unparalleled customer satisfaction and make it an inherent component of your success, the user experience must be a brand’s vision rather than the task of a single designer or a team.
UX design process
The best approach to user experience design is to keep a user in focus from the very moment a product or a service is conceived, and then refocus several times along the way.
The user experience process normally consists of these eight stages:
- Problem definition (identifying your user’s needs and pains)
- User research (learning about your target audience)
- Market analysis (competitor and trend research)
- Ideation (generating design ideas)
- Prototyping (drawing sketches and wireframes)
- Designing (functionality and experience implementation)
- Launch (connecting design specs to UI)
- Testing (evaluations, usability tests, identifying improvements)
There is no uniform UX design process that would fit all brands and products. These stages are rather a recommended route, but you are free to deviate from it to find what works best for your brand.
The UX design process is also an iterative one: it can consist of uncountable iterations with consecutive evaluations. You keep polishing and improving until you achieve a pure, transparent, intuitive, engaging, flexible, and user-focused design that makes your brand stand out.
Now, let’s take a closer look at the UX design process, highlighting the stakeholders, activities, tools, and deliverables on every stage.
1. Problem definition
You can’t cut down a tree with a dull ax. Before you can offer a solution, you need to have a clear understanding of what exactly you are going to solve. Identify your user’s pains and needs.
Even if you think you already know the problem, it is worth double-checking it with the stakeholders, Product Manager, CEO, and, of course, your actual users.
2. User research
After realizing your user’s needs, you may feel ready to start developing a solution. We bet you have even already spied on your competitors and snatched some design ideas. But for now, leave them where they are. They can lead you into a trap of someone else’s “good” solutions. Yours can be better. So, instead, study your users first.
At this stage, the design team (ideally along with the Business Manager and Product Manager) needs to go over the users’ needs and expectations with a fine-tooth comb. Study them in their actual environment, talk to them to clarify the requirements, and collect ideas.
User research methods:
Interview (contextual or individual, physical or online): Ask your audience what they are struggling with and study their verbal/nonverbal reactions.
Focus group: Discuss experiences (expectations, frustrations, etc.) using the product in a group of up to 5 target users. Tools: FocusGroupIt.
Survey: Find out your user’s opinions and attitudes using questionnaires. Tools: Google Surveys, Wufoo, TypeForm, etc.
Usability test: Observe your users as they use your product. Notice their reaction in the process and ask about the experience afterward. Tools: Optimizely for A/B testing, web analytics tools featuring heatmaps, scroll maps, etc.
User-focused data will help you develop these materials:
User personas
Create at least three fictional characters representing your typical users (your key audience segments). Define their goals, frustrations, motivations, behaviors, spending habits, pain points, as well as some demographics, such as age, gender, etc. Having these personas in mind will help a designer understand users and tailor the product to their needs.
Storyboards
This technique borrowed from cinematograph helps visualize how and under what circumstances a user interacts with a product. The idea is to understand how the environment can influence this interaction.
Customer journey map
Also known as the experience map, this diagram illustrates the processes (steps) your user goes through to attain their goals with your product’s help. It allows you to understand what users do along this way, what they think, and how they feel. See where the improvements are needed and eliminate all possible stumbling blocks.
3. Market analysis
Only at this point can you look at the solutions already available on the market, analyze how your competitors meet similar needs and what are the latest UX/UI trends and design principles out there. Now that you perfectly know your users and their pains, you can learn from your competition with a cool head and develop your own user experience guidelines. At this stage, a design team must already have a bunch of materials to work with, so they can start working on the design itself.
4. Ideation
At this early design stage, let as many people from your company as possible join in. Involve user interface designers, developers, product managers, QA, and even VPs in generating ideas to make sure all stakeholders understand the general direction of UX implementation and avoid misunderstandings down the way.
Brainstorming
Tell your team members about your user personas and share user insights collected. Then ask them to reflect on how to solve the issue and write down all possible ideas, even the craziest ones. Sometimes the best solutions come from ideas that sounded wild at first. Afterward, the design team will discuss the ideas, sift through them, and shortlist the best ones.
User flow diagram
This technique is similar to creating a customer journey map during the user research stage, but now the focus is on what happens with the product. Since all users are different, and not all of them know what they are looking for, you need to develop several scenario maps for each user story.
Identify what steps users can take on their own and where your website/app could help them achieve their goals. The idea is to put these different scenario maps together and find the simplest, most efficient way to achieve the goal for all types of users.
5. Prototyping
Now you’ve reached the stage where you might feel like you are stuck. It’s because prototyping isn’t something you just do and move on to the next stage. It is a long process that calls for numerous iterations and consists of multiple steps, such as:
- drafting initial sketches, mockups, and wireframes,
- checking them with the stakeholders to get their feedback,
- testing and evaluating, and
- redrawing and retesting them (as many times as needed to create an unmatched experience).
Usually, the deliverables on this stage include:
Sitemaps
A sitemap defines the site’s hierarchy and navigation and helps prevent a user from getting lost on a website. At this stage, you decide how you will distribute content across your pages (or screens for apps) and interconnect them based on the user flow (or scenario maps) you created at the ideation stage. If you create UX design for an app, you also need to draft screen flows to visualize the structure.
Wireframes
Now that you have a sitemap, you can decide how your content will be organized on the pages/screens by drafting wireframes, which are low-fidelity prototypes of what your product will look like in the future. A wireframe is a rough representation of what will be displayed on each page/screen. Since they shouldn’t be very accurate (just an outline with placeholders for future images, videos, bars, etc.), you can hand-draw them on a piece of paper.
High-fidelity prototypes
These are improved wireframes with typographic and visual design details that look like a real page (or rather a screenshot) and are easy to share with stakeholders to get their feedback. You produce these prototypes with the actual screen sizes in mind (desktop, mobile, and tablet).
Interactive prototypes
To help the stakeholders better evaluate your design and even run some early user tests, you can create interactive prototypes by using commercial prototyping software. Such prototypes work like real products and can help you test the user flow process and interactivity before the product is ready, and no single line of code needs to be written.
The best prototyping tools to test your designs are Sketch, InVision, Framer, Marvel, Adobe XD, and Origami Studio.
6. Designing
Now the baton is passed to UI guys. The idea here is to find the right balance between beauty and usability and not blow the pre-design UX insights you accumulated during the previous five stages.
At this stage, you work on the final graphics, turning the mockups into fantastic design images, icons, typography, and detailed specs (colors, styles, theme, and guidelines).
Zeplin is a great tool that makes the transition of all design specs from designers to developers comfortable. Plus, it makes it easier for developers to follow the design guidelines for the project.
7. Launch
Now it’s time for the development team to hit the stage. During the “backstage” phase, they were building back-end functionality, waiting for designers to come up with the ideas they can further implement in a full-fledged UI.
But now, it’s the designers who can sit back and wait until the tech people do their job, hoping that their UX design vision will be properly brought to reality.
This shows the importance of collaboration between designers and developers from the very early stages to make sure both are on the same page in terms of UX. Designers should monitor the launch phase and request changes whenever UI doesn’t meet the UX standards.
8. Testing
Now it’s time to evaluate the end product. Is it easy to use for your target user? Does it solve the user’s problems? Is it possible to make it better? Does it deliver the experience the user is expecting?
To help answer these and many other fundamental questions, you can use the following testing & evaluation methods:
Usability testing
Invite some real users to try your product and discreetly track the number of clicks and the time required to complete the task, count the number of errors, and assess the users’ behavior.
You can start running usability tests as soon as you get the interactive prototype. Leverage A/B testing by offering users alternative designs and comparing their reactions. Document your findings in a usability report (you can use it later for further design improvements).
User testing
Watch your users interact with your end product, complete tasks, etc.
Internal testing
Let your team test the product inside out to find all possible flaws and bugs.
Beta launch
Release the product to a limited group of people to run tests on real users, collect feedback, and tweak your product before releasing it to the rest of the world.
Analytics
Now that your product has been on the market for some time, you can collect respective analytics to see where usability should be improved.
Source: https://uxmastery.com
The image above illustrates the iterative nature of the UX design process. To deliver an unmatched user experience, you should be ready to go through these stages again and again, asking yourself the key question: is it perfect yet?