Today, digital channels are a brand’s first and most accessible touch point with customers, and are rapidly becoming the primary service channel for financial institutions. The digital experience forms the image users associate with the brand – today more than ever, the experience is the brand. The UX and UI design are no longer simple overlays, but have come to represent the brand’s quality of service. As banking relationships continue to extend to the digital realm it’s become critical to adopt Design Systems to maintain a high level of engaging user experiences and consistency in user interface designs.
What is a Design System?
Design Systems, or Design Language Systems (DLS), are flexible, modular libraries of design components and guidelines which enable brands to quickly deliver consistent digital experiences to customers.
Design Systems are a platform at the intersection of user experience, visual design, and development. These guidelines and pattern libraries provide guidance on the design of digital components and how they play together, as well as facilitating collaboration by different teams and aligning stakeholders. In that sense, they are a living, breathing, and evolving organism.
How can my financial institution benefit from a Design System?
Financial institutions are looking for ways to bring new experiences fast and efficiently to market. On the other side, the user expects a seamless experience across a growing ecosystem of applications. This is where design systems come in. They create a framework different experiences have to adhere to, and in turn increase the efficiency from idea to iteration to implementation. For instance: once you created — tested and built — a login experience, you can reuse this module across the different apps.
Be it banks, credit unions, or Fintechs – every Design System is tailored to the digital needs and capabilities of the specific organization. One of the first steps of planning out a design system is to consider all digital channels and their specific needs, to make sure the designs can be used across all platforms.
For example, in finance, digital channels might include internal, teller-facing devices, along with ATM interfaces, to support a seamless service design experience.
At a minimum, each Design System should cover a functional description of the interactive components, or patterns, as well as style guides to define the visual design. Design Systems range from smaller, specific pattern libraries, to full-fleshed design hubs like Google’s Material Design or IBM’s Carbon. Beyond these, they might also include strategic vision statements, design principles, how-to guidance, best practices, blogs, and digital libraries in Craft or Adobe CC. Which size and how granular the content depends on the size of your team, internal stakeholders, the vendor landscape, and external audiences. AirBnB’s system is so meticulously defined that a software can translate pencil sketches into UI components.
Airbnb AI Sketches Design Code
Larger ecosystems might allow more room for exploration.
How do we build a Design System?
You can think of design systems as modular building blocks like Lego, or the architecture of prefab homes. What kind of windows does the house come with, how many variations, what do they look like? In this example, the windows are a component or “pattern” defined in the design system. The code (how to build it) the design (how it looks) how to interact with it, and when to use which size variation.
This is how designers, developers and product managers ensure consistency, the desired quality, and a seamless framework of how the modules play together to create the full experience.
A common misconception when building Design Systems is to mix guidelines for user interfaces and guidelines for branding, advertising, or marketing. While the first aims to minimize friction, and subtley guide the user through the experience, the latter need to be the opposite: visible, fun, and compelling.
See how atlassian.design makes the distinction between brand, marketing and product guidelines.
The following is a list of must-haves in your Design System – along with a few elements that can put your Design System a cut above the rest.
1. Vision and Design Principles
The vision states the general purpose of the digital product. The design principles translate this goal into qualities all elements should adhere to. Unlike more abstract brand values, design principles are straightforward and pragmatic, providing directions for choosing the right experience design.
Here is an example: the content platform Medium enables users to write articles in an efficient way. One of their design principles is “Direction over Choice”, which led them to a truly simplified editing experience, stripped away of all the options you might see in other writing apps. For more examples see “Design Systems” by Alla Kholmatova.
2. Style Guides
As mentioned above, the core elements of the visual design, like Logo, Color, Typography, are provided by the brand guidelines. The Style guide is based on the brand guideline, but provides specific definitions for the digital space, and may emphasise or add elements such as iconography, and the style of interactive elements — forms, CTAs, Chat, etc. The role of visual deisgn is to support the user experience in a subtle way, but also “brand” the experience, so the user is aware of the brand she is interacting with at any given point in the experience.
3. A Pattern library
UX Patterns such as cards, forms, buttons, nav, etc. are interactive elements and components which are repeatedly used across the entire experience and even channels. While some of them differ between operating systems, the goal is to create them as platform agnostic as possible, ie. Independent of iOS, android, react and others. They are described not only in their functionality but also by providing code snippets and “tokens”: from the smallest elements such as color definitions to more complex components such as forms.
4. Motion
State of the art user interfaces support the user experience with animations and transitions in so-called Micro interactions. These animations are a subtle way to guide the user through the experience. Motion can be described by aspects like speed, duration, and easing.
Today tools are developed to improve the way to define and develop animations: from AirBnB’s project “Lottie” (https://airbnb.design/introducing-lottie/) which is a work flow to bring animations on apps. InVision also has a new Studio software, which enables specific control of how transitions play out. Material Design has a good introduction to all things motion: https://material.io/design/motion/understanding-motion.html#
5. Acoustic Elements
Acoustic elements are on the rise based on the success of smart speakers such as Amazon’s echo and Googles Home. Similar to graphical user interfaces the acoustic aspect can be described in categories such as: tone of voice (demographic, seriousness, language), audio branding (sound logo, brand music) and AUI — Acoustic User Interface. This is an emerging field and will be part of Design Systems in the near future.
In Conclusion…
Design Systems are not the end, but an integral part of a digital roadmap. They enable Financial Institutions to build out their digital ecosystem in a seamless and scalable way, to iterate and launch new products fast and efficiently. One of the biggest value they add to the organization is to align stakeholders and departments and create a collaborative platform to spread the word about the systems design and the thinking behind it.
Recommended Readings:
- “Design Systems” by Alla Kholmatova,
- Invisions comprehensive guide to design systems
- thenextweb.com
- “UI Motion Manifesto” by Issara Willenskomer
- ainbnb.design