Brookfield
A modular design system covering roughly 50 luxury properties, each with its own brand.
Brookfield is one of the three largest owners of luxury rental space in North America, with 179 premier office and residential sites in cities including New York, London, Toronto, and Los Angeles.
Because these buildings are premium, many carry their own established branding. The company needed a full overhaul of its visual design, UX, and UI, covering in-depth digital experiences for roughly 50 separate locations.
Role & timeline
- Role
- UX and visual design lead
- Timeline
- Multi-phase program
- Responsibilities
- Visual design, UX and UI, modular design system, third-party data integration planning, team management
- Key skills
- Modular design systems, luxury brand UX, real estate, API-driven experiences
Problem
Roughly 50 premium properties, each with its own branding, needed deep digital experiences, and none of them could look or behave like a template.
Goal
Build a parent design system flexible enough to express every building's identity while keeping the experience consistent and easy to maintain.
01
Overview
Most luxury rental decisions happen online, before anyone walks into a lobby. The site has to convey the neighborhood, the finishes, and the level of service, and also show what's available and how to book a tour.
That was the hard part: fifty brand expressions on one system. The parent design system had to meet each property's needs without splitting into fifty separate products.
02
A modular system
We built interchangeable components that could handle different colorways, typography, and image treatments. Layout modules had to hold very different content densities, since an office tower and a residential building tell different stories, but the interaction patterns stayed the same so nobody had to relearn the site.
Components were specified so brand-level decisions stayed in tokens and theme layers, not in one-off page builds. That kept the system easy to maintain as new properties came online and existing ones refreshed their identities.
System requirements
- Interchangeable components that tolerate diverse colorways
- Layout modules for both office and residential storytelling
- Consistent interaction patterns across every property
- Theme-level branding without one-off page builds
- Accessibility and performance held constant across the portfolio
03
Live data & booking
The experiences also had to work with third-party API data in real time. Unit availability, location within a building, virtual tours, appointment setting, and reservations all came from external systems whose responses could not be guaranteed to be complete or immediate.
So data states had to be designed, not assumed: availability that changes mid-session, floor plans that exist for some units and not others, tours offered at some properties only. Every module was specified with loading, partial, and empty states so a missing feed didn't make an expensive building look broken.
04
Impact
Each property ended up with a site that fits the building while sharing one system to maintain, and a prospective tenant can go from browsing a neighborhood to reserving a unit without leaving the site.
Fifty buildings, fifty identities, one system to maintain.