Fitit Responsive Web App

Client
UI Case Study
Sector
My Role
Project Time
Health, Self-care, Sport
User Interface design from conception to visualization
2 months
Project Overview
Fitit aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info. Secondly, finding routines that fit into your schedule takes work.
My Contributions
The project was accompanied by a three-month user interface design training, followed by a fixed course and a digital implementation plan. It helped me to deepen my knowledge of visual design, advanced UI, and design Hand-off.
Using the quantitative and qualitative data, I defined a target group profile Rebecca (Mom, 37), as a user persona, to better empathize with my user groups and prioritize goals according to her needs.
Building empathy

Persona (PDF)
Once I understood who I was designing for, it was time to decide what features to include in my app and organize them in a comprehensible, intuitive layout. To make tangible the steps a user makes to select a fitness plan, I have created a corresponding task flow and journey map.‍
Task Flows & User Journeys

Journey mapping is beneficial, on the one hand, to put a comprehensive process on paper and uncover problematic and promising points, on the other hand, to provide a basis for good cooperation for all stakeholders.
Findings

User Flow (PDF)
Marvel-Prototypes
With low-fidelity paper prototypes, the general structure of the application could easily be tested in usability tests. Taking the leap from paper to Figma enhanced my creativity because I could see variations in my designs more easily.
‍
Clickable Prototypes
After some paper prototyping adjustments, wireframes, mid- and high-fidelity prototypes were created, which I supplemented with clickability using Marvel and Figma.
Wireframing & Prototyping

Journey mapping is beneficial, on the one hand, to put a comprehensive process on paper and uncover problematic and promising points, on the other hand, to provide a basis for good cooperation for all stakeholders.
Findings

Marvel-Prototypes (PDF)Mid Fidelity-Prototypes (PDF)High Fidelity-Prototypes (PDF)
Our responsive web app offers a seamless user experience across all devices, from smartphones to desktops. Utilizing the latest web technologies, the app adjusts its layout and functionality for optimal viewing on any screen size. I created a functional and visually appealing product that is easy to use on any device. Whether you're on the go or at a desk, the Fitit app provides a convenient solution for accessing information and completing tasks.
Responsive Web App

High Fidelity-Prototypes Figma
The visual design was developed by iterating from mood boards and style tiles to the UI kit and finally creating the first version of the style guidelines.
‍
Visual Design

Style Guide (PDF)
Conclusion
I liked the challenges of responsive design, the grids, and pixel perfection - all these things taught me that UI design requires taste and a holistic vision, but it is far from art. Thinking in structure and even engineering designs will pay the price back during iterations and when designing for different breakpoints.
Next Steps
1. Development of further features based on user research for the desktop version.
2. More research on the users' routines and needs
3. Further iterations/test phases.
Learnings
#1 Solving the biggest problems requires small steps
Take small steps, because big changes can take time to be brought, especially not just by an application alone. Accordingly, develop more strategically meaningful and realistically applicable tools that steer in the intended direction.

#2 Always question everything and listening
You can’t solve problems well that you don’t understand. The most powerful tool is the question ‘why’? I learned that one of the effective techniques in working with stakeholders and in critiquing design work is the ‘5 Whys’.
LinkedinbehanceInstagram