UI/UX Design Development

1. Design System
for
People & Products

2. Save money Save the planet Be a good citizen
?

3. Save money Save the planet Be a good citizen Your neighbors
used less

4. Change Products Change People

9. Lack of consistency across products
Outdated look and feel
Each product’s customization is different
Problems

11. Opattern improved how people work
and how products are built

15. What’s in

16. Typography

17. Color

18. Illustrations

19. Icons

20. Grid System

21. Components

22. Voice and Tone

23. Typography
Color
Illustrations
Icons
Grid System
Components
Voice and Tone

24. Improving how we work

25. Project Team
UX Designer
Visual Designer
Reference
Past Products
Deliverable
Product Specs

26. Project Team
UX Designer
Design System
Designer
Reference
Design System
Deliverable
Product Specs
Updated Design
System

27. Product Design
UX Designer
UX Researcher
Visual Designer
Content Strategist

28. Product Design
UX Designer
UX Researcher
Visual Designer
Content Strategist
Front End Developer
Design Systems

30. Product Design Product Development
Design Phase Build Phase
Specs

31. Product Design Product Development
Design Phase Build Phase
Design System
Development
Specs
Front End
Foundation

32. Foundation = consistency and sanity
Print EmailWeb

33. What we learned

34. 1. Start on a smaller product

35. Flagship Product
Side
Product
Side
Product
Side
Product
Start here
Not here

36. 2. Fit into existing “systems”

38. 3. Document the standards

39. “If it’s not in writing, it doesn’t exist”

40. 4. Know industry best practices

42. Thanks!