SlideShare a Scribd company logo

Design System

•Download as PPTX, PDF•
•
Charlie Weston
Charlie Weston

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.

Related slideshows

Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterprise
 
Design system presentation - How to sell it internally
Design system presentation - How to sell it internallyDesign system presentation - How to sell it internally
Design system presentation - How to sell it internally
 
Design System 101
Design System 101Design System 101
Design System 101
 
1 of 20
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
• 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?
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?
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?
• UI component library • The code for each component • Usage guidelines • Decision making guidelines • Processes for implementation and governance • Style guidelines What is included?
Consistency is improved
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.
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
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
For developers From ReadMe. IO, Storybook &TFS Source code is found onTFSThrough Storybook, users interact with components Usage guidelines and dependencies on ReadMe
The JLL Design System is a product
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
Meet the Design System team Design Lead Engineering Lead Project Management Product Management Leadership Ryan Weaver Sanjay Patel Deb Salwei Charlie Weston Waseem Afzal
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?
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
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.
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.
© 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
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
Communication & Support jlldesignsystem@am.jll.com

More Related Content

Design System

  • 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?
  • 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