My work on a design system for four products

The work covered four products: the BOSS Money mobile app, the BOSS Revolution mobile app, the BOSS Money website, and the BOSS Revolution Retailer portal.

I wanted them to feel like they belonged together. Things like text sizes, colours, spacing, and buttons should follow the same rules. But a phone app and a retailer portal have different jobs. I needed to leave room for that.

I worked with the team to build the system in Figma. We called the shared library Essentials. It held the basics that the products had in common, with separate Flutter and web libraries built on top.

For me, this made the work easier to break down. I could work on the shared colours, type, and spacing in one place, then work on how those choices should look in a mobile or web component.

We didn't need a separate set of basics for every product. We needed a shared starting point that was useful across all four.

I used tokens and Figma variables to connect the components to those shared choices. Instead of picking a colour again for each button, I could use a named value that the button referred to.

A button background is a simple example. There is a colour, a name for what that colour does, and a button that uses it. The diagram below shows the idea with example names.

That helped me keep track of what I was changing. It also gave the other designers the same choices to work with when they built their screens.

I wanted the mobile and web products to share a look without forcing the same layout onto both. We kept a Flutter design system for mobile and a web design system for the website and retailer portal.

I could carry the same text styles and colours into both, while leaving room for different navigation, forms, and screen sizes. A retailer portal has space for information that would need a different layout on a phone.

Essentials kept the basics together. The Flutter and web libraries gave me room to design for each platform.

We scaled the system across products and platforms in a team of more than 400 people. My work on it had to be useful to people beyond the designers building the library.

I wanted someone starting a screen to know where to look: Essentials for the shared basics, then Flutter or web for the components. They should be able to pick up the work without having to guess which version to use.

This was a team effort. My part was in product design, helping build the system and keep the four products consistent as it grew.

I wanted these products to look good. Matching the same rules across four products was only part of what I was trying to do.

I cared about the space around the text, how a form read, and whether a button stood out enough. Those details still needed attention on the actual screens, even with a shared library behind them.

That's what I wanted from this system: something I could use to make good screens, and something the rest of the team could use too. We brought BOSS Money and BOSS Revolution closer together across mobile and web while keeping room for each product's needs.