linkedin Get in touch
← All case studies

Laying the foundation of a unified, scalable design system

company
Property Finder: one of MENA’s leading PropTech platforms serving 5.5M monthly active users across UAE, KSA, Qatar, Bahrain, Egypt and Turkey.
role
Design System Specialist, collaborating with designers and engineers to lead design and delivery of a scalable, token-driven system for web, iOS and Android.
Timeline
Jul - Dec 2025
45% less component duplication 30% faster design-to-dev handoff 39% increase in cross-team adoption
Image placeholder: screenshot to be supplied

Problem

Property Finder operated two legacy design systems (Astra for B2C, Harmony for B2B) with significant fragmentation: no single source of truth for patterns, components, icons or colours, 52+ duplicated or obsolete components/styles/icons, inconsistent solutions across platforms for identical UI problems, inconsistent naming conventions, teams duplicating existing patterns, no documentation or guidelines, outdated tech and Figma features. This created design and tech debt, slower delivery, UI inconsistency, poor governance and an inability to scale.

Goals

Unify design language and bridge design–engineering workflows through one token-driven system named Vista. Consolidate Astra and Harmony, establish cross-platform consistency, create Figma variable libraries for color, typography, spacing, iconography, define a governance model, improve handoff speed and reduce duplication.

Success metrics targeted by end of 2025: reduce component duplication by 45%, reduce design-to-dev handoff time by ~30%, improve consistency across web, iOS, Android.

Process

  1. Audit

    Analysed 400+ Figma components, styles and icons alongside code equivalents, deep-dived engineering tools for comparison/consolidation, identified pain points across website, iOS and Android.

  2. Alignment

    Built visibility and relationships across Brand, Product, and Engineering, built a core cross-functional squad, ran workshops to understand processes, scheduled regular syncs for standardising tokens, states, naming, guidelines and handoff, balanced cross-platform consistency with native platform patterns.

  3. Build and documentation

    Developed a multi-tier token structure (primitive → semantic → component), used audit files and a Slack channel for component alignment, built, tested and reviewed components, documented usage and accessibility guidelines on Zeroheight, created a comprehensive icon library (core UI + property-specific), using SF Symbols Generator for iOS icon exports.

  4. Governance

    Ran a workshop with Design and Product to set visual direction and design principles, developed a contribution process for adding/updating components, styles and icons.

Key decisions

  • Platform-specific approach: modals, bottom sheets and snackbars stayed native, while buttons, colours and bottom navigation were standardised.
  • Multi-tier token architecture
  • Stakeholder-specific communication across Design/Product/Engineering
  • Comprehensive iconography including bespoke icons where gaps existed

Results

  • ~45% fewer duplicated components
  • ~30% faster design-to-dev handoff
  • clearer documentation
  • improved cross-team adoption across web, iOS, and Android

Tools

  • ChatGPT (pattern summarisation, audit comparisons, documentation)
  • Slack, Jira (reduced feedback loops and improved async collaboration)
  • Figma (source of truth)
  • Figma Make (component interaction demos)
  • Zeroheight (documentation)
  • SF Symbols Generator

Want results like this for your team? Let's talk.

Email design@jaydeolivia.com