Credit Suisse

Banking design system

Create design system for web and mobile banking


Timeline. Jun 2018 - Oct 2021

Problem statement. The design guidelines provided by the branding team were focused on print and marketing sites. They missed many application related aspects. As a result designers and developers invented their own guides and the application wasn’t consistent and had poor usability.

Goal. Define a common design language for mobile and web, so that teams become more efficient and they achieve higher level of consistency.

Team. 3 developers, 1 brand designer, 2 UX designers

Roles played. Me and another senior UX designer were responsible to define and approve each part of the design system.


Visual design (Sketch)

Interaction design (Sketch)

Prototyping (InVision, Origami Studio)

IT hand-offs

Usability testing

Stakeholder management

Getting started


First we needed to find out who everyone will consume this system. Secondly, we wanted to know what format would be the best for them.

Proposed solutions

First version of the design system, a table in Confluence
First version of the design system, a table in Confluence

Lessons learned

The table was adapted by the teams due to its simplicity and easy of access. But as the content grew, it became difficult to maintain and navigate with in. We knew we needed a better solution. Using Confluence as an MVP helped us to quickly learn what information is important for the engineers.

Designing the system

The design system documented in Frontify
The design system documented in Frontify

Lessons learned

SketchApp UI libraries worked for us perfectly. Plus, we found that the interactive UI library benefits not only the developers, but the junior designers as they can observe and study certain interactions.


Back to Home