Three platforms. Three blank canvases. One repeated method.
Metaboly, Baxta, Stashrun - three different products, three different industries (health, social/marketplace, gamified philanthropy), all built without an existing (or usable) design system, brand, or pattern library to inherit. Each one I went back to the drawingboard, started by going back to what we were solving and for who, then built the system and language that made made sense for them.
The method: flows, then tone, then components.
Once I've got clarity on personas and problems, the first design step for me is tone and mood. How should it feel? Clinical? Warm? Expert? Approachable? This is the answer that everything else hangs off (type, colour, motion, copy) When that's aligned then the fun of building can commence.
In order I typically build these out starting with:
- 1 · Flows: What jobs is this product doing? In what order? With what hand-offs to people, other systems, or future versions of itself?
- 2 · Hero screens: What screens are core to the journey, defining and designing them first will inform the rest of the design system and flows.
- 3 · Components: Now we can build the system. Only the components the flows need. Nothing speculative.
What I actually decided at each one
Metaboly a clinical product that needed to feel like a coach, not a chart. I picked a humanist sans and a saturated purple to push against the medical-blue default. I built the program-builder around adherence (the unsolved problem) rather than around the EP's existing workflow (the over-served problem).
Baxta a pet marketplace pretending to be a social app. I pivoted it back. I defined the listing component as the atom of the system. I moved it away from somewhat of a Facebook clone for niche audience, to something with it's own charachter, addessing a problem rather than a whim. The pivot is mentioned in Show-Us 03.
Stashrun, gamified philanthropy. The system had to feel playful without trivialising the cause. I picked motion as the carrier, kinetic typography, particle reveals, post-game stash animations, interactive onboarding and explainer animations because motion communicates fun and playable faster than colour or copy.