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.

Project Brief

Goal

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 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 minute 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.”

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

Recommendations

Browse, Search, Filter

Schedule

Progress

Share with friends

Awards

Mood Boards

Style Guide

Iterations

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 did not want to have to go back and make more. But 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. During user flows, I was already thinking about the sitemap. While creating mood boards, I was envisioning style guides. 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.