Go from design to site with Framer, the web builder for creative pros.

Go from design to site with Framer, the web builder for creative pros.

Fitness web app for beginners with busy schedule

Fitted is a responsive web app designed to encourage people who want to exercise to get into a simple routine of physical activities.

The app offers routines, guides, interactive examples, daily challenges, and a progression tracker to help users build and maintain an exercise habit.

PROJECT

MY ROLE

TIMELINE

TOOLS

Career Foundry

UI Designer

6 weeks

Figma

Fitness web app for beginners with busy schedule

Fitness web app for beginners with busy schedule

Fitted is a responsive web app designed to encourage people who want to exercise to get into a simple routine of physical activities.

The app offers routines, guides, interactive examples, daily challenges, and a progression tracker to help users build and maintain an exercise habit.

PROJECT

MY ROLE

TIMELINE

TOOLS

Career Foundry

UX/UI Designer

6 weeks

Figma

Problem statement

Busy individuals who are new or returning to exercise need an easy way to find workouts that match their fitness level and fit into their daily schedule because they want to start a routine for physical activity and build a healthy habit.

Solution

A web application that provides personalized workout plans that can easily fit into a busy schedule. It keeps users motivated through daily challenges and tracks their progression over time, helping them build a sustainable fitness routine.

Design process

USER RESEARCH

USER RESEARCH

USER RESEARCH

How did I empathise with my users?

How did I empathise with my users?

How did I empathise with my users?

When I began working on a fitness app for beginners, I wanted to understand the thoughts, struggles, and needs of busy people when it comes to working out. I interviewed three individuals and uncovered key insights that helped shape the development of the Fitted app.

My work schedule is busy, so I need short workouts during my breaks to help with my desk job and avoid back pain.

Ana, 35

I don't know much about workouts, so I often spend a lot of time trying to choose the right one, which can be discouraging when I'm ready to start.

Tamara, 29

I want to live a healthier lifestyle and add workouts to my busy routine. My goal is to stay consistent and enjoy it.

Veronika, 31

There are many times when I lack motivation to work out because I don't see any progress.

Ana, 35

FITNESS TRAINER INTERVIEW

FITNESS TRAINER INTERVIEW

FITNESS TRAINER INTERVIEW

What is important for beginners to reach long term goal?

What is important for beginners to reach long term goal?

What is important for beginners to reach long term goal?

The fitness trainer shared essential information beneficial for beginners: emphasizing 2-3 week plans, regular praise, visible progress, and the importance of nutrition, calorie balance, and hydration.

‘’People need to realize that a healthy lifestyle isn't just about exercise. Nutrition, calorie intake, calorie burning, and hydration are all essential for achieving their goals.''

‘’For beginners, it's best to stick to 2-3 weeks plans that match their goals. This way, they can learn progressively.’’

‘’From my experience, beginners need to be praised for small achievements which motivate them to stay consistent.’’

‘’It's helpful for coaches to access people's progress data so they can offer better advice when necessary.’’

‘’People need to realize that a healthy lifestyle isn't just about exercise. Nutrition, calorie intake, calorie burning, and hydration are all essential for achieving their goals.''

‘’For beginners, it's best to stick to 2-3 weeks plans that match their goals. This way, they can learn progressively.’’

‘’From my experience, beginners need to be praised for small achievements which motivate them to stay consistent.’’

‘’It's helpful for coaches to access people's progress data so they can offer better advice when necessary.’’

‘’People need to realize that a healthy lifestyle isn't just about exercise. Nutrition, calorie intake, calorie burning, and hydration are all essential for achieving their goals.''

‘’For beginners, it's best to stick to 2-3 weeks plans that match their goals. This way, they can learn progressively.’’

‘’From my experience, beginners need to be praised for small achievements which motivate them to stay consistent.’’

‘’It's helpful for coaches to access people's progress data so they can offer better advice when necessary.’’

COMPETITIVE ANALYSIS

COMPETITIVE ANALYSIS

What can Fitted do better than other fitness apps?

What can Fitted do better than other fitness apps?

What can Fitted do better than other fitness apps?

PERSONALIZED AND GRADUAL PROGRAMS

Most fitness apps lack personalized, gradual programs for beginners, presenting an opportunity for the Fitted web app.

PERSONALIZED AND GRADUAL PROGRAMS

Most fitness apps lack personalized, gradual programs for beginners, presenting an opportunity for the Fitted web app.

MOTIVATIONAL SUPPORT

Most fitness apps lack consistent motivational support and ongoing encouragement for beginners.

MOTIVATIONAL SUPPORT

Most fitness apps lack consistent motivational support and ongoing encouragement for beginners.

PERSONA

PERSONA

PERSONA

How did research data inform my design decisions?

How did research data inform my design decisions?

How did research data inform my design decisions?

Research data directly informed my design decisions by guiding me in creating user personas based on data analytics from my research, which helped keep the focus on user-cantered design.

Insights gathered from user research highlighted their specific needs, pain points, behaviours, and preferences, which shaped the features and interface of the app.

The feedback from an interview with the coach ensured that the content was relevant and beneficial, aligning with user expectations and goals.

The research revealed 5 major needs...Enter Fitted app.

SELECT THE RIGHT WORKOUT

Select and filter from a variety of personalized workouts and gradual programs.

SELECT THE RIGHT WORKOUT

Select and filter from a variety of personalized workouts and gradual programs.

EASY-TO-FOLLOW TECHNIQUES

Follow workouts with video-supported instructions.

EASY-TO-FOLLOW TECHNIQUES

Follow workouts with video-supported instructions.

GET INTO A ROUTINE

Plan and schedule daily workouts, or select 2- to 3-week workout plans to achieve short-term goals.

GET INTO A ROUTINE

Plan and schedule daily workouts, or select 2- to 3-week workout plans to achieve short-term goals.

STAY MOTIVATED
Join daily individual challenges and earn rewards. Receive motivational reminders.

STAY MOTIVATED
Join daily individual challenges and earn rewards. Receive motivational reminders.

SEE PROGRESSION

Track short and long over time progression.

SEE PROGRESSION

Track short and long over time progression.

INFORMATION ARCHITECTURE

INFORMATION ARCHITECTURE

INFORMATION ARCHITECTURE

How did I organize the app features?

How did I organize the app features?

How did I organize the app features?

I wanted users to easily access important features, so I organized the fitness app with a clear, streamlined navigation structure.

USER FLOW

USER FLOW

USER FLOW

What screens need to be designed?

What screens need to be designed?

What screens need to be designed?

I created User flows to visualize users steps to effectively achieve their goals.

I used user stories to assure functionality and avoid certain mistakes.

WIREFRAMES & PROTOTYPES

WIREFRAMES & PROTOTYPES

WIREFRAMES & PROTOTYPES

How did I develop wireframes?

How did I develop wireframes?

How did I develop wireframes?

I started to sketch individual screens represented in User Flow diagram. These screens with the basic functionality allowed me to create a simple prototype and get a feedback.


Once my ideas were tested I moved on creating digital mid-fidelity screens in Figma.

I started to sketch individual screens represented in User Flow diagram. These screens with the basic functionality allowed me to create a simple prototype and get a feedback.


Once my ideas were tested I moved on creating digital mid-fidelity screens in Figma.

MOODBOARD

MOODBOARD

MOODBOARD

How did I decide on visual elements?

How did I decide on visual elements?

How did I decide on visual elements?

When focusing on app style, I created a moodboard for a fitness app aimed at busy individuals. It features an energetic, professional colour scheme to keep users motivated and enjoying their workouts. The style is modern and easy to navigate, with images that inspire action and show how fitness can fit seamlessly into their schedules.

Colour Palette

The main goal was to find a colour palette that energizes and motivates people who are new to fitness, without being too overpowering or aggressive.

The main goal was to find a colour palette that energizes and motivates people who are new to fitness, without being too overpowering or aggressive.

The website offers both dark and light modes, allowing users to choose their preferred theme.

The website offers both dark and light modes, allowing users to choose their preferred theme.

Primary

#FCCE58

#F9DE97

#FFFFFF

#1D1D1D

Secondary

#59FC7B

#F6F6F6

#CAC4D0

#736E7C

Gradient

#FCCE58

#59FC7B

#999999

#FFFFFF

#FCCE58

#FFFFFF

Primary

#FCCE58

#F9DE97

#FFFFFF

#1D1D1D

Secondary

#59FC7B

#F6F6F6

#CAC4D0

#736E7C

Gradient

#FCCE58

#59FC7B

#999999

#FFFFFF

#FCCE58

#FFFFFF

Typography


When selecting the typography, I knew it had to fit the style seamlessly. Montserrat was the perfect choice. Its modern, clean design matched the app’s aesthetic, and its high readability was essential for the users.

Typography


When selecting the typography, I knew it had to fit the style seamlessly. Montserrat was the perfect choice. Its modern, clean design matched the app’s aesthetic, and its high readability was essential for the users.

Typography


When selecting the typography, I knew it had to fit the style seamlessly. Montserrat was the perfect choice. Its modern, clean design matched the app’s aesthetic, and its high readability was essential for the users.

Montserrat

Montserrat

Montserrat

SemiBold

Regular

UI Elements

RESPONSIVE WEBSITE

RESPONSIVE WEBSITE

RESPONSIVE WEBSITE

How did I design for different breakpoints?

How did I design for different breakpoints?

How did I design for different breakpoints?

Since it’s important for users to easily follow workout videos on larger screens, I took a mobile-first approach to ensure the MVP was streamlined for small screens. As I adapted the design to larger breakpoints, I added progressive disclosures to enhance functionality and user experience on bigger devices.

USER TESTING

USER TESTING

USER TESTING

What did users say about the prototype?

What did users say about the prototype?

What did users say about the prototype?

As my design and solutions were developing I wanted to be sure users are satisfy and able to complete tasks. I conducted usability testing with three participants. The most complicated and questioned part was scheduling workout. After detailed feedback I decided to simplify process and presented info.

Issue with scheduling workout

The scheduled workouts look like various scheduling options.

Issue with scheduling workout

The scheduled workouts look like various scheduling options.

Solution
  • Move scheduled workouts below the date and time selector.

  • Change the title to improve clarity.

Solution
  • Move scheduled workouts below the date and time selector.

  • Change the title to improve clarity.

Create personalized workout plan

Create personalized workout plan

Create personalized workout plan

Busy beginners can personalize their workout plan to match their schedule and goals, allowing them to start exercising right away without spending too much time searching for the right workout.

Browse and schedule workouts

Browse and schedule workouts

Browse and schedule workouts

Users can plan their exercise by browsing through various workouts and easily adding them to their calendar.

Complete daily challenges

Complete daily challenges

Complete daily challenges

Motivation is key—users can take on daily challenges, earn rewards, and compete with others on the leader board to stay engaged and driven

See over time progression

See over time progression

See over time progression

Users can show visible progress over time by tracking improvements, reaching new milestones, and sharing results with their personal trainer.

Reflection and Next steps

Key learnings


  • Getting people to use an app isn’t just about features; it’s about how it fits into their lives and makes them feel.

  • Each element—colour, layout, and hierarchy—shapes a cohesive user experience.

  • Designing with grids, breakpoints, and a style guide enhanced my understanding of responsiveness and improved team efficiency.


  • Getting people to use an app isn’t just about features; it’s about how it fits into their lives and makes them feel.

  • Each element—colour, layout, and hierarchy—shapes a cohesive user experience.

  • Designing with grids, breakpoints, and a style guide enhanced my understanding of responsiveness and improved team efficiency.

Next steps


  • Explore personalized content tailored to meet users' specific fitness needs.

  • Enhance responsive design to optimize the app's experience on both tablets and desktops.

  • Test and refine the user journey to ensure users can easily find the right workout or program for their goals.



  • Explore personalized content tailored to meet users' specific fitness needs.

  • Enhance responsive design to optimize the app's experience on both tablets and desktops.

  • Test and refine the user journey to ensure users can easily find the right workout or program for their goals.


Thank you for scrolling!

See other projects

Let's connect!

Let’s talk projects, collaborations, or anything design!

terezia.bubanova@gmail.com

Copyright 2024 by Terezia Bubanova

Let's connect!

Let’s talk projects, collaborations, or anything design!

terezia.bubanova@gmail.com

Copyright 2024 by Terezia Bubanova

Let's connect!

Let’s talk projects, collaborations, or anything design!

terezia.bubanova@gmail.com

Copyright 2024 by Terezia Bubanova

Create a free website with Framer, the website builder loved by startups, designers and agencies.