Back to projects

FiTs Design System

Company overview

FiTS – Empower people to turn good intentions into a healthier lifestyle. The app Fits is aimed to help users establish healthy habits by adapting to their daily routine.

My Role

• Design strategy
• Design System
• Lead UX / UI Design
• Testing

Short summary

This project aimed to speed up the time to market for the health app Fits, which was facing issues with UX and UI inconsistencies and inefficiency in the collaboration between the design and development departments. The goal was to significantly reduce the time to market by increasing speed in design, testing, and development.

The approach taken was to lay out a foundation by defining design principles and creating a design system using the atomic design methodology, which emphasizes reusability, adaptability and compliance to design principles. The design system also aligned with the product vision and included frontend design, content strategy and performance for the app.

We were able to achieve a significantly faster time to market, a consistent look and feel, and a more efficient way to prototype and test.
B2C App
Design System
UI Design

| Situation

I joined FiTS as a design consultant. So first of all I brought together all stakeholders from the departments involved, held numerous workshops, to find out what challenges are being faced from a business perspective.

The challenge:

Speed up time to market

I noticed a big issue with UX and UI inconsistencies as well as inefficiency regarding time to market for features. This also included the collaboration between design and development department .
• Inconsistency:
There was no clear design language and a lot of usablity and accessibility issues. There was no reusability in terms of design-modules for the designers or the development team.

• Inefficiency:
Thus, time to market as well as time to test was extremely long.

| Goal

Significantly reduce time to market by increasing speed to design, test and develop.
1. Define Design principles
What is our common agreement on how we design for our product?

2. UI Inventory
Visualize the current inconsistency and patterns that are used.

3. Deciding on the framework
Define a clear and basic design system approach that fulfills the needs by being as simple as possible and as complex as necessary.

4. Creating the design system
Redesign all necessary parts and create a single source of truth for both designers and developers.

5. Test and expand
Continiously test and expand the system, while tackling the retention-problem.

| Approach

First: Let's lay out the foundation

Design Principles

What is our common agreement on how we design for our product?
As I found out, that there were no real guidelines regarding UX or UI decisions I figured, that laying a foundation and get everyone on board would be a good first step.

By guiding through this small workshop I could commit the team members to a shared understanding of design guidelines. This would help in future feature- and design system-related discussions.
The identified design principles :
• destination reachable with just a few clicks
• intuitive, low-effort operation
• Consider mental modals
• personal, close to the user
• modern, clear and lightweight
• motivating

Design System – How & why

Since the development of a design system both from design and code-perspective is not a small task, I needed to align with the team to evaluate the purpose of why we are investing time into this and get everyone enthusiastic.

A design system ist not only for the design department

Design – UX / Usability / Visual elements
Frontend – Modular & efficient code
Content strategy – tone of voice
Performance – loading time
Head of product – align with product vision

Requirements for the Design System

Regarding the size of the teams, the fluctuation in the design-department as well as the time-sensitivity, I needed to set specific requirements for the design system:
• Reusable
To save time in both design and development, all modules should be reusable in terms of design and code. One module per action, not per use case.

• Adaptable
Since different use cases sometimes need slight abbreviations of a single module, flexibility is key. Every module should be easily expandable without the need of coding it entirely from scratch.

• Compliant to design principles
All designs should follow the design principles that the team agreed to.

Why should we invest time into this?

• congruence within the app
• clear standards (tech & design)
• fast and effective way to prototype and test
• reduction of of subjective discussions about designs to objective decisions that favor the product- vision

Methodology – Atomic design

I decided to use the atomic design methodology since it fitted best the requirements and seemed like a good mix between fast implementation and effectiveness. I created a simple overview and a naming structure in close collaboration with the developers to not interfere with code-specific syntax.
Now getting to the fun part

UI Inventory of the status quo

By printing out all screens, inconsistencies and patterns could be identified more easily.
Isolating and clustering all different elements.
Buttons, icons, navigation controller and many more...
Proceeding with the redesign and creation of the actual design system

Redesign – Buttons

Old buttons with various styles and colours.
Defining one button-style to be used for all usecases to counter confusion and benefit accessibility.


Old icons with various styles and colours.
Unification: Set one icon style and determine whether the icons are used for navigation or decoration purposes.

Spacing & Colours

Layout-foundation: Defining the core elements for building layouts: margins and colours


Defining the Fontstyles.
Setting the spacing parameters between headlines and paragraphs.
This new design system serves as a (living) single source of truth for both designers and developers to iterate from. (The F is the logo of the company)

and finally... put it into use!

This case study showcases how the design system was put into practical use and further, how I tackled the problem of low user retention. Check it out!
FiTS - Product strategy
Redesigning the app based on research, user-testing and solving its biggest problem.

  Next Case Study

Back to projects