Gift Off

Multi-brand Design System

Role: Lead Product Designer
Year: 2024
Location: United Kingdom
Duration: 12 weeks

Contribution: Design Strategy, Product Design

Two smartphones display screens from Gift Off, a gifting platform’s e-commerce app, featuring a "Thanks for your order" confirmation and a Spotify Premium gift card option on a clean white background.

Challenge

Balancing consistency with flexibility to ensure that core components and principles remain unified across brands while allowing enough adaptability for each brand’s unique identity.

Opportunity

There were no shared components between brands despite most components having shared functionality.
Delivery took 20 days from design to production.
Frequent rework caused by inconsistent UI patterns.
High dependency on designers for pixel-perfect handoffs, slowing development.
Duplicate QA effort for similar features on both platforms.

Discovery process

I conducted stakeholder interviews with technology director (product owner), UX designer, developers, and project manager to uncover pain points and priorities.

I performed a detailed UI audit comparing components, styles, and interaction patterns across both brands.

After the development team decided on using React and Tailwind CSS with shadcn/ui components, I began exploring ways to integrate this stack into Figma to support a unified design system.

I identified that approximately 80% of components served identical functions but differed visually.

Atomic design diagram: five stages labelled Atoms, Molecules, Organisms, Templates and Pages, drawn as orange and black icons on a cream background.

Solution Exploration

Option A, one Figma file for Atoms, Molecules, and Organisms with a second layer per brand for Templates
Option B, one Figma file for Atoms and Molecules with a second layer per brand for Organisms

A dark reference sheet of Tailwind CSS design tokens: colour palettes in rows by hue, alongside border radius, box shadow, blur, backdrop blur and opacity scales, and max-width grid definitions.

Figma’s variables panel listing 438 theme tokens, with columns comparing the TailwindCSS, Rewardable and Gift Off values side by side, next to matrices of button component variants in purple, blue and red.

Decision Framework

After testing both options, we aligned on the approach that gave us the best balance of flexibility and maintainability.

Implementation

The transition from decision to execution was smooth because implementation had already started during testing.

Component sheets for fund cards and dashboard cards: GBP balance cards showing available and pending amounts, Deliveroo gift card tiles, the Rewardable sidebar navigation, and a six-step campaign progress list.

Gift Off storefront components: navigation bars, Stripe card payment rows, Amazon and birthday gift card tiles, a three-step Personalise, Payment and Confirmation indicator, an order card for a Spabreaks gift card, and a categories list.

Shipment

To improve design fidelity, I used Figma AI to create realistic UX copy rather than placeholder text, which helped provide clearer context for stakeholders and developers.

For more detailed and refined UX copy, I also utilised ChatGPT, enabling me to draft user-focused content efficiently.

I also leveraged Figma’s visual search feature to quickly locate matching components within the design system, ensuring consistency and reducing search time.

Additionally, I applied the batch rename layers function to keep files well organised and maintainable while building Templates and Pages, making it easier for the team to navigate and collaborate.

The Rewardable dashboard showing campaign statistics of 258 rewards sent, £38.33 average received and £9,804.80 spent, above a table of campaigns with Draft, Action required, Scheduled, Pending, Cancelled and Completed statuses.

The Gift Off storefront product page for a Spotify Premium gift card, with a one-month £10 option, buttons to purchase for yourself or as a gift, collapsible description sections, and a Trustpilot score of 4.1.

Outcome

A major outcome of the project was that it took half the time to ship similar features across brands compared to before the design system was implemented, improving rollout speed by 50%.

Impact

Back