Abstract: Ask two designers to design the same user interface and you will likely end up with two very different designs and interactions on the page. Ask two developers to implement that page and you will end up with different code, too! And that, in a nutshell, is why you need a system. Have you ever wondered what it takes to build your own design language system? It sounds intimidating, but it's not! Link: https://uxpabostonconference2018.sched.com/event/E2NS/purpose-before-action-why-you-need-a-design-language-system

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

2. The big controversy of 2004!
2

3. Version 2.1 circa 2007

4. Version 3 circa 2012

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

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

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

8. 2 Developers, Same Design
Different Code
8
Reckling’s Law 2:
Given the same design, no two
developers will implement it exactly the
same way.

9. Benefits of a Design Language System
Move faster, save money, reduce risk, innovate.
9
Efficiency AgilityConsistency Flexibility

10. Efficiency
10

11. Consistency
11
"Consistency is one of the most powerful
usability principles: when things always behave
the same, users don't have to worry about what
will happen. Instead, they know what will
happen based on earlier experience."
- Jakob Nielsen

12. Flexibility
12

13. Agility
13

14. What is a
design language
system?
14

16. 16

17. “We solve
challenging
interactions at
the outset…”

18. What is a
design language system?
18
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
Style
What does <the
thing> look like?
Colors
Typography
Grid
Icons
Writing

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

20. Should I use someone else’s
system? Considerations.
20
Do you need to fit into the ecosystem
of apps? (iOS or Android, for example)
Do you have the time and skills to
make a system from scratch?
Can you start with someone else’s and
make it your own?

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
Mood boards - the world around you

29. Market
Research
29

30. What is market research?
30
Look at best of breed: Market leaders
Studying cutting edge behaviors and patterns
Look at the brand family as expressed in
apps and sites
Look at specifics (icons, login, onboarding,
features, etc) zoom in on those particular
aspects
Different from competitive research, which is
looking at your direct competitors feature by
feature

31. 31
Spotify

32. 32
AirBnB

33. 33
Etsy

34. 34
Common elements of success • Intentional use of colors was
purposeful
• Primary actions clean and simple
• Consistent platforms - UI for Web,
tablet, and mobile apps were
• Use of micro-animation delighted
users and increased usability
• Limited palette was essential for
brand communication
• Trending gradients, illustrations,
photography dimension and playful

35. Mood
boards
35

36. What is a mood board?
36
Communicates style to help define what the project is
about
Kickstarts creative ideas
Reflects core values, market trends, goals of the project
Each team member creates a collage from things that
inspire them or things they see in the world
Define common themes that emerge
Benefits:
It’s fun! And gets you into the right frame of mind to
define your style.

37. 37

38. 38

39. 39

40. 40
Mood board
conceptual ideas
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)

41. Know
Yourself
41

42. What is an Interface Inventory?
42
Takes stock and categorize common
components and patterns.
Comprehensive collection of all your stuff.
We used Mural to do this together, as a group.
Benefit:
See what you are using today and what you
will need to prioritize in your new system.
Discover what a mess you have. :)

43. 43

44. Define the
style
44

45. Style
tiles
45
styletil.es/

46. What is a Style Tile?
46
Design Deliverable: 1 -2 pages
Typography
Color
Interface elements
Essence of brand
Benefit:
Low cost method to quickly communicate style
to stakeholders, helps formulate direction, etc.

47. 47

48. 48

49. 49

50. 50

51. Element
collages
51
danielmall.com/articles/rif-element-collages/

52. What is an Element Collage?
52
Apply the styles from Style Tiles to the
same set of components on each collage
to see how they work.
Not meant to be a complete design story.
Each designer does their own.
Benefit:
Quickly test concepts, styles, and
assumptions you are making about your
style.

53. 53

54. 54

55. 55

56. 56

57. Apply to
product
screens
57

58. 58

59. 59

60. 60

61. 61

62. 62

63. Typical Process
63
Identify component
Craft user Outcome
Wires/Process Flow
Research industry
behaviors
Synthesis findings
Sketch File/Code parity
User Test
Tweak
Source: If applicable, describe source origin
Define
Sketch
Test
Code

64. Show me it!
64

68. Lessons
Learned
68

69. Agile Practices
69
1 week sprints
Iteration planning (github + zenhub)
End of iteration demos
Retrospectives
Benefits:
Keeps team on track, engaged.
Only sign up for as much as you can produce.
Stakeholders can see status and blockers.

70. User Research
70
Research everything!
Test with clients, stakeholders
Quantitative and Qualitative
Benefits:
Adjust designs early on in the process
Builds confidence in direction

71. Code as You Go
71
Implement the system in the guide
Front-end developers part of the team
Benefits:
Feedback loop to design is immediate
Ready to use as code is completed
Reduce technical debt

72. What about mobile apps?
72
Follow the OS guidelines first
Use the native controls and styles as
much as possible
You decide the user experience and
interactions, colors, icons, etc.

73. Key Takeaways
73
Design Language Systems help you
deliberately plan and execute
Consider adopting an existing system if
it provides enough flexibility to make it
your own.
Start small and iterate.
Read Brad Frost’s Atomic Design book.

74. Q&A
74
Carrie Lloyd
carrene@us.ibm.com
Chris Reckling
chris_reckling@us.ibm.com
ibm.biz/ics-design to see the guide in action