Design, foremost, is about problem-solving. Subsequently, the design process is breaking down a problem into small, manageable chunks. Breaking down a problem also works in favor of an agile, iterative process that reduces products’ time-to-market. There are different methods of breaking down a design problem, which makes up different design thinking models. This article does not concern itself with the various design thinking models out there. Instead, it gives a broad understanding of the design process that you can use for developing your design system.

We can break every design process into the following 5 components:

1. Define the problem

Before you embark on any kind of design ideation, it is important to fully understand the problem you are trying to solve. This is the research stage of the design process. Collect as much data as possible from target users and the client you are working for. User interviews, online research, and competitive analysis are all useful methods of research. Take help from the 4 W’s when defining a problem:

– Who is affected by the problem?
– What is the problem in terms of impact, and what happens if the problem remains unsolved?
– Where is the problem happening? Is it restricted to the digital space, or the physical space, a particular demographic?
– Why is it important to solve the problem? What value does it add to the stakeholders involved, such as the client and the end users?

All of those questions should help you define the problem in a human-centric manner. Avoid defining the problem in terms of business outcomes. For example, “Senior citizens feel alone and need a sense of community” is a much better problem statement than, “We need to increase our reach to senior citizens by 5%”.

2. Empathize with target users

This is an extension of the first step except, the focus is on trying to understand the end-users and how they go about their daily life. Create user personas and put yourself in their shoes. Use storyboards to analyze various real-life scenarios and how users might navigate existing solutions. Try to understand their motivations for relevant behaviors to gauge their pain points. Create as many user journeys as possible. Break them down further by interaction to get a more complete picture of the end-user.

3. Brainstorming on likely solutions

Once you have the problem statement down and a better understanding of the end-users, ideate on possible solutions to solve the problem. Get as many ideas down as possible. Use different ideation techniques to stoke creativity in your team. For instance, Worst Possible Idea is an ideation technique that encourages absurd ideas to solve the problem. Going technology-agnostic is also a good idea for freeing up the mind to think creatively. For example, even if the end-goal is to design a mobile app, come up with app-agnostic solutions to solve the problem at hand.

When you hone in on likely solutions that can solve the problem, repurpose them to fit the medium that you intend to use.

4. Prototyping

Prototyping is the process of testing the likely solutions to identify environmental constraints. It also helps you further understand how users interact with your product in real-life situations. Create wireframes for each solution you shortlisted in the previous step. Wireframes are a bare-bone structure of the final product. The focus is on getting the idea down for quick user-testing than on the UI.

Prototypes are advanced wireframes that, typically, include animations and basic interactions. Share the prototypes within the team, within the organization, or even among a trusted group of peers for quick testing. If none of the proposed solutions work to solve the problem, you might need to go back to the ideation phase for more problem-solving.

5. Testing and iteration

Once you have a working prototype, it is time for rigorous testing. It is an iterative process that might be used to redefine the problem, tweak the solution, and get a still deeper understanding of end-users. Tools such as Google’s DevTools Device Mode and Google Resizer allows designers to simulate behaviors of different screen sizes and devices.

The above is a linear outline of the design process. However, modern design thinking follows a heavily iterative, non-linear structure. Different stages of the design process are, usually, not as clearly defined. For example, it is possible that some teams can ideate on possible solutions and prototype concurrently. Similarly, the testing stage might lead to more user insights, which means tweaking of user personas and ideating on solutions, again.

In that context, the above outline should only serve as a guideline for design teams to help them navigate the modern design process that relies on agile principles.