Design System

Design System

• 1.
  JLL Design System Ryan Weaver Design Lead [email protected] CharlieWeston Product Manager [email protected]
• 2.
  • No consistencyin 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 tocreate 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 DesignSystem 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 componentlibrary • 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 Basedon internal testing, the time to create mockups based on sketches is improved by as much as 66% when using the shared 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 on TFS Through Storybook, users interact with components Usage guidelines and dependencies on ReadMe
• 11.
  The JLL DesignSystem 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 DesignSystem team Design Lead Engineering Lead Project Management Product Management Leadership Ryan Weaver Sanjay Patel Deb Salwei Charlie Weston Waseem Afzal
• 14.
  Contribution requests New componentswill 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 addeverything? • 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 areviewed 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 meanthat 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 System Team. 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 Microsoft Teams channel for escalation.
• 18.
  © 2017 JonesLang 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 keyresults 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 [email protected]