31 December 2020

In 2020 TreasurUp implemented a Design System. What did we learn?

Written by

Eward

Photography by
Pexels

Being involved in the company for over 4 years I’ve seen how our approach to UX evolved. Like most startups, we started with a Minimum Viable Product (or ‘MVP’) that was designed on a page-by-page basis. UX/UI design back then was pretty much a one-man band. As we started to learn from our first users we started to optimize our MVP to reach product-market fit. 

After validating with the first 100 corporates we grew confident that we had a winning formula. Within 6 months after our first launch, we established a Style Guide: in our case a pdf that documented components, fonts, borders, colors etcetera. In the first 2 years the Style Guide became our starting point for UX and UI design.  

 

Our 2017 Style Guide

As we grew as a company and started white labeling our services to banks, we began exploring other areas within the traditional field of treasury that could be reinvented for our banks’ clients. We introduced features that enhanced the insights of treasurers and CFOs into their treasury processes. For people who were outside the office a lot (pre-covid) we built a mobile app that allowed them to trade anywhere, anytime. For larger companies we introduced automated hedging with approval steps for management. In short, our software became more holistic and started running on multiple devices and through multiple banking themes. 

We noticed that we could no longer stick to a page-by-page design approach and rely solely on a pdf for documentation. So when we learned about the concept of a design system from our friends at Ergomania, there were three reasons why we decided to embrace it: 

A Design System is a Single Source of Truth

In the early days, discussions about our designs could from time to time intensify and were often a matter of personal taste. The Design System settled these discussions once and for all (or at least for 2 years, the ‘expiration date’ we set for it) by capturing agreements on everything from grids and design resolutions to breadcrumbs. Having an external company drafting the Design System helped in making it more objective.

A Design System forces you to review your existing UI and UX

If you’re working on your startup idea for a while, you tend to focus on introducing new features and forget about the stuff that you have created in the beginning. During the creation of the Design System we would often have discussions about the foundation of our platform and decided to reengineer these foundations if we deemed it necessary.

A Design System reduces inconsistencies 

Our process of UX/UI design has not only become more efficient thanks to the vast library of atoms, molecules and templates that form the core of the atomic design methodology, but we also managed to reduce the amount of inconsistencies in our applications. This is largely thanks to the improved Design QA process in which QA engineers can review new features against the Design System principles.

To summarize, the Design System has been a logical step in TreasurUp’s maturity curve and it has increased the efficiency and consistency of our design process. For organizations who are reading this and are considering to adopt a Design System, here are some final tips from TreasurUp: 

  • It can be too early, but never too late to create a Design System. We started building ours 2.5 years after our first launch.
  • At the very minimum, include a style guide and a pattern library in the Design System. But in order to really embed design in your organization, look beyond content that is mostly useful for those involved in design. Formulating a set of foundations, guiding principles or even brand identity can be inspiring. 
  • A common misconception about Design Systems is that it requires you to completely redo you design work. Set a clear ambition for your company. Ours was to document 80% of the current designs and principles, and rework 20%. 
  • If you’re looking to host your Design System, there are plenty of great options. We decided to try Zeroheight. It has a freemium option that offers a lot of customization options, and we really liked it. 
  • If you need help with creating your design system and value objectivity, craftsmanship and experience. Look no further than Ergomania. They have been a great design partner and are doing amazing things at other fintechs and banks.