Establishing a design process for a new product can be challenging. Over the next three articles we define these challenges, explore how design systems can help, and focus on how we built the foundation of ours.

Design Process

At Griffin we are working on building a wholesale bank from the ground up. This is an inherently complex domain and our product needs to translate into a coherent experience for our customers.

Designing this experience involves focusing on the problems our customers face and following a process of steps that help us solve them.

While this flow is quite general, each product has different challenges and the context of each step will vary. Having a well-structured design process is essential as it allows us to stay focused on the problem and in turn our customer.

Unique Challenges

Defining the challenges that impact our design work allows us to see if there are efficiencies we can introduce when establishing the steps of our design process.

Complexity

When building a financial product, there are additional expectations and requirements involved in the process. Among these you have industry regulations and compliance, enhanced security and stability, industry-specific protocols and data formats, to name just a few.

There are also more nuanced complexities. We are designing for multiple users, often spread across different roles and each with varying levels of access. This could be a customer interacting with our platform banking application, a Griffin employee utilising our internal systems, or a developer harnessing our API.

Ensuring the experience is seamless yet correct for each type of user is a key design challenge.

Scale

As our product and teams grow in scope and size, we need to manage design at an organisational level. Multiple designers and engineers making small, additive and well-intentioned changes can quickly lead to a confusing development environment.

Our infrastructure challenges are also considerable. Being a wholesale bank means potentially handling millions of bank accounts on behalf of a single customer. It’s a very different task designing an interface that will support not just 10 or 100 accounts, but potentially 10,000 or 1,000,000.

We need to build a scaleable user interface. To do so, we require a structured environment within which our product teams can confidently and efficiently iterate through the design process.

Efficiency

Over time, many companies find that past knowledge, decisions and patterns go undocumented. This compounds as time is wasted solving the same problems and eventually product iteration slows down.

Working at a productive cadence means solving problems properly and ideally only once. We want our teams to work on the crux of the issue and lean on documented solutions to previously solved problems.

Consistency

As a bank, it is imperative that our customers trust us. In order to deliver this trust, we need to provide a consistent and predictable experience across all touchpoints.

Predictability helps users feel safe and secure, and is compromised when consistency is lost. So in order to deliver trust we must focus on consistency.

To build complex products at scale, we need a system in place to tame the complexity. We then need to create an environment that can foster and drive its adoption. This in turn will produce efficiency and allow for consistency across our products.

Building a system into the foundation of our design process will address these initial challenges and help us create a coherent experience for our customers.

Introduction to design systems

A design system is a collection of resources that help teams build products in a structured and methodical way. They provide a systematic approach to product development by documenting principles, rules, patterns and constraints. This helps align teams throughout an organisation around a single source of truth.

Design systems can include some of the following resources:

• Style guide for typography, colours etc
• Brand assets for logo, typeface etc
• Voice and tone guidelines
• Sandbox for prototyping
• Code documentation
• Component library
• UX patterns

Many design systems share foundational aspects, but mature ones will be unique to the organisation. Some examples of mature design systems you may have encountered include:

• Audi
• Google
• UK Government

Benefits of design systems

Beyond the tangible assets, a design system is an organisational commitment to product development and one that comes with many benefits, including:

Alignment

Aligning an organisation around a design system provides a common language for internal communication and collaboration.

Efficiency

Giving designers and engineers access to pre-built components means spending less time reinventing the wheel and more time focusing on the customer experience.

Consistency

Having a shared set of principles and rules for brand application, language and components makes it easier to create a consistent and predictable experience across different touchpoints.

Speed

Prototyping with real code provides a shortcut to efficient usability testing. Low-hanging fruit is found earlier, allowing teams to focus on core usability issues.

Conclusion

Establishing a design process is challenging, but implementing a design system enables you to build with confidence from the beginning. By centring the design environment around a shared language, customers get the benefit of that language informing their entire journey.

With a holistic view of design systems complete, the next article looks at the technical choices we made in building the foundation of our design system.

If you have comments or questions about this article, feel free to reach out to us on Twitter @griffinplatform