You'll learn: - How to create, adopt, and maintain your first design system - How to practice a “design systems first” process of product development - How to build and govern a design systems operations team

1. Design System First
Everyday Practices for Creating a Scalable Design Process

2. Hello!
Role: CEO and Co-founder at UXPin. Design Ops team.
Background: UX Design & Psychology
Passion: Design and Development at scale. Product Strategy.
Design Ops. Design Systems.
@marcintreder

3. The Full-Stack UX Platform
Design systems, prototyping, and documentation together

4. UXPin in a Nutshell
Mission: Connecting design and development!
Customers: +150 countries. Focus on enterprises (PayPal, Sapient…)
Team: 70 people. 2 offices (Mountain View, CA and Gdansk, Poland)

5. Want to know more?
UXPin.com/testimonials - stories of scaling design

6. Design System First?
3 things to remember

7. Elements of systemic thinking in design are beneficial to a team
and project of any size.

8. Without a design system in place, scaling design leads to chaos.

9. You can start building in a systemic way - right now.

10. Design at scale

11. 2 Dimensions of Scale
Growth of the team
Growth of the product
Photo Credit: Janko Seboek, Unsplash

12. Product Depth
DesignOrgsize
The Growth

13. UXPin’s Growth
Team: 3
Designers: 2
Team: 70
Designers: 6
UXPin Notepad - The simplest
design solution on the market.
UXPin Systems - The most powerful
design solution on the market.

14. But sometimes growth has also the unexpected consequences…

15. Chaos
Photo by: Patrick Tomasso on Unsplash

16. “We have to do more and faster… let’s grow the team!”

17. Photo by: Alvaro Bernal on Unsplash
And everything gets slower…

18. And the quality…

19. Photo by: Heather Zabriskie on Unsplash

20. Sounds familiar?

22. If nothing is standard than everything adds to the chaos.

23. Unmanaged or mismanaged process of growing design
organization and product leads to:
• user confusion,
• slow design process,
• high cost of product maintenance
• cultural tension.

24. Photo by: Mark Asthoff on Unsplash Can you avoid it?

25. YES

26. Design System First
Every project is part of the system.

27. What is a design system again?

28. “A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.“
- Nathan Curtis

31. Decisions, guidelines, resources.

32. Big companies with lots of $$$ only?
Photo by: Davide Regusa on Unsplash

33. NO

34. Design system starts with a way of thinking… and expands over time.

35. “Thinking modularly and using concepts like components
are vital for a design to create a cohesive, holistic
experience for anything but the most basic or narrow
solution.“
- Nathan Curtis

36. Photo by: Daniel Hjalmarsson Unsplash
Anticipate growth of every project.

37. Expect the greatness of the project and design for it.

38. 4 techniques

39. 1. Ground your work in principles

41. 2. Set standards, avoid temporary plugs

42. The worst designs and the worst code start with a thought
‘I’ll just leave it like that for now’.

43. Save colors, text-styles, styles, assets… and reuse them!

44. When coding - set up tokens with proper names

45. 3. Think modular. Build components.

46. 4 Steps of User Experience
Great designers embrace all 4 in their process
Behavior
Experience
Views
Components

47. Can you see all 4 steps in your projects?

48. Separate main components and save them for later!

49. Symbol?

50. If you use it more than once - it’s a symbol.

51. If you’re a coding designer - think about your component/container architecture.

52. 4. Document

53. I firmly believe in documented code…

54. …and documented design.

55. …assume that everything has to be perfectly understandable for a
person who has no experience with the project.

56. The Process

57. Building in a systemic way
can become your process.
Photo by: Jonathan Chen on Unsplash

59. Isn’t it too limiting?

60. “A component library isn’t about limiting innovation. Instead,
it empowers designers to reuse solutions to problems that
have already been solved so they can focus more on the
problems that don’t have solutions“
- Nathan Curtis

61. Demo

62. Thank you!
@marcintreder