Everything you need to know about design system.pdf

Everything
You Need to
Know About
Design Systems

1. Introduction to Design Systems
2. Characteristics of a Design System
3. Beneﬁts of a Design System
4. Alternatives to a Design System
5. Design System Template
Contents
www.koruux.com
How to measure the RoI of a design system
When should you consider
creating a design system?
Characteristics
Component library
Style guide
01
13
15
21
26
What is a design system?
Components
A)
B)
A)
A)
A)
B)
C)
B)
Pattern library

Introduction to
Design Systems
01
1

A design system is a crucial component for
organizations looking to make an end-to-end
compilation of their design assets in order to bring
consistency and a sense of permanence to their
product/s. The decision to create a comprehensive
design system is one that not just beneﬁts the team
of designers and developers at a company but also
creates a north star within the company that
enables cohesive decision-making.
According to NN, a design system is a complete set
of standards intended to manage design at scale
using reusable components and patterns.
Airbnb, Uber, and IBM are companies that have
transformed the manner in which they design
digital products by creating a customized collection
of repeatable components and a set of standards
guiding the use of those components. Indeed, the
efforts they invested in creating their design
systems have elevated the pace of their output and
innovation.
Design systems, when implemented well, can
provide a lot of beneﬁts to a design team:
www.koruux.com 2
1A) What is a design system?

Create designs quickly
The main advantage that a design system provides is
that it enables the design team to create as well as
replicate designs quickly thanks to the ready-to-use
UI kit and style guide. The elements in these can be
reused repeatedly, thus saving the need to reinvent
the wheel and risk unintended inconsistency. With
designers implementing the same colors, fonts, and
input elements, it’s easier for the developers to create
a uniﬁed code to be used multiple times, thus saving
time on development as well.
Enable designers to focus on bigger,
more complex problems
With simpler UI elements at the ready, designers can
turn their focus on more complex problems such as
information architecture, workﬂow optimization, and
user journey mapping.
www.koruux.com 3
i)
ii)

Ensure a unified language across
cross-functional teams
Having a design system in place ensures a unified
language in every situation - teams expanding or
disbanding or working remotely. It reduces the time
required for design and development by stemming
miscommunications and debates by being a single
source of truth that manages brand and UX
components, coded elements, detailed
documentation, and more so teams can stay in sync.
Product that scales as per
the business
An expanding business calls for the creation of more
websites, apps, portals, and other systems, resulting in
more conceptualization. However, with a design system
in place, this scale-up can be as efficient as possible,
what with all the design requisites already set in place.
During brainstorming solutions, it allows designers to
sync changes to the whole team, and push and pull
design system assets with utmost ease.
www.koruux.com 4
iii)
iv)

www.koruux.com
Visual consistency across products,
channels, and departments
Enterprises often have their teams work in silos, with
each product or channel functioning independently of
the others. This leads to the creation of fragmented
and inconsistent experiences. However, a design
system being a single source of components, patterns,
and styles can unify disjointed experiences to become
visually cohesive across the product. In the long term,
any visual rebrands or redesigns can be managed at
scale via the design system.
Reference repository for
junior designers
Explicitly written usage guidelines and style guides
help onboard individual contributors who are new to
UI design or content creation and also serve as a
reminder for the rest of the contributors. Plus, with
roles and permissions being assigned preemptively,
it ensures safety by assigning control over who can
view or edit the design system.
www.koruux.com 5
v)
vi)

When should you consider
creating a design system?
Have you been struggling lately with your
design-development workﬂow? Are you
experiencing the handoff problem resulting in
poor product decisions? Here are some other
indicators that point toward the requirement
of a design system -
Accumulation of design debt
Design debt is a by-product of the incoherent user
experience and design processes that appear over
time as a result of innovation, growth, and lack of
planning. Design debt naturally incurs over time and
may happen to any product as the business scales
with new features being added, old ones getting
outdated and evolving standards and needs.
www.koruux.com 6
1B)
i)

An inconsistent product
experience
With visual components and workflows being
designed in an ad hoc manner, inconsistencies in
the product experience are bound to arise over time.
While these inconsistencies may not be apparent at
first glance, a UX audit can reveal all the weak spots
that hamper the UX.
Lethargic workflows
The lack of a unified design system slows down the
design process while also creating distance among
teams. These will then become departments that do
not have a common design language, which
ultimately slows communication and the speed at
which products are updated and released.
www.koruux.com 7
Consistency and predictability are the pillars of UX
design. A robust design system holds the key to
providing a unified experience to your customers.
From the team’s perspective, a design system enables
them to build better products faster, resulting in
strengthening their brand. By creating a consistent
language that your internal and external users can
understand, you can create better experiences for the
people using your products.
ii)
iii)

Components and
Characteristics of a
Design System
02
8

9
www.koruux.com
Style Guide
Component
Design System
Product

A design system is a documented catalog of
components and styles used within a product, or
across products within an organizational umbrella.
Here are some components you’ll find within a
design system -
Brand values and guidelines
Putting forth the brand values upfront ensures
that the design system aligns with the company’s
nature and objectives. Not only does this bring
consistency across the product, but also binds the
designers together in a more unified manner.
Design principles
The design principles answer all the questions such
as ‘why does this look like it does’ or ‘why are we
taking this decision’. Decisions that require choosing
between two competing goals do not run into
debates, thanks to the guidance provided by the
design principles. Principles ensure that the design
team truly understands why they are designing
what they are designing, which positively influences
their quality of work.
www.koruux.com 10
i)
ii)

Visual language and identity
The visual language covers colors, fonts, icons,
shapes, animation, voice, the use of the company
logo, and more. The design system includes
thorough details about their usage so that the
designers use the right combination of elements.
The visual language is a unique representation of
your brand and helps it to be instantly recognized.
A consistent visual language among your range of
products – from a website, a mobile app, to a voice
interface – creates an enhanced and trustworthy
customer experience.
Components
Consider components to be LEGO blocks that are
used to build all the other parts covered above, for
example, CTA buttons, form fields, and checkboxes.
These are at the heart of the design system. The UI kit
is created by designers with a frontend code assigned
to them by the developers to help significantly
minimize the effort required to build a product.
Reusing components speeds up the workflow, saves
time, and avoids duplication, as interface elements
don’t need to be recreated from scratch. Components
are also great for rapid prototyping as long as their
functional behavior is outlined.
www.koruux.com 11
iii)
iv)

Patterns
Design patterns refer to the building instructions
or recommendations that dictate the use of the
components effectively across the product.
Standardized patterns help generate familiarity,
which means things will be quicker and easier
for users and help establish trust.
Documentation
Documentation is the detailed description of the
design system itself. It includes what the product
should look and feel like, use cases for UI
patterns, correct typographic scales, code
standards, best practices, and how they can vary
in terms of comprehensiveness and detail. It
guides designers regarding the implementation
and developers about design guidelines, which
ensures both parties make sound decisions for
the product and its users.
www.koruux.com 12
v)
vi)

2B)
Adaptable
It becomes a natural part
of the design process
and evolves gradually.
www.koruux.com 13
Consistent
Its different parts
seamlessly work
together.
Balanced
It provides team
members enough
freedom to
contribute yet stay
within parameters.
Well-documented
Its documentation is clear
and up-to-date.
Characteristics of a
design system

www.koruux.com 14
Robust
Its usage in any
product or platform
ensures minimal ﬂaws.
Reusable
Its components are
timeless and can be
reused in many contexts.
Efﬁcient
It makes the design
process more
cost-effective.

Beneﬁts of a
Design System
03
15

A design system is essentially a developing map of a brand’s
existent products. Its primary purpose is to provide pointers
while exploring new design directions. It unifies a brand by
compiling all the common interface patterns being used
across an organization.
While having a design system seems to be an
all-encompassing solution to UX problems, it does require
substantial investment in terms of finance, time, expertise,
and effort. How does one go about justifying this
investment and measure its success, upon implementation?
The scalability, efficiency, and consistency of a design
system can be measured by setting down Return on
Investment (RoI) parameters in place. From the context of a
design system, these can include an increased productivity
rate, better customer experience, and faster workflow. These
parameters will help in understanding the primary goals of
every business, i.e. increasing revenue and decreasing
expenses.
www.koruux.com 16

3A)
Design systems are primarily used by companies to
elevate the overall user experience and to ensure
that their own design and development teams
have a more efficient, smooth, and enhanced
workflow. Deriving successful results from the
implementation of a design system requires the
following metrics to be set into place -
Increased efficiency/productivity
If implemented well, a design system is expected
to boost your product development efficiency and
efficacy by at least 25% in terms of time and
resources — with compounding returns as the
system matures. This is done through better
product development, which in turn ensures
proper delivery of customer needs.
Indicators to measure against the 25%
benchmark include -
www.koruux.com 17
How to measure the ROI
of Design Systems
i)

Before and after surveys
Surveys, both before and after can be conducted to
measure the perceived speed of delivery over time. This
qualitative data can shed light on the underlying
perception and reasons for the changes that may have
come about.
Project management data
While there are multiple factors that tend to impact speed
to completion for tickets, comparing the before versus after
speed completion for tickets with similar scopes can be a
useful parameter to measure the impact of a design
system. For example, it may have taken 8 weeks to design
and develop 6 new features before the design system was
in place, which now only takes 6 weeks.
Bug reports
The reuse of production-tested components from the
design system are aimed at ensuring a reduction in system
bugs as compared to building something from scratch.
Monitoring before and after bug reports can help measure
component efﬁcacy.
www.koruux.com 18

Cohesiveness and scalability
A successful design system’s library of scaleable,
and extensive web/native components are built to
anticipate and fulﬁll future needs. This is done to
negate the need to do a full redesign in order to
accommodate one new feature.
Cohesiveness and scalability can be measured by
checking the percentage of shared components
between screens or between products - the
higher the better. Customer journey mapping can
help measure the interaction pattern.
Coding requirements
The more a design system covers, the lesser
custom CSS per feature is required. When the
system ends up covering adequate development
tasks and UI design, the CSS growth rate drops
over time since newer features require lesser
code and ad-hoc design. A lower count of
speciﬁc CSS properties is considered better.
www.koruux.com 19
ii)
iii)

Customer feedback
Businesses that lack design systems tend to rustle
up varying design stacks while delivering newer
experiences in the shortest time possible. This leads
to fragmented experiences and causes usability
friction between two or more products. On the
other hand, a sound design system is focused on
providing a consistent experience to customers.
This ensures a consistent brand image and a
delightful and predictable user experience that
reﬂects in the customer feedback.
A design system when introduced in a company
doesn’t just reduce the workload of the designers
and developers in the product team, but ensures
improved bonding across departments. Investing
in a design system yields greater ROI over time
with the delivery of scalable, cohesive features that
remain true to the brand’s values.
www.koruux.com 20
iv)

Alternatives to a
Design System
04
21

Design systems are indeed good for business. They
become so by providing a shared language and
communication across the team, which betters the
understanding and morale throughout the team and
permeates to the customer base as well. That said,
there can be some business limitations that do not
warrant the creation of a design system. These are -
The overall digital presence is minimal, say a
singular, small-scale website that doesn’t call
for an investment in a design system.
Creating a design system to fit an existing
website or app retroactively - this can cost way
more in terms of time and finances and may
not even provide the intended results.
If your design is rather fluid and you’re not
using atomic design (reusable components).
Creating it for a proof of concept or an initial
prototype that is likely to evolve, since a design
system can generate a credible RoI only in the
long term.
www.koruux.com 22

Additionally, it is important to note that the creation
and maintenance of a design system are
time-intensive and call for a dedicated team effort. It
may take time for teams to correctly apply the design
system in the process. Design systems work best
when the organization foresees years of future,
replicable design work.
Even if you foresee a team expansion or multiple
products and codebases, there are other cost-effective
options to enhance communication and consistency
than building a full-on design system. Consider if you
really need a design system, or do you just need better
documentation? Do you simply require a round-up of
your brand assets and guidelines?
www.koruux.com 23

If a design system seems too heavy of an investment
in terms of time and resources when compared to
your business needs, you may want to consider the
following options that are part of the design system -
Component library
Pattern library
A component is a reusable block of code that
can stand alone or form part of multiple UI
patterns–for example, a button. A component
library is a collection of UI components within a
design system.
A pattern is a group of components that
designers use to solve usability issues–for
example, a navbar with a logo, links, search
form, and CTA button. A pattern library is a
collection of UI patterns within a design system.
www.koruux.com 24
4A)
4B)

Style Guide
A style guide is a piece of documentation that
provides context and instructions for a design
system’s patterns and components–for example,
color HEX codes, typography scales, usage, dos
and don’ts, etc. If a pattern library showcases
visual elements, a style guide is the broader
documentation. It describes how to use the
elements, as well as rules for how the brand
should feel, what language to use and how it
should work overall. They’re more “instructions”
and fewer “reusable components”.
www.koruux.com 25
4C)

Use our design system template to create a
wholesome design language with seamless,
intuitive, and meaningful experiences. The design
system comprises a library of visual components
such as color scale, typography, grids, and CSS
code to help you design and develop a cohesive
design language.
Click here to access our free-to-use
design system template.
www.koruux.com 27
https://www.ﬁgma.com/community/ﬁle/1117077726226702820

About Koru UX Design
We are an Enterprise UX design agency, focused on
creating a positive, powerful and pleasurable impact
on workplace tools and applications.
Our services include UX Research and Strategy, UX
and UI development, and Front-end Development on
complex enterprise systems like ERP, EMR, CRM, and
other SaaS applications across web and mobile
platforms. We’re on a passion-driven quest to bring
the ﬁnesse of consumer-grade UX to enterprise
applications and transform the way the world works,
making it delightful and efﬁcient for all.
www.koruux.com 28

https://twitter.com/koru_ux
https://www.linkedin.com/company/koru-ux/
https://www.instagram.com/koruuxdesign/
https://www.koruux.com
6/8 Kumar City,
Wadgaon Sheri,
Pune Maharashtra,
India 411014
2022 All rights reserved Koru UX Design
Koru UX Design Inc.,
7600 Chevy Chase Drive,
Suite 300,
Austin, Texas, USA
https://www.koruux.com

Everything you need to know about design system.pdf

More Related Content

Everything you need to know about design system.pdf