CASE STUDY: DESIGN SYSTEM FOR A 0-1 PRODUCT
Building a Scalable Design System for PassPrivé
How I created the brand, design system and product foundations for Mauritius' next-generation lifestyle platform: through an evolving business model, shifting priorities and a market which is years behind in tech adoption.
Role
Lead Product Designer
Platform
Mobile (iOS & Android)
Team
1 Lead PD, 1 Jr PD,
3 Devs, PM, CEO
Status
Launched 2026
01
Understanding PassPrivé
PassPrivé is a membership-based lifestyle platform designed to help people across Mauritius discover, book and save at premium restaurants, wellness centres, retail stores and exclusive leisure experiences - all from a single application.
Going out in Mauritius is deeply fragmented. Currently, users search across social media channels, Google, WhatsApp catalogs, and static directories just to find a venue, verify if it is open, make a reservation, or access an offer.
PassPrivé unifies the discovery, bookings, payments, rewards, and memberships cycle into one platform. For users, it provides curated, premium island exploration and seamless transactional ease. For merchants, it opens direct lines of customer engagement, loyalty integrations, and rich data-driven exposure.
BUSINESS MODEL
Two-sided marketplace: Users purchase recurring memberships to unlock cashbacks and curated benefits. Merchants subscribe for high-intent visibility, robust reservation systems, and payments.
WHAT MAKES IT DIFFERENT?
Rather than focusing on one vertical, PassPrivé combines dining, shopping and wellness today - and is designed to scale into hotels, flights, tourism, healthcare and categories that haven't been imagined yet. The core belief is to unlock going out - which could eventually mean flight bookings, hotel reservations, tourist-specific features, and building the entire app experience for visitors to Mauritius. Knowing this future scope from the start directly influenced every design system decision.
02
The Merchant Ecosystem
Understanding the merchant model was critical to designing a product system that could flex across different business relationships. Not every merchant had the same operational capabilities or the same contract with PassPrivé: the UI needed to reflect this variability without confusing everyday users.
All merchants were discoverable, even those who hadn't joined the formal network. Because PassPrivé is fundamentally an exploration tool, the platform scrapes verified public listing data to ensure comprehensive local coverage. The more useful the directory, the stronger the membership conversion.
01. Discovery Only
Free and scraped merchant directories. Fully searchable on the platform for users to find location, hours, and catalog, but lacking any in-app booking or cashback options. This acts as our comprehensive discovery baseline.
02. Discovery + Booking
Partners paying for specialized in-app reservation features. Users discover venues and book tables, wellness slots, or appointments either instantly or via manual request validation, dictated by the merchant's workflow.
03. Discovery + Booking + Pay Bill
The fully integrated partner tier. Users discover, make reservations, and complete bill settlement directly through our digital terminal integration. This is the exclusive engine that powers our core instant cashback mechanics.
04. Booking + Pay Bill
Functional operations-first merchants. These partners opt out of the discovery marketing layer entirely, using the PassPrivé tech stack purely as an back-office operational tool to manage schedules and split receipts.
Initially, we designed these as rigid, formal pricing plans with locked cap-abilities. Over time, we learned that the local market needed a more organic relationship—merchants paid strictly for what they could afford and activated only the modules they needed. Consequently, our design system had to evolve dynamically: showing or hiding call-to-actions, transaction inputs, and status badges depending on the real-time capability matrix supported by each partner.
Booking Flexibility
Reservations could be instant or request-based, dictated solely by the merchant's legacy operations. Our challenge was ensuring the UI communicated this distinction at the first interaction, preventing user frustration over wait times.
03
Membership Tiers & the Cashback Engine
The core engine of PassPrivé's commercial model relies on tier-based subscriptions. Three tiers unlock increasingly better reward percentages. However, calculating the actual cashback returned to a user depends on both their personal tier level and the merchant's individual transaction cap parameters.
Tier 01
Privé Free
0.5% cashback
The essential entry point. Users receive basic, low-cap cashback at participating partner merchants, introducing them to our ecosystem cycle.
Tier 02
Privé Plus
1.5% cashback
The main Sweet Spot. Delivers 3× more cashback than the free baseline, making it the perfect membership tier for regular diners and local professionals.
Tier 03
Privé Black
3.0% cashback
The ultimate high-tier status. Unlocks a massive 6× multiplier over the free model, crafted carefully for power users, families, and high-spend island visitors.
THE CASHBACK CALCULATOR LOGIC
LOGICAL CALCULATION
Cashback = Min(User Tier %, Merchant Max)
For example, a Privé Black user (3%) transacting at a partner venue that caps its allowed rewards at 1.5% will earn 1.5% back. Conversely, a Privé Free user (0.5%) transacting at a venue permitting 3% caps out at their tier ceiling of 0.5%. Higher tier plans fundamentally guarantee access to whatever high reward thresholds are available.
The 3× and 6× multiplier framing became our most powerful conversion lever. Rather than advertising flat numbers like 1.5% and 3.0%, our copy compared plans directly to Free: "upgrade to earn 3× more cashback." This simple shift dramatically influenced our upgrade triggers, paywall sheets, and post-transaction feedback modules.
The Design Challenge
Translating this two-variable mathematical reward engine into an effortless, friction-free customer UI was one of our hardest UX problems. Users needed to clearly understand exactly what they would earn, why the amount differed across merchants, and why purchasing an upgrade was highly lucrative—all without making the exploration catalog feel like a dry financial spreadsheet.
04
My Role & Responsibilities
I joined the team as the lead designer, stepping in at a turning point when the core platform architecture was being completely reimagined from the ground up. I took full end-to-end ownership of rebuilding the customer-facing interface—from core brand identity and custom logo marks to the foundational design system patterns, end-to-end UX flow mappings, and detailed engineer reviews.
Product Strategy
Brand Strategy
Logo Redesign
Design System Architecture
UX Flow Mapping
UI Design System
User Research & Auditing
Design Leadership
Engineering Handoff & Review
Designing the system from scratch
No off-the-shelf kit or generic Material template could accommodate the product's unique merchant capability matrix, tiered cashback logic, and multi-vertical category system. Every component, layout token, interaction pattern, and icon was purpose-built — designed, stress-tested, and documented specifically for PassPrivé's evolving ecosystem.
05
Navigating a Product in Definition
PassPrivé wasn't a product defined by static, rigid specifications. The business model was constantly evolving, fresh verticals were actively being explored, and prioritizations shifted week-to-week. My job wasn't just to produce screens—it was to build product-agnostic structural foundations capable of absorbing pivot points seamlessly.
WHAT WAS PLANNED
Heavy luxury dark theme
The founders wanted a strictly dark luxury aesthetic. Previous designers had explored this concept exclusively, believing a deep color space naturally implied exclusivity, resort hospitality, and late-night culinary dining.
WHAT I RECOMMENDED
High-accessibility light theme
Through research with Mauritian locals and expats, I identified that the market is roughly eight years behind in tech adoption. Users preferred airy light environments for everyday utility. Light spaces scaled better beyond nightlife into wellness and daily shopping.
* Strategic Takeaway: This transition wasn't a simple aesthetic swap—it was a logical, research-backed system choice optimized for user comfort.
Decisions that got scrapped along the way
01. ABANDONED
The Dark Theme
Explored extensively in early MVP phases. Dropped post-audits after users indicated outdoor readability was difficult and them being used to light theme (also understood early on that they are 6-7 years behind technically)
02. REPLACED
Inter as primary brand font
Initial layouts relied on Inter. We found it lacked editorial personality for a friendly & premium lifestyle identity, prompting a pivot to DM Sans for UI text.
03. SWAPPED
Blue as primary brand color
Blue was initially planned for its safety in fintech payments . We swapped to warm orange tones to deliver disruptive, energetic brand visibility, a colour not owned by any brand in Mauritius yet. We used the blue as a secondary colour instead.
Pushback & Collaboration
When stakeholders asked to "make elements pop", I advocated for content focus with practical, highly detailed wireframe prototypes—showing why deliberate layout whitespace keeps a product feeling premium. But active listening was bidirectional: our finest decisions came from collaborative iterations rather than stubborn singular alignment. We created dynamic, modular components designed specifically to satisfy unfinalized business scopes.
Midway through the project, it became clear PassPrivé would expand well beyond dining — into hotels, flights, tourism, and categories we hadn't anticipated. That shift is exactly why the direction moved from a dark luxury theme to a light, accessible one: to serve the broader Mauritian market sustainably and scale across verticals without locking the product into a single aesthetic. This realization reshaped how we structured merchant capabilities, booking flows, and the cashback engine — building patterns that were category-agnostic by necessity, not by plan.
06
Before the Design System
The product already had backend infrastructure, a working prototype and an early UI focused on restaurant discovery with a dark visual direction intended to communicate luxury.
What wasn't working
The business had expanded beyond discovery into bookings, memberships, rewards and additional merchant categories but the product foundations hadn't evolved.
The interface lacked consistency across screens with redundant colors, varied card layouts, and fragmented navigational paradigms.
Interaction patterns were solved differently in different places - sometimes requiring three taps for what could be done in one.
No shared visual language existed for designers or developers, stalling feature velocity and causing friction at handoff.
The existing UI wasn't effectively communicating the product's high-tier quality to potential investors or early power users.
WHY CREATE A DESIGN SYSTEM?
Reusable Foundations
Designing feature-by-feature meant solving the same problems repeatedly. With scope expanding rapidly, the team needed reusable foundations. Without them, every new feature meant reinventing core patterns.
WHAT IF WE HADN'T?
Fragmented UX
Increasing inconsistency as new categories launched. One-off solutions from designers, more engineering effort, and progressively harder to maintain a cohesive user experience across the platform.
UI Audit & Friction Mapping
Fragmented Discovery Layout
One-size-fits-all product feeds made it extremely difficult to showcase premium partners or introduce diverse lifestyle categories.
Rigid Navigation Architecture
A hardcoded bottom bar restricted navigation expansion, limiting the effortless rollout of hotel bookings or system bill payments.
Obscured Wallet & Cashback
Users struggled to track active savings. Cumulative cashback and reward visibility were hidden deep within nested menu settings.
Fragmented Discovery Layout
One-size-fits-all product feeds made it extremely difficult to showcase premium partners or introduce diverse lifestyle categories.
Rigid Navigation Architecture
A hardcoded bottom bar restricted navigation expansion, limiting the effortless rollout of hotel bookings or system bill payments.
Obscured Wallet & Cashback
Users struggled to track active savings. Cumulative cashback and reward visibility were hidden deep within nested menu settings.
Structure
Discovery-Centric Navigation
The app assumed users always knew what they wanted, completely ignoring impulse subscription actions.
Weak Content Hierarchy
Lack of visual distinction between sponsored premium merchants and generic localized discounts.
Experience
Invisible Cashback System
No immediate feedback loops indicating how much user spent, saved, or accumlated during transactions.
Vague Membership Value
Users couldn't quickly tell if their paid subscription was active or what specific tiers they qualified for.
Scalability
Category Dead-Ends
The backend could not easily handle expansion into hospitality, system booking, or merchant monetization.
Inconsistent Component Patterns
Fragmented UI systems created massive engineering overhead and user friction.
07
Defining What PassPrivé Should Feel Like
Before touching colours, components or layouts, I aligned with the founders on product character. Not branding - product experience.
THE PRODUCT SHOULD FEEL...
Trustworthy and robust in every payment transaction
Friendly and approachable to Mauritian locals & expats
Energetic and forward-looking lifestyle driver
Helpful discovery hub that provides instant utility
Rewarding at every milestone and transactional tap
Premium and high-quality without being exclusive
IT SHOULD NEVER FEEL LIKE...
A cheap coupon or discount catalog layout
Corporate, cold, or transactional
Visually cluttered or overly dense with metadata
Difficult, confusing, or legacy in its interaction
Intimidating luxury that pushes everyday users away
Overusing style at the direct expense of accessibility
Founder Alignment
The founders wanted PassPrivé to own a distinctive brand colour and build a scalable visual system rather than relying on common luxury aesthetics. This became a north star for every subsequent design decision.
06b
The Chicken & the Egg
Here's the thing nobody tells you about building a design system: you can't design a system without knowing what your product actually looks like, but you can't design a consistent product without a system. It's a classic chicken-and-egg problem, and there's no clean answer — just a messy, iterative one.
I spent time studying how others navigated this. Zomato's Sushi design system was a huge reference — how they scaled across multiple product verticals while keeping things cohesive. I also looked at how Airbnb, Uber, and Shopify evolved their systems alongside their products, not ahead of them. The takeaway was clear: don't try to build the perfect system upfront. Start with real screens, let the patterns emerge, and codify what survives.
THE PROCESS
01. Design the Core Screens
Started with the flows that touched the most surface area — home feed, merchant discovery, detail pages, booking, payments, and membership. These screens forced decisions on every component category at once.
02. Extract Tokens & Primitives
Pulled the recurring patterns out of those screens — colors that kept showing up, spacing that felt right, type pairings that worked — and turned them into reusable tokens and primitives.
03. Trial & Error
Applied the emerging tokens back to the screens and watched what broke. Some patterns held across contexts, others fell apart in edge cases. Rebuilt, retested, iterated until things stuck.
04. Finalize the Screens
Locked the core screens with the proven components and tokens. These became the source of truth — the designs the system was derived from, not the other way around.
05. Derive the Visual Language
With finalized screens in hand, the broader visual identity crystallized — the full color system, type hierarchy, spacing scale, iconography style, and illustration rules all fell into place.
06. Build the Design System
Codified everything into a documented, scalable atomic system — foundations, components, patterns, and templates — ready for the team and engineered for growth.
07
Creating consistency across a growing ecosystem
Atoms
Molecules
Organisms
Templates
Privé
Menu
Reserve
Pages / Screens
FOUNDATIONS
Text Styles
Colors
Icons
Shadow
Border
COMPONENTS
Buttons
Input Box
Search Box
Menu
PATTERNS
Navbar
Rating Widgets
Cards
TEMPLATES
Skeleton of a screen
Page Layout
Modal Skeleton
FEATURES
Booking Modules
Wallet Sheets
Membership Tiers
APP
Finished Screen
Interactive Page
Live Prototype
I researched many other design systems and the very base to our systematic approach was the creating of atoms first. We initially did this with few main screens: homepage, dining detail page, dining pay bill, profile - and made multiple iterations to then finalise our atoms, use it to make molecules, so on and so forth.
08
Four Principles That Guided Everything
Instead of visual-style principles, I created principles tied to product decisions - applicable whether designing onboarding, merchant discovery, rewards or memberships.
Clarity Over Complexity
Every screen immediately understandable. Zero cognitive load. Information presented progressively as users move through transactional loops.
Reward the Journey
Members feel valued at every touchpoint through automatic perks, clear feedback on savings, and micro-delights embedded in navigation.
Flexible by Design
Built to scale seamlessly into tourism, lodging, and experiential categories that don't exist yet, without requiring menu changes.
Unified Experience
One common design language unifying the mobile app, web platforms, physical member cards, and backend merchant tooling.
09
Reworking the Identity
PassPrivé had a logo centred on a ticket/pass concept. It described what the product used to be, not what it was becoming. Over two rounds, I explored roughly twenty directions across themes: ticket/pass, unlocking experiences, adventure, discovery, play, movement, the letter P, and membership.
Logo Mark Ideation & Explorations (Selection)
PassPrivé
Concept 1
PassPrivé
Concept 2
PassPrivé
Concept 3
Pass
privé
Concept 4
PassPrivé
Concept 5
Pass
privé
Concept 6
passprivé
Concept 7
Pass
privé
Concept 8
passprivé
Concept 9
passprivé
Concept 10
passprivé
Concept 11
Passprivé
Concept 12
Why these didn't work
Ticket / Pass motif
Too literal. Locked the brand to a single product feature that the business had already outgrown.
Abstract P lettermark
Felt generic. Could belong to any tech startup. No emotional connection to experiences or Mauritius.
Map pin / Location
Overused in travel and food apps. Wouldn't differentiate PassPrivé in the market.
Crown / Luxury symbol
Reinforced exclusivity over accessibility. Contradicted the product direction of being approachable and human.
Dining / Fork and knife
Too category-specific. Would need replacing as soon as wellness, shopping or hotels launched.
The Final Logo
Pass
privé
Pass
privé
The final mark combines a keyhole and hot-air balloon silhouette into a distinctive P. The keyhole represents access to premium experiences and exclusive member benefits - “unlocking” going out. The balloon represents exploration and discovering more of Mauritius. Together they create a symbol broader than just a pass for discovery - allowing the brand to grow into new categories without reinventing itself.
10
Building a Colour System Around Ownership
Most lifestyle products compete for the same visual territory - blue for trust, black for luxury, green for savings.
Why Orange?
Orange captures energy, exploration and the excitement of going out. It gave PassPrivé a distinctive, instantly recognizable identity within the Mauritian market. The founders wanted something ownable rather than safe.
Orange
#0044FF
Trust & utility navigation
Coral
#FF7640
Hospitality, warm accents
Blue
#FF7640
Hospitality, warm accents
Charcoal
#181719
Structure, functional UI usage
Green
#3AA456
Cashback, savings, rewards
Yellow
#FFC53D
Offers, discovery highlight
Light Blue
#26E0F4
Soft energy
Coral
#FF7640
Hospitality, warm accents
02 — Colour System
PRIMARY BRAND
Primary
#FF4800
White
#FFFFFF
SECONDARY BRAND
Secondary
#0044FF
ACCENTS & UTILITIES
Accent Green
#3AA456
Accent Blue
#00DBF2
White
#FFFFFF
Accent Yellow
#FFC53D
Charcoal Grey
#585656
* Design Core: Every shade has complete, scalable color ramps mapped to design variables. Includes high-contrast semantic variants for Success, Warning, Error, and Information that are WCAG AA accessibility-tested.
11
Typography
DM Sans
Primary Sans
Aa
Selected for readability across dense product interfaces, broad language support and an approachable, modern personality. Inter was tested first but lacked enough warmth for a lifestyle brand.
Libre Baskerville
Secondary Serif
Aa
Used selectively and exclusively in italics for campaign headers, premium merchant collections, and marketing spotlights - providing editorial character without compromising UI usability.
* Scale Logic: Complete typography scale defined as shared design tokens. Adaptive responsive rules built into mobile, tablet, and desktop viewport styles.
01 — TYPOGRAPHY
Aa
DM Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 (!@#$&*)
TOKEN
SPECIFICATION
SAMPLE
display
48px Bold
Creative Agency
H1
32px Bold
Case Studies
H2
28px SemiBold
Visual Identity
H3
24px SemiBold
Brand Guidelines
H4
20px SemiBold
System Architecture
Body
16px Regular
Minimal layouts built on dynamic structures.
Caption
12px Regular
FIGURE 4.2 — COLOR DISTRIBUTION MATRIX
Overline
10px Medium
01 / ARCHITECTURE
12
Foundations & Design Tokens
Every spacing value, colour token and radius needed a clear purpose - reducing design decisions and creating a fast path for product engineering.
Spacing Tokens
Built on an 8pt layout grid (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px) to guarantee strict alignment.
Elevation & Shadows
Interaction-driven system with four elevation layers (resting, hover, modal, and drawer overlays).
Bespoke Iconography
Custom icon library designed inside a pixel-aligned 24px bounding box to support brand categories.
Radius Options
Three specific corners: 12px for standard lists, 16px for interactive cards, and 18px for bottom sheets.
Responsive Grid
Dynamic 4-column layout on mobile, 8 on tablet, and 12 on desktop with consistent padding structures.
Illustration & Photo Rules
Friendly flat illustrations paired with real aspirational photography capturing Mauritius' light.
13
The Component Library
Every component was designed with variant logic to handle the product's shifting capabilities - a merchant card that adapts based on whether booking, cashback, or both are available. The library covered the full surface:
Buttons
Inputs
Navigation
Merchant Cards
Membership Cards
Bottom Sheets
Modals
Badges
Rewards
Lists
Chips
Search
Empty States
Toasts
Banners
Booking Modules
Payment Terminals
User Profile
Key components
A selection of rendered UI elements demonstrating the system's visual language and interaction patterns.
Product Patterns
Beyond individual components, certain patterns emerged that were unique to PassPrivé — complex compositions that required their own design logic.
Merchant Cards - the hardest component
The most iterated component. It needed to handle diverse merchant capabilities - some with booking, some with cashback, some with both, and some with neither. Different merchant types had to communicate varying operational information while maintaining a cohesive look.
Membership Surfaces
Benefits are surfaced throughout the experience, not just in a profile screen. Rewards, savings, cashback calculations, and upgrade prompts appear contextually in transactional flows. The 3× and 6× multiplier messaging is baked directly into paywall sheets and upgrade prompts.
Upgrade Prompt Sheet
Instant Cashback Success Notification
Active Tier Savings Overview
Standardised Journeys Mapped
Merchant Discovery
Search & Filters
Category Browsing
Membership Purchase
Merchant Details
Table Booking (Instant)
Table Booking (Request)
Rewards Tracking
Cashback Wallet
Bill Settlement
User Profile
Location Selector
14
Bridging Design & Engineering
Engineering Collaboration
Worked closely with four engineers across frontend and backend. The design system became the shared, single reference. Handoff through Figma used shared components, variables and implementation-ready specs. Discussions focused on behaviour and edge cases, not visual inconsistencies.
Team & Leadership
Led all customer-facing design work. Reviewed junior designer output. Worked with founders on roadmap and feature definition. Design decisions discussed collaboratively - product goals, technical constraints and UX considered before implementation.
Design tokens — including colors, typography, opacity, spacing, sizing, and shadows — were defined as variables directly in Figma, then exported in standardized W3C JSON format. From there, GitHub Actions automated the build pipeline, triggering Style Dictionary to transform tokens into platform-specific outputs for Web (Tailwind CSS), iOS (SwiftUI), and Android (Jetpack Compose). This end-to-end pipeline kept design decisions and code implementation in sync across all three platforms, reducing handoff friction and eliminating visual inconsistencies between frontend and mobile implementations.
Source Foundations
DESIGN TOKENS
Colors
Typography
Opacity
Spacing
Sizing
Shadow
01
Figma Variables
Tokens defined & synced via plugin
02
JSON Format
Standardized W3C token output
03
GitHub Actions
Webhooks trigger automated build
04
Style Dictionary
Transforms tokens per platform
Web / Tailwind
Tailwind CSS .json
iOS / Swift
SwiftUI Color .swift
Android / XML
Jetpack Compose .xml
Global design system specifications with code variables alignment shared across design and engineering teams.
15
Impact
By launch, the system had become the foundation for every customer-facing experience. It supported merchant discovery, memberships, rewards, bookings and future expansion without requiring new visual frameworks. What started as a design system became the shared language between product, brand and engineering.
260+
Reusable Components
310+
Product Screens
1.4 months
Shipped entire product redesign from old to new
3.5x
Faster Design Execution
A Personal Reflection
What I'm most proud of is that the system kept up with a business that was still figuring itself out - and that the team and investors felt the transformation even before its launch. The founder and engineers kept saying the product had been completely transformed and they’re getting positive feedback from investors regarding the product . That felt good.