Design Process

A design process by is a set and sequence of performing design tasks necessary to achieve the best possible product design results. Today we will share our design process with you.

Is there a single standard for the design process?

Each studio has a unique design process. They can vary in the number of steps, their order, duration, different specialists involved, and other essential details. All of them have only one thing in common — the concept of Design Thinking.

These are five crucial steps that will be repeated in a circle until we come to a good result — Empathy, Define Problem, Ideate, Prototyping, Testing. Each step’s content and duration differ even within the same company from project to project and from one iteration to another.

Design process

Is this process discrete?

The design process steps are superimposed on one another.

Is it linear?

Non-linearity of the design process

The more times we can go through the cycle “Empathy-Define-Ideas-Prototyping-Testing,” the better the design solution is. Increasing the number of cycles makes the process more expensive. In the middle, we in came up with five iterations for the average static project. About five times, we go around in a circle, checking if our ideas are good, and each time we do it at a different level of immersion. For example, during the first circle, we test only the verbal representation of an idea. On the next ones — options for its schematic representation, and on the last one — a ready-made software product. Each circle begins with a new list of problems and ends with testing solutions.

What determines the structure of the design process?

  1. Discovery
  2. Brainstorm session
  3. User Flow
  4. Wireframes
  5. UI

The result of each of these steps is artifacts — documents that solve the essential tasks of each stage. Let’s consider how we go through each set we create and what we get in the end.

1. Discovery

Design process: discovery stage

The Discovery phase in our design process covers 1.5 steps of design thinking — empathy and partly problem definition. We collect as much data as possible about the product and study how our client sees the problem. Sometimes, clients provide us with the Ideate part — how they see the solution. And also, with the prototype — as they already decided and even have the results of the initial Testing.

The role of UX/UI designer in the product lifecycle

A designer is a specialist who cannot just sit down and immediately draw the right product. He needs to cover all parts of the product life cycle at once, starting from creating an idea for your business to its implementation, reincarnation, and even disposal. The designer asks how you are going to benefit from this startup. He is interested in your target audience and lifestyle, studies your competitors, your business goals, and plans to develop a future project. All this is necessary for him to immediately implement in the design to fulfill all the required tasks.

This stage does not take us too much time, and it does not cost too much money for the client. We involve the client in this process as much as possible. He knows his business and his customers well. As a result of our joint work, the following documents appear:

1.1 Vision

The vision document

1.2 Persona

Persona document

1.3 Competitors Matrix

Competitors matrix

Additional Discovery Stage Artifacts

Additional documents are what the client may or may not have.

It happens that a client comes to us with a ready-made vision of the functionality. In this case, we ask him to tell him about it using Use Cases.

Use Cases already tell us in detail how the interaction with the product will occur in the client’s opinion. In this case, we not only figure out how to solve the client’s pain but also check the validity of existing solutions.

Use Cases

1.5 Testing Existed Prototype

About half of our clients come to us with a working prototype already created and ask us to improve it. It can be a template created in design programs, or it can be a software product. Our task is to analyze it and find all the artifacts that we will be working with. Usually, for this purpose, we test a prototype, then lay out the application screens on the screen map and leave our comments on it, so that we can discuss it with you later. If the prototype lacks some functionality, we supplement them with Use Cases.

Testing of the existing prototype

Usually, this is the end of the first circle of design thinking — by testing use cases, prototypes, or analyzing competitors’ products, we are essentially testing the idea for ourselves. We note what we liked or caused intense frustration, what we should pay attention to.

It is an essential part of the design process. Some companies only hire us to carry out this phase. To analyze an existing product and identify their vulnerabilities. If you need our expertise in this area, you can hire us, or use the calendar to schedule a call.

2. Brainstorming

Design process: brainstorming stage

Our task here is to combine the second part of the Define Problem stage with the Ideate stage. To do this, we study all the artifacts provided to us at the last step and collect a brainstorming session. As a result of this session (it lasts a maximum of 1.5–2 hours), we get two documents

  • Decision Matrix
  • Priority Matrix

2.1 Decision Matrix

Decision Matrix

2.2 Priority Matrix

Priority Matrix

During the brainstorm session, we test many ideas for strength. Therefore, here we are going through the second circle of design thinking. As a result, we eliminate less useful product functions and leave the most significant ones.

3. User Flow

Design process: User Flow stage

3.1 User flow diagram

User flow diagram

User flow is a schematic description of user experience in the form of UML diagrams and low-fidelity screen prototypes. The main goal is the optimal interaction scenarios, test them, and choose the optimal ones.

The User Flow stage is when we smoothly move from the emphasis to the Ideate stage to Prototyping. Why smoothly? The point is that User flow is a powerful tool for UX creativity. We can test multiple solutions for each event branch without spending a lot of time on it.

Some clients ask us to skip the user flow stage to start a high fidelity prototype immediately. This mistake could cost them much in the future. What can take 15–20 minutes to fix at the user flow stage turns into hours, days, and even weeks of work at later stages.

Additional artifacts

3.2 Data Model Diagram

It is needed when the project has many data, and it is challenging to keep them in mind. The data model helps to structure entities and understand what kind of hierarchy exists between the data.

Data model Diagram

3.3 Service Blueprint

Service Blueprint

This artifact is rarely needed since it describes a product with two interfaces — user and service- and interact in real-time. A good example is Uber, the driver-passenger interface. In this case, the service blueprint allows you to find all the involved segments of this interaction and optimize them even before you start developing the interface.

Here is where the third circle of the design process usually ends. User flow allows us to test the product by moving across all screens. We do this together with the client, discussing all errors and disagreements. At this stage, new features often may appear, and we cut off the lower priority ones.

4. Prototyping

Design process: Prototyping stage

4.1 High Fidelity Prototype

High-fidelity prototype

A highly detailed prototype is essentially a finished app that lacks color and final design. At this stage, we create and test the following artifacts

  • Microinteractions
  • Text data
  • All possible states of components
  • All possible transitions between screens

Customers’ widespread mistake is the suggestion to skip the highly detailed prototype step and go straight to the design. Yes, this is the right solution when you have a few pages and little data. However, it is sad to realize that the product you come up with does not contain all the data that needs to be displayed or violates usability. In this case, it is essential not to forget about this pyramid:

The hierarchy of user experience components

Thus, data and usability affect the design, not the other way around.

We have extensive experience developing “design without design” — when the first task is to create more meaningful, fundamental architectural solutions. If your product has UX vulnerabilities and you would like not only to find but also to solve them — hire us or use the calendar to schedule a call, we will be happy to help you.

4.2 Clickable and animated prototype

This stage ends with user testing, involving potential users of the product. Quite often, such a prototype is so close to the needed design that the client can use it as a finished product. This stage completes the fourth iteration of design thinking.

5. UI design

Design process: User Interface design

5.1 UI Design Concept

Design concept

Before we “draw prototypes,” as customers sometimes mistakenly call it, we must seriously take care of the product’s correct perception. Color, contrast, typography, composition — all these parts of the design significantly impact the user in the first seconds of interaction with the product. The appearance of the product determines how many users do not leave it and start using it. It should support and complement a good UX that users will appreciate later. Therefore, we turn to our original user, competitor, and product data to create a user-friendly design on the one hand, and a memorable one on the other.

We create several pages of the layout, the most frequently visited and complex one. We test visual ideas, show them, evaluate the reaction.

5.2 Full UI & Design System

If the product is large enough or we plan further expansion, one more additional artifact is often required — a design system. A design system is a design arranged in templates and rules. Rigid enough to maintain consistency and uniformity of the product, no matter how large. And they are flexible enough to implement any number of product functions with their help.

Design system

Sometimes a product lives for many years and grows to such an extent that some parts are not like others. Also, functionalities appear that duplicate one another. In this case, you need to create a holistic design system that will help unify the design, make it morу consistent. You can hire us for this work or schedule a call.

Additional artifacts

Branding is product recognition. Without it, it is impossible to create a correct UI, since one of the UI tasks is to be remembered by the user. In some cases, clients come to us with a ready-made UI. In others, we provide such a service. If there is no corporate identity yet, we need to develop it BEFORE the UI stage begins.

Brand design for Brokrete company

5.4 Illustration

Most modern interface areas if faceless — equally light (or dark), with minimum graphics. Why is that? Because good design is the design that we don’t notice when we solve our problems with its help. But how can you solve the problem of product memorability? How to stand out from the competition? Even if the use of the corporate color is questionable. The answer is to show your brand where the user expects a system response or faces empty states. Here is the place for branded graphics — blank states, preloaders, loading screens, and tours. We have a team of professional illustrators who can complete this task at A +.

Illustration for the UI design of Brokrete website

The final, fifth UI testing helps assess how the design helps support the user experience and creates a mood for the user. Each stage of Testing is about finding errors that we could miss in the previous steps.

To know more about how we work or to hire us, please use the calendar to schedule a call.

We design products that bring millions. Individual UX solutions to fit your business goals.