The UI/UX design process and how it can help the designer

Usually articles that I read about design process end up describing in general terms what to do at each stage, without explaining step by step their methods. But in my article I will describe my design process and my methods of interface development and try to give you maximum benefit, this article will help: beginner designers, freelancers, high-level specialists Middle-Senior and beginner design studios that are just created.

The user interface (UI) and user experience (UX) design process is a multi-step process that involves understanding user needs and goals, creating wireframes and mockups, and testing and iterating on the design. This process can vary depending on the specific project and development team, but there are a few general steps that are usually followed.

Important to know: each designer or studio has its own design process on this do not try to find the only one, further in the article I will help you and tell you how to get around this problem.

  

Why do you need a design process?

1. Clarity of purpose: The design process helps you identify the problem you are trying to solve and set specific, measurable goals for your project. This can help you focus on the task at hand and ensure that your final product meets the needs of your users or customers.

2. Improved communication: the design process can also help you communicate effectively with clients, stakeholders or team members. This can be especially important when working with clients or stakeholders who may not be familiar with the design process.

3. Improved efficiency. Having a design process in place can help optimise your work, allowing you to work more efficiently and effectively. This can be particularly important when working to tight deadlines or with limited resources.

4. Better quality work: a design process can help you produce higher quality work as it allows you to iterate your ideas and test them before the final design.

5. Managing iteration and feedback: the design process can help you effectively manage iteration and feedback from stakeholders, clients or team members, leading to a better outcome.

6. Personal growth: the design process can also help you grow as a designer by providing you with a structured approach to practising and improving your skills, as well as encouraging you to think critically about your work and the design decisions you make.

  

 Design process by stages and methods of interface development

  

1. Problem Statement:
Description: Collecting internal introductions

• Brief and interview (founders, business, product scientists, sales managers and others)
• Defining the main goals and objectives of the business
• Defining the audience of the business (basic understanding of what kind of people it is)
• Internal research, marketing materials (if available)
• Analysis of the existing product (if any)
• Project Passport (TOR in other words)
• Definition of metrics (if we are redesigning)

2. Analytics and Research:
Description: Explore user needs, usage scenarios, best practices in the marketplace

• Creating portraits of users or personas
• Market analysis
• Competitor analysis
• User stories
• Job stories
• Qualitative and quantitative research
• CustDev
• Hypothesis formulation (criteria writing)
• CJM/Blueprint
• Benchmarking
• Object model
• List of interface functions
• Function sorting by Kano method
• Information structure

3. Design:
Description: We form a semantic and functional solution to our problem, prepare the solution for resource assessment

• Screen map
• User flow
• Gist Concept
• Warframes
• Interactive prototype
• Userflow with screens
• UX copywriting
• Hypothesis generation
• Writing criteria for evaluating hypotheses
• Brainstorm

  

  

4. Design Mockups:
Description: Looking for a sleek UI and UX solution, preparing for an internal test, building a prototype, presenting the design

• Reference work
• Design concept
• Pages/screens
• Stats, states, bugs, etc.
• Creating primary components
• Key adaptations
• Clickable prototype (preferably on interactive components)
• Video prototype
• Design presentation

  

  

5. Testing Inside:
Description: Checking for compliance with the original task

• Evaluation by the design director
• Brainstorming and testing by the team
• Expert testing (business and customers)
• Corridor testing
• Respondent testing
• Running unmodelled tests
• Scripting for U-tests

  

  

5. Systematization:
Description: If internal testing is successful and there is no need to change the interface, we prepare mockups for use by the team, support and front-end development.

• Typography styles
• Over-used blocks (such as the footer on a website)
• Front-end preparation checklist
• Auto Layout
• Variants
• Indentation system
• Colours
• Grids
• Animation and micro-animation
• Micro UX
• UI Kit or design system
• Preparing descriptions of layout changes for layout design

  

 What if you create UI without UX

When the feel of the interface seems cool, but the functionality is questionable. If a website or app doesn't help you solve your problems at all, what do you think? Means they don't care about their users at all. And no matter how cool nibble UI is, it won't help. The perception of the company has changed because of the user experience. If the experience was good, the perception of the UI would improve.

My design process may be different from yours, or it may not suit your needs. So I will give you a link to the Figma file with my design process (Free of charge). And you can edit it to suit your design methods.