Enterprise Design System

In its first 12 months, our UX Practice grew from 0 to 4 designers, supporting 10 different product work-streams. Due to how quickly we scaled, design guidelines and interaction patterns were never formally established.

This led to common paint points across product teams…

• Lack of consistency in design or development process leading to disjointed experiences
• Longer lead time for partners and consultants to get started on features
• Attention being given to lower value problems
• Lost time (read: money) as siloed teams did repetitive work

‍

Team

👨🏽 PRODUCT LEAD

DESIGN LEAD

DEVELOPMENT LEAD + QA LEAD + 3RD PARTY DEVELOPMENT VENDOR

• Allow for more rapid product design/implementation.
• Establish a consistency around UI elements, patterns, and functionality
• Central repository for all design elements, principles, and documentation
• Build trust in JLL products
• Framework to extend beyond Aero to help drive adoption through a consistent UX
• Align Development, Design, & QA for the benefit of the users and business

The JLL Design system launched with 27 components, along with usage guidelines and governance protocols.

Access to the system was provided in a way that Designers, Developers and Product Teams could easily consume.

• Design components and assets were available through a Sketch UI Library hosted within Abstract
• React components could be further explored and manipulated in a StoryBook environment
• Component documentation and governance protocols was available in a ReadMe.IO CMS

Funding & Maintenance

Despite initially securing six months of funding for development / vendor fees and an additional six months of funding for roll-out support - department level cuts took away from the majority of our post-launch budget. This handicapped our ability to grow the Design System Team to include full-time, dedicated resources. To help circumvent this roadblock, we relied heavily on designers and developers on different product teams to make modifications to components and submit PRs whenever possible.

Design System 101

Within JLL's technology group, there was an assumption that years prior - a design system had already been created. In reality, what was created was a common code library that some developers used as they saw fit. This library had not formal documentation, nor design assets associated with it. In truth, it really wasn't a design system. Throughout this process, there was a constant need to educate and re-inforce why we were building a design system and the benefits it would provide.

Building The Business Case

In order to build the system, we needed to secure funding. I pitched our senior leadership and C-Suite to illustrate the challenge we faced, the ROI we expected, and the estimated cost from vendors that I sourced.

After receiving approval, I built a Steering Committee to ensure that this system would be usable and useful for our audience.

Algin On Parameters & Scope

I led a workshop prior to development starting, where we examined what patterns, components, system layouts we wanted to include at launch.

From there, I created and managed a backlog of items in Jira  these components were broken out into These discussions, while challenging allowed us to better understand the parameters for how the system would need to fit within JLL’s digital ecosystem.

Governance & Protocols

As creation of the system progressed, I started creating governance documentation around how the following areas:

• Adoption
• Bugs & Pull Requests
• Backlog Management
• Enhancement Requests & New Components
• Ongoing Sprint Capacity & Maintenance
• Site Access & Support

PR Blitz

In the weeks before launch, I led ‘Design System Roadshows’ with our Design and Development Leads.

We knew that the success of the Design System would adoption and requests made from other teams - so it was important that they felt excited about our launch.

‍

In the months to follow, I ran bi-weekly stands-up to monitor adoption, support, and improvements to the Design System.

Based on internal testing, the time to create mockups based on sketches is improved by as much as 66% when using the Design System.

‍Within the first two months, the following metrics were recorded:

• 4 products had adopted components from the Design System
• 3 new components had been designed, developed, and documented
• 2 product teams had submitted Pull Requests for component amendments
• Trust in our tools was felt by brokers when using products that adopted the Design System. Brokers appreciated that experiences and design conventions were shared across products