Design System · 2018–2020

Designing the unified layer between a $25 billion property portfolio and the people who call it home.

Gamuda Land Vietnam was scaling fast across 8 projects and 3 digital products — with no shared design language between them. I built the foundation that connected all three surfaces, made the homebuying funnel genuinely accessible, and reduced design-to-dev rework by 40%.

UX Designer / Design System Architect 6 months Web + iOS + Android 2 designers + 3 engineers

Investor confidence erosion from fragmented messaging

While the visible output was a unified design system, the real problem it solved was trust decay.

Gamuda Land Vietnam was scaling across four digital platforms simultaneously. But each platform had evolved independently: different visual languages, different navigation patterns, different messaging about cost clarity and project timelines. The result wasn't just design rework — it was trust decay. Buyers and investors would discover a property on one platform, find different cost information on another, and encounter a navigation model on the third that didn't match either of the first two.

That inconsistency created a silent question in every investor's mind: If this system can't get basic messaging right, how confident should I be in committing capital to a property?

The design system wasn't the solution — it was the mechanism that made the solution possible. By creating a single source of truth for how investor-facing information was communicated across all four platforms, we enforced consistency at the infrastructure level. Every platform would say the same thing about cost, timeline, project status, and process. No platform contradiction. No investor confusion. Trust stopped eroding.

The token system wasn't just an efficiency tool.

It was a trust enforcer. Post-launch, repeat investor visits grew 106%, session duration increased 28%, and referral rate held steady — proof that consistency itself drives retention.

Project metrics

0% Investor Session
Duration Increase
Post-launch measurement | Consistency drives engagement

0% Repeat Visit Rate
Among Investors
Post-launch measurement | Trust-based retention

0% Reduction in
Handoff Time
Infrastructure-level consistency | Zero manual patching

0% WCAG AA
Pass Rate
Post-launch audit | Accessibility as trust signal

One team. Eight projects. No shared language.

"The problem wasn't a single broken product — it was the absence of infrastructure connecting three of them."

Gamuda Land Vietnam was in a growth phase most developers dream about: 8 projects, 10+ upcoming launches, a $25 billion gross development value. But underneath the momentum was a fragility most stakeholders couldn't see yet. Every new product launch started from zero. Every campaign landing page was its own island. The GL Connect homebuying portal, the GL Lifestyle resident app, and the campaign web properties each had their own patterns, their own components, their own decisions — none of them talking to each other.

A two-designer team was rebuilding the same buttons, the same navigation structures, the same form patterns, over and over. Design-to-development handoff was a negotiation, not a handover. Engineers couldn't trust that a spec from the portal applied to the app.

The user problem was quieter but more serious. First-time homebuyers in Vietnam — many of them making the largest financial decision of their lives — were encountering different experiences across the same brand. A buyer who discovered a property on the campaign page found a different navigation model when they moved to GL Connect to enquire. A resident logging into GL Lifestyle after moving in encountered a visual language that didn't connect to anything they'd seen before.

Overseas Vietnamese investors navigating from a +7-hour time zone were hitting keyboard accessibility gaps that made the reservation flow unusable without a mouse. TalkBack users on Android were encountering decorative images with no alt text and property grid items read aloud as "image, image, image."

The mandate wasn't "make it prettier."

It was: build the infrastructure that lets a lean team scale across 10+ launches without rebuilding the same trust from scratch every time — and make sure every Vietnamese buyer can actually use it, regardless of how they access it.

Three users. One unforgiving funnel.

Minh Châu, 34

First-generation homebuyer · HCMC

Minh Châu is buying her first home — a Celadon City unit she's been researching for four months. She uses TalkBack on Android daily and increases text size to 1.5× for comfort. She's not looking for a perfect experience. She's looking for a trustworthy one.

AT Profile TalkBack on Android · 1.5× text scaling · Primary navigation via swipe gestures

I just want to feel like I'm making a smart decision — not like I'm being rushed into something I don't fully understand.

Quốc Bảo, 52

Overseas Vietnamese investor · Germany

Quốc Bảo has been saving for a Vietnamese investment property for fifteen years. He manages a repetitive strain injury that makes trackpad use painful, so he navigates entirely by keyboard. He accesses GL Connect at 10pm his time — 5am HCMC — when support is unavailable.

AT Profile Keyboard-only navigation (RSI) · +7hr time zone · No live support access

I've been saving for this for fifteen years. The least the website can do is let me actually use it.

Thanh Ngân, 28

Young professional · Hanoi

Thanh Ngân uses no assistive technology — but she researches property on her commute, one-handed, in bright sunlight, with Metro noise in the background. She'll abandon a flow the moment it asks her to think. Her situational disability is the most common type: life.

Situational Context One-handed mobile · High ambient light · Divided attention on commute

I just want things to work without having to think about it.

52 components. 140+ tokens. Three platforms. One source of truth.

Token Architecture

140+ design tokens organized in a three-tier hierarchy: primitive → semantic → component. A single color change in the brand layer propagated across all three platforms simultaneously — zero manual patching.

Bilingual Component Library

Every component designed and tested in both Vietnamese and English. Vietnamese body text requires 1.7 line-height minimum and different truncation rules — these were baked into tokens, not treated as edge cases.

Accessibility-First Patterns

ARIA patterns implemented at the component level, not retrofitted. The date picker rebuild — arrow key navigation, Escape to dismiss, managed focus — became the template for every subsequent interactive component.

Cross-Platform Governance

A shared governance model that let 2 designers and 3 engineers maintain consistency across web, iOS, and Android without a dedicated design systems team. Contribution guidelines kept it extensible, not fragile.

Explore the full design system →

The date picker that was blocking an entire class of users.

Keyboard user completion · Reservation flow

The reservation flow was the highest-stakes interaction in the entire funnel. After months of research, a buyer who wanted to reserve a unit had to navigate a date picker to select their appointment time. For mouse users, it worked fine. For Quốc Bảo — and every keyboard-only user like him — it was an impassable wall. Zero percent completion. Not slow completion. Zero.

The existing date picker had no keyboard event handlers. Tab moved focus into the widget and then... nothing. Escape didn't close it. Arrow keys did nothing. There was no way forward except to close the browser.

The rebuild followed the W3C ARIA date picker pattern precisely: arrow key navigation between days, Page Up/Down for months, Home/End for week boundaries, Escape to dismiss and return focus to the trigger, and a visible focus indicator that met 3:1 contrast ratio against every state. We also added a text input fallback — a typed date that parsed and validated — for users who preferred direct entry.

The room heard TalkBack read 'image, image, image' over a property grid — and the conversation changed. Accessibility stopped being a compliance checklist and became a product quality issue.

Four numbers. All post-launch.

Reduction in handoff time

Design-to-development rework dropped by 40% once engineers could reference a single source of truth for components, states, and tokens — instead of re-negotiating each spec from a static mockup.

WCAG AA pass rate

Post-launch third-party audit. 95% of tested components passed WCAG 2.1 AA. The 5% that didn't were flagged for the next sprint — not forgotten. Accessibility-first patterns at the component level made compliance the default, not the exception.

Overall task completion rate

Across key homebuying tasks — property search, comparison, enquiry, and reservation — 88% of participants in moderated usability testing completed their goal without abandoning or requiring assistance.

AT user task completion

Assistive technology users — TalkBack, VoiceOver, and keyboard-only — achieved 79% task completion. The reservation flow alone went from 0% to 83% keyboard completion after the ARIA date picker rebuild.

The hardest part wasn't the components.

It was convincing a room of people that accessibility wasn't a Phase 4 nice-to-have. That it was a Phase 1 architecture decision. And that the cost of getting it wrong wasn't a WCAG audit score — it was Quốc Bảo closing his browser on a property he'd been saving fifteen years to buy.

There was a specific debate about status badges. Marketing wanted a red dot to signal "Limited units" on property cards. The first implementation was color-only — no text, no icon, no alternative encoding. I flagged it. The pushback was gentle but real: "It's just a dot, it's not that important." We compromised on a dot plus a visually-hidden text label plus a tooltip on focus. It took forty minutes. It meant Minh Châu could hear "Limited units available" instead of silence.

What I'd do differently: push accessible usability testing to Phase 2, not Phase 4. We caught the date picker issue late because we tested with assistive technology users after launch rather than during prototyping. The fix took a week. If we'd caught it in prototype testing, it would have taken a day. Every week of late-stage accessibility remediation costs roughly four times as much as catching it early — in time, in trust, and in the number of users who hit a wall before the fix ships.

Accessibility is not a feature you add to a design. It's a constraint that reveals where the design is actually broken. — Reflection on the GL Connect project

Why This Pattern Scales Across Markets

The design token system that unified GL Connect, GL Lifestyle, and Buy From Home wasn't solving a Vietnamese problem or a real estate problem.

It was solving a universal investor psychology problem: when decision-makers face fragmented information across platforms, they lose confidence in the system.

That's true whether they're buying property in Ho Chi Minh City, deploying capital into private funds in San Francisco, or navigating investor relations across multiple digital touchpoints. The investor psychology is identical: consistency reinforces confidence. Fragmentation erodes it.

The methodology that made this possible isn't domain-specific. It's a traceable system:

Research → identify where fragmentation is eroding trust → Requirements → define "zero drift" as the north star → Design Tokens → enforce consistency at the infrastructure level → Validation → measure investor behavior change (repeat visits, session duration, referral rate, retention).

That's Agentic Orchestration RTM. It works because it doesn't assume the domain. It assumes the psychology — and then builds infrastructure that prevents the fragmentation that breaks it.

When investors face multiple platforms, multiple stakeholders, multiple information sources, they need one thing above all: the system shouldn't surprise them. The design system became the enforcer of that promise.