View.com.au
Design System
Produced a new design kit, reducing design inconsistencies by 40% & accelerating dev time by 25%
Overview
View.com.au is a real estate listings platform. Over 11 months, I led a UI refresh and built a design system to unify the experience across desktop web, mobile web, and app. Most of the interface was rebuilt from scratch while keeping the core content the same—focusing on clearer hierarchy, reduced UI drift, and a system the team could scale.
Role & Scope
Solo designer responsible for end-to-end UI redesign and the creation of a reusable design system.
I owned:
-
Visual direction and UI patterns across web + app
-
Foundations (type, colour, spacing, grids) and documentation.
-
Component library with states and usage rules.
-
Templates/patterns for the core journey: Home, Listings, Property Detail, plus filters and popups
What I found
The biggest friction wasn’t “one bad screen”—it was inconsistency:
-
Different typography and spacing scales across similar screens
-
Colour values and semantic meaning used inconsistently
-
Components that looked similar but behaved differently (inputs/filters)
-
Repeated UI patterns built multiple ways across desktop/mobile/app
Principles
Principles that guided the redesign
To avoid a purely visual facelift, I set practical principles to keep decisions consistent.
Consistency beats novelty
shared components and states across surfaces whenever possible.
Hierarchy first
listings and details should be scannable in seconds.
Design once, scale everywhere
favour tokens, variants, and templates over one-off layouts.
States are part of the design
focus/hover/disabled/error/loading are defined, not implied.
Platform-appropriate, not platform-fragmented
align the system, adapt patterns where required.
Respect brand anchors, optimise usability around them
Keep signature flows where needed, but make the surrounding journey do more work for the user.
Foundations
I rebuilt the foundations to remove drift and enable consistency at scale:
Colour
Corrected legacy values and defined semantic roles.
(text, surfaces, borders, actions, feedback).
Typography
A clear type scale for headings/body/meta to improve scanability across listings and detail pages.
Spacing & Layout
Consistent spacing scale and grid rules for desktop and mobile.
Tokens
Maming conventions to keep colour/spacing/type portable across web + app.
Component Library
I standardised high-usage components first—especially anything tied to search and conversion:
-
Buttons (primary/secondary/tertiary + loading/disabled).
-
Inputs (text, dropdown, search, chips/tags).
-
Filters (panel, chips, apply/clear patterns).
-
Cards (listing cards + variants).
-
Modals/popups (confirmation, info, saved search, etc.).
-
Feedback states (error, empty, no results, skeleton/loading).
Patterns & Templates
To keep delivery consistent, I defined reusable page patterns for the core journey:
Home
Modular sections that can be reordered without redesign.
Listings
Consistent sorting + filter behaviour across devices.
Property detail
Repeatable section pattern.
(hero, key facts, gallery, agent/contact, similar listings)
Implementation
The system was designed in Figma first, then handed over to engineering to build as a component library. Because I was the solo designer, a big part of the job was keeping the system practical for build—aligning foundations, component states, and usage rules with what the team could ship across app, desktop web, and mobile web.
I worked closely with stakeholders across product and development, using regular reviews to:
-
Validate component behaviour and edge cases (especially filters and popups)
-
Prevent drift between surfaces as designs rolled out.
-
Keep templates consistent while allowing necessary platform-specific adjustments.
Outcomes
While the underlying content stayed largely the same, the redesign created a clearer, more consistent experience across the core journey:
-
A unified visual language across home → listings → property detail.
-
Standardised interaction patterns for filters and popups, reducing “same-but-different” behaviours.
-
Corrected and standardised colour values and states, improving consistency and reducing UI debt.
-
Reusable templates and components that made future iterations easier to design and build.
Learnings
Design systems only scale when they’re used and maintained, not just created. Working across app + web reinforced the importance of:
-
Documenting usage rules (not just components)
-
Defining states and edge cases upfront
-
Aligning regularly with product and engineering to keep the system coherent as new work ships
Colophon
Design & code by Luke Syrylo
Copyright © 2025
