Six steps of the design process with arrows linking them all in one flow

Design === Engineering => Process

My design process after eight years of testing in the production pipeline

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 😉

Getting the right ideas:

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

Getting the ideas right:

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

1. Start from the design thinking sessions with stakeholders

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

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

3. Define flows

  • from accessing a list to a download of a report

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

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

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.

I make creative tools for the next generations of product engineers. Co-founder at Views Tools. Full Stack Designer at Greyfinch. https://views.tools/