Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Eugene Kardash, profile picture
Uploaded byEugene Kardash
PDF, PPTX3,258 views

Design system presentation - How to sell it internally

The document discusses the complexities of designing and building software, highlighting the need for a design system to improve user experience and product consistency. It outlines the components of an effective design system and emphasizes the business value it can deliver, such as faster market entry and reduced development costs. The document also stresses the importance of collaboration and education in implementing a successful design system.

Design◦
Related topics:
Web Design Insights• Web Design and Development•
Download as PDF, PPTX
We have a problem 1
2 Designing & building software is complex.
“A fractured process makes for a fractured user experience.” - NATE FORTIN, VP DESIGN, EVERNOTE 3
Herbalife.com Herbalife24.com GoHerbalife.com MyHerbalife.com 4
TODO: Insert here the slide showing two in-production applications, developed by two different teams of developers. Demonstrating clear inconsistencies. 5
Approved Prototype Released in Production 6 VISUAL INCONSISTENCIES
7
So how can we design the process in order to deliver better products & experiences? 8
Answer: A DESIGN SYSTEM 9
We are Here DESIGN SYSTEM GoHerbalife 10
Design System Style Guide ‣ Design Principles ‣ UI Patterns ‣ UX & Accessibility Metrics ‣ Animation Principles ‣ Coding Standards ‣ Voice & Tone Guidelines ‣ Key UX Personas ‣ Style Guide ‣ Typography ‣ Color Palettes ‣ Component Styling ‣ Grids ‣ Code Samples ‣ Icons & Photo Assets 11 ≠
Design System Building Blocks Typography Color Schemes Grid Definitions Icons Image Assets UI Patterns Templates Modules Components Elements Rules Design Prinicples Implementation Guidelines Do’s & Dont’s Editorial Guidelines 12
‣ Consistent ‣ Clean & Simple ‣ Efficient ‣ Universal ‣ User-Centered ‣ Trusted & Credible Brand ‣ Interactive & Visually Attractive 13
Software Design Systems Deliver Business Value, Direct ROI 50% 20% 52% Products get into market up to 50% faster when teams use a managed set of UX resources Reduce cost of software development teams by up to 20% over time UX led software products receive better NPS and reduce customer support calls by up to 52% source: https://projekt202.com/design-systems14
Human Interface Design Material Design Spectrum Design System Carbon Design System Fluent Design System Design Language System Lightning Design System Clarity Design System Audi Design System Polaris Design System 15 They have their own Design System Nachos Design System Harmony Design System Design System Design System Design System Design System Design System Design System Design System Design System Pattern Library End-to-End Design Language Global Experience Language Components Guide Pattern Library
Nachos Design System 16
17 Human Interface Design system picture: http://www.vaxliu.com/work/dsl/
TODO: Insert Design System screenshots. 18
How do we get there? 19
How do we get there? Evangelize; Collaborate with Product Management and Engineering 20
What Do We Need 21
22 Time Funding Education & Collaboration
“A Design System isn’t a project. It is a product, serving products.” - NATHAN CURTIS, DESIGN SYSTEM EVANGELIST 23
Thank You! 24 “Here’s a simple truth: you can’t innovate on products without first innovating the way you build them.” - ALEX SCHLEIFER, HEAD OF DESIGN, AIRBNB