App Rebrand: Suplyd V1 → V2
The app had grown feature by feature for years with no shared visual language holding it together. Led the rebrand from the original Figma file to a new V2.0 system spanning mobile and web.
- My role
- Design & PM hybrid — design direction, spec ownership, rollout
- Team
- Product / Design (lead) · Mobile — React Native · Web — ReactJS
- Stack
- Figma · React Native · ReactJS · Design tokens
V1 → V2
Design system
New Figma library
Mobile + web
Surfaces updated
Single shared visual language
Phased
Rollout
By screen, not a single big-bang release
The Problem
The original app had been built out feature by feature over several years, each screen designed to solve its own problem without a shared system holding the whole thing together. Colours, spacing, type scale and component styling had all drifted independently — the app worked, but it didn't feel like one product.
That inconsistency showed up as friction: new features took longer to design because there was no reusable foundation, and the app read as dated next to newer competitors in the same space.
- No shared component library — every screen restyled from scratch
- Colour, spacing and type inconsistent across mobile and web
- Slower design turnaround for new features with nothing to reuse
- Visual identity that no longer matched where the brand was heading
The Architecture
Rather than restyle screens one by one, the rebrand started from a new Figma foundation — a V2.0 file built as a proper design system rather than a flat set of mockups — and every surface was migrated onto it.
- New design system in Figma: colour tokens, typography scale, spacing units and a reusable component library.
- Component-first approach — buttons, cards, inputs and navigation patterns defined once, then composed into screens.
- Mobile (React Native) and web (ReactJS) mapped to the same token set, so both surfaces read as one brand.
- Old and new component styles allowed to coexist during rollout, so migration didn't have to be a single big-bang release.
The Execution
The rollout moved screen by screen against the new Figma library, prioritising the highest-traffic flows first so the visual gap between old and new was closed where users would notice it most.
- Audited every existing screen against the new component library to flag what could be swapped directly versus what needed a redesign.
- Sequenced the migration by traffic and visibility — core flows first, edge-case screens last.
- Worked directly in Figma alongside engineering to keep the component library and the shipped implementation in sync.
- Kept the rebrand scoped to visual and component-level change — underlying flows and IA were left untouched unless a screen specifically needed it.
The Impact
The app now reads as one coherent product across mobile and web, and every new feature since has been designed against the V2.0 library instead of from a blank canvas.
- Single design system now governs both the mobile and web apps.
- New features design faster with a reusable component library instead of one-off styling.
- Visual identity brought in line with where the brand is positioned today.
Non-goals (scope discipline)
- Rebuilding information architecture or navigation — this was a visual and component-level rebrand, not a UX overhaul.
- Redesigning every screen from scratch — reused what already worked, restyled what didn't.
Source: Figma — Suplyd App (V1) and Suplyd V2.0 design files