Flow: Work in Progress

 

This page will outline the process and work that I've completed thus far for my final project at Bitmaker's UXPD immersive course. Feel free to contact me if you have any questions or comments regarding the content discussed below.

 
 
 

Why Flow?

As someone who trains and exercises on a consistent basis at the gym, I recognize how important it was to track results and targets to make the progress I set out to achieve. It can become a cumbersome task for a beginner, but it pays dividends if someone is able to stick to their guns and stay disciplined. 

With Flow, users can stay focused, log their workout results, and visualize their progress.

 
 
 

What's life like right now in the gym?

With the initial concept in mind, I conducted a competitive analysis to determine what solutions the users currently use to track their workout results and performance. I learned the following:

  1. A large number of mobile apps have evolved into bloatware. They focus on cross-selling products, or have shoehorned unnecessary social functions, increasing the friction of the actual process of logging workouts.
  2. Some mobile apps are just glorified spreadsheets. These apps generally have poor usability and don’t maximize the potential of using a mobile device.  
  3. The notebook is an analog solution that’s been in use for a long time, but is inconvenient and cumbersome to use and record, and difficult to review at a glance.
  4. The excel spreadsheet is a big, cumbersome document that can’t be accessed on the go easily. It’s functional, but it’s definitely not pleasant to interact with.
 
 
Conducting user interviews with individuals from varying backgrounds helped me understand and empathize with each of their unique needs and desires. This helped in identifying key features to include in Flow.

Conducting user interviews with individuals from varying backgrounds helped me understand and empathize with each of their unique needs and desires. This helped in identifying key features to include in Flow.

 

What are users looking for?

In order to determine the appropriate scope of features, I conducted user interviews with 8 different individuals all with varying levels of fitness, confidence, frequency of working out, and motivations behind working out.

Users unanimously acknowledged that their phone was a source of distraction between sets, and they all use their phones to listen to music

The highly experienced individuals let me know that they use the notes app or a convoluted spreadsheet to track their workout results. They also identified that they would track many different types of progress, such as 1 rep max, endurance, time trials, and have varying plans depending on their training schedule.

The less experienced users who frequent the gym less consistently mentioned that seeing progress is motivating, and that workout suggestions are always welcomed due to their limited experience.

 
 
“I don’t want to be constantly punching in numbers - it should be set & forget.”
“I am usually more motivated to go to fitness classes because they have schedules.”
“I use a combination of my notes app and an excel spreadsheet to log my workouts. It’s not a great system but it’s what I have to do.”
“I don’t remember what workouts I did last time, or what weights I was/wasn’t able to lift.”
“I want a set timer.”
 
 

Personas

Based on the interviews, I formed 3 personas. I chose to cater towards beginner-intermediate users, as I learned that more advanced individuals have highly unique and fringe activities and processes that need require highly specialized features that would prove to be confusing for majority of users.

  1. The beginner: just started going to the gym and is somewhat clueless about what exercises to perform and equipment to use
  2. The experienced beginner: has a general routine but wants to start logging their workouts to be more effective in the gym and becoming more consistent with going to the gym
  3. The intermediate user: has their own unique consistent workout plan but needs a distraction-free setting for their workout while still being able to track the important numbers

 

 
A snippet of the first version of the user flow that I mapped out based on the features that user research helped form. The red highlights the user flow that I would be focusing on for the final presentation.

A snippet of the first version of the user flow that I mapped out based on the features that user research helped form. The red highlights the user flow that I would be focusing on for the final presentation.

 

Translating Research into Features & Goals

Based on the user research, I mapped out the user flows for the four features that the user research helped form: logging workouts, viewing statistics based on logged data, scheduling and creating workout plans, and viewing past and future workouts in a calendar view.

With the features laid out, I set out to create the list of master goals to keep myself on track and remind myself of the user's ultimate needs and desires, throughout the design process.

  1. The user must not be distracted from their workout
  2. Customization should be allowed, but the inclusion of it should not confuse beginner users
  3. Minimize interactions with the phone to minimize distraction
  4. Quick, on the fly inputs
  5. Don't be a spreadsheet
 
 
 

Inputting Research into Wireframes

Based on the personas, I focused on sketching wireframes for the workout logging feature, as that was the primary function of the application for the final presentation. I sketched out four different versions and tested it with users through a paper prototype. Outlined below are summaries of user feedback from each iteration. 

 

Iteration 1

Users felt that due to the crowded UI elements, there wasn't a sense of focus and everything was presented in a similar fashion to a spreadsheet. They felt that if they used this during a gym setting, they would feel overwhelmed by how much they need to complete. The crowded UI also meant that I would have to rely on swiping gestures to delete sets which aren't 100% intuitive or obvious to the user upon first glance.

In addition, users expressed concern about how difficult it was to complete a set, because they would have to tap on the “O” to complete a set, which would turn into a checkmark.

 

 

Iteration 2

Taking what users had mentioned about the first iteration being too similar to a spreadsheet, I tried a cleaner, visual approach,

Users felt that this was the more visually interesting design, but had fundamental usability issues. They liked how the circle represented the number of reps that needed to be completed, and it was more visually pleasing compared to the first iteration. 

However, users were confused with how to advance to the next set - expressing confusion if they were supposed to tap the checkmark, or swipe across to the next bubble. Users were not aware they were able to adjust the weight levels because it did not seem like an interactive element like the circle. There was also confusion about how they would be able to skip or edit the rest time.

 

Iteration 3

Based on the feedback from the previous iterations, I attempted something that was a mix of the previous two and displayed important information in a bolder fashion within cards.

Users felt that it was a lot easier to use than the previous two iterations, and felt like it was a healthy balance between information shown and the “cleanliness” of the screen. Users understood the cards that the rep/weight information was displayed, as well as the light affordance that was applied to future and past sets. However, users still displayed the same usability issue of not being sure if they should swipe, or tap the main CTA button to advance.

 
 

Iteration 4

This design showed the least usability issues, and was ultimately was used for the final presentation. Users liked the balance between ‘present’ information and ‘past/future’ information. However, they expressed concern about legibility of copy within the bubbles, and whether or not the bubbles can be used to advance to the next set. 

Despite the short comings, it is able to accomplish the following:

  1. See a general overview of the upcoming sets for the exercise 
  2. Edit rep and weight with minimal interaction and input (menus based on ‘nearby values’ instead of a blank field, as most users mentioned that they wouldn’t adjust the numbers from the original amount by a significant amount)
  3. Clearer CTA as to how to advance to the next set or exercise
  4. Ability to review the entire workout routine with minimal disruption
  5. Focused view of the particular set at hand, with the most important information displayed
 
 
 

Putting Assumptions to the User Test

 
Looking at how Messenger utilizes rich notifications in the lock screen and how it could apply for Flow.

Looking at how Messenger utilizes rich notifications in the lock screen and how it could apply for Flow.

 

In addition to the feedback I received from the aforementioned designs, I tested using an alternative form of interaction for input - rich push notifications.  I saw how Facebook Messenger utilized rich notifications to enable quick chat inputs via 3D Touch and tested this with users. I wanted to test if staying on the lock screen to input their results would keep them focused, rather than unlocking their phone to access the app to input results.

Testing both Facebook Messenger’s notifications and the paper prototype showed that users weren’t generally aware of 3D Touch interactions despite owning 3D Touch-enabled iPhones. They also expressed how using Touch ID to unlock their phones was usually faster than interacting with a rich notification. This helped put to rest a feature assumption I made, and allowed me to focus on a more traditional form of interacting with the app.

 
 
 

Current State of Affairs

With the February 1st deadline fast approaching, this is my current to-do list for Flow:

  1. Revisit visual design, as the last round of user-testing suggested there was a mix of both iOS and Material design elements, which caused confusion
  2. Currently testing Apple Watch screens, as users with wearables mentioned how it would complement the experience with a frictionless integration with the standard app
  3. Reorganizing my messy master Sketch file with consistent styles and symbols (see right)
  4. Test
  5. Test
  6. Test

Thanks for your time, and if you have any questions, please do not hesitate to contact me at hello@dallaskwok.com or 416-890-0607.