The document describes the JLL Design System, which was created to bring more consistency to JLL's digital products. It includes a set of reusable UI components, guidelines for design and development, and processes for maintaining the system. The design system includes style guidelines, a Sketch component library, documentation on its usage and components, and the underlying code for components built with React. It aims to improve consistency, efficiency, and reduce repetitive work across JLL products. A dedicated team manages the system through maintaining components, handling contribution/enhancement requests, and communicating progress against objectives to adopt the system more widely.

1. JLL
Design
System
Ryan Weaver
Design Lead
ryan.weaver@am.jll.com
Charlie Weston
Product Designer
charlie.weston@am.jll.co
m
Design Lead
ryan.weaver@am.jll.com
Product Designer
charlie.weston@am.jll.com

2. • No consistency in design or development process
leads to disjointed experiences
• Longer lead time for partners and consultants to
get started on features
• Attention focused on lower value problems
• Increased cost as teams do repetitive work
What is the problem?

3. We needed to create a system of standards to ensure a cohesive experience
across JLL Products for users that was accessible to developers and designers
What is the solution?

4. The JLL Design System is a set of interconnected components that allow JLL product
teams to prototype, design, and build products faster and more consistently.
What is a design system?

5. • UI component library
• The code for each component
• Usage guidelines
• Decision making guidelines
• Processes for implementation and governance
• Style guidelines
What is included?

6. Consistency is improved

7. Efficiency is improved
Based on internal testing, the time to create mockups based on sketches is
improved by as much as 66% when using the shared component library.
component library.

8. Visual Language
• Color
• Typography
• Iconography
Styles & components
Design
Components
• Add Button
• Alert
• Avatar
• Avatar Group
• Button
• Button Group
• Card
• Date Picker
• Form Fields
• Form Controls
• Link
• Loader
• Modal
• Overflow
Menu
• Pagination
• Popover
• Search
• Side
Navigation
• Table
• Tabs
• Thumbnail
• Toggle
• Tooltip
• Top
Navigation

9. For designers
From Sketch & ReadMe
The Sketch UI Library makes the design
system easily accessible for designers
Detailed documentation for each
component is available in ReadMe

10. For developers
From ReadMe. IO, Storybook &TFS
Source code is found onTFSThrough Storybook, users
interact with components
Usage guidelines and
dependencies on ReadMe

11. The JLL Design System is a product

12. Governance & operations
• A dedicated team supports the design system
• Goals have been established for enhancing and
adopting the system
• Progress on bugs, enhancements, and components,
will be communicated to the Product/Tech/IT team
• Satisfaction and usage will be ascertained through
periodic surveys and analytics reports
• Operating in 2 week sprints starting Jan 30th

13. Meet the Design System team
Design Lead
Engineering Lead
Project Management
Product Management
Leadership
Ryan Weaver
Sanjay Patel
Deb Salwei
Charlie Weston
Waseem Afzal

14. Contribution requests
New components will be evaluated by these criteria:
• Does the submission include design and behavior
documentation?
• Does this currently exist in or is it soon to be added to a
development environment?
• Does a component that performs the same functionality
exist already in the system?
• Is this submission scalable for other products?
• Does it fit the visual design language?

15. Why not add everything?
• The more added, the more maintenance for design,
documentation, and development
• Components will go through a thorough vetting before
they get added to the system
• Quality, or consistency plus reusability, is more important
than quantity
“We should be choosing what
we want to keep, not what we
want to get rid of.”
- Marie Kondo

16. Enhancement requests
Enhancements are viewed as expansions or
upgrades on existing components.
Similar to new components, we ask that
enhancement requests be submitted via email with
a sketch file and description of functionality
attached.
From there, we can assess the viability of the
request; along with the impact that it will have to
the system and neighboring components.

17. Reporting bugs
Bugs mean that something isn’t working how it should be.
They can happen in the documentation, code, or design.
Regardless of where it’s found, please send an email with
the bug description, location, screenshot (if appropriate) to
the JLL Design SystemTeam.
If you can submit a Pull Request, please do so, but also
send an email as this is our best way to track bugs per our
KPIs.
We will work towards responding within 24 hours.
If it is urgent, please use the MicrosoftTeams channel for
escalation.

18. © 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 18
Adoption scenarios
Is this product
in a dev env?
yes
no
Is it built in
REACT?
yes
Consume
Everything
( Design & Dev )
no
Use existing design
components in sketch
Work with DS Team to
submit code once in dev
Atomic Based
Adoption
Component Based
Adoption
3. Atomic Based Adoption
4. Component Based Adoption
2. Use Existing Design
Components, Contribute
Code
1. Consume Everything
Will it be built in
REACT?
yes
no

19. Objectives and key results
Current
Launch a usable system with
measurable improvements
• Usable MVP by 1/30/19
• Establish a process for
submissions
• Measure efficiency
improvements in UI
creation
• Ensure analytics are
present on Readme
• Create a developer survey
1-3 Months
Improve utility of the system
• Add analytics to Storybook
• 100% of Sketch library
components responsive
• Audit documentation for
gaps in process and usage
• Bug ratio below 50%
Rollout to Aero
• 25% adoption in Aero
• 2 new components/2 new
enhancements
3-6 Months
Improve utility of the system
• Identify a non-Aero
product for consumption
• HTML/CSS for 25% of
components
• 100% documentation
complete
Rollout to Aero
• 50% adoption in Aero

20. Communication & Support
jlldesignsystem@am.jll.com