🏋 WeFit

Project Overview

WeFit is a web-based social workout platform designed to help people establish and maintain a fitness routine by providing them with an experience that keeps them motivated and engaged towards achieving their fitness related goals.

This platform was designed as a personal project during COVID-19 to help myself grow and improve in the areas of visual design (IA, content layout, typography, iconography, images, etc.)

View Prototype

Role

Lead Product Designer - Responsible for every aspect of the design process (User Research, Ideation, Prototyping, Testing, IA, Visual Design)

February 2021 - April 2021

The Motivation

When COVID-19 became the talk of the world, many non-essential businesses were forced to temporarily close their doors in the interest of preserving public health & safety. Among this list of businesses were local gyms and fitness centers which meant individuals looking to workout have had to make adjustments to their fitness routines to adapt to the new circumstances.

As someone who had recently settled into a fitness routine of his own prior to the pandemic, and was struggling to adjust to life without gyms, I wanted to explore this new reality of at home workouts and gain some insight into the pain points and frustrations being experienced by people of different fitness backgrounds and experience levels.

My goal was to identify a specific need that was not being addressed currently in the realm of at home fitness, and then design an interface to improve that part of the at-home fitness experience.

The Process

For this passion project I decided to use the Interaction Design Foundation’s Design Thinking model which serves as a solution-based approach to solving problems. I chose this specific model because it’s particularly useful in solving complex problems that are not well-defined. Considering I was unsure of the exact problem within the at-home fitness space I wanted to tackle in the beginning, I felt this model was an appropriate choice.

Empathize

To develop a deep understanding of the problem space of interest, and any frustrations / pain points being experienced by fitness enthusiasts as a result of COVID-19, I made use of 4 requirement gathering techniques.

Surveys

To begin the process of empathizing with fitness enthusiasts I used surveys as a way to gather quantitative data in the area of personal fitness, specifically how people’s workout habits have changed as a result of the pandemic. I also used these surveys as a tool to recruit interview participants for those who expressed an interest to share more detail about their fitness journey.

In total I received 56 responses (80% between 18-25 age range)

From the data gathered I learned that there was a significantly large variation in the interests, experience levels, and goals of people’s personal fitness habits. Therefore, I would need to consider this large degree of variation when designing the final solution to ensure that the interface is capable of being used by fitness enthusiasts with different goals and experience levels.

User Interviews

Following up with the individuals who were willing to share more about their fitness journeys, I conducted user interviews in order to get in-depth personal insight into the fitness experiences of people within the target user group. Data from the surveys indicated a large variation in experiences and user interviews enabled me to dig deeper into the pain points, needs, and goals of these individuals - all in the effort of better understanding how these needs could be better satisfied.

Literature Reviews

A key aspect to creating an experience that motivates people to achieve their fitness goals is understanding the psychology behind habit building. An application like Duolingo is notoriously good at helping people build strong habits when learning a new language so I wanted to conduct some research in this area to understand the factors that influence a person’s decision to start or stop a workout routine.

Among the key take aways I got my from my research is the Hook Canvas found in Nir Eyal’s book Hooked, which outlines a cycle that is created in habit forming products.

I also learned that fitness enthusiasts often need to feel intrinsic reward for exercising (i.e. enjoyable or reduced stress), and that knowing the health benefits of exercise is often not enough to make it a habit.

Competitive Analysis

Using competitive analysis to identify and understand the strengths and weaknesses of the competition was crucial in being able to identify gaps in the market. I wanted my eventual solution to be novel and innovative, so I had to first evaluate what’s already being done.

Direct competitors such as Nike Training Club, Strava, Apple Fitness+, and 8fit specialize in helping users become more active and healthy by a combination of various features. Nike Training Club and Apple Fitness for example, offer work out plans for users and help users stay to a routine that fits their schedule and capabilities.

I also investigated indirect competitors such as DuoLingo and Instagram. DuoLingo is known to help users maintain a consistent plan when learning a new language with daily exercises and lessons. Instagram, like many social medias, uses certain content generation and design patterns to keep users on the app, scrolling through content longer.

Strengths, Weaknesses, Opportunities, Threats (SWOT)

For the competitive analysis I decided to use the SWOT method because at this stage of the process it allowed me to identify gaps where current competitors do not meet expectations in the problem space. Thus, giving me an idea of where to focus my attention when designing a new product trying to emerge in a saturated market. The key takeaways from the SWOT analysis are summarized below. These results indicate that there are identifiable opportunities when it comes to motivating the user, maintaining prolonged user engagement, and enabling customization based on user preferences.

Define

Affinity Diagram

In order to synthesize the insights gained through the user research methods outlined above I began by writing down high level statements and pain points that were mentioned in the surveys and interviews and organized them into common themes using an affinity diagram. These themes were generated by first writing feedback on stickies and then identifying what could be grouped together. Once the diagram was created, I was able to extract key pieces of user information that served itself well to be characteristics that describe user personas.

Personas

It was clear from the survey responses that there exists a wide target demographic, and one of the key defining factors of different groups in the demographic is their fitness experience and how comfortable they are with fitness as a whole. I was able to identify three distinct groups:

People who adapted well to the at-home fitness lifestyle because they felt being at-home gave them the flexibility to workout whenever they want. Biggest pain point was inability to stay motivated and accountable due to the lack of social connection in an at-home fitness environment.
People who frequented the gym prior to COVID-19 but struggled to adapt to the at-home fitness lifestyle. These people didn’t feel the same level of satisfaction from at-home workouts compared to gym equipment.
People who have little to no prior fitness experience at all. These users need the initial motivation and knowledge to get started and stay consistent in the start to their fitness routines. These individuals often feel overwhelmed by the abundance of fitness related information online to the point where they didn’t know what was credible / appropriate for their intended goals.

I used the insights gathered at the beginning of the design process to create three user personas based on these groups of people.

The Problem

Combining what I learned from the personas and the other user research methods I could identify problems in the fitness space as a result of COVID-19 that aren’t solved well by existing solutions:

Workout intensity. People are struggling to mimic the intensity of machine workouts at home without proper gym equipment.
Information overload. Being unsure of what info is the most credible and applicable due to sheer abundance of online fitness related information.
Maintaining a routine. Inability to maintain a fitness routine due to lack of motivation or burnout.

❗️Of these three problems, the inability to maintain a fitness routine seemed the most fit for a digital interface solution so this was the problem I decided to focus on for this project.❗️

The Problem Statement

How might we… help fitness enthusiasts stay motivated towards their fitness goals?

Design Idea & Goals

To design an at-home fitness interface that helps users build healthy workout habits by creating an experience that keeps them motivated and engaged.

Design a solution that encourages users to get started
Design a solution that keeps users engaged
Design a solution that takes minimal effort to use

Ideation

Using the identified problem as a foundation for ideation, I completed a Crazy 8s exercise in the interest of generating a large number of ideas in a short amount of time. I then chose 2 of the most promising ideas from the Crazy 8s exercise and created “vignettes” that consisted of a visual representation of the idea and some supplementary details. The results of the two ideation activities are shown below:

The final concept chosen to help people build and maintain a fitness routine with motivation was one that enabled individuals to work out online in the presence of their friends or like-minded individuals who are pursuing similar goals. The most common complaint I heard during the user research phase was that due to circumstances with COVID-19, not only are gyms closed, but it’s heavily discouraged to gather with friends if not for essential purposes. As such, people are not allowed to workout together near as frequently as they once could. This is problematic because friends are great sources of motivation and accountability for one another, and without the presence of these people to keep you motivated and hold you accountable it’s much easier to fall out of a fitness routine - this was the inspiration for WeFit.

Using this platform, fitness enthusiasts would be able to join a virtual fitness room with friends, family, or other fitness enthusiasts with similar goals. You would be able to connect and share tips and knowledge with others, or simply simulate the feeling of being around others while working out, akin to a gym atmosphere.

I also felt that this was a novel idea that competitors had not explored, thus allowing for more creativity and flexibility in the interface design process. A more detailed version of this vignette can be seen below:

My Hypothesis

My goal was to help fitness enthusiasts (both experienced and inexperienced) maintain a fitness routine during COVID-19. I believed by replicating the feeling of being around others while working out, users would receive a sense of accountability and social support required to build and maintain a healthy workout routine.

Rationale for solution:

Would enable the feeling of being “together” during a time when everyone is feeling extremely isolated
Can give users the ability to filter preferences putting them in the driver seat to curate the experience they want to have
Ability to play into the friendly competition aspect to incentivize users
Potential to provide a platform where users can share and learn fitness tips and knowledge with like-minded people

Prototyping

Low-Fidelity Prototype

From this point, I started to develop low-fidelity wireframes for screens integral to the success of the design. Since one of the primary ways to motivate users is to reduce the barrier to start, I aimed to reduce the number of clicks as much as possible from the entry point of the product to the point in which users join a room to workout. I started by prototyping 2 screens and a modal.

Home Screen

The home screen included all the key functionality in one place for users to find and join a room. This includes suggested rooms to join, a search bar to help users find workouts relevant to them, and the option to start their own workout room. I opted to simplify the functionality of the home screen as much as possible to help reduce the barrier associated with starting a workout on the platform which meant reducing the number of clicks required to go from the landing page to a virtual workout room. I specifically chose to include lots of white space to de-clutter the interface and further highlight the main actions we want users to take.

Create a Room Modal

The start a room button on the home screen introduces a modal, which allows users to set the properties of the room such as room name, description, and whether or not the room is private. Here users can also choose to invite friends to the room. Again, I worked to make the modal as simply, legible, and intuitive as possible to reduce the cognitive effort users have to spend.

Virtual Workout Room

Since users won’t be spending a lot of time interacting with this screen from a user input perspective, we believed it was critical that as much space be used to display useful content as possible. This means the majority of the screen is dedicated to displaying the video feed of others in the room to reinforce the feeling of working out with other people, akin to a gym atmosphere. As well, a music player and a biometrics monitor tile was introduced to help users stay immersed in this space without having to switch contexts to another app.

Designs

Medium-Fidelity Prototype

To increase the fidelity of the prototype I made a number of key design decisions:

I used SF Pro Display font for maximum readability and legibility. I believe that this font is appropriate for an exercise scenario, as users actively exercising while using the interface will require even more usability than traditional apps. We must account for how able users are able to precisely use our product while sustaining higher heart rates.
Flat and representational iconography. I believe these icons reduce visual clutter while being clear enough to be intuitive to use. These icons are similar to other apps with similar functionality. This maximizes usability and allows the user to remain focused on their goal of exercise.
Blue monochromatic colour scheme. Blue gives the interface an inviting and familiar feel. Even though blue is not as energetic as green or yellow in the workout context, it is more important that users felt comfortable using our product. The video calling nature of the product requires users to give up more privacy in their experience. Building trust and familiarity is critical for this kind of functionality.

This platform was meant to build on the social aspect of working out in order to maintain a fitness routine. Therefore, my goal was to design a simple UI that conveyed familiarity, lessening the learning curve and allowing users to start working out with their friends - with the smallest barrier to entry as possible.

Home Screen

Looking at the updated design, we can see that the interface is designed to maximize social motivation. From a layout and organization perspective I made use of the proximity principle to give the user a better understanding of relationship. On the right, users can see which friends are online and exercising, while on the left users can quickly browse through a list of rooms to join. The use of thumbnails allows users to quickly scan and select a room to begin a workout. Live friends are placed before public channels as reflected from the interview stage as most users reported to prefer working out with peers. Thus, it appears higher in the interface.

Create a Room Modal

Here, we can see that the experience is even further simplified to reduce the number of clicks a user must make in order to start a room. The information architecture is designed in a way that allows users to input the details in a logical format. Quick action buttons to invite suggested friends are included at the bottom. All these design decisions reduce the cognitive load and friction users experience to start a workout.

Video Options Modal

This modal is designed to be as familiar as possible to users, as it strongly resembles the interface of video call competitors such as Google Meets and Zoom. I believe this familiarity is extremely valuable because it reduces the amount of cognitive effort one must dedicate in order to accomplish the task. I also implemented a dark background to create a visual hierarchy between the modal and the home screen contents.

Virtual Workout Room

In the room, users can see that friends appear in large cards, while non-friends appear in small cards. This is inline with the preferences of users informed during the interview stage. As well, completion and biometrics tiles are introduced at the bottom left. These are selected to communicate progress and accomplishment to the user in order to further motivate users. Finally, the buttons for the critical functions of mute, turning video off, and ending call are large. This is designed to reduce user error. This is especially important in the context of a person working out, where they are more prone to mistakes from being tired and distracted.

Groups Screen

Using a similar design language, I also introduced a groups page. This groups page highlights the various groups the user is both part of and invited to. This could be family, friends, work, or any other community context. By displaying unique thumbnails for each group, this makes the page easily navigable. We also kept the layout of the homepage largely the same to increase the learnability of the page.

Leaderboard Screen

Finally, I introduced a screen that shows the leaderboard of each group. Here, I can harness the motivation that is provided by gamification to drive friendly competition amongst friends and family. This extrinsically motivates users to participate in exercise while also rewarding users at the top with a special position on the screen. The top user is given a crown. WeFit brings users together to mutually motivate and compete with each other.

Testing

Card Sorting

To test the effectiveness of my design I started with card sorting because it’s particularly useful for uncovering the mental models of your target audience, by giving insight into how they would expect the content of your interface to be grouped. In order to evaluate the information architecture and ensure that it is in line with the expectations of our users, I felt giving users the ability to group the different elements of the interface would showcase the effectiveness of our IA.

First I wrote a bunch of terms associated with the different aspects of our interface on individual cards, and then we had three participants group these cards in a way that they felt made the most sense, here were our results:

Looking at the results of the three participants, while there are certainly similarities in the groupings of some items (i.e. room details), each person had a fairly unique approach to grouping the cards in a way that made sense to them. Perhaps more importantly to note, all of these ways differed from how content is actually structured within the interface which suggests that users’ mental model of how content should be organized is different from how we designed it to be organized.

However, before jumping to conclusions about the information architecture of the interface, it’s important to recognize the limitations of card sorting. When sorting the cards, participants have no additional context or design elements that often help to categorize information based on proximity, hierarchy, etc.

As such, before changing the organization of the content I wanted to use another testing method to evaluate users’ ability to navigate through the interface and complete a given task. If they are able to do so with ease and minimal issues then the IA should be considered sufficient.

Cognitive Walkthrough

Results from the card sorting activity suggested that users’ expectations for how content should be organized strongly differ from how I designed content to be organized. Unsure of whether this is because the IA is poorly designed, or if users were simply lacking context like hierarchy and proximity to help establish relationships between interface content, I wanted to conduct a form of testing that gave users the opportunity to interact with the interface to better understand the effectiveness of how the content is organized.

To accomplish this I created a fully functional prototype that users could interact with and then gave them 3 tasks to complete:

Start a new workout room
Join an existing workout room
Navigate to a group leaderboard

I chose these 3 specific tasks because I felt that together they covered the functionality that existed in the platform up to this point. I conducted this test with 2 participants.

Results

* after struggling for over 60 seconds user 2 gave up on task 3 but made 7 mis-clicks before giving up

From the small sample size of results that were obtained it is evident that users were able to complete tasks one and two with very little difficulty (low mis-click rates) and in quick fashion with a high degree of success (Completion rate and time). These were encouraging results to see because it showcases that I was successful in designing an interface that enables users to start working out not long after landing on the homepage of our interface. This would suggest I were able to meet two of my design goals: designing a solution that encourages users to get started, and takes minimal effort to use.

However, the third task revealed some particularly concerning results. While user 1 was able to complete the task, it took them significantly longer to do so than the other tasks, and they also had a higher mis-click rate. User 2 gave up on completing task 3 altogether and like user 1, had a significantly higher mis-click rate. These results would certainly indicate that the process of navigating to the leaderboard page from the home screen is not intuitive whatsoever.

Project Takeaways

Overall, if I were to continue further with this project I would certainly need to to consider alternative ways of making the ‘groups’ page and associated leaderboard more easily accessible from the home screen. As it stands, navigating to this part of the platform appears to not be intuitive. Seeing as one of my design goals was to keep users engaged, and friendly competition has been proven to extrinsically motivate users to participate in exercise, this is an area of the interface that would need to be iterated upon. I would also look to test the interface with more users in order to increase the credibility of my results.

Some of the main takeaways from this project were:

Using appropriate testing methods. Selecting the appropriate testing methods is crucial for validating design decisions and enhancing the user experience. For instance, in this project I began with using card sorting as a means to evaluate IA - but given the limitations of card sorting had I just accepted the results without trying other testing methods I could have arrived at an inaccurate conclusion. Think critically about the results of your testing methods before implementing changes.
Simple is better. Another important realization is that simplicity is often the best solution. When a design becomes overly complex, it can overwhelm users. Stripping away unnecessary features and focusing on core functionality leads to a more intuitive user experience. In this case, creating a simple, un-cluttered interface pushed users towards the main action items and reduced the barrier to get started with their virtual workout.