During this Morgenbooster, we will dive into the understanding of digital design systems, and why they have become increasingly popular.
What are they? How do they work? What will you gain from building one? And last, but not least we will take you through a couple of tangible experiences and journeys of building such a system.
Throughout the talk we will be sharing experiences from both a design and development perspective.
And hopefully we will all have the feeling of getting one step closer to a design system, which meets all the requirements in modern digital design. A system where all services, assets and communications are designed from one central place to evoke both emotions in a coherent brand experience and support the functional necessities of today’s dynamic business strategies.
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
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
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
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
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
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.:
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
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.
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
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