Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience. This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.

1. We have a problem
1

2. 2
Designing & building
software is complex.

3. “A fractured process makes for a
fractured user experience.”
- NATE FORTIN, VP DESIGN, EVERNOTE
3

4. Herbalife.com Herbalife24.com GoHerbalife.com
MyHerbalife.com
4

5. TODO:
Insert here the slide showing two in-production applications,
developed by two different teams of developers.
Demonstrating clear inconsistencies.
5

6. Approved Prototype Released in Production
6
VISUAL INCONSISTENCIES

7. 7

8. So how can we design the
process in order to deliver
better products & experiences?
8

9. Answer:
A DESIGN SYSTEM
9

10. We are Here DESIGN SYSTEM
GoHerbalife
10

11. 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
≠

12. 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

13. ‣ Consistent
‣ Clean & Simple
‣ Efficient
‣ Universal
‣ User-Centered
‣ Trusted & Credible Brand
‣ Interactive & Visually Attractive
13

14. 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

15. 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

16. Nachos Design System
16

17. 17
Human Interface
Design system
picture: http://www.vaxliu.com/work/dsl/

18. TODO:
Insert Design System screenshots.
18

19. How do we get there?
19

20. How do we get there?
Evangelize; Collaborate with Product Management and Engineering
20

21. What Do We Need
21

22. 22
Time
Funding
Education &
Collaboration

23. “A Design System isn’t a project. It is
a product, serving products.”
- NATHAN CURTIS, DESIGN SYSTEM EVANGELIST
23

24. 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