Download as PDF, PPTX
Uploaded byuxpin
Evolving your Design System: People, Product, and Process
The document outlines the evolution and growth of LinkedIn's design system from its early days to its current state. It emphasizes the importance of collaboration among designers, engineers, and project managers, as well as the system's ability to support a large number of products and users. Key takeaways highlight the need for effective communication, embracing change, and empowering team members in the design process.
More Related Content
Similar to Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
- 1. Evolving your DesignSystem PEOPLE, PRODUCT, AND PROCESS
- 2. Jess Clark LinkedIn San FranciscoBay Area 2010-Present Front Desk Receptionist Summer Intern Brand & Marketing Search Mobile Redesign Homepage Design Systems Honoring In appreciation of Signed Date Jessica her ability to count my mistakes all year. Mrs. Nelson 6/3/99
- 3. 01 Early Days02 Toddler Years 03 Tween Years 04 All Grown Up S T A G E S O F A D E S I G N S Y S T E M
- 4. P E OP L E Write Research QA Design Code Manage Code Docs Tools Specs Approval Manage Roadmap Release Comms P I L L A R S O F A D E S I G N S Y S T E M P E O P L E P R O D U C T P R O C E S S
- 6. + A R TD E C O
- 7. Enable quality designand development as scale O U R M I S S I O N
- 8. At LinkedIn oursystem supports over 100 products, 150 designers, and 3000 engineers. O U R C U R R E N T R E A C H
- 9.
- 10.
- 11. P E OP L E A few designers and engineers, working part-time. 2 0 1 2
- 12. P R OD U C T
- 13. P R OD U C T
- 14. P R OD U C T
- 15. P R OC E S S
- 16. T E AM S T A G E Design Communication Designers Early Days 01 02 03 04 Toddler Years Tween Years Grown Up P R O C E S S P E O P L E P R O D U C T
- 17. “Say it, thensay it again” T A K E A W A Y
- 18. • Your peersare still duplicating work • Your system isn’t reaching enough people • Things are getting lost in translation between design and code G R O W I N G P A I N S
- 19.
- 21. P E OP L E Dedicated designers and engineers, working alongside a manager. 2 0 1 3 – 2 0 1 5
- 22. P R OD U C T
- 23. P R OD U C T
- 24. P R OD U C T
- 25. P R OD U C T
- 26. P R OD U C T </> html 1| <div class="hovercard-container"> 2| <!-- Put hovercard trigger element here --> 3| <div role="tooltip" class="hovercard"> 4| I am a hovercard 5| </div> 6| </div> scss 1| .hovercard-container { 2| @include artdeco(Hovercard top); 3| }
- 27. P R OC E S S The group responsible for the foundations, principles, and documentation that make up the system. They manage each release of new and updated patterns. The group embedded with product teams to closely collaborate on new products and feature builds. Help teams use, extend, and evolve the system. The leadership team that keeps everything everything organized, resourced, and running smoothly. R A L L Y R E PR U N
- 28. P R OC E S S Wiki status Email status
- 29. P R OC E S S
- 30. T E AM S T A G E Design Communication Collaboration Designers Engineers Manager Early Days 01 02 03 04 Toddler Years Tween Years Grown Up P R O C E S S P E O P L E P R O D U C T Platform Documentation
- 31. “Run like madand work with everyone” T A K E A W A Y
- 32. • People arewondering what you’re building towards • You’re answering more questions and building less things • People see you as the pattern police! G R O W I N G P A I N S
- 33.
- 34. P E OP L E A cross-functional team, with DPM or TPM support. 2 0 1 6 – 2 0 1 7
- 35. P R OD U C T Foundations are the smallest, indivisible parts of our design system (Color, Typography, Icons, Grids…)
- 36. P R OD U C T Components are built from multiple parts of our Foundations. (Alerts, Carousels, Hovercards, Dropdowns…)
- 37. P R OD U C T
- 38. P R OD U C T
- 39. P R OD U C T
- 40. P R OD U C T
- 41. P R OD U C T Interaction & configuration Internationalization
- 42. Keyboard navigation P RO D U C T Keyboard navigationDatepicker Ranged Text input focus/click/tap Close calendar, defocus Cursor: Not allowed Which input method is used? Increment/decrement both months Text input error state. Error bar: "Date unavailable" Text input error state. Error bar: "Dates must be in DD/MM/YY format" User cleared field Validate input on confirm Y N Y N Y N Y N Date input Move focus off, click/tap outside of calendar Text input keyboard Calendar click/tap Both text inputs empty Both filled Start date only filled Start date focused Open calendar Open calendar Open calendar End date only filled Calendar keyboard Month controlsDate Date Valid format? In range? Blackout? Blackout? Cleared? Open with current date in le9 calendar Open with start date in le9 calendar Open with end date in right calendar Error Error Error 1 1 1 1 1 Date format can be customized/localized Clear all errors except start/end date issues End date focused
- 43. P R OD U C T </> 1| {{artdeco-slider max=100 min=0 step=10 value=50}}{{/artdeco-slider}} 2| {{artdeco-pill type="toggle" label="Las Vegas, NV"}}{{/artdeco-pill}} 3| {{artdeco-completeness-meter color="muted" max="100" value="45" benchmark="50"/}} 4| {{li-icon type="check-icon"}}{{/li-icon}} 5| {{li-icon type=“cancel-icon”}}{{/li-icon}}
- 44. P R OD U C T 11.7.15 Minor (Feature) Major (Breaking) Patch (Fix) </>
- 45. P R OC E S S A systems designer who participates in all weekly design reviews to provide insight on existing components and note future pattern opportunities. A team of distributed designers, across different offices and competing objectives who work together to create one cohesive product experience. Systems designers who answer quick questions about Art Deco foundations & components on Slack.
- 46. P R OC E S S
- 47. P R OC E S S
- 48. P R OC E S S
- 49. T E AM S T A G E Design Communication Collaboration Coordination Designers Engineers Manager DPM / TPM Early Days 01 02 03 04 Toddler Years Tween Years Grown Up P R O C E S S P E O P L E P R O D U C T Platform Documentation Tools
- 50. “Embrace change andprepare to scale” T A K E A W A Y
- 51. • You’re backlogis at capacity and your calendar is full • Your constantly fielding questions about cross-platform support • Your peers want to create larger patterns and frameworks G R O W I N G P A I N S
- 52.
- 53. An expanded platformteam, with QA, UX Writing, and more! P E O P L E 2 0 1 8 +
- 54. P R OD U C T Overview Internationalization
- 55. P R OD U C T Gadgets are built for products, by products, from multiple components. (Hovercard-Entity, Carousel-Ad, List-Action…)
- 56. P R OD U C T </> Menu op(on 3 Menu op(on 2 Menu op(on 1 Print this page Copy Upload Share Sort connec)ons by All Categories Games Educa3on Magazines & Newspapers
- 57. P R OC E S S
- 58. P R OC E S S
- 59. “Empower others and never stop listening” T A K E A W A Y
- 60. Design Communication Collaboration CoordinationContribution Extensions & more! Platforms Designers Engineers Manager DPM / TPM Early Days 01 02 03 04 Toddler Years Tween Years Grown Up R E V I S I T O U R K E Y T E A M S T A G E S P R O C E S S P E O P L E P R O D U C T Platform Documentation Tools QA & more! UX Writer
- 61. Say it, then sayit again R E V I S I T O U R K E Y T H R E E T A K E A W A Y S Run like mad and work with everyone Embrace change and prepare to scale Empower others and never stop listening 02 03 0401
- 62. T H AN K Y O U JESS CLARK, LINKEDIN