UX Meetup discussion on the value of design systems and how they can free up product teams to truly innovate. Presented by Loft Design.

1. Loft Design
DESIGN SYSTEMS
DEANNA GLAZE

2. A DESIGN SYSTEM IS…

3. A DESIGN SYSTEM IS… EXTENSIBLE

4. A DESIGN SYSTEM IS… RELIABLE

5. A DESIGN SYSTEM IS… FUNCTIONAL

6. A DESIGN SYSTEM IS… LIVING

7. A DESIGN SYSTEM IS… CONSISTENT

8. A DESIGN SYSTEM IS… DEVICE AGNOSTIC

9. “A DESIGN SYSTEM ISN’T A
PROJECT. IT’S A PRODUCT
SERVING PRODUCTS.”
NATHAN CURTIS, EIGHTSHAPES

10. ORACLE REDWOOD
Designing at scale for a gabazillion users

11. Hillel Cooperman, SVP, UX
Jenny Lam, SVP, UX
I like to think about the design in three aspects of storytelling.
It’s a cohesive, coherent experience, not just in the product
but from every touchpoint whether it’s at the sales level, the
website, the marketing, support, all the way down to the micro
interactions you have with the actual software.
It’s hard to make a commitment to this caliber of work and stick
to it, because it fundamentally means evolving your culture.

12. SEARCH AND CONVERSATION
Idea that you should be able to tell the
technology what you want and have the
technology understand and adapt to you
Essential Elements of Redwood
TASKS
Idea that we don’t want to interact with a
feature or an app; we have a task, a goal
in mind.

13. What are the values that you
need to convey in your
organization’s design language?
From an aesthetic perspective, it’s really not about hitting it
with a ‘pretty stick.’ It’s about marrying that intelligence to that
aspiration, or the interaction of experience with a
presentation layer that conveys those values.
Jenny Lam, SVP, UX

14. Redwood
Design
System

15. Redwood
Design
System

16. BETTER DESIGN SYSTEMS
How to succeed?

17. Dedicated working team
- Cross-functional
- Leadership buy-in
- Establish roles

18. Dedicated working team
Amazon Kindle
Kindle
Ecosystem
Publisher
Platform
KDP
Kindle
Reader
Quasar/
Quality
Reporting
Kindle app
D
D
D
D
D
D
DT
PM
E
E
E
E
E

19. Defined values or tenets
- What core values need to be represented?
- How will the org culture change?
- What’s the value your org brings to customers
- How do you embed inclusion?

20. Audit
- Gather each screen or page
- Map the customer journeys
- Categorize/break down into categories (i.e.,
type, color, form
fi
elds, etc.)
- Identify redundancy

21. BEST IN CLASS?
Design System Examples

22. Apple
- Includes patterns
- Addresses inclusion
https://developer.apple.com/design/human-interface-guidelines/guidelines/overview

23. Atlassian
- Starts with brand
- Includes content
https://atlassian.design/

24. Audi
- Includes animation and transitions
- Speaks to UX paradigms
https://www.audi.com/ci/en/guides/user-interface/introduction.html

25. RESOURCES
Design System Tools and Frameworks

26. Atomic Design
https://atomicdesign.bradfrost.com/
Atomic design is not a linear
process, but rather a mental model
to help us think of our user
interfaces as both a cohesive
whole and a collection of parts at
the same time.
- Brad Frost

27. Mismatch
https://mitpress.mit.edu/9780262539487/mismatch/
“Stronger constraints can push
designers and engineers to
innovate.”
- Kat Holmes

28. HIVE MIND
Q&A and Knowledge Sharing