coverimg-bg.jpg

Flow

Mobile App, UX & Product Design

A fitness application that keeps you on track and in focus

The Challenge

The Challenge

In the journey towards physical fitness, we psych ourselves up to push our limits, make progress, and achieve goals. However as humans, we aren’t perfect. Occasionally, we become forgetful, distracted, or unmotivated. These tendencies are what pull us away from pushing forward.

The Objective

The Objective

The challenge was to design a digital experience that would help augment and improve the overall workout experience, and keep users focused. 

Flow would allow users to log exercises & results seamlessly during a workout. The app will visualize the recorded workouts, providing users with a better understanding of their progression over time. 

What was my role?

This was a student project created during my time at General Assembly's Immersive UX & Product Design course.

My role involved user research, persona development, user flows, interaction design, user flows, wireframes, prototyped functionality, and visual design.

Sketch, InVision, Principle, and Photoshop were used. 

What's out there?

What's out there?

Before anything else, I conducted a competitive analysis to understand what solutions were currently on the market, and their unique strengths and weaknesses.

Some apps have evolved into bloatware, cross-selling products, or shoehorning unnecessary social functions, increasing the friction of actually logging and reviewing workouts. Other apps are simply glorified spreadsheets with poor usability and don’t maximize the potential of the platform.

The notebook is an analog solution, but inconvenient to log, difficult to review the past at a glance, and requires the need to bring along an additional physical item to the gym.

The spreadsheet is a big, cumbersome file that can’t be accessed on the go easily. It’s functional, but it’s definitely not pleasant to interact with.

Understanding Users and Their Problems

Understanding Users and Their Problems

In order to understand who I’m designing for and appropriately inform design decisions, I conducted user interviews with twelve individuals. They all came from various backgrounds, with different levels of fitness, confidence, and motivations behind working out and staying fit. 

It's through this research that I'd be able to design a product that
addresses real pain points and encompasses user needs.


What did I learn from research?

Majority of participants use their phone to listen to some form of audio content (music, podcasts, audiobooks) while working out. They also universally acknowledged that their phone was often a source of distraction in the gym.

More experienced individuals always tracked their workout results. They would track different ‘types’ of progress, such as endurance, 1 rep max, total volume lifted. 

Less experienced individuals would go to the gym on a less frequent basis and don't usually have prescribed workout routines. They also mentioned that progress is difficult to keep track, because of their inconsistencies in workouts.

Being able to visualize their progress was important to most users. They mentioned that numbers are an easy to understand indication of progress over time, and that it would help motivate them to keep their routines up. 
 

Personas

Personas

Based on the interviews, I created three personas, each addressing a different skill level’s needs. 

The beginner: just started going to the gym and is somewhat clueless about what exercises to perform and equipment to use

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

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

I chose to cater Flow towards beginner to intermediate users, as I learned the more advanced individuals often have highly unique and fringe activities and processes. They'd require a number of highly specialized features that would prove to be confusing for majority of users who would be using the app.

Translating Research into Features

Translating Research into Features

As a result of the user research, personas, and subsequent user interviews, I mapped out comprehensive user flows for the features that the user research helped form. This included logging workouts, viewing stats & history, including preset routines, and creating custom routines & exercises. 

With these user flows and defined features for Flow, I sketched out paper prototypes to perform my initial rounds of user testing, before moving onto higher fidelity designs.

Sketches and Paper Prototyping

Sketches and Paper Prototyping

Based on persona needs, I focused on sketching out basic wireframes for the workout logging feature to test. I needed to test and iterate as quickly as possible, so I chose to conduct user testing with a paper prototype to gather feedback, and test major interactions & overall usability. This helped with making quick revisions on the fly.

Through testing, users helped uncover usability issues, made recommendations on how information should be organized, and provided insights into how their needs were/weren’t met. After each round of tests, I culled feedback before beginning a new iteration to prevent scope creep and ensure I stayed on track with the ultimate goals of the product. 

Basic Wireframes to Test Interface Usability

Basic Wireframes to Test Interface Usability

With insights gathered from the iterations of the paper prototype, I transformed the sketches into low-fidelity wireframes with Sketch. These wireframes helped with fine-tuning the hierarchy of information and reorganizing certain UI elements to fit within the bounds of the device. 

These wireframes were also another opportunity to conduct user testing. This time, participants would test the app using an InVision prototype, which better simulates real use. By testing in a digital form factor, my goal was to iron out usability, discoverability & information hierarchy issues, and test out certain UI elements, before moving onto visual design. I've outlined two examples of tests I conducted with these wireframes below.

   Testing the iOS 11 Design Language   With the iOS 11 beta released to developers while I was working on this project, I chose to explore the option of adopting iOS 11’s bolder design language. I wanted this app to reflect the future of the platform, and make it a more consistent experience with the rest of the operating system.  With an A/B test, I gauged usability and general sentiment towards the two designs. I learned most users were unfazed by the newer iOS 11 style, some preferring it, citing their familiarity with the Apple Music app. To me, that was a green light to style the rest of the app in line with this newer design approach.


Testing the iOS 11 Design Language

With the iOS 11 beta released to developers while I was working on this project, I chose to explore the option of adopting iOS 11’s bolder design language. I wanted this app to reflect the future of the platform, and make it a more consistent experience with the rest of the operating system.

With an A/B test, I gauged usability and general sentiment towards the two designs. I learned most users were unfazed by the newer iOS 11 style, some preferring it, citing their familiarity with the Apple Music app. To me, that was a green light to style the rest of the app in line with this newer design approach.

   Implicit vs Explicit UI   From the user research, it was clear that users wanted flexibility to edit their workout routine. Users need the ability to: add, remove, or reorder exercises, and edit weights, reps, and number of sets. With the need for such a large number of editable elements, it’s a tricky balance of information density, visual clutter, and discoverability.  I wanted to A/B test two designs surrounding this issue. The original design (left) obscures all editing UI elements until the user taps on 'Edit'. The alternative design (right) explicitly shows the editing UI elements without requiring any additional interaction. The alternative design was preferred by most testers, where they preferred less taps to start a workout, and didn’t mind the additional UI as a compromise.   


Implicit vs Explicit UI

From the user research, it was clear that users wanted flexibility to edit their workout routine. Users need the ability to: add, remove, or reorder exercises, and edit weights, reps, and number of sets. With the need for such a large number of editable elements, it’s a tricky balance of information density, visual clutter, and discoverability.

I wanted to A/B test two designs surrounding this issue. The original design (left) obscures all editing UI elements until the user taps on 'Edit'. The alternative design (right) explicitly shows the editing UI elements without requiring any additional interaction. The alternative design was preferred by most testers, where they preferred less taps to start a workout, and didn’t mind the additional UI as a compromise. 
 

High Fidelity Wireframes

High Fidelity Wireframes

After working through multiple iterations of the features based on the user testing with the low-fidelity wireframes, I moved towards creating higher fidelity designs. 

With the visual design in mind, the goal of this app wasn't to be bold and punchy like many fitness-related brands. Flow keeps you in focus; it's to be neutral, but not have a muted presence. Orange with grey undertones was the choice, alongside Maison Neue in two weights.

These higher fidelity designs were used to conduct the final rounds of user testing, where I could identify any micro-problems with Flow, including UI elements, interactions, and wayfinding. An InVision prototype was augmented with animated interactions created with Principle, helping simulate a more realistic experience of using Flow. This would help enable testers to better identify issues and smaller details that would otherwise go unnoticed in a less "realistic" prototype.

   Logging Exercises and Resting   Flow is designed to keep users focused. The experience of logging exercises is designed so users only see what’s relevant at this very moment - their exercise. However, workouts are never set in stone, so adjustments should be made with minimal disruption.   It was important to design an experience that required minimal interaction in order to keep users focused on their task. Through interviews and observation, I learned users adjust rep counts & weights usually only in small increments. This led me down the path of exploring solutions that weren’t simply a keypad or list, where I landed on a quick picker. This minimized the number of taps needed, requiring only a swipe or two.


Logging Exercises and Resting

Flow is designed to keep users focused. The experience of logging exercises is designed so users only see what’s relevant at this very moment - their exercise. However, workouts are never set in stone, so adjustments should be made with minimal disruption. 

It was important to design an experience that required minimal interaction in order to keep users focused on their task. Through interviews and observation, I learned users adjust rep counts & weights usually only in small increments. This led me down the path of exploring solutions that weren’t simply a keypad or list, where I landed on a quick picker. This minimized the number of taps needed, requiring only a swipe or two.

   Resuming Workouts   While users should stay in focus during their workout, they should never feel locked in - users should be able to use the app as they wish. I adopted the card-based system present in the Apple Music app, where the workout logger ‘floats’ above the rest of the app.  Thinking of the relationship between the different states in the app,  the card metaphor creates an extra ‘layer’ of interaction , providing reinforcement to the user they can still exit the workout logger in a non-destructive manner. After swiping down, a persistent bar will remind users of their workout which is still in progress. The goal with this design is to emulate the experience of a music player, where users can browse the app, and still resume their workout seamlessly.


Resuming Workouts

While users should stay in focus during their workout, they should never feel locked in - users should be able to use the app as they wish. I adopted the card-based system present in the Apple Music app, where the workout logger ‘floats’ above the rest of the app.

Thinking of the relationship between the different states in the app, the card metaphor creates an extra ‘layer’ of interaction, providing reinforcement to the user they can still exit the workout logger in a non-destructive manner. After swiping down, a persistent bar will remind users of their workout which is still in progress. The goal with this design is to emulate the experience of a music player, where users can browse the app, and still resume their workout seamlessly.

   Reminding Users with Notifications   It’s inevitable for us to lose track or get distracted. Instead of combatting our human tendencies, I learned during user interviews that it’s more effective to be encouraged or reminded of our goals and intentions . This was further demonstrated when asked about notifications, as many participants didn’t mind being reminded by their phones to stay on track (much to my surprise).   As a result, when users exit the app or lock their phone, Flow will push a notification if they have idled (no inputs after a period of time), or their rest timer has completed.  Notifications became an interesting functionality, as it’s a  supplementary interaction that pulls the user back into the primary experience . This made sense in the context of how individuals use their phone in the gym; it’s unrealistic to expect a user to be completely focused on an app, or have them leave their phone unlocked for the entire duration of their workout. 


Reminding Users with Notifications

It’s inevitable for us to lose track or get distracted. Instead of combatting our human tendencies, I learned during user interviews that it’s more effective to be encouraged or reminded of our goals and intentions . This was further demonstrated when asked about notifications, as many participants didn’t mind being reminded by their phones to stay on track (much to my surprise). 

As a result, when users exit the app or lock their phone, Flow will push a notification if they have idled (no inputs after a period of time), or their rest timer has completed.

Notifications became an interesting functionality, as it’s a supplementary interaction that pulls the user back into the primary experience. This made sense in the context of how individuals use their phone in the gym; it’s unrealistic to expect a user to be completely focused on an app, or have them leave their phone unlocked for the entire duration of their workout. 

   In-depth Information & Customization   Flow is designed with beginners in mind, but its feature set is designed to accommodate progression. Preset routines and regular exercises fit the bill for beginners, but as they become more experienced,  customization is needed to keep up with the different workout routines and exercises they take on.  Flow provides the customization options to ensure a variety of needs are captured across different skill levels.  The goal was to provide the necessary features for different skill levels, without confusing beginners or limiting the app's usefulness for more experienced users.


In-depth Information & Customization

Flow is designed with beginners in mind, but its feature set is designed to accommodate progression. Preset routines and regular exercises fit the bill for beginners, but as they become more experienced, customization is needed to keep up with the different workout routines and exercises they take on. Flow provides the customization options to ensure a variety of needs are captured across different skill levels.

The goal was to provide the necessary features for different skill levels, without confusing beginners or limiting the app's usefulness for more experienced users.

Key Learnings

Key Learnings


Testing in Context

Conducting user testing was extremely helpful in uncovering usability issues and gathering feedback, but Flow posed an interesting and unique problem. This app relies on the user to be actively engaged in another activity; the primary ‘experience’ is the actual workout, while Flow piggybacks off of it, like a companion application. 

In order to gather more accurate insights, I learned the importance of user testing in the actual environment the product would be used in. Users uncovered unique issues, such as where they place their phone, and external variables & distractions around the them. These issues unique to the workout experience would’ve been otherwise overlooked in a regular user testing setting if it weren’t for testing in an actual workout environment.

 

Beginner-First, Like Mobile-First

The main difficulty in determining an appropriate set of features for this project was ensuring that I didn’t alienate the needs of each persona. There needed to be a delicate balance of beginner-friendliness while still enabling more experienced users the level of function they require. I learned that designing for different skill levels is similar to designing for different form factors. 

By designing around the beginner first, it helped improve discoverability of the more intermediate functions, while ensuring that beginners aren’t overwhelmed and confused by these more complex functions.