Designing & building software is complex. Design systems have become a popular solution to help design teams streamline processes and produce great experiences. Let's dive into a few of the whys & hows for building Design Systems.

1. DESIGN SYSTEMS
FOR ENTERPRISE
Laura Van Doore

2. Designing & building
software is complex.

3. ‣ Too many cooks.
Multiple feature teams contributing to one core product.
‣ Scalability
Needing code & design to scale up to larger products &
more comprehensive features.
Challenges in building Enterprise products:

4. ‣ The nightmare of designing for configuration
‣ Supporting multiple platforms & devices
Challenges in building Enterprise products:

5. “A fractured process makes for
a fractured user experience.”
- NATE FORTIN

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

7. Answer:
A DESIGN SYSTEM

8. What is a
Design System?

9. Design System (noun)
[de-zine sis-tuhm]
A documented catalog of guiding principles, components
and styles used in the creation of a product, including
how and why each should be used.

10. Design System Style Guide ≠

11. Design System Style Guide
‣ Design Principles
‣ UX & Accessibility Metrics
‣ Animation Principles
‣ Coding Standards
‣ Voice & tone Guidelines
‣ Style Guide & Design Resources
‣ Key UX Personas
‣ Typography
‣ Colour Palettes
‣ Component Styling
‣ Grids
‣ Code samples

12. From typography, layouts and grids, colours,
icons, components and coding conventions, to
voice and tone, style guide & documentation.
A design system is bringing all of these
together in a way that allows your entire team
to learn, build & grow.
- CHRIS COYIER

13. Basically, a Design System is a one-stop
shop, for all the knowledge a designer or
engineer would need in order to make
products for a company.

14. IBM Design Language

15. Salesforce Lightning Design System
Easy to do the right thing. Hard to do the wrong thing.

16. Google Material Design

17. Atlassian Design

18. Benefits of
Design Systems

19. ‣ Consistency
Consistency and clarity in the user interface
‣ Communication
Speaking the same language
‣ Efficiency
Increased ability to roll out new features and software
products

20. ‣ Maintainability
Both in code base, testing and design assets
‣ Scalability
A solid architecture you can expand into new products
‣ Creates a single source of truth for building UIs
‣ Facilitates speedy onboarding for new designers and
engineers

21. What goes in a
Design System?

22. WestPac GEL
(Global Experience Language)
LETS LOOK AT:

23. WestPac GEL
‣ CX Principles
Overarching Customer Experience
guidelines & expectations

24. WestPac GEL
‣ Accessibility Guidelines
What the accessibility
expectations of the products are.

25. WestPac GEL
‣ Design & Team Values
What the team strives for in
their personal & professional
interactions.

26. WestPac GEL
‣ Style Guides & GUIs
Documented seamlessly across
their suite of 6 brands.

27. WestPac GEL
‣ Role Definitions
of everyone in the product team.

28. WestPac GEL
‣ Research Guidelines
Including Personas, Customer
Decision Making Models, User
Testing Templates & other CX
Frameworks.

29. WestPac GEL
‣ Tools & Resources
Downloadable tools & assets,
CCD methodology, Lean Start up
tools … Basically everything a CX
designer needs in order to
produce work at WestPac is
covered in GEL

30. Building a
Design System

31. Building a Design System is a
marathon, not a sprint.
(Sorry Scrum Masters)

32. Don’t think of it like a project.

33. Approach it like a product.
With objectives, users &
stakeholders.

34. “A Design System isn’t a Project.
It’s a Product, Serving Products.”
Nathan Curtis from @eightshapes

35. Establish top-level goals.

36. Establish top-level goals
What’s the number one motivating factor for your
team to build a design system?
To scale better?
Striving to have a more consistent interface?
Discover your driving causes & document them.

37. Find pain points to get buy-in.

38. Find pain points to get buy-in
Getting buy-in from other designers, co-workers,
and decision-makers will be your biggest challenge.
Find pain points in your product development
processes & among teams.

39. Find pain points to get buy-in
Pain:
Your product has 12 different types of dropdown
menus that all behave slightly differently.
Developers hate reinventing the wheel.
Product managers hate inconsistencies.

40. A personal anecdote.

41. 40Shades of
LIGHT GRAY

42. Find pain points to get buy-in
Sometimes people won’t know where their pain
points are, because their process has been terrible
for a really long time.
Walk through their processes with them & find where
the points of contention are.

43. Take stock of where you are.

44. Take stock of where you are
‣ Interface Inventory
Find every component used across your current
interface & put them on the wall.

45. It might look something like this …

46. Create order out of the chaos …

47. Define a new structure.

48. Define a new structure
‣ Atoms & Molocules?

49. Define a new structure
GE Predix System

50. Define a new structure
‣ Find the patterns
Start to tie components together into a loose structure
‣ Streamline components
Focus on streamlining 12 dropdown into one.

51. Start small and build.

52. Throughout the whole process,
Evangelise.

53. Evangelise
‣ Appoint a champion (or team of champions)
There’ll be plenty of people in the business who won’t
understand why you’re doing this.
You’ll need to ensure that you’ve got a lot of
passionate advocates for why a Design System is the
right way forward.

54. The first challenge is building a
design system.
The second challenge is getting
someone to care.

55. Thanks
Laura Van Doore
www.lauravandoore.com