Befit Website


Design a mobile-first exercise website that helps users find exercises that they can easily fit into their schedule.


UI Immersion




Befit is a mobile-first workout website that I designed as a project for a User Interface course through Career Foundry.  It eases users into making healthy habits instead of habitually renewing failed exercise resolutions.

Befit Website Prototype

Project Brief


The project brief stated that the goal of Befit was “to motivate people into an exercise routine that suits their level, schedule, and interests.”

Since finding exercise routines for your level can be difficult, Befit should help the user by providing routines, guides, interactive examples, and info

Befit should also be able to help users fit exercise into their schedules – even just for 5 minutes.

User Persona

The course put together the user persona profile. Rebecca is a 26-year-old software developer who has a Master’s in Software Development. She is in a relationship, and is raising a young child.

Rebecca is a beginner with a chaotic schedule. She wants to find something that will do the following:

  • Help her to learn how to exercise properly
  • Get her to be be less sedentary
  • Keep her motivated
  • Fit short exercises that she can do throughout the day, in between activities
“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.”
Befit User Persona: Rebecca
User Persona

User Flows

User flows show the steps users take to achieve a goal. My first set of was more of a site map than a logical series of decisions. So I eliminated the extraneous options and focused on the steps of each task.


Mood Boards

Style Guide



Overproducing & Time Management

I got over excited when I found icons and exercise images that I liked, and created whole sets that were not necessary for the wireframes.

I would have saved a lot of time by only working on the ones I needed.

Focus on one aspect at a time

Throughout the design process, I felt like I was always jumping the gun.

It made me over-confident in implementing my design choices and I found that I did not like my results.

Focusing on one aspect of the design for each iteration made the process easier for me.

Next Steps

Take injuries into account automatically

  • Do a round of research with users and trainers to find out how to accommodate injuries.
  • Include tips of what to watch in one’s form during an exercise, as well as notes to consult one’s physician.
  • Take user pain into account. If users could enter their injuries into their profile, then Befit could adjust the recommendations for them.

Logs and Levels

  • Develop logging function and screens for testing. Once users have logged enough exercises and routines, Befit could suggest that the user level up by adding more reps, weight or time – or to a more difficult exercise.
  • If users are logging more reps, weight, time on their own then Befit could automatically level them up and give them an award badge.