Time For Sport Mobile App
A user-centric app designed to help women integrate sport more easily in their day-to-day life.
Product
UX/UI Mobile App
Duration of the project
5 months
Purpose:
Case Study designed at mentorship with Susana Passinhas
My role
UX/UI Designer
Introduction
Finding a theme that can make a difference
The ground set for the theme of the project was to build a user-centric app that can help the users with a daily struggle.
The initial spark came from personal reasoning, since I am a person who struggles to maintain consistency when it comes to practicing sports. The idea really started to take shape when I observed a lot of friends around me who struggled with the same issue.
Having this in mind, I researched the problem and started building a solution that could help any user who faces this struggle.
The Process
Balancing data-driven decisions with empathy and aesthetics
My case study was built upon the structure of the Double Diamond Design Process. The focus on this project was to represent my core identity as a UX/UI Designer.
Discover
Using Desk Research to argument the feasibility of the theme
Elaborating the Problem Statement and Research Goals based on the Desk Research Insights
Finding a direction through the Research Questions
Gathering multi-faceted insights with a complete Research Methodology
Composing a Lean Survey focused on answering the Research Questions
Tracing the first insights with the quantitative data collected in the User Survey
Learning how to distinguish from the Competitors
Based on the data collected in the User Survey, I have discovered that users use Fitness for iOS, FitBit, Hevy, Class Pass, Strava, Peloton, Health for iOS, and Huawei Health to help them integrate sports into their daily lifestyle.
Therefore, I have composed a Competitive Market Analysis focused on the above-mentioned apps.
Understanding the user’s needs through User Interviews
Users interviewed: 5
Purpose: understanding how and why users change their behaviours throughout the year regarding physical activity, but also what would help them.
Scenarios: practicing sports consistently | having a break in physical activity | having the possibility to change anything to help them keep consistency
Highlights from the Users’ Answers
Define
Compiling the data through Affinity Mapping
Gathering Insights from the Affinity Mapping
Using the insights to construct a User Archetype representing the preferences, needs and behaviors of the Users
Thinking What the Seasonal Exerciser needs and why through POV Statements
Understanding How Might We help Seasonal Exerciser
Ideate
Pushing for creativity through Brainstorming, Crazy 8s. Expanding the ideas with the Lotus Blossom technique
Empathising through Storyboarding:
How will the Seasonal Exerciser use the app to overcome hindering factors and practice sports?
The Solution for the Seasonal Exerciser
Users struggle to stay consistent with sports due to factors like weather, busy schedules, and physical discomfort, while motivation comes from social engagement, accessible training, and the rewards of exercise.
The Time for Sport App helps the seasonal exerciser integrate fitness seamlessly into their daily lives by eliminating obstacles and reinforcing motivation. It features a Dashboard for tracking progress, a Scheduling Panel for planning workouts, setting reminders, inviting friends, and choosing training locations, and a Social Hub for sharing achievements, finding workout partners, and joining challenges. With these tools, staying active becomes easier, more enjoyable, and sustainable.
Creating the composition of the app through a Sitemap
With the Social Hub and Schedule Panel in mind as the main focus features, I created the sitemap of the app. The composition was designed as a personalised experience to help the seasonal exerciser overcome the personal hindering factors they are experiencing and establish their own goals to motivate them.
Composition characteristics:
account-based system
progress tracking
monthly and daily goals set-up
friends interaction
Creating a seamless Flow for the User to experience
After designing the general structure of the app, I designed 2 user flows focused on the most important features of the app: Scheduling a Workout and Practicing a workout together with a Friend.
The Seasonal Exerciser is Scheduling a workout to practice later today
The Seasonal Exerciser Practices the scheduled workout together with a friend and shares it
Implement
Visualising the composition of the app through hand-drawn sketches
Transforming ideas into screens: Mid-Fidelity Wireframes
Continuing the ideas designed in the hand-drawn sketches, I created in Figma the first iteration for the User flows of the app: Scheduling a Workout and Practicing a Workout. In order to have full flexibility on the changes from the following iterations, I chose to start with mid-fidelity wireframes and test them in this form before advancing to high-fidelity.
Scheduling a Workout
Practicing a Workout
Improving the features through User Testing
After designing the first iteration of the app, I organised a User Testing Session for the mid-fidelity version of the screens.
Users participating in the testing session: 5
Purpose: testing the general usability, understanding the mental models of the users regarding a sports app
Actions tested within the app: browse homepage | schedule a workout | practice the scheduled workout with a friend
The general impression was that the app was helpful and intuitive. Some of the most appreciated features were: the Future Me Message, the Friend Synced Workout, and the integrated Weather Widget.
From Insight to Interface: Prototyping the User Experience
After improving the features, I have elaborated the final mid-fidelity iteration upon which I built the high-fidelity version of the app.
Below you can find the mid-fidelity prototypes for the most important flows of the app: Scheduling a Workout and Practicing a workout with a friend.
Exploring the message of the app through the Mood Board
The first step towards creating the high-fidelity version of the app was to compose a Mood Board. I included the following elements:
the general vibe that the sports give,
examples from competitors,
colors, illustrations, and typography
I want the app to be perceived as a playful hub, where you get to experience the benefits of practicing sports and overcome the anxiety associated with the hindering factors.
Building the Design System starting from Colors and Typography
For the primary and secondary colors, I chose yellow and blue tones, so the user can experience the vibrant joy associated with sports through the color contrast of 2 complementary colors.
The tertiary colors are pastels that tone down the vibrant characteristics of the primary ones. This keeps an overall calm tone over the user’s experience within the app, balancing the stress associated with hindering factors.
The neutral colors used for the backgrounds, text, buttons, and other neutral elements of the app were built from the blue tones, adding darker and lighter hues, completing the picture.
For the Typography of the app, I chose to construct it from 3 different fonts.
The Headlines have a playful tone, in accordance with the motivational messages it will be associated with (e.g., ‘Let’s crush the day, Laura!’), and Quicksand was the perfect font for this.
The paragraph text is written in Nunito Sans because it has a neutral appearance, continuing the balance between energetic and cool tones.
The Label is easily readable and has a serious tone associated with the actions within the app. Jost is the perfect balance with the playful tone given by the headlines.
Besides the fonts, I adapted the weight and dimension of the text to create hierarchy.
Creating Consistency through the Component Library
In order to maintain consistency, secure a future expansion of the design of the app, and make a fast, seamless process, I created a component library. I focused on designing key elements that have the highest repetitiveness across all screens: icons, navigation, headers, buttons, profiles, and illustrations.
The icon library was composed with the help of the Ultimate Bold and Flex Bold icon libraries found on the Streamline Icons plug-in. The illustrations used were borrowed from the UX Color and Barcelona sets from the same plug-in.
Exploring realistic user navigation with the High-Fidelity Iteration
The rank is now expressed through a colored orb that changes based on the rank and lets the user easily know where they sit.
The primary button has a yellow tone that inspires energy and invites the users to practice or plan a workout.
The secondary button is complementary to the yellow one, with a shade of blue that is relaxing for the eye, but still joyful.
The weather is expressed through a light neutral color rather than a real-time weather illustration because I wanted to keep the user’s motivation on a steady level, regardless of how the weather looks.
The goals of the day are highlighted through complementary tertiary colors that are energic and invite the user to visualize an accomplishment.
Besides the actionable buttons, which invite the users to do something within the app (plan, invite, have a suggestion, etc.), I have introduced a different set of buttons that help the user understand they are continuing the current task. They are distinguished from the first set with a dark neutral color and a smaller size, so they do not distract from the main tasks.
The connectivity is highlighted through the app with a tertiary color, colder than the tones of the actionable buttons, to show the action was completed.
Another visual feedback added was the ‘inactive’ state of the buttons that signal the user that they need to complete something (for example, wait for their friends) in order to move from the current state.
The microphone is highlighted with a light neutral color, distinguishable from the buttons, but with the clickability feedback kept.
The rest of the illustrations (progress, premade photos) complement the color palette and general light, pastel design of the app, making the experience of practicing sports light and easy.
The Final Look
Getting a glimpse of real-life usage with Prototypes
The final look of the app encompasses a helpful tool that can help users overcome real-life challenges and practice sports consistently.
My personal reflection on the process
Regardless of the designer’s vision, the users have the best input, because they are the ones who experience the app at its full potential. Therefore, user testing is crucial for creating high-quality products. It’s the step that has really pushed my creativity and vision and helped me improve the most.
Having the courage to reiterate and change my vision unlocked a completely new, better set of ideas.
Check out my other projects!
Responsive Website Redesign after NGO rebranding
Designing a Logo based on Personal Branding
Creating the Visual Design for a Luggage Track App