BodySpace Redesign
Jeannette Savage
UX Designer & Social Creative
Made with

BodySpace Redesign

BodySpace Redesign

How might we make tracking workout sessions easier and more effective for strength athletes?

Two important aspects of strength training, outside of picking up heavy things and putting them back down, is keeping a written record of your training and sharing your results with others. Both lead to increased motivation and an increased likelihood of athletes reaching their goals.

THE CHALLENGE
BodySpace is a website I use to track my own training. It's touted as being the largest online fitness community in the world, and it allows users to track their training and connect with others. But I find the website difficult to use, and I wondered why that was.

Using BodySpace as a jumping off point, I set out to see if I could design an improved social fitness website for strength athletes, making sure to design for many users and not just myself.

THE METHOD
I decided to take a Lean UX approach for this project. My aim was to assemble a Minimum Viable Product (MVP) for users to test and for me to improve upon in future iterations.

But first, the research

We must know our users before we can design for them.

The goal of the research was to collect information about athletes' training, tracking habits, and lifestyle.

The research consisted of three steps:

  1. A survey to collect quantitative data
  2. Interviews to collect qualitative data
  3. A heuristic evaluation and competitive analysis

I go into further detail in the following sections, but some of the insights gained through the survey and interviews included:

  • A majority of the participating athletes track their workouts and do so digitally.
  • All the interviewees noted simplicity and ease-of-use as major factors determining their choice of tracking method.
  • Each interviewee also mentioned enjoying sharing their progress with friends and family but were less interested in posting online for strangers to see.

BodySpace Redesign

The Survey

INTRO
I began with a short online survey to gather quantitative data about the habits of strength athletes. I decided on 5 multiple-choice questions that would be easy to answer, hopefully increasing people's willingness to participate. The survey had a completion rate of 100%, and participants took an average of 43 seconds to complete the survey.

RESULTS
Thirty-three strength athletes participated in the survey, of which 70% reported keeping a written record of some aspect of their training.

  • Over half of those athletes who track their progress have been participating in strength training for 2 years or less. 
  • The majority train 3 days a week or more. 
  • 96% track their workouts (i.e. weight, number of sets, number of repetitions).
  • 78% track their training digitally or online.

CONCLUSIONS
These survey results suggest tracking workouts is an important aspect of strength training and that many athletes prefer to track their progress digitally.

The Interviews

INTRO
At this stage of the research, I was most interested in hearing how the target group of strength athletes track their workouts and what their relationship to training was like.

I decided to speak to strength athletes who trained two or more times a week and who tracked their workouts. Three of the survey participants fitting this description agreed to participate in an interview.

Interviews lasted 15 minutes each and were conducted online through Appear.in, which allowed for screen sharing and required no installation ahead of time.

Some of the interview questions included:

  • Are there any goals you’re aiming for?
  • Can you show me what you do to track a new workout?
  • Are there any other tracking methods you've tried?
  • You’ve been training for [x number of] years. How has it been fitting workouts into your schedule?
  • Have you ever posted your progress online or shared it with friends?


CONCLUSIONS
All interviewees noted simplicity and ease of use as major reasons for using their chosen method of tracking their training. Each interviewee also noted being able to easily compare current stats to past stats as a motivating factor for using digital tracking over pen and paper. All three interviewees also mentioned enjoying sharing their progress with friends and family but were less interested in posting online for strangers to see.

BodySpace Redesign

Heuristic Evaluation and Competitive Analysis

I also completed a heuristic evaluation to better understand the way BodySpace works, where it did well and where it was lacking.

Some strong points I noticed:

  • It allows users to add notes to each exercise.

  • When users click to delete a workout, the site asks if you're sure, preventing accidentally deletion.

Some usability issues I noticed:

  • The first steps of tracking a workout (inputting the date and your energy level) are spread across an accordion, which has no option to go back and correct mistakes. Using the back button on the browser takes users back to the beginning.
  • When you add a new exercise, it asks you how many sets you did (see image). In this case, I did four sets, so I typed 4 and clicked ‘Create’. Even though there isn't variation between my sets, I am required to input the numbers individually for each exercise. However, if I tell the site there is only one set and I input my numbers, when I then click "Add a set to this exercise," it generates a new set with the weight and repetition fields already filled in with the inputs of the first set. Therefore, asking for the number of sets in the beginning becomes disadvantageous for users.

At this time I also took a look at two competitor sites to see where there was overlap and where there were gaps in the market. Overall I found similar strengths and similar usability issues on the competitors' sites. I came to the conclusion that there is a market for a well-designed workout-tracking website that doesn't exist behind a pay wall.

I kept these details in mind as I continued to the next step.

Utilizing the research

BodySpace Redesign

Personas

Using attributes taken from the survey and interviews, I created two personas to represent users.

Each persona was given:

  • a name
  • a quote
  • demographics
  • needs, goals, frustrations
  • a biographical paragraph

At this time, I also created empathy maps to more fully visualize the personas' wants, needs, and frustrations.

BodySpace Redesign

User Stories & User Scenarios 

Referring to the personas and empathy maps, I brainstormed a list of user needs in the format of “As a user, I want to [blank] so I can [blank].”

For example: “As a strength athlete, I want to add a new workout to my training log, so I can keep track of my progress.

I grouped these needs into features, and decided which features would be a part of my MVP (Minimum Viable Product).

While I had my personas in mind, I also created various user scenarios, which helped me visualize the users' path further in the designing stage.

Card Sorting & Sitemap

In order to find out how users expected to see content grouped, I conducted a closed card sort test online. I asked users to categorize 25 cards containing pieces of the features created earlier in the user stories. The card sort test was conducted through OptimalSort, and it was completed by six participants.

RESULTS
Although labeling differed across participants, nearly all participants grouped the cards into the following four categories:

  • My Account
  • Workout Tracking
  • Informational
  • Social

I used the card sort results to create a sitemap, which I referred to as I began the design phase.

Note: I made an error when designing the card sort exercise and included cards outside of the MVP. The sitemap below is designed for the MVP only.

BodySpace Redesign

Now for the designing part

BodySpace Redesign

Sketches

I started with low-fidelity sketches to get my ideas out of my head and onto paper. After some scribbling, I had 13 final sketches for the 9 screens of my MVP.

Although sketching can feel like a waste of time to some, this step allowed me to find and solve design problems that I hadn't seen when the ideas existed purely in my head. Better to deal with them at this stage rather than jumping straight into wireframes!

BodySpace Redesign

Wireframes

Next I used Figma to turn the 13 sketches into 9 low-fidelity wireframes. This step allowed me to "clean up" my sketches and make them easy to view, and therefore easy to shareI stuck to a greyscale color palette and used a bright blue as a highlight color. 

From this point on, I focused on designing the mobile version of my MVP, rather than the desktop version of the website. The three athletes I interviewed all tracked their workouts on their smartphones, and I'm assuming this is true for many other athletes as well. Also, it tends to be easier to go from mobile to desktop when designing.

DESIGN CHOICES

  • I wanted the MVP to essentially be a digital notebook, where users write in the exercise names instead of choosing from a database, the latter of which is standard in workout-tracking applications. I wanted to test the necessity of a database of exercises.
  • When tracking a new workout, entering numbers into Set 1 and clicking "Add set" duplicates the numbers into a new set. This prevents users from needing to enter the same data multiple times. 
  • When tracking a workout, the date defaults to today's date. Users can click the date to open a calendar and select a different date if necessary.
BodySpace Redesign

The Prototype

I assembled my wireframes into a low-fidelity prototype using InVision. After linking together the hotspots on the wireframes, I realized I needed a few more screens in order to make the prototype feel as real as possible. For example, I added overlays saying "Changes saved!" that automatically redirected after a couple seconds, and a few additional screens to simulate the inputting of data while tracking a workout.

Find the prototype below and try it out!

BodySpace Redesign

Usability Testing

The next step was to get the prototype in the hands of users to test how well it worked. Three usability test sessions were conducted remotely through Skype.

POSITIVE FEEDBACK

  • It was clear to the users that the calendar defaults to today's date and can be changed if needed.
  • Users liked writing in the exercise names themselves. Usually exercises have more than one name, which can make searching for an exercise difficult when you need to find it in an exercise database.
  • Users liked that clicking "Add set" copied their the numbers from Set 1. They said usually there isn't much variation from set to set, so this design choice makes tracking easier for them.

THINGS TO CONSIDER

  • The thinner buttons (e.g. "Add set," "Delete exercise") proved difficult to click. POSSIBLE SOLUTION: Make buttons taller.
  • Two users weren't sure where the barbell navigation icon led. They assumed it was for more information instead of taking them back to the dashboard. POSSIBLE SOLUTION: Test alternative icon choices in future iterations, perhaps through A/B testing.
  • Because of confusion over where the barbell icon led, two users looked for a back button that wasn't there. POSSIBLE SOLUTION: Add a back button to screens.
  • The overlay pictured on the right led to some confusion. POSSIBLE SOLUTION: Look at wording choices and alternative button coloring.

“[The design] was very easy to navigate!”

- Samantha, busy freelancer

BodySpace Redesign
BodySpace Redesign

Style Guide

Although I don't plan to create a higher-fidelity version until after a few more iterations, I wanted to create a few screen mockups to show my vision for the site. I began with choosing a color palette.

I had played with using orange or yellow for the base color since both are associated with energy, but I realized that strength training is less about energy and speed and more about power and stability. So I started with a dark blue as the base color.

I still liked the idea of using orange or yellow, especially since they are complementary colors to blue, so I brought in a yellow to give a feeling of health, wellness, and playfulness.

For the font, I chose Lato because it’s easy to read in various sizes, and it’s sleek without lacking personality. I wanted to use a sans serif font to keep a modern look and to give the feeling of looking forward, much like strength athletes set goals for the future.

Looking forward, looking back

The Next Steps

Now that users have tested the design, my plan is to use my notes and their feedback to iterate on the MVP. If major changes are made, I'll conduct another usability test with the new design. If only minor changes are made, I will consider integrating social features into the design. Alternatively, I might work on the design for the desktop version at this point.

What I've Learned

  • What you test doesn't have to be perfect. In fact, it's better if you don't spend too much time building something to test. Build the most minimal prototype you need in order to test with users, then iterate based on their feedback. It's important to make sure something works before you worry about making it look polished. Also, involving users throughout the design product ensures you design something they'll want to use.
  • User interviews are not conversations. My instinct during user interviews was to treat it like a normal back-and-forth conversation, validating the other person's story with my own anecdote. I needed to remind myself I am there to learn as much as I can about the other person and to not to let my biases affect their answers.
  • People are precious with their time, as they should be. They will find any excuse to not use your product, not agree to an interview, or not participate in your survey. People's time is limited. You need to make sure you create the easiest, most rewarding experience you can for your users.

Thank you for reading!

If you'd like to get in touch, you can reach me at thatsavagejeannette[at]gmail.com.

Bodybuilding.com logo © 2018 Bodybuilding.com UK. All rights reserved. Bodybuilding.com℠ and BodySpace® are trademarks of Bodybuilding.com UK.

Dear Jeannette Savage,

Best,