Building a financial services Design System:
The first week

In our last post, we covered why all financial companies should invest in a design system. That gave a useful overview as to the reasons for making the investment and how to start thinking about incorporating it into your company - and if you haven’t read it, we encourage you to start there.

So how do you get started?

In this post, we thought it made sense to give a little look under the hood and take you through Dock9’s approach to designing and building a financial services design system. In the first week the design system quickly becomes more of a reality and less of a theoretical concept. It’s a fun, fast paced week that helps set the foundation and goals for the first release of the system.

The Design Audit

Chances are there are quite a few components and patterns that are repeated consistently throughout existing sites and portals. Our first step is to get an understanding of what currently exists so that when it comes to building the system we’re covering all assets. To do this, we create a UI Inventory that consists of all components, colours, typography, imagery, iconography and layouts.

(Not all buttons are created equal)

When reviewing, it’s not uncommon for us to see multiple variations of the same component - this is especially common when multiple vendors are delivering digital platforms. However, it’s crucial when redesigning to ensure consistency - as customers relate this directly to the trust they have for the brand. Further, when these components are streamlined, designers and developers can spend more time learning from customers and aligning core business and user goals. Building out the library also allows us to get an understanding of the company’s principles, current state of accessibility and brand guidelines.

Whether we’re creating new assets or refreshing existing assets, we’ll also put together some early design concepts to get a sense of what visual direction to take the brand in. We recognise financial services firms tend to not be ‘flashy’, but often look for ways to incorporate unique and modern styling elements, such as animations on button hover states or the introduction of bolder accent colours.

Syncing with Developers

Meanwhile, we’re also speaking with both the client’s and our internal developers to get a holistic understanding of the company’s digital presence, from their range of platforms to specific platform’s coding architecture. This is crucial to understand as early as possible, as it may frame whether the end result is a global roll-out of the new system or phased releases are more practical.

From our experience working with financial services companies and other large organisations, we’ve come to expect that all interactions with the customer do not exist on the same platform. The homepage may be hosted on one CMS platform, customer service on another, and portals for various other users or journeys. We make sure that we’re conducting a cohesive platform audit, understanding the coding languages used, scope, and limitations in an effort to get ahead of any visual inconsistencies. We’ve also found that incorporating developers into the conversation early improves the relationship with all stakeholders and makes implementation later in the project more streamlined.

Client Review & Workshop

By the end of the first week, we’re in a position to have a meeting with the key stakeholders involved. This is usually enlightening for both parties, and a good opportunity to raise any early questions, considerations, or concerns. Often, this is when clients can really start seeing the benefits of getting a system in place, and the afternoon workshop is a collaborative space to make decisions that will shape the first release.

As one example, it’s unlikely the first release of the system will cover everything - so it’s important to prioritise the key components and patterns for a first release so that everyone can begin benefitting. When necessary, we’ll take our clients through a series of prioritisation exercises that help us to align expectations.

From there, we’ll put our heads down and start building! Over the course of the following weeks, we’re refreshing components, standardising libraries, and streamlining style sheets. After conducting the full audit, we’ll also meet to define the structure of the design system, and settle on the tools & platforms used to support the build. We tend to host weekly calls with key stakeholders to give design and development updates, and have also found great value in short overview videos at key milestones to share with a wider audience. The more input we get, the more the system will be embraced by all business units.

Can you see this process working to improve your company’s workflow and collaboration? Let's fill in our contact form and we will be happy to help.