The Mission

"Creating a themeable Design System for a multi-product company to increase acceleration, decrease lead times and produce an overall consistency for the "Europace Experience"

Setup

Team members: 3
UX Design: 1
UI Design / Product Owner: 1
UX Research: 1
Development: Innersource

First of all:

Identifying the company's product landscape and different interface languages for an overview.

A 20-year-old, decentralised, multi-product company has developed quite a few different solutions over time. in order to get an overview of what we need in terms of components, styles and/or possible themes, all interfaces and developed live versions were collected together with the product teams.

Challenge to streamline:

10

Products

04

Design languages

Funny findings

50+ grey scales in one product, a whole platform used inline styles, no clear separation between front and backend, altering design languages inside of one frontend

And now the biggest part: Alignment.

Gathering info about the current state of tech environments

Different decentralized teams are working with different tech stacks. From Angular to React over to old GWT or plain HTML / CSS landing pages.

Gathering the roadmaps and goals of the product teams

In order to understand the prioritisation and plans of the product teams it was necessary to gather their roadmaps and the goals they want to achieve. In that way, we could identify on a high level which team could participate in being a pilot for the first design systems components.

Setting up first KPIs for the design system for making the impact measureable

Making the impact of a design system measurable can be tricky. Especially in the first steps and phases. We identified a set of shared core components: how many of these have already been described in the concept, and implemented in the design and how many have been written in code to make the success of usability visible?

Adoption was chosen as the second indicator to show whether the teams make use of the components.

Thirdly, and for later phases, we chose lead times for design and for dev tickets. How quickly can concepts and designs be tested? And how quickly can new products be made marketable and go live?

Identifying pilot teams with Product Board and Management.

12 Teams were interviewed to identify their potential of being a pilot for the first design system implementation. 1 team was chosen to be the first pilot partner due to the fact that they were building a brand new b2c frontend.

Setting up
the required architecture

A scalable and easy-to-maintain library & token architecture were provided for delivering the right environment for the B2B Platform with multiple running products, several B2C solutions as well as white-label solutions for our clients.

Finding the design language for the new system via "UI mood boards" and "proof of concept key screens"

We collaborated closely with the brand team to develop a new design language for our system. Starting with simple UI mood boards, we made decisions such as abandoning border-radius and using Opentype features like Slashed-Zeros and Monospace figures. We also created a distinction between B2C and B2B in Teal and Purple, after considering all perspectives. Our iterative and collaborative process ensured that our product and brand always spoke the same language.

Creating foundations

In the course of the rebranding of the Europace brand by the marketing team, the first foundations such as colour palette, fonts, elevations, state rules, etc. were developed for the design system.

Designers Note:
Developing a new design language, identifying the needs and requirements of a design system, building the structures and implementing the system is not a linear process. It is highly iterative and more than once it was necessary to go back and adapt what had already been decided.

Production Time

We took our design decisions, produced proof of concept key screens and identified the first set of most used components.
the next step was to produce the first set of 23 components to enable the product teams to benefit from the design system.

The first goal was to have easy-to-use and ready-to-prototype Figma component libraries.
To ensure that we were in constant feedback with the actual users of these libraries: the product designers in the respective product teams.

Go Live.

Version 1.0 is currently in development and will go live with "BauFi #Passt".
A white-label solution for creating mortgage leads.

Let's talk about it.

If you got any feedback, questions or any type of input: dont' hesistate to get in contact with me.

Imprint  —  Data Security