See cases

Design Process: from Chaos to Order

The role of the design process in the professional activity of UX designers and its main stages, why ignoring the basic principles in the construction of design processes leads to chaos.

One of the most common problems for designers and companies is the inability or unwillingness to build an effective design process that will help save time, and resources and set up all the operational processes. There isn’t a universal design process that suits any designer or team, only principles that can be used to organize your design process. This article aims not to create a manual for designers, as design processes take place and are implemented in different scales, volumes, and goals, by industry leaders, large teams in large companies, and individual designers, and almost always require extra effort and time. By looking at the traditional stages of the design process, we have an opportunity to see how multifaceted the design profession is, and how much can be learned by researching and analyzing new information and user experience.

Let’s understand what the design process is, why it is so important in professional activities, consider its main stages and understand why ignoring the basic principles when building design processes leads to chaos. Many beginning designers, like myself, face the problem of an unorganized creative process and a lack of a technological chain of actions. Agree, this is a logical and natural state for a person in contact with something new. But as science teaches us, everything in the universe tends toward chaos, and chaos is the normal state for complex systems. But the good news is that out of chaos comes order.

As the American writer and historian Henry Brooks Adams wrote, “Chaos gives birth to live, and order gives birth to habit.”

Process design is an approach to breaking down a large project into manageable fragments. The first important step to the understanding design process is that there is no “right” and “wrong” order to your actions. It’s primarily the method you use to be more creative, productive, and accurate. The process should fit you, not the other way around. It is not a rigid list of steps to follow, but a tool that you use to be productive.

Why is the design process so important?

Some designers try to rely on inspiration and their elusive creativity to find their best ideas. As a result, some days when there is no inspiration, they are simply unproductive. However, even when you feel inspired, sometimes creativity leads you in the wrong direction, and you create a solution that doesn’t work, even though you are excited about it.

The Design Process is designed to help designers stay effective and creative in solving real-world problems, regardless of inspiration. The design field has already developed standards to describe a generalized sequence of design activities from start to finish. Any design process is based on research, problem definition, solution development, and implementation principles.

The basic steps of the design process include:

  1. Exploring an idea, defining a problem and goal (Define).
  2. Research, information gathering, and competitor analysis (Research).
  3. Brainstorming and idea generation (Analysis).
  4. Designing scenarios, building User Flow (Discover).
  5. Creating Wireframes, prototyping, and UI design (Prototype).
  6. Usability testing (Development).
  7. Analytics and improvements (Evaluation).

1. Exploring an idea, defining a problem and goal

This is one of the most important steps, which is performed actually before the designer creates anything. Before creating a product, it is necessary to understand the context of its existence, and what user problems it will solve. The product identification and value phase lays the foundation for the future result. The value of a product must answer the questions of what it is, who will use it, and why users will use it. And the best way to grasp the business concept, the problems of a particular product can only be communicated with the carrier of the idea, which can be the customer himself or representatives of his team. Direct contact between the designer and the medium of the idea allows for a better understanding of the business, saves a lot of time, and involves the client in the work process.

" People don’t know what they want until you show it to them" Steve Jobs. Biography (Walter Isaacson)

2. Research, information gathering, and competitor analysis

This stage is one of the most voluminous and energy-consuming, in which research must be done on the product, and its need in the marketplace and allows designers to test basic product hypotheses very early on before developers even get involved in the process. The main objective of design is to focus the design process on the end-user, whose behavioral research reveals that person’s motives, context, and purpose for using the product. The designer’s main tool at this stage is UX research, whose main goal is to animate the design process from the end user’s perspective. With it, designers discover user problems and needs, and analyze and propose solutions. This data will verify that the initial ideas meet the needs of the users, and ultimately create a product that will be loved and used. It is the research that is needed to reduce risks and, for example, not wastes resources on a feature that will not be used. Today, there are more than 20 popular methods of UX research.

Traditionally, UX-research methods can be divided into two groups: quantitative and qualitative. Qualitative research allows getting the most detailed information about a user, quantitative research 一 checks how often certain phenomena occur in a large group of users. Also, UX research is divided into types: behavioral and attitudinal. When we talk about behavioral research, we follow the user’s actions at the moment of using our product, when we talk about attitude research — we follow what the user says about our product. The most popular methods of UX research 一 interviews, focus groups, ethnographic research, surveys, card sorting, usability testing, and A/B testing. The ideal solution would be to combine several methods to obtain a broader range of information.

UX Research Methods
UX Research Methods

Also, at this stage, we research competitors and examine similar projects, looking for opportunities for improvement and positive results. Since competitors can appear at any time or their offerings can improve, competitor analysis should be present throughout the project. From the information obtained, insights can be extracted-issues or desires that are popular with the target audience.

3. Brainstorming and idea generation

As a result of research, we gather a lot of data, and insights to synthesize them into real ideas, identify patterns in the results, and match users’ problems with our solutions. Based on this information, we can finally start to highlight problems that need to be solved. The following artifacts help us analyze and use the information obtained during research:

  • User Personas is a realistic description of a user from the target audience, which includes the main behavioral and prospective features that are important about the product. User Personas help us understand who our customers are, empathize with them, and understand their goals and motivations. The user portrait should be collected on real, not fictitious data.
User Personas
User Personas
  • CJM (Customer Journey Map) is a step-by-step visualization of a person’s interaction with a product or service over time with a detailed description of what people do, think, and feel at each stage of the interaction. It allows us to analyze the whole picture and identify problem areas, generate ideas without losing context, and designs the desired state.
CJM (Customer Journey Map)
CJM (Customer Journey Map)
  • User Story is a short and maximally clear description of the product functionality or features that the user will get as a final value, and it’s a tool that we can use to create high-quality and understandable descriptions of the required functionality for developers. The formula of User Story looks like this: I am as (type of user) + I want (action/goal/property) + to get the result (the final business value that the user will get).

After accumulating a lot of information, designers generate specific ideas. At the heart of ideas, generation is the process of design thinking. There are many techniques for idea generation, with brainstorming, sketching, and prototyping among the popular ones. The idea generation experience is well described in the book “Invent. Make. Break It Down. Repeat” by design and innovation professors at the University of Sydney, in which they describe 60 examples and tactics for idea generation.

A helpful tip from the scholars is not to stop at the first one you come up with. When you need a non-trivial idea, follow 4 simple steps: think it up, do it, break it, repeat it. The third is the most surprising. Breaking it down means testing it, demonstrating it, and discarding the superfluous. Not to engage in the endless grind of the perfect project. The best idea can be born only by trial and error.

4. Designing scenarios, building User Flow

Based on the results of the research and highlighting key and secondary scenarios, begin the step-by-step elaboration of the main scenarios and the construction of User Flow. User Scenarios are a framework for determining why customers are on your site and how they implement their plans with your product. Most often, these scenarios are created in the format of short stories about some reference user whose goal is to satisfy their need through your site or app. User scenarios expand on user stories to include details about how they can be understood, what experiences they are based on, and how they are used.

The main advantage of scripts is that they allow the designer to always keep the user in mind during the development and design process. There is always the temptation to get carried away with extending functionality or polishing the interface, which in the end will not affect the user experience in any way.

User flow is a visual representation of the sequence of actions that a user performs to achieve their goal. It can encompass a single function or the entire product. This is where user stories, scenarios, and use cases come together in information architecture. Usually, in User Flow, we don’t focus on the user experience or the many possible decision levels, and a properly drafted user flow will help avoid mistakes in the future. The main task of the scenarios is to show the process of working with the product, after which we identify all positive and negative interaction scenarios.

5. Creating wireframes, prototyping, and UI Design

After conducting research, analyzing a lot of information, and thinking through scenarios, it’s time to start creating the wireframes and searching for a visual style.

The wireframe is a rough sketch of the product structure. It allows you to quickly capture an idea of how things will be arranged and don’t require much time to draw. Creating Wireframes is an important step in any design process. Most of the time, the wireframes set the hierarchy of information in your design. They help define the place of elements in the layout, depending on how we would like users to perceive the information. Wireframes are poorly suited for the testing phase but are very useful as a guide for developers.

Creating Wireframes
Creating Wireframes

A prototype is a detailed plan for a visual representation of a product, site, or application. You need to focus on the meaning and think about the interface on a conceptual level, before moving on to the visual design. According to the level of detail, prototypes can be Low-fidelity prototypes, High-fidelity prototypes.

  • The low-fidelity prototype is a prototype that is created by hand and is similar to a sketch. The arrangement of elements is worked out, and the size of blocks and fonts are roughly defined. The elements are aligned to each other and the grid. The hierarchy of blocks is defined by shades of the same color, often gray. The low-fidelity prototype is most often used for final approval of the arrangement of the functional blocks with the customer or other responsible person.
  • The high-fidelity prototype — this type of prototype already looks like a finished product with selected style and pixel perfect elements. It is tested for compliance with the requirements for accessibility for people with different types of color range disorders. It is approved by the customer and submitted to development.

After giving structure and shape to the product, we proceed to the UI-design part. Several sets of images (mood boards) are prepared for the stylistic selection. One of these mood boards will form the basis of the design concept. The design concept is designed to show the design of the site and give an idea of the future look of the entire site. If the previous stage of determining the style only set the direction, the design concept is developed in such a way as to implement the chosen direction with the existing content of the interface. Once the design concept is approved, it’s time to design all the other interface screens.

6. Usability testing

Before handing over the project for development, it’s a good idea to do usability testing of your interface. This will ensure that the logic of the product meets users’ expectations of how your product should work. Usability testing is a method of evaluating the interface from the usability and effectiveness side. To get it, you need to involve representatives of your target audience. The most popular factors that influence usability are structure, important information, design, navigation, and loading speed. Analyze the results of the usability testing, highlight your strengths and weaknesses, fix bugs, and finalize the design.

7. Analytics and improvements

Once the design and implementation are complete, the work on the interface doesn’t end but continues to work on improvements. Your interface or product grows with your users, there is a need to add new functionality.

I hope you find this article helpful.

Most popular