Once we have our features framed it's time to start designing our solution. Two product people will often map out the frames together. Then one will lead out the exploratory phase of the design.

Before the exploratory design is completed we will pass the feature to another product person. This occurs somewhere between 50% - 80% completion. The other product person will then wrap up the exploratory design and create any new components required.

Sometimes the features are split down the middle and designed at the same time by two product people in the same file. Pairing and sharing the design works well for us. Involving two product people at the outset ensures the design is considered from multiple angles.

Below are the steps we take when designing a solution. We don't follow a strict pattern and often our process is messy in between, but we always end up at the same end point.

Make a prototype

Building prototypes in Figma is ridiculously easy.

Often building a quick prototype first is the best way to start for a feature that has a lot of interactions involved. It will help you uncover and solve the challenges quickly.

Even for a feature that isn't, having a prototype will clarify a lot for engineers, so we always build one at some point in Figma.

Finalise the views

We often start by composing a view. We love using Layout Grids, for these in Figma, it makes building adaptive designs so much easier. If we have existing components we will begin by dropping those, if we need to do something new we might just build something rough to start and turn it into a component at the end.

Flesh out the frames

Inside each frame we will showcase visual elements for that feature. These frames include annotations in a group. Grouping annotations makes them easy to hide when you just want to see the design.

Figure 19 A framed feature with annotations

Build the new components

One of our product folks prefers to build components from the outset of designing a feature, the other prefers to do it at the end.

Either way is fine. Before the feature gets passed on for asynchronous feedback, any new components will be created in the design system. And the rough designs will be replaced with components.

This ensures any future changes will be completely seamless across all our projects when we update a component in the design system.

Be predictable

It may seem over the top to have a structure described as explicitly as we have. Having each feature structured, described and designed in the same way has created a predictable way in which each feature will be developed regardless of which product people are working on it.