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
Health
Design System
UI Design
Strategy
| 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.
Icons
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
Typography
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!
