Laying the foundation of a unified, scalable design system
Laying the foundation of a unified, scalable design system
Efficiency
Redundancy
Consistency
TL;DR
TL;DR
I led the delivery of Property Finder’s design system by merging two legacy systems into a unified system; Vista. The process spanned a 400+ component audit, platform-specific variable architecture, semantic tokens, component guidelines and new governance.
The goal: reduce duplication, speed hand-off and improve UX consistency.
Results: ~45% fewer duplicated components, ~30% faster design-dev handoff, clearer documentation and improved cross-team adoption across web, iOS and Android.
I led the delivery of Property Finder’s design system by merging two legacy systems into a unified system; Vista. The process spanned a 400+ component audit, platform-specific variable architecture, semantic tokens, component guidelines and new governance.
The goal: reduce duplication, speed hand-off and improve UX consistency.
Results: ~45% fewer duplicated components, ~30% faster design-dev handoff, clearer documentation and improved cross-team adoption across web, iOS and Android.
I led the delivery of Property Finder’s design system by merging two legacy systems into a unified system; Vista. The process spanned a 400+ component audit, platform-specific variable architecture, semantic tokens, component guidelines and new governance.
The goal: reduce duplication, speed hand-off and improve UX consistency.
Results: ~45% fewer duplicated components, ~30% faster design-dev handoff, clearer documentation and improved cross-team adoption across web, iOS and Android.
About Property Finder
About Property Finder
Property Finder is one of the leading PropTech platforms in the MENA region, helping 5.5 million monthly active users search, compare and connect with property listings across the UAE, KSA, Qatar, Bahrain, Egypt and Turkey.
Property Finder is one of the leading PropTech platforms in the MENA region, helping 5.5 million monthly active users search, compare and connect with property listings across the UAE, KSA, Qatar, Bahrain, Egypt and Turkey.
Role
Role
As the Design System Specialist, I collaborate with Designers and Engineers, integrating AI-assisted workflows, to lead the design and delivery of a scalable, token-driven design system for web, iOS and Android.
When I joined Property Finder as a Senior Product Designer, all designers were stretched thin, working to deliver squad work and move the design system along.
I took the opportunity to make an impact and pivot into an area that allowed me to embrace more of my strengths and what I enjoy; strategy, systematic thinking, perfecting the details and leadership.
As the Design System Specialist, I collaborate with Designers and Engineers, integrating AI-assisted workflows, to lead the design and delivery of a scalable, token-driven design system for web, iOS and Android.
When I joined Property Finder as a Senior Product Designer, all designers were stretched thin, working to deliver squad work and move the design system along.
I took the opportunity to make an impact and pivot into an area that allowed me to embrace more of my strengths and what I enjoy; strategy, systematic thinking, perfecting the details and leadership.
TOOLS
TOOLS
ChatGPT: Summarise patterns and run comparisons during audit, faster and more consistent design and code documentation.
Slack: Reduced feedback loops and improved async collaboration across design, product and engineering.
Jira (linked to Slack channels): Clear prioritisation, visibility and delivery tracking.
Figma: Single source of truth for components, tokens and platform variants.
FigmaMake: To create and demonstrate component interactions.
ChatGPT: Summarise patterns and run comparisons during audit, faster and more consistent design and code documentation.
Slack: Reduced feedback loops and improved async collaboration across design, product and engineering.
Jira (linked to Slack channels): Clear prioritisation, visibility and delivery tracking.
Figma: Single source of truth for components, tokens and platform variants.
FigmaMake: To create and demonstrate component interactions.
ChatGPT: Summarise patterns and run comparisons during audit, faster and more consistent design and code documentation.
Slack: Reduced feedback loops and improved async collaboration across design, product and engineering.
Jira (linked to Slack channels): Clear prioritisation, visibility and delivery tracking.
Figma: Single source of truth for components, tokens and platform variants.
FigmaMake: To create and demonstrate component interactions.
Challenge
Challenge
Property Finder’s design ecosystem was two legacy systems, Astra (B2C) and Harmony (B2B). Each system came with shared and individual pain points for designers, engineers and PMs, such as;
No single-source of truth for design patterns, components, icons or colours
52+ duplicated or obsolete components, styles and icons
Each platform solved the same UI problems in a different way
Inconsistent naming conventions
Designers and Engineers duplicating existing patterns and components
No documentation or guidelines
Outdated technologies and Figma features
This resulted in design and tech debt, slower delivery, inconsistent UI, a lack of governance and a system that couldn’t keep up with speed and scale the company was evolving at.
Property Finder’s design ecosystem was two legacy systems, Astra (B2C) and Harmony (B2B). Each system came with shared and individual pain points for designers, engineers and PMs, such as;
No single-source of truth for design patterns, components, icons or colours
52+ duplicated or obsolete components, styles and icons
Each platform solved the same UI problems in a different way
Inconsistent naming conventions
Designers and Engineers duplicating existing patterns and components
No documentation or guidelines
Outdated technologies and Figma features
This resulted in design and tech debt, slower delivery, inconsistent UI, a lack of governance and a system that couldn’t keep up with speed and scale the company was evolving at.
Goals
Goals
The vision was to unify the design language and bridge design and engineering workflows through one scalable system we named Vista*.
Key goals
Consolidate Astra and Harmony into a single, token-driven system
Create cross-platform consistency (web & app)
Create Figma variable libraries for colour, typography, spacing and iconography
Define a governance model for component creation and adoption
Improve handoff speed and reduce duplication
Success metrics (end of 2025)
Reduce component duplication and redundancy by 45%
Reduce design-to-dev handoff time by ~30%
Improve consistency across web, iOS and Android
The vision was to unify the design language and bridge design and engineering workflows through one scalable system we named Vista*.
Key goals
Consolidate Astra and Harmony into a single, token-driven system
Create cross-platform consistency (web & app)
Create Figma variable libraries for colour, typography, spacing and iconography
Define a governance model for component creation and adoption
Improve handoff speed and reduce duplication
Success metrics (end of 2025)
Reduce component duplication and redundancy by 45%
Reduce design-to-dev handoff time by ~30%
Improve consistency across web, iOS and Android
*A beautiful, expansive view — the moment of clarity you find when you reach the right place. Vista symbolises our users’ journey of discovery and our teams’ shared perspective on great design.
*A beautiful, expansive view — the moment of clarity you find when you reach the right place. Vista symbolises our users’ journey of discovery and our teams’ shared perspective on great design.
Approach
Approach
My experience in Product Design, delivering products across the UK, US and the MENA region, has taught me to make stakeholder alignment and localisation a key part of my process.
When communicating updates to different stakeholders, it’s important to translate value into their language.
My experience in Product Design, delivering products across the UK, US and the MENA region, has taught me to make stakeholder alignment and localisation a key part of my process.
When communicating updates to different stakeholders, it’s important to translate value into their language.
Design
Design
Guidelines
Patterns & tokens
Components
Guidelines
Patterns & tokens
Components
Product
Product
Metrics
Value
Delivery
Metrics
Value
Delivery
Engineering
Engineering
Code structure
Variables
Mapping
Code structure
Variables
Mapping
Process
Process
Delivering a design system is very similar to delivering a product, it requires research, testing, alignment and iterative delivery.
Audit
I ran an audit of the website, iOS and Android apps and Figma files. Analysing 400+ Figma components, styles and icons alongside code equivalents to highlight and summarise pain points.
I established and did a deep dive into engineering tools in order to compare and consolidate.
Delivering a design system is very similar to delivering a product, it requires research, testing, alignment and iterative delivery.
Audit
I ran an audit of the website, iOS and Android apps and Figma files. Analysing 400+ Figma components, styles and icons alongside code equivalents to highlight and summarise pain points.
I established and did a deep dive into engineering tools in order to compare and consolidate.
Alignment
I established visibility and relationships across Brand, Product and Engineering and built a core cross-functional squad.
I ran workshops the designers and engineers to understand processes and pain points.
I scheduled regular syncs for alignment and reviews to help standardise tokens, states, naming, guidelines and handoff.
A key challenge was balancing cross-platform consistency with native iOS and Android patterns. I defined which components could remain native (e.g. modals, bottom sheets, snackbars) and which should be standardised (e.g. bottom navigation, buttons, colours), helping design and engineering align on a clear, practical compromise.
Alignment
I established visibility and relationships across Brand, Product and Engineering and built a core cross-functional squad.
I ran workshops the designers and engineers to understand processes and pain points.
I scheduled regular syncs for alignment and reviews to help standardise tokens, states, naming, guidelines and handoff.
A key challenge was balancing cross-platform consistency with native iOS and Android patterns. I defined which components could remain native (e.g. modals, bottom sheets, snackbars) and which should be standardised (e.g. bottom navigation, buttons, colours), helping design and engineering align on a clear, practical compromise.
Build and documentation
When it came to foundations i.e. colours, I developed a multi-tier token structure (primitive → semantic → component).
For components, I utilised files gathered from the audit and a Slack channel created for alignment;
highlighting problems for what was existing,
understanding design, engineering and business considerations,
building, testing and reviewing,
documenting usage and accessibility guidelines on Zeroheight.
Iconography required a comprehensive library that covered core UI needs, as well as a large set of property-specific icons. Where gaps existed, I designed bespoke icons to maintain visual consistency across the system.
For iOS, I used the SF Symbols Generator to export icons, ensuring native behaviour and accessibility compliance.
Build and documentation
When it came to foundations i.e. colours, I developed a multi-tier token structure (primitive → semantic → component).
For components, I utilised files gathered from the audit and a Slack channel created for alignment;
highlighting problems for what was existing,
understanding design, engineering and business considerations,
building, testing and reviewing,
documenting usage and accessibility guidelines on Zeroheight.
Iconography required a comprehensive library that covered core UI needs, as well as a large set of property-specific icons. Where gaps existed, I designed bespoke icons to maintain visual consistency across the system.
For iOS, I used the SF Symbols Generator to export icons, ensuring native behaviour and accessibility compliance.
Governance
I planned and facilitated a workshop with Design and Product to establish our visual direction.
I used the outcomes to define our design principles and put together a shareable deck to keep everyone aligned.
I developed contribution process for adding or updating components, styles and icons.
Governance
I planned and facilitated a workshop with Design and Product to establish our visual direction.
I used the outcomes to define our design principles and put together a shareable deck to keep everyone aligned.
I developed contribution process for adding or updating components, styles and icons.
Let’s Collaborate
Let’s Collaborate
Get in touch if you have a project, questions or just want to chat.
Get in touch if you have a project, questions or just want to chat.
Copy email
Designed in Figma, built in Framer.
Designed in Figma, built in Framer.
Copyright 2025 Jayde-Olivia. All rights reserved.
Copyright 2025 Jayde-Olivia. All rights reserved.
Let’s Collaborate
Get in touch if you have a project, questions or just want to chat.
Copy email
Designed in Figma, built in Framer.
Copyright 2025 Jayde-Olivia. All rights reserved.