Chris Reckling & Carrie Lloyd's talk from the UXPA Boston 2018 Conference

1. Purpose Before Action:
Why you need a Design Language System
1
Carrie Lloyd, Visual Design Lead, IBM
Chris Reckling, Director of Design, IBM

2. Agenda
2
Why do you need a design language
system?
What is a design language system?
The guide to the system
Lessons Learned
Q&A

3. Why do you
need a design
language
system?
3

4. 2 Designers, Same Outcome
Different Results
4
Reckling’s Law:
Given the same
outcome, no two
designers will
come up with the
same design.
3 apps, 3 profiles

5. The Architect
I’m going to use object
oriented JavaScript and
abstract everything into
reusable components
that only I know how
to use!
Two developers
+ Same design
= Different code
5
Reckling’s Law:
Given the same
design,
no two developers
will implement it
exactly the same way.
The Shortcutter
I’ll just take <someone
else’s system> and
use that to start with
and try to implement
the spec
The Inventor
I don’t care if this was
done 500 times before,
I know a better way to
do it and I’m the one
coding it!

6. 6
The Blank Canvas Problems you
may encounter
without a design system
Group Name / DOC ID / Month XX, 2018 / © 2018 IBM Corporation
Distributed teams
Designing for desktop, mobile, browserMore than one designer on the team
6

7. Flexibility
Benefits of a Design System
(FYI: You are using a system whether you write it down or not!)
7
Efficiency AgilityConsistency

8. What is a
design language
system?
8

9. Style
What does <the thing>
look like?
Colors
Typography
Grid
Icons
Writing
What is a
design language system?
9
Pattern Library
What is <the thing>?
Components
Patterns
Best Practices
Usage Guidelines
How do I use <the
thing>?
Context
When to use it
Why to use it
Tools
How is <the thing>
implemented?
CSS
HTML
Javascript
React components
Sketch Library

11. Some
Examples
11

12. 12

17. Should I use
someone else’s
system?
17

18. Should I use someone else’s
system? Considerations.
18
Do you need to fit into the ecosystem
of apps? (iOS or Android, for example)
Can you infuse your own brand values
within someone else’s system?
Do you have time to make a system
from scratch?
Do you have the skills on hand?
Can you start with someone else’s and
make it your own! (That’s what we did!)

19. carbondesignsystem.com

20. What about native mobile
apps?
20
Follow the OS guidelines first
Use the native controls and styles as
much as possible
You decide font sizes, colors, screen
layouts
You decide icons (for the most part)
You decide the user experience and
interactions

21. The Guide
to the
System
21

22. Assemble
Team
Project
Definition
Tools to
collaborate
Mood
Boards
Develop
Personas
Market
Research
Define
Core Values
And user test along the way…
Element
Collages
Code as
you go
Prioritize
Patterns
Document
rationale
Style
Tiles
Interface
Inventory
Process

23. Assemble your team
ID FED ManagerVDUX UXR

24. Developers
Who are the users of the design
system?
24
Designers Customers &
Partners
User
Researchers

25. Define
Core Values
25

26. Seamless
The experience IS
the product
Human
By people, for people
26
Thoughtful
Delightful
decision-making
Measurable
Assess success
Evolving
Restlessly reinvent

27. Get
Inspired
27

28. Inspiration comes in many
forms
28
Market trends - what’s hot, what’s not
Competition - how will you be better
Other sources - the world around you

29. Market
Research
29

30. 30
Spotify

31. 31
AirBnB

32. 32
Etsy

33. Mood
boards
33

34. 34

35. 35

36. 36

37. 37
Conceptual ideas
driven by mood boards
Personal
individualized,
diverse
expressive
Playful
bright, unabashed,
human
Dimensional
spacious, luminous
material
Focused
minimal, provides
clarity
Organic
soft, atmospheric,
natural
Valuable
quality, craftsmanship
Cohesive
(but not homogenous)

38. Know
Yourself
38

39. Interface Inventory
39
Patterns you use today
Helps prioritize new work
(Skip this step if a new project)

40. 40

41. Define the
style
41

42. Style
tiles
42

43. 43

44. 44

45. 45

46. 46

47. Element
collages
47

48. 48

49. 49

50. 50

51. 51

52. Apply to
real screens
52

53. 53

54. 54

55. 55

56. 56

57. 57

58. Show me it!
58

62. Playbacks
Lessons Learned
62
Agile Practice User Research Code

63. Q&A
63
Carrie Lloyd
carrene@us.ibm.com
Chris Reckling
chris_reckling@us.ibm.com
URL to public site goes here