SwimFit is a mobile app designed to assist swimmers of varying skill levels (beginner, intermediate, advanced) reach their distance goals, time goals, and help track their swimming fitness progress. Additionally, users have access to a workout library and tutorial videos to assist with creating workouts and improving swim technique.
User Research
Product Design
UI Design
Branding
Personas
Style Tile
Mockups
Logotype
Usability Test Results
High-Fidelity Prototype
Figma
Sketch
Maze
The fitness and health tracker-app market is currently saturated with products that offer progress monitoring for common exercise activities such as walking, running, biking, etc. On the other hand, apps specific to swimming progress may offer workout libraries and tutorials, but do not offer the option to track progress and log workouts. I was tasked with creating a fitness app that can both track the progress of a user focusing on swimming as their main method of exercise as well as offer workout recommendations and tutorials to help improve technique.
Using the insights gathered from user research methods as well as testing my design solutions with real users, I was able to create an intuitive and efficient product that allowed users to track their daily, weekly, and monthly swimming fitness goals as well as provide a comprehensive library of workout recommendations and tutorials.
The target audience for SwimFit are individuals trying to track their swim fitness goals, improve endurance, improve technique, receive workout recommendations, and/or learn new strokes.
I created SwimFit with the idea that users who want to track their swim fitness goals as well as receive guidance on technique and creating a swim workout would want a product that solved these various problems with one solution. Taking this idea I followed the following design process.
I started the process of creating SwimFit by conducting a user survey for people aged 13 years and up who are able to be within a body of water (pool, lake, ocean, etc.) without drowning. This survey accumulated a total of 87 responses.
After learning that potential users are using fitness apps such as MyFitnessPal, Fitbit, and Google Fit, I wanted to identify their strengths and weaknesses by conducting a comparative analysis.
My Fitness Pal advertises that they are the world's most popular health and fitness app. The main features they provide is tracking food, reaching your goals (weight, goal setting assistance, changing habits), logging your exercise and steps, and receiving support in the form of joining groups and connecting with friends.
The Plans page allows users to filter which plan they are trying to follow (meal, workout, nutrition, etc.). This promotes easy navigation and simplifies the way users view various forms of content.
On the free version there are ads throughout the app that appear in the same visual/aesthetic structure as other content on the app (recipes, meal plans, etc). Users may accidentally click on these ads and be redirected out of the app.
Fitbit is a free app that tracks your day and progress over time. Provides free workouts, nutrition programs, sleep tools, and more. This app allows the users with the fitbit tracker/smart watch to sync and receive all of their stats and progress updates in one place. Some of the main uses for fitbit is to track heart rate, steps, and sleeping patterns.
Provides users with daily and weekly graphs that visualizes the users recorded steps, zone minutes, floors, miles, and calories burned. The user is also able to log their food and water intake.
The only form of fitness measurement that the app is capable of recording is in the form of steps. Users may be engaging in an activity such as weight lifting, however this activity does not require a lot of steps so the app may not record this progress accurately.
Google Fit advertises that they have paired with the World Health Organization (WHO) and the American Heart Association (AHA) to bring the user ‘heart points’. Heart points are the app's activity goal that can help users improve their overall health.
There are graphs and other visuals to help illustrate the user's heart point and steps progress on a daily, weekly, and monthly basis. The journaling feature allows the user to record information such as sleep, weight, and activity.
When the user is recording an activity the calories, miles, and steps sections have to be estimated by the user. If the user is not sure about their estimate, their progress report may be inaccurate.
After creating the user stories, I created digital user flows to illustrate the step-by-step processes the user may encounter while interacting with the app. Below are two user flows depicting the users steps throughout two main functions of the app (onboarding and logging a workout that the user created themselves).
Once the users actions were mapped out in a user flow, the next step was to visually display these actions in the form of wireframe sketches.
Once I created the digital wireframes for the app, the next step was to work on branding (logotype, typography, color pallet, etc.) that would make up SwimFit’s overall aesthetic and UI. The following branding assets were used when designing the high-fidelity mockups for SwimFit.
After referencing the desired branding and wireframe layout designs, I created high fidelity mockups of all relevant screens that would later be testing for their usability.
After creating high-fidelity mockups of all relevant screens for SwimFit, I tested the high priority scenarios with real users by both using the online platform Maze and by facilitating in person usability tests.
The purpose of this task was to see if users could successfully increase their weekly goal time of swimmingfrom 5 hours to 5.5 hours.
This scenario aimed to see if users could successfully log a completed workout into their log page (Total time, distance, and stroke(s) swam).
This scenario tested if users could successfully add a workout to their calendar in order for users to plan their monthly workouts.
The user first selected the "today" section rather than the "+" button to log a new workout.
The user selected the "beginner" subheader (applied filter) with the intention of changing the filters rather than selecting the filters icon.
Based on the feedback gathered from the usability tests I made the following iterations:
This project challenged me to create a product that combines the progress monitoring features of a general fitness app with the specificity of a swim workout/tutorial app. Conducting thorough user research and comparative research was especially significant for this project due to it catering to a very specific target audience. During the usability testing stage of the design process I realized that analyzing both remote and in-person tasks would be necessary in order to accurately test a product such as this one and identify any potential pain points. Having insights from both perspectives allowed me to create a swimming fitness app that prioritizes user needs, intuitiveness, and efficiency.
brittany.heng1@gmail.com
