Whitepaper

Design Systems
Scaling Great Design for
Today and Tomorrow
Table of Contents
Design Challenges in the Digital Age 3

What Exactly is a Design System? 4

The Benefits of Design Systems 7

To Build or to Buy? 7

Appway’s Design System for the Financial Services 10

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.

Forrester’s Q1 2016 Digital
Experience Delivery survey [3]
revealed that redesigning the
user experience was the highest
priority for digital experience
technology decision-makers in
2016.
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].
One of the main reasons why enterprise software has earned a
reputation for expensive and bad user experience is that it’s often
developed in siloed projects, where stakeholders and project
participants create everything from scratch. This silo culture leads to
design that is inconsistent with industry standards, user expectations,
and even software created by other teams. Additionally, many
companies don’t have the human or financial resources to create great
software from scratch, especially when maintenance is considered.
Without a modern design strategy in place, companies will have
an increasingly difficult time building and evolving applications to
accommodate trends, technological progress, and incorporate feedback.
This means that companies need to take a more scalable approach
to delivering exceptional digital experience for entire portfolios of
products across all interaction channels, where consistency and
coherence must be at the forefront.
Design Once; Leverage Everywhere
Design systems are an industry-wide reaction to the challenges
mentioned above. Rather than starting from scratch, cross-functional
teams use modules and patterns provided by a design system
as a starting point to create and evolve applications. They allow
companies to scale design solutions across the entire organization,
while also ensuring consistent and coherent user experience across
applications, products lines, platforms, and technologies. If a design
change is discovered to improve user experience, a few relevant
modules can be changed once, and the update will be applied across the
entire application set.
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.

As with building a house, developing an application requires many

elements to come together in an organized and purposeful way. Like
poured concrete, the software platform serves as the foundation,
providing construction capabilities that are invisible to end users. When
it comes to assembling the necessary pieces, patterns provide the
blueprints for fitting them together. Like a house, every application uses
prefabricated elements that can be used multiple times (think windows
and doors); these elements are called pre-built modules. Finally, there’s
styling; attributes such as color, size, typography, iconography, and
spacing can be applied to any element, be it higher level modules or
basic screen components.

Platform Patterns Pre-built Modules Styling

Figure 1: Building a house using the four elements of a design system

4
Let’s explore the four elements in more detail:

1. Platform. Acting as the foundation, the software platform provides

the capabilities to model all aspects of an application. This includes
capabilities to implement user interfaces, define interactions as a
response to user input, or style the interface according to specific
brand identity guidelines. Depending on the platform, platform support
can extend to defining user flows, rules, processes, collaboration
management, versioning, data analytics, etc.

2. Patterns. Patterns are high-level blueprints that define a predictable

and logical framework when making design decisions. They ensure
continuity in structure, composition, and behavior of applications and
can be used for an infinite number of solutions.

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.

Figure 2: An example of screen hierarchy and navigation patterns

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.

4. Styling. Each company puts extensive efforts into defining their

Figure 3: Pre-built modules for list and form content patterns inside a screen template

style. Design systems provide styling elements to apply a brand’s visual

identity (color palettes, icon families, spacing, typography, imagery,
voice, and tone) on top of the defined modules. For example, Appway
created a system of sizes for clients to easily define their own families of
fonts, icon sizes, and spacing rules.

Figure 4: Styling elements to establish brand identity

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:

Continuous Improvement. Application design is never finished. User

experience can only be perfected through a continuous process of
evolving applications as new market trends or issues arise. Because
design system modules and components are self-contained, updates can
be seamlessly rolled out to every application that uses them.

Scalable Design and Development. Solutions to recurring design

problems are encapsulated as pre-built modules that are assembled
according to coherent design patterns. Not only is application
development accelerated through reusability, design best practices can
be scaled across numerous applications.

Efficient Collaboration Across Teams. Thanks to patterns and

meticulous documentation, design systems align the efforts of designers
and developers working in different teams and even across disciplines.
The guidance provided by design systems enables non-experts to deliver
quality user experience because their choices are guided by what is
provided by the system.

Cohesive Experience Across Application Ecosystems. Design systems

support user satisfaction and cohesive brand experience. They unify a
brand’s entire ecosystem of applications and ensure beautiful, intuitive,
and pleasant experiences across multiple touchpoints.

Based on these benefits, it’s easy to understand why modern businesses

are using design systems to continuously improve user experience.

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

DIY Design Systems

This path is followed by major companies that require cohesive design
across hundreds of applications. Companies like Google, Salesforce,
Apple, GE, and IBM are uniquely positioned to invest the substantial
time and resources necessary to build, maintain, and evolve their
own design systems. At the same time, they can leverage decades of

7

In a 2016 study by Forrester, 91%
of those surveyed cited difficulties
in hiring for digital experience
roles, with frontend and UX
roles topping the list [3]. “When
it comes to delivering digital
customer experiences, which
roles are most difficult to hire
for?” Designers, with 47% of the
results and frontend developers
with 21%, were declared the most
difficult to hire.
learnings to build robust design systems with patterns and pre-built
modules that have undergone countless iterations.
The “build from scratch” approach is generally successful, but requires
ongoing investment in an internal design team. Given the size of these
companies and the number of applications they are responsible for, the
internal design team can only define generic, high-level patterns and
pre-built modules, which must be meticulously documented so that
remote teams can work independently. Use case-specific aspects of UX
are then managed by the teams that rely on the design system.
Furthermore, these design systems often require compatibility with
multiple technology stacks. This means that the pre-built modules
need to be platform-agnostic, limiting the extent to which module
interactivity can be pre-built; only structure and styling can be defined.
Therefore, the individual teams who use such a design system still
require considerable design and technical expertise, which are job skills
many companies struggle to find.
Engage an Agency
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.
Companies that hire external agencies tend to be larger companies that
aim to create consistency across the various applications they maintain.
This option benefits companies that don’t want to build a central team
of highly skilled designers and developers and can afford to have these
roles filled by an agency for the short term.
This approach usually fails in the medium term, however, since
establishing a design system requires company-wide promotion and
long-term commitment. After the agency conducts extensive research
to understand the commissioning company’s industry and range
of applications, internal projects must also drive long-term design
system adoption throughout the entire company, not just for a few
isolated products or applications. Once the agency has installed the
design system, an internal team of professionals then needs to assume
responsibility to maintain and evolve it based on changes in technology,
user feedback, and market trends.
This handoff of responsibility determines the fate of the design system.
Design systems die when they are no longer maintained.
8

According to Forrester’s 2017
report on staffing and hiring
trends for digital businesses,
federated operating models—
where a central digital team is
responsible for strategy and local
product teams are responsible for
execution—are now commonplace.
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:
Industry-Agnostic Design Systems
When lacking resources to build their own design system, companies
sometimes apply established, industry-agnostic toolkits like Bootstrap,
ZURB Foundation, Google’s Material Design, IBM’s Carbon, or VMware’s
Clarity. By adopting an existing third-party design system without
entering into a direct relationship with the company that maintains
it, companies in this category give up a significant level of control
regarding branding and the forward compatibility of any changes made
to the design system.
This approach has its benefits; it externalizes the cost of maintaining
the design system, but still requires advocacy and continuous effort
to adopt it for internal use cases. Since there’s normally a mismatch
between the specific needs of a company and the generic features of a
large, industry-agnostic design system, this approach can help create
coherency across multiple products, yet often fails when it comes to the
details. Each developer can interpret the design system differently, add
custom extensions, or diverge in other ways.
In the long run, this approach is difficult to support across a company
and usually yields mediocre results.
Domain-Specific Design Systems
Companies in this category enter into a business relationship with a
provider that builds and maintains a domain-specific design system. The
third-party provider offers support, helps with adoption and promotion,
and evolves the design system when new needs arise.
Unlike with industry-agnostic design systems, this design system
provides specific components and guidelines that are based on the
company’s industry and user base. With a focus on a specific industry
as well as pre-defined applications, it can define patterns and pre-built
modules that cover entire workflows. At the same time, the design system
provides the necessary flexibility and configuration mechanisms so that it
can be adapted to meet business needs.
To support companies that use the design system, the third-party
provider creates a community of experts that is responsible for
documentation and training. When more targeted support is required,
the design experts work alongside internal teams to provide direct
coaching or even to help establish processes and collaboration practices
based on the design system.
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.

Appway’s Design System for Task-

Centric Applications
Appway’s design system is domain-specific and offers an extensive
support network. Based on the feedback and learnings gathered
through hundreds of implementations by the services teams and
partner ecosystem, Appway’s domain focus has given the design
team a thorough understanding of end user behaviors and how target
applications should function. Clients expect customer- and employee-
facing applications to be smooth, fast, secure, and collaborative,
so Appway’s design system is specifically built to deliver on these
expectations.

The design system is modeled on top of Appway Platform, which

provides the capabilities needed to build entire applications (e.g. the
means to model processes, screens, rules, data, styling, and integration
with external systems). The platform also provides the framework to
build reusable modules, which with Appway’s design system, fall under
two categories:

1. Screen components address design problems that are common

across projects and are therefore packaged with Appway Platform out-
of-the-box. These generically applicable design solutions are developed
with built-in mechanisms for configuration and assembly. Examples
include basic components such as buttons and text fields, but also
complex components such as data tables and form layout managers.

2. In cases where business requirements are too broad for an out-of-the-

box component, Appway’s design system offers pre-built modules for
screen templates to define the screen layout and solution components
for headers and menus.

Appway’s design system handles styling by providing pre-defined styling

elements. Because styling is natively managed by Appway Platform,
companies can easily customize the pre-built modules to their brand’s
visual identity and push updates to their existing applications.

10
Support

Although Appway’s design system is developed to be intuitive and

straightforward, clients benefit from the guidance of a design team
that specializes in the financial services. The support clients receive
is two-fold: for one, the central design team researches, improves,
and documents design system best practices to stay ahead of industry
standards. Secondly, the consulting team joins projects “on the ground”
to support client delivery teams as they bring their applications to the
next level.

The recommendations Appway’s central design team provides reflect

years of learnings gained from industry experience. They work closely
with internal subject matter experts as well as the consulting team
to define high-level business components that meet specific industry
requirements.

The consulting team, which includes UX experts and developers who

work with both Appway Platform and the design system, collaborates
with the client’s delivery team to help set up an application. The
elements they build serve as models for future applications that the
client’s internal teams will deliver on their own. By joining the client’s
delivery team in person, the consulting team helps them become self-
sufficient in working with Appway’s design system.

Additionally, the consulting team gathers insights on potential

improvements and relays them back to the central design team. This
feedback loop provides the design team with valuable feedback gained
through direct project work with clients, allowing them to evolve the
design system on a continuous basis. It also improves documentation
and knowledge sharing; these findings are then shared online via
webinars, blog posts, and dedicated trainings.

By leveraging Appway’s financial services-specific design system along

with the online and in-person support available to them, Appway’s
clients have been able to build and update applications across their
entire ecosystems faster and more easily than ever before.

To see it in action, visit design.appway.com

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.

The choice of building or buying a design system, however, depends

on the financial and human resources available to each company.
Many companies find that when the business costs of building and
maintaining a design system are taken into account, engaging a third-
party provider with substantial industry experience is in their best
interest. The support they provide, along with knowledge of user
behavior and solutions to industry-specific problems, allow companies
to quickly build and update applications while minimizing time and
financial burdens.

Regardless of whether a company builds or buys a design system, their

commitment to coherent and scalable design is a commitment that
will enable them to continuously adapt to changing technologies and
user expectations.

To learn more, visit appway.com/Platform

References
1. Brian Prentice, Patrick Meehan. An Overview of Digital Design for CIOs. Stamford:
Gartner, Inc., 2016.

2. Phifer, Gene. Tackle Technological, Organizational and People Barriers to Achieve

Unified Omnichannel Customer Engagement. Stamford: Gartner, 2017.

3. Yakkundi, Anjali. Digital Experience Technology and Delivery Priorities. Cambridge:

Forrester Research, Inc., 2016.

4. Yakkundi, Anjali. The State of Digital Experience Delivery. Cambridge: Forrester

Research, Inc., 2015.

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.

Headquartered in Switzerland with offices around the globe, Appway’s award-

winning software suite serves over 420,000 users worldwide. More than 225
institutions rely on Appway to improve internal efficiencies, engage customers
across all channels, and keep ahead of regulations.

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.