JLL Design System

The JLL Design System is the shared design language and component library for JLL Technologies (JLLT), the technology arm of JLL, a global commercial real estate company. Every JLLT product was built on a different UI framework, with its own styling, CSS classes, and UI components, so the same control looked and behaved differently from one product to the next.

Decisions

Audit before defining anything. The work started by gathering information on each product, finding the patterns they had in common, and prioritizing them into the system's foundations and components.

Choose the framework with developers while defining the language. Because every product ran on a different UI framework, we worked with developers on a technical proof of concept to find a framework that made migration realistic. Products then moved toward the system in steps: CSS tweaks after a design audit, design tokens mapped at the foundation level, a JLL theme package, and finally full adoption of the system's components. The early steps are quick and build team confidence, at the cost of some inconsistency during the transition.

Design, code, and documentation as one system. A design system that only serves designers is half a system, so the JLL system was structured as foundations, UI patterns, and rules that lead to three outputs: a Figma UI library, framework-agnostic design tokens, and an HTML/CSS component library, with documentation for each component.

Underlined text links. Underline, color, highlight, and weight were compared in paragraphs and in data tables. The underline won as the universal visual treatment for a link. Color left the accessibility of the primary color unknown, a highlight conflicts with text selection and reads as marking rather than linking, and weight is hard to discover and collides with bold text.

Dark theme and accessibility in the system, not in each product. Fixing accessibility at the last minute is expensive and risky, so WCAG accessibility and a dark theme were built into the system itself.

Outcome

As Principal Product Designer at JLL Technologies I was the design system point person for the Revenue pillar, 2021 – 2022. I worked with the other pillars on UX consistency and shared interactive components, ran audits across pillars, rolled the system out across Corrigo's legacy products, and directed the JLLT.com redesign on it. Designers and developers came to speak the same language, and dark theme and WCAG accessibility became defaults, not afterthoughts.

Screens

The structure of the system, an audit of button and hyperlink styles across JLL products, the Figma libraries of foundations and components, and the technical proof of concept mapping the type scale and color palette onto an existing framework's theme. Also the button documentation with its variants, states, and loading animation, the hyperlink treatment comparison, and before and after screens of a product moved to the dark theme.