CV online

Get in touch

Prefer using email? Hit me up at [email protected]

Design quality assurance, ship products faster and better

Building scalable design guidelines

The Situation

At this Fintech organisation they had developed a Forex platform as a white label that would be rebrandable. I joined as the product was emerging onto the market and at this stage they had just three clients who were actively using the platform.

My role was to provide a strategy to effectively manage the experience of the interface but also a consistent way to customise and scale interfaces for the client’s needs.

Key Considerations

It was apparent that the organisation could benefit greatly from having a set style guidelines, familiar UI patterns and a reusable component library in place but I wanted to validate if there was real value in it. This is what I discovered:

  • There was no current design system but a plan to create one.
  • The organisation could benefit from developing a reusable UI component set or ecosystem.
  • The organisation were going through a period of growth and needed to be able to design with a common language and consistent aesthetic.
  • As the platform was built first, design elements were clearly inconsistent.
  • There was a lot of repetition across the whole product team.

So, definitively, I think we were able to say that, a design system would be a great asset to the organisation.

Key Pain Points

We could now pinpoint the high level problems that existed.

  • Design inconsistency. As mentioned above, this was clearly apparent and needed to be nipped in the bud.
  • No clarity on how to implement designs. Developers were building the same design components over and over but with tiny differences each time.
  • There was a demand to release changes and new features quickly.

The end goal.

A design framework, a simple set of design rules that could be easily interpreted and implemented. There was a need to be able to constantly iterate on designs quickly and keep them maintained in code so they could be easily shippable. Enter Storybook js.

We reviewed a number of options and even considered building something custom. Fortunately, there are plenty of great options off the shelf and some more suited than others.

Storybook js is one of the most recognised. It is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It helps to build UIs in an organised and efficient fashion. I knew it was important to consider the developer experience too so being able to design and develop UI components in isolation was a big plus. Similarly for designers, it is also a fantastic experience. It provided the long awaited framework and guidelines the product team needed to work with and could be kept updated and therefore current.

Atomic Design

Before developers could dive into code, as a design practice we needed to develop the digital style guidelines and UI toolkit.

When it comes to design, I have always instinctively taken a modular approach to designing, delibrately creating components that are reusable across a suite of products. A few years ago I stumbled across Brad Frost’s Atomic design methodology. As it turns out, it is rather similar to what I had already been practicing. So it made perfect sense to continue in the same vein.

Atomic Design by Brad Frost

Image taken from Brad Frost's Atomic Design

Following the Atomic method, I began to design the foundational UI elements to serve as our base styles. The colours, typography, buttons, form inputs etc.

FWW Colour palette, design guidelines

Colour Palette

FWW typography, design guidelines

Typography

Applied Design Thinking

We needed to delve deeper into the digital styles. We had empathy for our customer needs through research and user feedback and we could be confident that the implementation of specific design tenets would have an immediate impact on problems such as, inconsistent saturation of the primary colour and too many unique fonts.

As time was seemingly non-negotiable we had to work through our process quickly applying the same methodology throughout each phase of the guidelines. By defining key problem areas we were able to deliver UI components that would resolve these issues. We could then continue on the Atomic Design pathway and it enabled to rapidly build the molecules and organisms that would contribute to the interface.

Page Templates

A integral part of this system that would allow for rapid prototyping and one of the core elements of this project, the white labelling of the product.

FWW Page templates and task flows, design guidelines

White label enabled page templates and primary task flows

The result

Ensuring design consistency and reducing frustration was high priority for the engineering team and the goals of the business. An evolving design system has helped to relieve duplication and enabled the product team to build faster with greater confidence in their outputs.