Here’s the main design process I tend to follow:

1. Start from the design thinking sessions with stakeholders
2. Conduct additional market and user research
3. Define flows
4. Wireframe top level flows and key screens
5. Implement base flows and interface in a working React app
6. The cycle of iterations begins… end usually never ends 😉

Within this process there is an important Design Thinking path I like to communicate early to the team and follow quite strictly. The path is divided into two major milestones “Getting the right ideas” and “Getting the ideas right”. Each has few crucial steps that borrow from Design for Divergence and Convergence framework, as well as from Lean Startup process.

Getting the right ideas:

1. Could be
2. Should be
3. Will be

This part is straight forward, just move along the linear progression from asking “What could the ideas be like?” to a bit more business oriented “What the ideas should be like?”. And finally, create your hypothesis by asking “What the ideas will be like?”. At this point you should be around step four (4 — Wire-framing) within the main design process.

Getting the ideas right:

1. Build and release
2. Measure
3. Learn
4. Repeat

I’m sure you’ve heard of the Lean by now, but if you haven’t here’s more about its principles. Getting the ideas right is the soul and vision message behind the steps five and six of the main design process.

1. Start from the design thinking sessions with stakeholders

Tools: Radical Simplicity framework

Get everyone in the same room (or a call), start asking questions, and come up with hypotheses and ideas. Hustle! Imagine the best outcomes.

The goal is to gather as much information as possible about the business model, market place, previous experiences in the space, customer expectations, and potential pitfalls.

The final deliverable: A document or sets of notes from the meetings as a definition of requirements, personas, and mental models

There are no bad ideas, so say “Yes, and…” — an essential rule of the brainstorming sessions. Building on top of people ideas is more valuable than picking the brilliant from the crazy.

2. Conduct additional market and user research

Tools: Google, Product Hunt, Podcast Search, Dataset Search, Google Scholar

Research is the brainstorming follow up step. It’s not enough to learn what other people know, especially when Google search is free.

The goal is to look at the problem and solutions from different angles and ensure that the team is not set for a failure.

The final deliverable: A list of links and insights into the target group, market, KPIs (Key Performance Indicator), and other competitive products

The most surprisingly clever ideas come from putting two unrelated concepts together.

3. Define flows

Tools: Jobs To Be Done, Radical Simplicity framework

In this phase, I’m focusing on finding the fastest way for the user to get from A to B. A and B, in this case might represent high or low-level flows, for example:

• from app download to value appreciation
• from accessing a list to a download of a report

I’m using the rule of thumb when optimising a flow to take away as many clicks/ taps as possible. The least steps a flow has the quickest it will seam to a person going through it. Flow simplification is an abstraction exercise where Radical Simplicity comes very handy. The task comes down to combining, reducing, or abstracting the nodes of a flow.

The final deliverable: A list of flows with steps linked by actions and list use cases

The flow is the heart of the user experience. A good flow has a rhythm and melody and feels just right. The best flows are like music, you can‘t see it, but you can feel it.

4. Wireframe top level flows and key screens

Tools: Figma

This phase has to be run in close collaboration with the stakeholders, possibly even users. However, from my experience on large scale projects, it’s hard to get valuable user feedback off partial wireframes early on in the process.

I tend to skip the user feedback to the iteration phase (6).

This step aims to aid the conversations around what’s important, what can be removed, and what’s missing.

The final deliverable: Set of a black and white wireframes

The crude format of the wireframe focuses the discussions on “what” and “why” should go in the layout instead of on “how” things should look like.

5. Implement base flows and interface in a working React app

Tools: React, Views

Implementation of the flows in a working app replaces fake prototyping in Figma. It prepares the design for the next phase.

Even though development is not as fast as prototyping yet, Views framework allows me to get working app off the ground pretty quickly. I can keep iterating going forward without throwing my prototyping work away.

In this phase, I start thinking about design system components, color pallet, typography. Still, I’m not aiming at a super high fidelity solution.

The final deliverable: An app with flows and sample data accessible online at test link or via Expo preview app.

Example of a functional prototype as a React app in an advanced stage (after few design iterations)

6. The never-ending cycle of iterations keeps looping

The kick off of the high fidelity design iterations can start as soon as the team approves the flows. Thanks to the immediate implementation as a working code, there is no cool down time. The prototype smoothly transforms into the final product.

Testing, measuring the delivery on the KPIs, and continuous refinement are the base of the process from now on.