If you’ve ever wondered what the UX/UI design process looks like, or what steps a designer takes before presenting their concept to you, this article will be valuable. Here, I’ll detail the processes that are standard for developing a digital product today. The field of UX/UI is rapidly evolving due to its high demand, so the information here is up-to-date at the time of writing. As for the future, we’ll see how it unfolds.
For Aspiring UX/UI Designers
This article is also useful for budding UX/UI designers seeking a deeper understanding of process structures and essential elements for beginners. Trust me, many of us initially believed the ideal process was straightforward: a manager assigns a task, and you, the designer, complete it satisfactorily and on time. We often describe the ideal process based on our current experience, not fully realizing how various stages of work can influence the quality and final structure of the product.
My Experience and Approach
In digital design since 2007. I’ve been focusing on user interfaces and interaction design since 2014. At our agency, ZAYATS, we focus on UX consulting for small and medium-sized businesses and the digital transformation of offline companies. We use a scientific approach to design, helping our clients create a seamless customer experience (CX) at every stage of interaction with potential customers.
The Professional’s Perspective
When hiring a UX/UI designer, we expect this person to be knowledgeable about all processes and able to explain them if necessary. The truth is, UX/UI is a relatively new industry, and we’re still accumulating enough experience to structure textbooks and create guides. Even professionals often find it challenging to explain UX/UI processes clearly. Today, there are many variations of UX/UI processes affecting different products and outcomes in diverse ways. However, we’ve identified some essential stages that must be included in the digital product formation process. Knowing these stages will help you understand where your project stands on the roadmap and predict timelines, even if you’re not a designer. Or at the very least, you’ll stop wondering what UX/UI designers do all day. Let’s get started.
Step 1: Research and Analysis
Data collection
Let’s say you have an idea, such as adding localization to your website or developing an online store for big and tall men’s clothing to boost your existing business’s revenue. The first step for a UX/UI designer in this case is data collection.
Data can be gathered in various ways. If you already have an existing audience, conducting surveys among your current customers to validate your hypothesis is the most effective method. I’ve detailed how to do this in this article. It’s crucial to frame the task correctly at this stage. The way you formulate the problem will not only determine the final product’s appearance but also how many times you’ll need to revise it later. It’s essential to ensure that there is demand for your idea and that people are willing to pay for the product now. Competitor analysis is also a good option, but based on my experience, it’s most beneficial if these companies have a strong digital presence.
Should You Benchmark Against Competitors?
I would say NO. For example, when we researched potential competitors for developing a digital product for a chain of beauty salons in Philadelphia, we found that we had no one to benchmark against. All the competitors looked weak, barely present online, despite being top companies with huge revenues in the offline world. So, competitor analysis is a useful goal that supports your main theory but doesn’t drive it. However, if your competitor has something you don’t, it’s wise to take note.
The result of this stage will be a simple file with notes and survey results in a table where you list the findings from your tests.
Step 2: Creating User Personas
Defining goals, tasks, pain points, and needs
Developing user personas that represent typical users of your product is a crucial step in understanding the direction you need to take. User personas will prevent you from wasting significant money and effort on unnecessary advertising that yields no benefits. They define the goals of your product, highlight pain points, and identify needs that address these pain points. At this stage, we create a profile of the future customer, which will guide us moving forward.
Based on the user profile, we will create not only the visual representation of the project but also customer journey maps (CJM). The customer journey map helps you determine the correct navigation. Simply put: without a user profile, you don’t have a CJM, and without a CJM, it’s like using a map of New York to navigate Los Angeles. This path will lead you somewhere, but you’ll spend a lot of time and money getting to the right point. Therefore, never skip this step. It’s crucial.
What is CJM (Customer Journey Map)?
Step 3: Developing User Scenarios
Defining key tasks and interaction paths with the product
Now that you know who your customer is, it’s time to understand how they act when they need to solve a problem your product addresses. What will your potential customer do? For instance, if you’re a lawyer, your potential client will likely find you through a Google search that leads to an article answering their question. This is the essence of a scenario — write down how your potential client acts as detailed as possible.
Surveys
Surveys are also crucial at this stage. If you don’t have an existing audience, ask your friends or acquaintances how they would search for a solution to this problem. What steps would they take? If you do have an audience, find out how your current clients found you. What did they do? What steps did they take? Write down all the collected data and create maps for each path. One path — one map.
Example
I needed to find a WordPress plugin that would allow me to create a private networking club for aspiring entrepreneurs, by subscription. How did I act? First, I asked ChatGPT what type of plugin solves my problem. Step 2: Using the chat information, I Googled the most popular solutions in this plugin category. Step 3: I then compared the prices and benefits of each solution and checked alternative options, such as the Pantheon platform, and compared their prices. The final, decisive step before purchasing: I conducted a detailed analysis of the chosen solution and spent a few hours testing the demo version. Then I made the purchase.
My action scenario is just one of many. There are variations of my scenario or entirely different interaction paths. At this stage, it’s crucial to find and structure them. This will allow you to determine the scope of tasks.
Step 4: User Journey Maps (UJM/CJM)
Defining Touchpoints and Potential Problem Areas
Now that we understand how a potential customer behaves, it’s time to create journey maps. A Customer Journey Map (CJM) is essentially a visualization of the user’s interaction with the product at various stages, through different methods. Think of it as turning a scenario into a full-length movie where, regardless of what the main characters do and how they do it, the outcome is the same — a purchase. I’ve detailed how to create a CJM in a separate article:
How to create a CJM (Customer Journey Map) correctly?
The result should be a map that corresponds to the scenarios previously identified. This map will help you pinpoint touchpoints and potential problem areas, ensuring a smoother journey for your customers.
Step 5: Information architecture or Mapping
Definition of the main sections and their interrelations
Complex Stage. Here, we determine which sections will be present in each version of the product and how users will interact with interface elements. The Mapping stage has its own tricks and hacks. For instance, I use the “reverse” method. When developing an MVP for clients, we start by creating a large map that includes all desired options, even those that the client doesn’t have the budget for right now or those that would be cool to implement someday. Then, we remove all these options, leaving only the essentials. This results in two versions: the alpha version and the beta version.
It may seem pointless, but this method actually helps refine the product. Essentially, the entrepreneur answers the questions: What will my project look like in two years? What about in one year? And what do I need right now to launch the project?
By visualizing the full potential of the product and then scaling it down to the core essentials, you gain a clear understanding of both the immediate and future needs. This approach ensures that the MVP is focused and manageable while still keeping the long-term vision in mind.
Step 6: Wireframes
Defining Key Elements and Their Placement
We’ve reached the stage that most people associate with the UX process, though it’s actually just the result of the previous steps.
At this stage, the designer presents all the gathered data in the form of clickable sketches. Wireframes are sketches of the interface without detailed visual design. The most important aspect here is to show how the digital product functions from the user’s perspective. Any tool can be used for creating wireframes. Personally, I use Figma, but Adobe XD or Sketch are also excellent choices.
The advantage of this stage is that you can finally “touch” your product. The structure now has a practical application that you can view, click through, study, and physically interact with.
Often, the wireframe stage is sufficient for demonstrating the product to potential investors or partners. Wireframes are useful for testing and can prevent high costs associated with redesign, programming, and reworking the product after launch. They help show the feasibility of the project or the opposite. Essentially, UX exists to prevent making incorrect assumptions about what the client wants. It ensures that our understanding aligns with reality.
Step 7: Test
Conducting Usability Testing with Real Users
This stage is crucial if you are launching an MVP and want to ensure that you haven’t overlooked anything. The absence of a fully developed UI allows potential customers to evaluate the project’s architecture and navigation in more detail and focus on the interaction.
In this article, I’ve detailed how to conduct usability testing.
The goal of this stage is to gather feedback and make changes based on the test results. If you have an existing audience, use it. If not, invest some money in advertising to build a small community of interested users who could become your future customers. Offer them benefits that might interest them or simply promise to donate $100 to an animal protection fund in exchange for their feedback.
By engaging real users, you can identify and address any issues early on, ensuring a smoother product launch and a better user experience.
Another Approach
Google has a different UX design structure tailored to their company’s needs. I don’t recommend using this structure as it is very resource-intensive and only a company like Google can afford to implement it. However, for the sake of completeness, I will describe the UX process that works within Google.
They leverage their extensive resources to conduct full-scale research and test their theories on their vast existing audience. Their process consists of only five stages: empathize, define, ideate, prototype, test. Then the cycle repeats until the product is refined to 100% accuracy. While this approach seems sound, anyone who has used Google Ads Manager might agree that it is not very efficient.
In summary, while Google’s approach to UX design is thorough and iterative, it’s not necessarily practical for most businesses due to its high cost and resource requirements. It’s important to adapt UX processes that align with your company’s capabilities and goals.
Step 8: UI (User Interface)
Finalizing the developed prototype is perhaps the shortest stage of the entire process. However, this stage has its own extensive knowledge base, trends, processes, canons, and rules. Usually, the designer takes one page of the already created prototype and designs it according to research, market standards, and trends. This part of the process is the most creative. While today’s discussions on UI/UX design often focus more on technical and analytical skills than creativity, this stage allows for some creative liberties in the design.
After one page is approved, the designer proceeds to draw the complete UI and create a design system. This system is like a library of elements and how they change upon interaction.
The result of the UI phase is a visually appealing product with a pleasant visualization of elements.
Step 9: Test Again
Conducting Visual Usability Tests
Once more, it’s time for testing and surveys. This time, the focus is on evaluating the visual aspects of the product’s interface. You need to gather feedback on how well the design system aligns with users’ expectations and experiences.
Conducting Visual Usability Tests
- User Feedback: Conduct surveys and usability tests to understand how users perceive the visual design. Ask them specific questions about the aesthetics, ease of use, and overall satisfaction with the interface.
- A/B Testing: Compare different versions of the design to see which one performs better in terms of user engagement and satisfaction.
- Accessibility Testing: Ensure that the visual design is accessible to all users, including those with disabilities. This includes checking color contrast, font sizes, and navigational ease.
- Consistency Check: Verify that the design system is applied consistently across all pages and elements. Consistency in design helps users feel comfortable and familiar with the interface.
- Interactive Elements: Test interactive elements to ensure they behave as expected and provide a smooth user experience.
Based on the feedback and insights gathered, make necessary adjustments to the design. This iterative process ensures that the final product not only looks good but also meets user expectations and enhances their experience.
Step 10: Development and Integration
Only at this stage can you begin the actual development and programming of the product. This phase includes several sub-processes:
Collaboration with Developers
- Design Handoff: Provide developers with all necessary design assets, including wireframes, prototypes, and design systems. Tools like Figma, Zeplin, or InVision can facilitate this process by providing detailed specifications and interactive prototypes.
- Clear Communication: Maintain open and ongoing communication with the development team to address any questions or issues that arise. Regular meetings and updates help ensure everyone is on the same page.
- Documentation: Create comprehensive documentation that outlines design guidelines, style guides, and component libraries. This helps developers understand the rationale behind design choices and ensures consistency.
Ensuring Consistency
- Quality Assurance (QA) Testing: Conduct thorough QA testing to ensure that the final product matches the design specifications. This includes checking visual elements, interactive components, and overall user experience.
- User Acceptance Testing (UAT): Involve end-users in the testing phase to gather feedback and identify any discrepancies between the design and the developed product.
- Iteration and Feedback: Be prepared to make adjustments based on feedback from QA and UAT. This iterative process helps refine the product and resolve any issues before the final release.
Integration
- Responsive Design: Ensure that the design is implemented to work seamlessly across different devices and screen sizes. This includes testing on various browsers and operating systems.
- Performance Optimization: Work with developers to optimize the performance of the design. This includes minimizing load times, ensuring smooth animations, and optimizing images and other assets.
- Accessibility Compliance: Verify that the design implementation adheres to accessibility standards, ensuring that the product is usable by people with disabilities.
Final Check
- Consistency Check: Review the final product to ensure that it aligns with the original design mockups and prototypes.
- Functionality Test: Test all interactive elements to ensure they function as intended and provide a seamless user experience.
Step 11: Launch and Analysis
Congratulations!
We’ve reached the final stage of developing your digital product. You are finally ready to launch your product. The launch phase includes fine-tuning, uploading the project online, and, if necessary, advertising it. Often, by this step, your project already has a small fan base. After all, someone has been participating in your surveys all this time, right?
👍Good news
The good news is that you successfully launched the project.
😞Bad news
The bad news is that this is just the beginning of your journey.
Now your task is to gather data on user interactions with the product and make improvements. This is a continuous process that requires immersion and attention to detail.
The only advice I can give at this stage is that you have already come a long way and learned to be highly adaptive and responsive to users. The essence of continuous analysis and data collection is the ability to adapt promptly to a changing environment.
This is the skill you have honed during the creation of your product, and it will ultimately influence the success of your venture.
One thing is for sure: without a well-structured CX/UX process, the chances of creating a successful digital product are slim.
As I mentioned before, you won’t reach your destination if you’re using a map of New York to navigate Los Angeles.
The CX process addresses this challenge with minimal errors and teaches you essential entrepreneurial skills. That’s all for now. LMK if you have any questions.
Good Luck!
