Get in touch
Seen something you like? Or want to see more?
I’m always keen for a chat, so fill out the contact form via the button below, or reach out via LinkedIn.
Drop me a line
As Sygnum Bank grows in both client and employee size, the complexity of the design and the process around it also grows. In this scenario a well founded design system can help product teams thrive.
Align the design across all Sygnum products.
Save time and money by producing faster.
Build trust by giving a consistent experience.
When I first arrived at Sygnum there was no design team and no design process. Before then the Product Managers along with Front End Developers were in charge of the design. While they did a great job at getting products built in a startup environment, we had to reassess this situation moving forward. We needed to future proof our design. To do this we had to take a couple of steps back and analyse the current situation before moving forward with a more solid base.
The heart of the design was a PDF document with some guidelines on colours and fonts, but it was nowhere extensive enough to power the product design of an eBanking system.
I did an analysis of the current product designs and it was immediately clear that we had some consistency issues. Within our overall product we had nine different design styles, all calling from separate CSS repositories. This means that for every product, designers and developers were building everything again from scratch.
Now that I'd identified the problems, I needed to suggest a solution.
I started by reading articles on Medium about how others in a similar situation had tackled the problem and explored how other companies were creating design systems.
Because the design team at Sygnum was still in it's infancy, I decided that we should start our design system using methods that are tried and true. That way we don't need to start from a blank piece of paper and we have a set of rules as a starting point. Therefore we chose to base our design system off Material UI. This would give us the security of using a system that has been used by thousands of designers and has over eight years of history.
Sygnum works using the Agile system, so I had to pitch to board the possibility of an Epic to build the base of our design system. To do this I showed them my analysis of our current systems and showed them examples of what my suggested solution could look like. I also ran various presentations within different teams.
The other thing that we had to consider was how this would be implemented. The structure of the company didn't have a single point of contact for Front End Development. I also pushed for us to create this role, so we could work together to build a system that not only helps designers but also developers.
Being a regulated Swiss bank often makes things challenging with the software we're allowed to use. These days almost everything is cloud based and according to the regulations, all data must be kept on local servers. Therefore that restricted our options a little with what tools we'd be able to use.
Luckily Sygnum was already using Figma, so it made it an easy decision to use this design tool to hold our design system and documentation.
The component library would be housed in Storybook. This would allow developers to easily use the coded output of our design system.
We started by installing the official Material UI Figma design system in our Sygnum Figma team. The base level design system obviously looks very Google/Android orientated. We wanted to keep the base of these elements but make them feel bespoke.
We worked on a new theme for Sygnum and set the colours and fonts that we wanted to use. The colour palette in the current guidelines PDF was very limited so we worked to introduce new colours. The major challenges we came up against is that our hero colour is red (which is an error colour) and our secondary colour is grey (which is a disabled colour). Therefore we had to be clever about introducing colours that would help us work around this. The font we were using for the main body text had also recently stopped being supported by Adobe. So we wanted to replace this font without breaking all current designs.
The next thing we worked on were the Atom level components in Atomic Design. We wanted to ground our design system with the base components such as buttons, alerts, text fields, breadcrumbs and icons.
We built each component responsively, with three different sizes to cover all screen break points. We also made sure we always covered all possible states. For example default, hovered, filled, error and disabled. We kept accessibility in mind and checked the colour contrast of each component using the Able Figma plugin.
Finally we moved onto the more complex components, including Molecules, Organisms and Layouts.
Now we could start to really see our design system coming together and feel how it was going to work in action.
After we'd designed our components, we needed to build them in code. We worked together with a core front end team to build one single component repository.
To make sure our new design system was able to be picked up and understood by any new developer (or designer) was extremely important to us. We therefore made sure that we documented each component extensively so anyone could understand the functionality and the reasoning behind this functionality.
.png)
The design team used weekly alignment sessions to collate internal feedback on components and make adjustments. We also used Figma comments to make sure nothing got lost or forgotten.
We set up a process to notify the developers of any changes to components and for them to notify us of when they were ready for review.
The communication system already in place at Sygnum was to use Jira. That made it an easy choice to continue to use this. We set up a board specifically for this project and created tickets to communicate changes to each other. The designers would assign tickets for any changes and the developers would assign tickets back for review.
The Sygnum Design System is now in place and is being used to design and build products. As with any technology related system, this is a living document and we expect it to constantly improve and evolve. We will always vow to match the latest industry standards and keep improving our design to work for all users.
We hope for the next step in our evolution to be to introduce a system for better documentation and collaboration with other internal teams such as Marketing. This would enable us to easily share assets such as icons, illustrations and photography and have a single source of truth for any changes on brand elements such as colours or fonts.
.svg)
.png){kind=small}
