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

Project metrics

0% Reduction in
Handoff Time

0% WCAG AA
Pass Rate

0% Task Completion
Rate

0% AT User
Completion

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