Brookfield Properties—Design System
Lead User Experience Designer • Design System Strategy & Management • User Experience Design • Visual/UI Design
As our digital footprint expanded, it became clear that Brookfield Properties' original design system was struggling to keep up with evolving user needs, hindering the user experience and product functionality. To address this, our team embarked on a thorough redesign effort. Our goal is to enrich the design system with extended guidance on color usage, a clearly defined typographic system, and an expanded components library, all while prioritizing accessibility, mobile responsiveness, and versatility. By embracing a modular approach to our components, we ensure scalability and reusability across diverse contexts.
In addition to overhauling our design system in Figma, Sr. UX Manager and I worked closely with the Head of Development to ensure there could be a seamless translation from design to code. This involved intensive pair-design sessions and meticulous quality reviews with the development team to establish an interactive design system library on Storybook.
By optimizing and enhancing our Design System, we streamlined the design and development process, reducing the time spent on basic element creation and allowing both teams to focus on tailoring products to meet specific client needs.
The Design System consisted of:
Core Components & Product Patterns:
- Live demo (links Storybook stories to Figma designs)
- Overview
- Formatting
- Behaviors
- Modifiers
- Styles (colors, typography, interactive states, structure, & sizes)
- Breakpoint variants
- Accessibility annotations
Foundations
- In-page annotations (how we document and layout components within the library)
- Branding (colors, typography (Web & Mobile, Logos)
- Spacing guidelines
- Iconography
- Layout grids
