Inconsistent uses of colours, components and design patterns
Some of the screens, powered by HIVE
Start where you are. Invite others in. Build with care.
Long ago, a snail imagined designing a brand-new shell from scratch. Sleek, perfectly smooth,
easy to carve from marble. But in the wild, shells are rarely built that way. They grow layer by
layer, repairing cracks, thickening over time, adapting to predators, damp climates, or rough terrain. This evolutionary tinkering is nature's way of upgrading existing structures rather than
starting fresh. Every layer of shell carries both heritage and adaptation - strengthening what's essential while responding to new challenges.
When designers consider rewiring a legacy system entirely, they risk discarding valuable "DNA"—usability insights, edge-case handling, and real-world adjustments built over time. By
choosing evolutionary tinkering, we honor context and empower growth without breaking what already works.
A Short Story: The Shell and the Home - Why We Evolve, Not Rebuild
PropertyGuru is Southeast Asia's largest real estate marketplace. I'm responsible for building a resilient design system that supports Singapore, Malaysia, Vietnam, and Thailand. I've already built an award-winning design system (Asphalt)for Gojek, but this adventure brought new learnings and a different kind of impact. This is a behind-the-scenes look at how we rebuilt HIVE, our design system, thoughtfully—brick by brick. I'm sure it's valuable reading for young designers curious about design systems, engineers building scalable UI, and leaders investing in product excellence.
What is HIVE?
"The whole is greater than the sum of its parts." - Aristotle
Each piece of HIVE is like a brick: solid, intentional, and essential. Just as bricks form the foundation of real homes, HIVE's building blocks support everything we design and build across our digital experiences.
HIVE is PropertyGuru's design system. But it's more than a library of components or a set of rules. It's a shared foundation we're building together. PropertyGuru DocumentationWe think of it like a beehive - a place where designers, engineers, and teams collaborate with purpose.
The HIVE logo, representing the beehive structure as well as elements of Real estate
We're proud of how far HIVE has come, but we know the work isn't done. And that's exactly how it should be. A design system isn't a project with an end date. It's a living ecosystem. A shared language. A
foundation we can keep strengthening—together, brick by brick. To the young designers curious about systems, to the engineers architecting for scale, and to the leaders who create space for long-term thinking:
We're proud of how far HIVE has come, but we know the work isn't done. And that's exactly how it should be. A design system isn't a project with an end date. It's a living ecosystem. A shared language. A foundation we can keep strengthening—together, brick by brick. To the young designers curious about systems, to the engineers architecting for scale, and to the leaders who create space for long-term thinking:
Still building, still learning
Still building, still learning
Start where you are. Invite others in. Build with care.
Because the strongest systems aren't just about aesthetics—they're about bringing design to life where 4 million people use it daily. It's not about what you build, but how you build it.
Culture is the real system
You can't build great tools without a team that trusts each other and feels empowered to
contribute.
Key Takeaways
Start small, grow steadily
Evolution builds trust. Big bang launches often don't.
Measure and share impact
Data helps everyone see the value of change—especially leadership.
Respect what came before
Every component in our old system solved a real problem. We built HIVE by standing on their shoulders.
We knew that any change, no matter how positive, would take time. So we took a gradual approach:
Let old and new systems run in parallel
Supported teams with training and resources
Made space for questions, feedback, and experimentation
Provided weekly updates to all engineers and designers
And it worked:
HIVE adoption grew from 15% to 68% in 6 months
Mockup time dropped by 35%
Custom CSS shrank by 30%
We saw 60% fewer revision cycles thanks to aligned components
Change is hard (& it takes time )
We believe every great system starts with great design. The design team rolled up our sleeves in Figma—organizing, naming, simplifying, and reconnecting.
We made components easier to find
We cleaned up unnecessary variations
We mapped relationships across 600+ design files
Most importantly, we made it easier for any designer to jump in and start creating
It was audit, redesign, and getting buy-in from engineering at every step. You could call it a reboot of how we collaborate. We faced some uphill challenges, but it was worth the effort. I personally had to run many grooming sessions to ensure components were used correctly and that documentation for each component was thorough enough for engineering counterparts to drag and drop from Storybook directly.
We currently host our documentation on Confluence and Storybook
Figma: Where the Rebuild Began
Our engineers had been building with care but often improvising to fill gaps. We all know the challenges of building for business outcomes while striving for performance. But both engineering and design teams understood the long-term impact of continuing down this path. So we:
Aligned frameworks for better interoperability
Reduced duplication and focused on component quality
Created shared patterns for faster, more confident collaboration
Built modular systems that could grow with us—like adding new rooms to a strong foundation
After all our agreements and disagreements, we aligned. We presented our plan to leadership with a
big caveat:
"For some time, PropertyGuru will look broken (about 6 months) with new and old components on the
same page. It's the tradeoff of going brick by brick. Are we ready?"
The product and leadership teams agreed. It was the biggest win we could achieve. We weren't fixing broken things—we were refining and evolving what existed into something more cohesive, modern, and accessible.
Some of the new components, being used with older UI
The Engineering side of the story
HIVE is PropertyGuru's design system. But it's more than a library of components or a set of rules. It's a shared foundation we're building together. PropertyGuru DocumentationWe think of it like a beehive - a place where designers, engineers, and teams collaborate with purpose.
Each piece of HIVE is like a brick: solid, intentional, and essential. Just as bricks form the foundation of real homes, HIVE's building blocks support everything we design and build across our digital experiences.
"The whole is greater than the sum of its parts." - Aristotle
Why we built it
We're here to solve real challenges. A few key concerns we needed to address:
Bringing consistency to our evolving suite of products and features for agents and consumers—whether it's the agent-facing MarketWatch, new listing creation flow, or upgrading our consumer-facing
listing details page
Helping designers and engineers work better together
Reducing rework and duplication across geographies
Creating experiences that feel cohesive, familiar, and trusted for our users
When teams don't need to start from scratch every time, they can focus on what really matters:
solving problems and delivering value. With our ambitious goal of empowering agents and helping
consumers make informed decisions, HIVE is an important cog in the wheel.
Looking back before building forward
Over the years, as our products expanded, our original system started showing signs of wear. Different teams made different choices. Components evolved in silos due to multiple geographical demands. Language and currency presented key challenges that demanded extra attention. What started as a clean structure became a patchwork.
Think of it like a home that kept getting extensions—each one practical, but not always aligned.
So we took a step back. Not to tear everything down, but to rebuild it thoughtfully, brick by
brick.
What we discovered (some embarrassing stuff)
During our deep dive into the system, we found:
47 spacing values (a few too many!)
A single button that had become 8 different buttons
13 beautiful components quietly sitting in Figma, underused
Color palettes that varied just enough to feel... off
These weren't problems—they were design opportunities. Every inconsistency pointed to a chance to
simplify, connect, and elevate.
Some of the screens, powered by HIVE
Inconsistent uses of colours, components and design patterns
Storybook structure on the engineering end
What is HIVE?
Long ago, a snail imagined designing a brand-new shell from scratch. Sleek, perfectly smooth,
easy to carve from marble. But in the wild, shells are rarely built that way. They grow layer by
layer, repairing cracks, thickening over time, adapting to predators, damp climates, or rough terrain. This evolutionary tinkering is nature's way of upgrading existing structures rather than
starting fresh. Every layer of shell carries both heritage and adaptation - strengthening what's essential while responding to new challenges.
When designers consider rewiring a legacy system entirely, they risk discarding valuable "DNA"—usability insights, edge-case handling, and real-world adjustments built over time. By
choosing evolutionary tinkering, we honor context and empower growth without breaking what already works.
A Short Story: The Shell and the Home - Why We Evolve, Not Rebuild
PropertyGuru is Southeast Asia's largest real estate marketplace. I'm responsible for building a resilient design system that supports Singapore, Malaysia, Vietnam, and Thailand. I've already built an award-winning design system (Asphalt)for Gojek, but this adventure brought new learnings and a different kind of impact. This is a behind-the-scenes look at how we rebuilt HIVE, our design system, thoughtfully—brickby brick. I'm sure it's valuable reading for young designers curious about design systems,
engineers building scalable UI, and leaders investing in product excellence.
The HIVE logo, representing the beehive structure as well as elements of Real estate
The HIVE logo, representing the beehive structure as well as elements of Real estate
HIVE: A Thoughtful Re-build, Brick by Brick
HIVE: A Thoughtful Re-build, Brick by Brick
YEAR
2024
CATEGORY
ARTICLE
ROLE
DESIGN SYSTEMS
ORGANIZATION
PROPERTYGURU
Home
Stories
Play
About
HIVE: A Thoughtful Re-build, Brick by Brick
YEAR
2023
CATEGORY
ARTICLE
ROLE
DESIGN SYSTEMS
ORGANIZATION
PROPERTYGURU
We're here to solve real challenges. A few key concerns we needed to address:
Bringing consistency to our evolving suite of products and features for agents and consumers—whether it's the agent-facing MarketWatch, new listing creation flow, or upgrading our consumer-facing
listing details page
Helping designers and engineers work better together
Reducing rework and duplication across geographies
Creating experiences that feel cohesive, familiar, and trusted for our users
When teams don't need to start from scratch every time, they can focus on what really matters:
solving problems and delivering value. With our ambitious goal of empowering agents and helping
consumers make informed decisions, HIVE is an important cog in the wheel.
Why we built it
Looking back before building forward
Over the years, as our products expanded, our original system started showing signs of wear. Different teams made different choices. Components evolved in silos due to multiple geographical demands. Language and currency presented key challenges that demanded extra attention. What started as a clean structure became a patchwork.
Think of it like a home that kept getting extensions—each one practical, but not always aligned.
So we took a step back. Not to tear everything down, but to rebuild it thoughtfully, brick by
brick.
What we discovered (some embarrassing stuff)
During our deep dive into the system, we found:
47 spacing values (a few too many!)
A single button that had become 8 different buttons
13 beautiful components quietly sitting in Figma, underused
Color palettes that varied just enough to feel... off
These weren't problems—they were design opportunities. Every inconsistency pointed to a chance to
simplify, connect, and elevate.
Storybook structure on the engineering end
The Engineering side of the story
Our engineers had been building with care but often improvising to fill gaps. We all know the challenges of building for business outcomes while striving for performance. But both engineering and design teams understood the long-term impact of continuing down this path. So we:
Aligned frameworks for better interoperability
Reduced duplication and focused on component quality
Created shared patterns for faster, more confident collaboration
Built modular systems that could grow with us—like adding new rooms to a strong foundation
After all our agreements and disagreements, we aligned. We presented our plan to leadership with a
big caveat:
"For some time, PropertyGuru will look broken (about 6 months) with new and old components on the
same page. It's the tradeoff of going brick by brick. Are we ready?"
The product and leadership teams agreed. It was the biggest win we could achieve. We weren't fixing broken things—we were refining and evolving what existed into something more cohesive, modern, and accessible.
Some of the new components, being used with older UI
Some of the new components, being used with older UI
We believe every great system starts with great design. The design team rolled up our sleeves in Figma—organizing, naming, simplifying, and reconnecting.
We made components easier to find
We cleaned up unnecessary variations
We mapped relationships across 600+ design files
Most importantly, we made it easier for any designer to jump in and start creating
It was audit, redesign, and getting buy-in from engineering at every step. You could call it a reboot of how we collaborate. We faced some uphill challenges, but it was worth the effort. I personally had to run many grooming sessions to ensure components were used correctly and that documentation for each component was thorough enough for engineering counterparts to drag and drop from Storybook directly.
Change is hard (& it takes time )
Figma: Where the Rebuild Began
We currently host our documentation on Confluence and Storybook
We knew that any change, no matter how positive, would take time. So we took a gradual approach:
Let old and new systems run in parallel
Supported teams with training and resources
Made space for questions, feedback, and experimentation
Provided weekly updates to all engineers and designers
And it worked:
HIVE adoption grew from 15% to 68% in 6 months
Mockup time dropped by 35%
Custom CSS shrank by 30%
We saw 60% fewer revision cycles thanks to aligned components
Because the strongest systems aren't just about aesthetics—they're about bringing design to life where 4 million people use it daily. It's not about what you build, but how you build it.
Still building, still learning
We're proud of how far HIVE has come, but we know the work isn't done. And that's exactly how it should be. A design system isn't a project with an end date. It's a living ecosystem. A shared language. A foundation we can keep strengthening—together, brick by brick. To the young designers curious about systems, to the engineers architecting for scale, and to the leaders who create space for long-term thinking:
Culture is the real system
You can't build great tools without a team that trusts each other and feels empowered to
contribute.
Key Takeaways
Start small, grow steadily
Evolution builds trust. Big bang launches often don't.
Measure and share impact
Data helps everyone see the value of change—especially leadership.
Respect what came before
Every component in our old system solved a real problem. We built HIVE by standing on their shoulders.