Responsive web app

UI Designer


Munich, Germany




Create a web app that provides a user-friendly platform for individuals new to or reengaging with fitness, offering structured workout plans and convenient access to ensure their fitness journey is successful.


This project was done as part of my training in UX/UI at CareerFoundry. The exercise aimed to develop a deep understanding of UI design principles and best practices for responsive web apps. I improved my skills in user flow and prototype design, visual hierarchy and pattern creation, typography and color selection, and interaction and animation implementation. I also learned how to ensure seamless handoffs. The goal was to gain practical and theoretical knowledge to create polished, effective, and beautiful UIs for all breakpoints.

Feature Requirements
  • Search and filter exercise videos (based on type, difficulty level, length, etc.)
  • Exercise scheduler (based on exercise interests and actual daily routine.
  • Create user accounts
  • Tracking and charting of users’ progression over time
  • Social sharing for routines or favorite exercises

develop a responsive web application aimed at addressing the needs of individuals who are new to fitness or reengaging with it after a period of inactivity. The objective is to create a user-friendly platform that empowers users to embark on and sustain a successful fitness journey. This platform should offer structured workout plans and convenient access to fitness resources.

Key Issues to Address:

1. Lack of Structured Guidance:

Many individuals new to fitness or returning after a hiatus often struggle to find structured workout plans tailored to their fitness level and goals. This lack of guidance can lead to confusion, frustration, and an increased likelihood of abandoning their fitness goals.

2. Access to Reliable Information:

Access to reliable fitness information and resources is vital for success. Users need access to workouts, instructional videos, dietary guidance, and progress tracking tools to ensure they can confidently navigate their fitness journey.

3. User Engagement:

Keeping users motivated and engaged over time is a significant challenge in the fitness industry. We need to find ways to maintain user interest, ensure they adhere to their workout plans, and celebrate their milestones to foster a sense of accomplishment.

4. Accessibility and Convenience:

In an increasingly busy world, users need a convenient and accessible platform. The web app must be responsive and work across various devices, ensuring users can access it wherever and whenever they need.

5. User-Friendly Interface:

To cater to individuals with varying levels of tech-savviness, the web app must feature a user-friendly and intuitive interface that makes it easy for users to navigate, select workouts, track progress, and receive guidance.

Design Process

In developing a problem statement and understanding user needs and goals, we focus on the five Ws: who, what, when, where, and why. They help us understand the context, users, and requirements of the project.

5 W Questions


People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.


A responsive web app is best for Fitted, as users can search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.


As the web app aims to get users into a routine that suits them, the web app can be used whenever they like. They will use the web app while they are searching for, scheduling, and following routines.


Users can utilize the web application at any time, Its responsive design ensures accessibility across different devices, making it adaptable to their preferred time and location.


  • To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new).

  • Exercise should be fun and suited to each user.

  • To save time by fitting exercise into daily routines, such as walking or cycling to work or school.


After we understand the user’s needs and goals, we are able to create user personas that represent the typical users of our product. By defining user personas during the design process, we can understand the user’s needs, improve usability, reduce risks, and increase engagement. It provides valuable insights into the user’s preferences, behaviors, and pain points, which can be used to create a product that aligns with their needs and resonates with them emotionally.


Age: 35 years
Job: Software Developer
Status: Mother and in a relationship
Fitness Level: Beginner

“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”
  • Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.

  • To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.

  • As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.

  • Rebecca wants help finding routines she can enjoy.

  • Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.

  • In addition, she wants to find short exercises that she can do multiple times per day in between other activities.

  • She wants the tool to keep her motivated as well, as her schedule can often be distracting

  • Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.

  • Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her goals.

  • Technological: Rebecca is very tech savvy, as she works on computers every day.

  • As a new user, I want to learn about different exercises, so that I can figure out what is best for me.

  • As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.

  • As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.

  • As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.

  • As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.

  • As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.

  • As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.

All the information presented in the empathize and define stages were based in the provided project brief

With the information provided from the previous step, we were able to identify the key features and functions of our app and map out the user flow, starting with the main screen and branching out to different features. We considered a card sorting method to created an intuitive navigation system that helps the user achieve their fitness objectives. We tested the user flow with beta testers and made adjustments based on their feedback.


During the design process, I began creating wireframes to reflect the steps in the user flow. Initially, I sketched low-fidelity wireframes and then designed mid-fidelity wireframes to add more screens. I ensured that the design was minimalistic, intuitive, and easily scalable to other screens such as tablets and desktop computers. The wireframe stage involves creating a visual representation of the product’s layout and helps to refine the design before moving on to prototyping.

defining the look and feel

At this phase of the process, it was time to consider how the app should look and feel. To initiate this process, I began by creating a moodboard that reflected the concepts and values our product was built upon and defined in the previous stages, such as 'Encouraging,' 'Positive,' and 'Energetic.

Before finalizing any decisions on typography, imagery, or color, I believe it's essential to conduct a brief exploration and A/B testing with potential users and fellow designers to gather feedback on these UI elements. Experimenting with various styles has helped me evaluate and validate my design choices for the app.


the next step in the design process was to refine the design. To accomplish this, I created a high-fidelity wireframe that included more detail and accurately represented the final product’s appearance and functionality. A high-fidelity wireframe is a detailed visual representation of the product that shows how the user interacts with the various elements on the screen. This stage helps to ensure that the design meets the user’s needs and expectations before moving on to prototyping.


the next step in the design process was to refine the design. To accomplish this, I created a high-fidelity wireframe that included more detail and accurately represented the final product’s appearance and functionality. A high-fidelity wireframe is a detailed visual representation of the product that shows how the user interacts with the various elements on the screen. This stage helps to ensure that the design meets the user’s needs and expectations before moving on to prototyping.


Monochromatic: Icons are solid color in accordance to the color palette and contrast.
Outlined: The icons are outlined for a more modern look and feel that aligns with the mood.
Stroke: Outline stroke is 1,5, which give visibility at the minimum icon sizes and maintains uniformity and coherence in the design.
Soft Edges: Soft and lightly rounded edges to make shapes with a friendly and welcoming look.
Geometric: Simple and consistent shapes that are readable and provide a well balanced, minimalistic icon appearance.


Button BG: Orange 100 / #ff6c06
Text: White / #ffffff

On Hover

Button BG: Carmesi 100/ #c43b00
Text: White / #ffffff


Button BG: White / #ffffff
Text: Orange 100 / #ff6c06
Border Color: Orange 100 / #ff6c06
Border With: 1px

On Hover

Button BG: White / #ffffff
Text: Carmesi 100/ #c43b00
Border Color: Carmesi 100/ #c43b00
Border With: 1px

other extra examples ui elements

Background: Orange 100 / #ff6c06
Element: White / #ffffff

Background: Dark 40/ #b9bac0
Element: White / #ffffff

Bar BG: White / #ffffff
Progress bar: Orange 100 / #ff6c06
Border Color: Dark 100 / #03071e
Border With: 2px

Background color: White / #ffffff
Text and element: Orange 100 / #ff6c06
Border Color: Orange 100 / #ff6c06
Border With: 2px


Appropriate Images
The pictures should show a friendly and save environment, following the same principles as the color palette, the direction we are establishing is to give our targeted users is a friendly web app, where they can feel related and not scare or intimidated, also diversity in ethnicity is also important showing that no one should be be set aside. Basic training, having fun and enjoying the time during the exercises, the pictures should show encourage, positive and energetic.


To make my designs responsive, I started by selecting the tablet and desktop breakpoints and scaling my existing grid in the design process. Responsive breakpoints are the points at which a website’s layout will change to accommodate different screen sizes. Once the breakpoints were established, I applied the visual design as dictated by the Fitted style guide to my wireframes. This ensured that the final design would maintain a consistent look and feel across all devices.Feel free to interact with the prototype

Feel free to interact with the prototype
Press Here!
Press Here!

It was an interesting challenge, thinking in a responsive web app, going from Mobil first and escalate the design in the different breakpoints and keeping a consisting look through the different stages. During this project I added to my process the concept of a Moodboard, which in the end become an essential part of the process to give the look and feel of the web app and start to build the face of the design. The journey trough this project added more value and new elements or tool to my workflow, not only in a technical level, by working with different software, but also in a conceptual level by adding new knowledge in terms of UI Patterns, Style guide lines, layouts for responsive design and pixel perfection – all these things showed me that UI design requires taste and a holistic vision