1. Design systems
Why
What
How
1508™
DS

2. Morten Øhlenschlæger Andersen
Head of Brand Design /
Operations Director
Frederik Schumann
Creative Director /
Digital Designer
Who are we?

3. • Why talk about Design Systems?
• What are Design Systems?
• Process & People
• Inspiration / Cases
• Summary
Agenda

4. Why
talk about
design systems?

6. Scalability &
Faster Products

7. Consistency

8. www.experience.site
Visibility of System
Status
Match Between System
& Real World
User Control
& Freedom
Consistency &
Standards
Error
Prevention
Recognition Rather
Than Recall
Flexibility And Efficiency
of Use
Aesthetic And
Minimalististic Design
Help Users With
Errors
Help And
Documentation
Better UX

9. Stronger focus

11. Why
A brief history

12. Design Systems
A brief history
1960s
The Swiss Style
1968
At the NATO
conference on
software engineering
component based
development was
introduced.
1991
World Wide Web and
the foundation HTML
is presented by Tim
Berners-Lee
Mid 2000’s
The term Web 2.0
was born defining a
new type of web-
based app with
dynamic, user-
generated
functionality. Along
with the rise of
smart phones and
tablets.
1996
The first version of
CSS was invented
kickstarting web
design
2006
The Yahoo User
Interface Library
(YUI)
2011
Twitter introduced
their own open-
sourced framework –
Bootstrap.
2013
The Atomic Design
methodology was
introduced by Brad
Frost
2014
Google’s design
system, Material
Design, becomes a
web standard for
high-quality digital
experiences on every
platform.
2021
MaterialYou is
launched. Googles
next version of
Material Design
2015-2020
Design Systems are
becoming best
practice in
companies like
IBM, Apple, AirBnB,
Spotify, Atlassian
and Uber
2022 -
Accessibility,
Sustainability, AI,
Automation, No-
code tools…
A long time ago… 2000-2013 Now and beyond

13. Design Systems
A brief history
1960s
The Swiss Style
A long time ago…
Design principles
Clean
Readability
Grid-based
Scalability
Contrast
Hierarchy
Modern graphic design

14. 2011
Twitter introduced
their own open-
sourced front-end
framework –
Bootstrap.For
developing component
based websites and
layouts.
2000-2013

15. Atoms Molecules Organisms Templates
& Pages
2013
The Atomic Design
methodology was
introduced by Brad
Frost

16. 2014
Google’s design
system, Material
Design, becomes a
web standard for
high-quality digital
experiences across
platforms.
Now and beyond

17. 2015-2020
Design Systems
are becoming best
practice in
companies like
IBM, Apple, AirBnB,
Spotify, Atlassian
and Uber

18. 2021
MaterialYou is
launched. Googles
next version of
Material Design
2022 -
Accessibility,
Sustainability, AI,
Automation, No-
code tools…

19. What
are design systems?

20. Context
BRAND AUDIENCE
Mission
Vision
Values
Positioning
Visual identity
Brand colours etc.
Culture
Digital Products
- Websites
- Apps
- Misc. screens
- Etc.

21. Context
BRAND AUDIENCE
Mission
Vision
Values
Positioning
Visual identity
Brand colours etc.
Culture
Digital Products
- Websites
- Apps
- Misc. screens
- Etc.
Design
System

22. Creating a Design System

23. Creating a Design System
Brand Style Guide Pattern Library Usage Guidelines

24. Creating a Design System
Brand Style Guide Pattern Library Usage Guidelines
The promise to your
customer/user, which helps
people identify your company,
product or service

25. Brand Style Guide Pattern Library Usage Guidelines
The foundation and context for
patterns and components, e.g.:
• Color
• Typography
• Icons
• Grid
• Spacing
• Scale
• etc.
Creating a Design System

26. Brand Style Guide Pattern Library Usage Guidelines
A collection of components
combined with your style guide
upon, which your site is build
Creating a Design System

27. Brand Style Guide Pattern Library Usage Guidelines
Documentation and principles of
usage including explorations,
considerations and comparisons
Creating a Design System

28. A design system is
a collection of reusable components,
guided by clear standards,
that can be assembled together
to build any number of applications.
Will Fanguy
Invision App

29. A design system is
a set of standards
to manage design at scale
by reducing redundancy
while creating a shared language
and visual consistency
across different pages
and channels.
Therese Fessenden
Norman Nielsen Group, April 11, 2021

30. When you create a design system,
you’re not just creating reusable
patterns – you’re operationalizing how
your company approaches design
Yesenia Perez-Cruz
Expressive Design Systems

31. Process & People.
How to approach
Design Systems.

32. Good design does not
start in a Design System.
But it can end there.

33. THINK
What’s the problem really?
CREATE
Explore, prototype, test and learn
BUILD
Develop to evolve
Our process
Evaluate Your Current Products
Do you need a DS? Yes/No.
Explore Existing Design Systems
Create a Design Concept
Define a Visual Foundation
Build Components
Build Patterns
Define Content
Maintain and Evolve Design System

34. Approaches to implementing
a Design System
ADOPT CREATE
ADAPT
an existing design system an existing design system your own design system
Low cost
Less customization
Low brand differentiation
High cost
More customization
High brand differentiation

35. Who needs it anyway?
Which organisations benefit
from a Design System?
Small Large
Medium

36. UX
Marketing /
Brand dept.
Visual
Designer
Product
Manager
Developer
Management UX writer
Who needs it anyway?
Who are the potential
Design System stakeholders?

37. ADOPT CREATE
ADAPT
an existing design system an existing design system your own design system

38. ADOPT CREATE
ADAPT
an existing design system an existing design system your own design system

39. ADOPT CREATE
ADAPT
an existing design system an existing design system your own design system

40. How do you increase the
chances of success for
a Design System?

41. Buy-in in organisation

42. A strong connection to the Brand

43. (The stronger the brand, the less consistency you need)

44. Find tools that fit your needs.

45. A clear assignment on roles

46. “The biggest challenge is
to keep the design system up to date
and define a good way of working around
the management of the design system.”
– Pernille Skott, Chief Digital Unicorn, Clever

47. Governance
Solitary Centralised Federated

48. • Creating and maintaining a design system is
a time-intensive activity which requires a
dedicated team.
• It takes time to teach others how to use the
design system.
Why not use a Design System. E.g.:

49. Inspiration

50. DR
2014

51. DR.DK/ASSETS
2014

52. Jobindex
2018-19

53. Think
What is the problem really?
Create
Prototype, test, learn
Build
Develop to evolve
Proof by Design
Think
• Point of Departure
• Tech specs
• Analysis of current
design process
• Brand review
• Principles & Rules
• UI Audit
• Component workshop
• Governance &
Organizational buy-in

54. x
Create
Explore, prototype, learn
Build
Develop to evolve
Think
What is the problem really?
Create
• Design principles
• Style guide
• Prototype
• User tests
• Pattern Library

55. Create
Prototype, test, learn
Build
Iterate to evolve
Think
What is the problem really?
Build
• Pattern Library Iteration
• Reviews
• Documentation/Rules
• Governance strategy

56. SparEnergi.dk
Energistyrelsen 2022

57. First iteration

58. Design Concept
SparEnergi help people make sustainable
and ecological choices. We are green by
nature and in overall colour palette. We
are specifically inspired by the colours of
Danish nature, green grass, trees, moss,
sand, clay etc. We are down to earth,
friendly & inviting.
Note: We keep our site low-carbon-
emission by using few photos, few videos,
but not only that, we also use colours
that use less power on OLED screens. Thus
being more energy efficient for visitors.

59. Designdirectionexercise

62. Current state. WIP.

63. IKANO
2019

64. Finding our Guiding Star

66. Our objective
Our strategy 2018 – 2022
A simpler
and high
Performing
Ikano

67. The Digital Toolbox no longer
provides a modern digital brand
and shopping experience
aligned with our brand values.
Problem #1 – Experience

68. The Digital Toolbox does not
provide enough guidance and
tools to those responsible for
rapid digital development.
Problem #2 – Digital Development

69. The Digital Toolbox does not
ensure efficiency through clear
guidance and re-use of code
and design.
Problem #3 – Efficiency

70. The Digital Toolbox does
not ensure consistent
quality across our
markets and businesses.
Problem #4 – Consistency

71. The Digital Toolbox is not
compliant with our current
strategy as “Business is
local”.
Problem #5 – Strategy

72. The governance
structure is not in place to
ensure co-ownership and
continuous development
by the Ikano businesses.
Problem #6 – Governance

73. Phase 1 Phase 2 Phase 3 Phase 4 Phase 5
Find our guiding star
Identifying what we have
Build a ”one to one” foundation
Finding our own way
Governance
How
Approach

80. Summary
What to ask, when
you want to work
with Design Systems?

81. • Do you have support of the organisation?
• What is your Guiding Star and strategy for
developing a design system?
• Is there a need for the scalability in your
organisation for a design system to support?
• Do you have the team and dedicated
ressources to maintain and develop the
system?
• Do you have or will be able to create the right
environment, in order for your design system
to thrive?
Questions

82. Thank You