DesignSystem Whitepaper Appway Whitepapers
DesignSystem Whitepaper Appway Whitepapers
DesignSystem Whitepaper Appway Whitepapers
Design Systems
Scaling Great Design for
Today and Tomorrow
Table of Contents
Design Challenges in the Digital Age 3
To Build or to Buy? 7
Conclusion 12
Copyright © 2018 Appway AG. All rights reserved. No part of this work
may be reproduced in any form or by any means without prior written
permission of the copyright owner.
Design Challenges in the Digital Age
According to The State of Digital Experience Delivery, modern enterprises
manage on average 268 customer-facing websites, mobile sites, and
mobile applications [4]. This is a substantial challenge; enterprise
ecosystems are complex, with multiple channels and touchpoints to
cover. In this new, connected environment, businesses are realizing that
delivering seamless and consistent user experience (UX) across their
entire portfolio is key to future success [2].
Forrester’s Q1 2016 Digital One of the main reasons why enterprise software has earned a
Experience Delivery survey [3] reputation for expensive and bad user experience is that it’s often
revealed that redesigning the developed in siloed projects, where stakeholders and project
user experience was the highest participants create everything from scratch. This silo culture leads to
priority for digital experience design that is inconsistent with industry standards, user expectations,
technology decision-makers in
and even software created by other teams. Additionally, many
2016.
companies don’t have the human or financial resources to create great
software from scratch, especially when maintenance is considered.
3
What Exactly Is a Design System?
A design system establishes a design foundation by providing solutions
to recurring problems. User interfaces are broken down into reusable,
pre-built modules that can be assembled based on design patterns and
styled for specific use cases and client needs.
To explain the concept further, let’s take the analogy of building a house.
Teams commissioned to build a house don’t manufacture the bricks and
cement. Using a blueprint, they assemble parts that have a defined role,
like doors and windows. This method allows the team to quickly build
the house without having to first create all the underlying details from
scratch. They can then focus on understanding the owner’s needs, such
as the number of floors and rooms or the slope of the roof.
4
Let’s explore the four elements in more detail:
For example, patterns provide guidance on how to create clear and effi-
cient navigation or how to choose the right content for the task at hand.
5
3. Pre-built Modules. Pre-built modules are solutions to complex
problems that have been packaged into reusable user interface modules
with mechanisms for customization and assembly. Pre-built modules
have varying levels of granularity and fall into three main categories:
basic screen components (buttons, input controls, date pickers, text
elements, low-level layout components); pre-assembled and repeatable
interface parts built from basic components (headers, menus); and
screen templates for screen layouts. Figure 3 shows pre-built modules
for list and form content patterns, which are added to the same screen
template. Documentation is also provided by the design system on how
the pre-built modules interact, how they can be customized, and when
and why they should be used.
Figure 3: Pre-built modules for list and form content patterns inside a screen template
6
The Benefits of Design Systems
Businesses that incorporate design systems into their overall
development strategy are better prepared to differentiate themselves
from their competition because they benefit from the following:
To Build or to Buy?
Companies that want to incorporate a design system into their business
model follow two different approaches: they either build one from
scratch or they buy a third-party system.
To Build
7
learnings to build robust design systems with patterns and pre-built
modules that have undergone countless iterations.
In a 2016 study by Forrester, 91% Furthermore, these design systems often require compatibility with
of those surveyed cited difficulties multiple technology stacks. This means that the pre-built modules
in hiring for digital experience need to be platform-agnostic, limiting the extent to which module
roles, with frontend and UX
interactivity can be pre-built; only structure and styling can be defined.
roles topping the list [3]. “When
Therefore, the individual teams who use such a design system still
it comes to delivering digital
customer experiences, which
require considerable design and technical expertise, which are job skills
roles are most difficult to hire many companies struggle to find.
for?” Designers, with 47% of the
results and frontend developers
with 21%, were declared the most Engage an Agency
difficult to hire.
When design and technical expertise are lacking internally, companies
have the option to outsource building a design system to an external
agency. Depending on the contracting company’s technology stack, the
agency would either be commissioned to create a generic, technology-
agnostic design system from scratch or build a detailed design system
with patterns and components.
8
To Buy
Companies that accept the need for a design system but don’t want to
create their own often employ an external design system. Here again,
there are two options:
9
Although this approach requires continuous investment on the part of
the commissioning company, much of the cost of creating, maintaining,
and implementing a design system is externalized to the third-party
provider. The commissioning company doesn’t need to invest in hiring
teams of skilled professionals to create a design system; rather, it needs
to support its existing delivery teams to work with the third-party design
system to create the required business logic.
10
Support
11
Conclusion
It’s become increasingly clear that delivering positive user experience—
and by extension positive brand awareness—requires companies to
establish and maintain a design system. Design systems not only help
modern companies address the growing challenge of maintaining
consistent design standards organization-wide, they also tear down
the silos that prevent knowledge sharing. The modular and reusable
components empower cross-functional teams of designers and
developers to complete their tasks efficiently while exercising their
complementary, but distinct set of skills.
References
1. Brian Prentice, Patrick Meehan. An Overview of Digital Design for CIOs. Stamford:
Gartner, Inc., 2016.
12
About Appway
Appway builds software for today, and innovates for the technology of the
future. With over ten years of industry experience, Appway guides the leading
financial institutions, both big and small, as they build sustainable and
scalable solutions that quickly adapt to changing conditions.
appway.com
Copyright © 2018 Appway AG. All rights reserved. No part of this work may
be reproduced in any form or by any means without prior written permission
of the copyright owner.