Befit Website
Project
Design a mobile-first exercise website that helps users find exercises that they can easily fit into their schedule.
Course
UI Immersion
Year
2020
Overview
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
Goals
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
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.
Features
- Personalized Routines
- Browse, Search & Filter
- Schedule
- Share with friends
- Progress
- Awards
Mood Boards
Style Guide
Iterations
Mobile Wireframes
Final Mobile, Tablet and Desktop Wireframes
Reflections
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.
