What is UX design?
UX, or user experience, refers to what users feel when they use a certain product or service. Or simply what emotions, senses, and physical interactions they have with the product.
UX design process means the actions of creating a seamless and satisfying user experience. The UX design process is applied to different products and services like websites and apps, but it mainly refers to digital design experience.
The UX design process has a significant role in participating in and fulfilling customer needs through your website and mobile app. Without proper UX design, users might get frustrated finding the product and having their needs unfulfilled, resulting in lesser traffic. Usually, the UX design process works closely (if not at the same time) with the UI design process. Sometimes, can be the same person in a mobile app or web development team.
Understand 6 stages of UX design process
What makes the difference between UX Design Process and UI stays at the first few stage. In UX, you need to spend more time for research and create a good user experience while UI mostly work on how to make the interface easy to understand and use.
Stage 1: Understand your brand
First, you should clarify the product’s value and benefit to the customer. This sounds irrelevant. But the truth is, knowing where your products are in the market can help you point out the selling points and brand image through user experience with apps, website and other digital touchpoints.
For example, if your products are for teenagers, should the experiences be unique and dynamic? Meanwhile, if your products are for business, the user experience should show your trustworthiness, transparency, and professionality.
Second, your business must understand customers’ pain points. What problems can customers encounter while searching for their desired products on your website or mobile app?
Next, you must understand how this project will fit into your company’s objectives and how it will contribute to your company’s success. The time for project initiation should also be carefully considered.
You can use the S.M.A.R.T framework to set the goals. It is critical to strike a balance between the users’ goals and the business’s aims, which are not always in sync. You might have a kickoff meeting with your stakeholders and technical team to start an agreed plan of action if necessary.
Stage 2: Research
User research lays the foundation for the outcome of your UX. Suppose there is no research, or it is solely based on UX designers’ experiences and assumptions. In that case, the UX design process might skip a chance for improvement and ease of navigation for customers. Mastering the UX design process means the business always thinks from the customer’s perspective.
User research for UX design involves speaking to, listening to, and observing real customers or people representing your target customers. By doing research, you attempt to find out their problems and their expectation toward a solution. User research can be:
- Qualitative: Focuses on learning about users’ thoughts, opinions, and feelings;
- Quantitative: Focuses on learning measurable data. For example, the number of clicks and the average time per sessions
There are many methods to effectively conduct your user research.
1. Interviews
By interviewing, you have a one-on-one and in-depth information exchange with your targeted user. The interview can also be conducted during the user’s interaction with your brands, products, or current website/ mobile app. The interviewer can ask what users think when they browse the product and ask the customers about the frequently encountered problems with this type of service and their pain points. Don’t forget to encourage your customer to describe it in detail.
Some good tools for interviewing are Zoom Meeting Conference Calls, Lookback
2. Surveys
This online method is quite common at the starting phase, especially if you haven’t had a website or mobile app yet. An online survey form usually contains precise questions sent to the targeted customers through email or private inboxes. The collected data will be stored and later reviewed by the UX designer or the development team.
Several tools for surveys: Wufoo, Google Forms, TypeForm.
3. User testing
Even though it’s the last step of the UX design process before the final launch, it can still work at the start, especially if you already have a website or mobile app. This method is a valuable source to know what the customers are struggling with. Then you and your team can improve the existing product.
Many entrepreneurs are concerned that performing tests will consume a large budget and time. Some are afraid that speaking to real customers or doing the test might break the product idea. However, spending on the initial testing stage will benefit the businesses as they can save most costs and time later.
4. Personas
Personas are fictional characters that are created based on your targeted customer groups. These identities represent a subset of real audience and their behavior. UX designers create user personas based on qualitative and quantitative user research.
Yet, personas are only considered effective when they:
- Truly represent real people with their motivation, goals, and demands;
- Give businesses an accurate view of customer’s expectations;
- Make available universal features and functionality;
- Show how the customer will interact with a site;
- Represent a major portion of website users.
In addition to those mentioned methods, user research can be done as A/B tests, card sorting, and eye-tracking. Researching competitors on the market is also involved.
Stage 3: Analyze
When all the necessary research is done, it’s time for the analysis phase. You can draw valuable insight and pick out the essential element from the well-conducted research from the two previous stages. At this stage, the UX designer team can confirm the accuracy of the team’s previous assumption.
There are certain ways to analyze your team’s research, including:
- Creating user personas: As mentioned above, personas are imaginary characters representing your potential customers. These personas can be used as realistic representations of your target audience. Using it, your UX designers can understand certain aspects of customers, namely their characteristics, goals, behaviors, spending habits, and pain points.
- Creating user stories: The user narrative usually starts with the following structure: “As a [user], I want to [goal to achieve] so that I can [motivation].”
- Creating user journey maps: A user journey map describes how users navigate through your site. Studying this gives your team a big picture of user behavior, which needs improvement and opportunities for future growth.
- Storyboarding: This comprehensive method helps designers connect the user persona and user stories. Overall, the storyboard tells the UX designer a story about the user’s interaction with the site.
Stage 4: Design
This particular stage requires various small steps, including:
1. Sketching
This is the step to first visualize the idea for the product. Sketching can be a quick, simple drawing on paper, a whiteboard, or a digital tool. Sketching is useful during the brainstorming session as it enables your team to get creative, list out ideas and solutions, give critique, and make the final decision on which designs to initiate.
2. Creating wireframes
Wireframes play as the backbone and the bare representation of your product. Creating wireframes concentrates on shaping the layout, the core elements of your web design, and how they will work together.
Wireframes are typically designed in greyscale with placeholders for information like photos and buttons. By wireframing, UX designers can also determine which information to prioritize. Of course, this information is based on the user research done in the last step.
At the beginning of the design process, wireframing helps you and your team communicate the initial design concept to the customers and collect their feedback before developing high-fidelity prototypes.
Wireframes are also quick, cheap, and easy to implement. Create them as early in the process as possible and update them frequently.
3. Defining IA
Information architecture (IA) describes the concept of structuring and categorizing the content of your app, website, and other products. IA is applied to prevent data overload and narrowing options, making the design easy to navigate and informative to the users. Through IA, UX designers also learn about how each item relates to each other within the structure.
IA can benefit the UX design business by:
- Increasing self-sufficiency and satisfaction among customers;
- Creating more effective page navigation;
- Lessening the cost of support;
- Reducing the drop-off rates.
Two common approaches of IA are card sorting and tree testing. They both help you understand the interaction of users with information and web content, as well as how customers expect different data locations on their journey maps.
4. Mapping user flows
A user flow map can visualize the journey of various customers on the same website. This map shall assist you in determining the direction for users at each stage and the path to get there.
A typical flow could include directing users from the main page to the sign-up section, checkout pages, and everything in between.
5. Creating prototypes
Contrary to wireframes and their orientation of visual hierarchy, prototypes are about the actual interaction experience. Prototypes are demo versions of your design before it is implemented and put into the coding. These mockups allow you and your team to present ideas to the stakeholders and potential users, explore ideas, and run prototype testing for functionality and usability check-ups.
Prototyping is done throughout the UX design process combining with low, mid, and high-fidelity prototypes.
- Low-fidelity prototypes: The most basic prototypes used in the early design process for idea pitching. They are also known as the wireframe.
- Mid-fidelity prototypes: These prototypes look more refined, not just basic sketches. However, they contain little detail. UX designers use mid-fidelity prototypes to approve an interaction concept and avoid unnecessary designs in the whole process. This step is usually skipped.
- High-fidelity prototypes: High-fidelity prototypes are the closest to the final design with detailed elements. They are used for testing usability and getting final approval. Due to their inclusivity, they take more time to create and cost more than other versions.
Building prototypes before the official development can save time and money for later. Some reputable tools for prototyping are Adobe XD, InVision, and Proto.io. Spend more time, if necessary, on finding the most suitable tools for your needs.
6. Creating a design specification and design systems
Design systems will contain all the visual design components that UX designers must include to turn the prototypes into a functional, working final product. Including:
- Font/ Typography
- Color
- Sizing & Spacing
- Imagery
Many large projects contain many components, patterns, and styles. Therefore, designers must create a specialized system to help designers and developers remain in sync with the design.
Stage 5: Development & testing your UX
After everything has been carefully prepared, it’s time for development. Even though the developer does this phase, the UX team must follow the projects closely to ensure the coder understands your plan and design.
Testing is essential for the UX design process as it helps the UX team check the usability and web performance. With this, you can make necessary improvements and prevent all potential hassles before launching. It is a great way to work on problems and unseen user difficulties in previous stages.
The testing, or validation process, usually starts when the high-fidelity design has received essential feedback from stakeholders and end-users. The sooner you test, the faster it is to make modifications and hence the greater impact testing has on the final product quality. The testing and validating stage of the UX design process can go on in this order:
- “Eat your dog food”: Also known as “dogfooding,” this step refers to using one’s own product or service. When the product has reached the usability point, the business should test it by using the product and find flaws. Dogfooding can act as a quality control and testimonial advertisement.
- Testing session: You and your team need to initiate testing on your actual users or user personas. The testing can be done in various formats, namely A/B testing, remote user testing, usability testing, focus group, and beta testing.
- Surveys: Through surveys, you can acquire both qualitative and quantitative data from real users. UX designers from your team can receive responses to such questions regarding the functionality of the website and therefore improve the website’s features.
- Analytics: Clicks, dwelling times, search queries, and other quantitative data collected from data analytics tools are useful for predicting and detecting user interaction with the product.
Stage 6: Launch & improve
This is the final UX design steps. Once the site is published, you and your team should do another round of analysis. This evaluation procedure means making improvements to the website.
Instead of the previous research, you will look at the final product’s performance. It would be best to consider how users respond and interact with the products, website or mobile apps. Their responses are a crucial source of insight for further website improvement. By delivering analysis and post-launch checkups, you can work on the solutions for better performance.
Tips to improve your UX design workflow
There are many ways to upgrade the UX design process. Here are some tips to improve the workflow of your UX team:
Adapt yourself to the reiterative nature of the design process
The UX design process takes time and effort. It’s more iterative with most stages overlapping, and many steps can be done back and forth. As UX designers learn more about users and problems, they must re-evaluate their design choices. Therefore, you and your team should constantly take time and re-conduct user research to improve the product.
Develop user-centric thinking
Designers and businesses must concentrate on users and build a product that fits their needs. This human-centered mindset brings solutions without spending too much on unnecessary UI features and functions.
Build empathy
Empathizing with customers is a good way to maintain the customer-centric approach of your UX business. As designers advance through the UX design process, they may become distracted from focusing on consumers and create seemingly unique yet aimless features instead.
By practicing empathy with users throughout the UX design process, designers will likely focus on users’ concerns toward the product.
Build a design system
With a design system, your team can reduce time for future improvement and avoid inconsistency in brand image. A design system can be built from scratch by the internal team of the business, yet it can take time, budget, and lots of effort. If your business cannot afford self-reliant construction like that, a thinkable open-source component like MUI or Bootstrap is a great alternative.
Pay attention to developing good communication, collaboration
Communication and collaboration are crucial soft skills for a successful UX design process. They are as essential as creating great designs. To enhance both, UX designers should collaborate more with designers from other teams. Keep tabs with engineers, business managers, and product teams for inclusion in the UX design process. You can schedule regular design review meetings and engage with stakeholders. These meetings can notify everyone to be aware of the project and ensure they support the product design decisions.
Wrapping up
If you’re a UX design team leader, you need to understand how to work with other UX designers, developers from other departments, and stakeholders. The UX design process can be a bit overwhelming at first. However, once you know how to work as a team and have a solid workflow, you’ll be able to move along much more quickly. Don’t forget to improve throughout the whole process for better development for your users and your design team.
More related posts from Web Development blog you shouldn’t skip:
