top of page
Core Strength Fitness
Case Study: Responsive Web App for Fitness Consumers
Role: Solo UI Designer Project
Duration: April-May 2022
Tools: Figma
Core Strength Fitness aims to motivate and help individuals get into an exercise routine of their choice by providing routines, guides, interactive examples, and info. Users are able to find routines that suits their level, schedule, and interests.
PROJECT BRIEF
Problem Context
Individuals seek for an exercise routine that helps them achieve their fitness goals mentally, physically, and emotionally. However, finding a program that suits their fitness level, fits into their schedule, and catches their personal interests may be difficult to find. While various live-stream workouts are on the rise, fitness consumers struggle to find the right app that caters to their needs, especially when users want to try something new and motivating.
The Solution
The response is to create a responsive web app that allows users to search and view routines, guides, daily challenges, and other information across various devices. Users needs to be able to schedule sessions to their personal calendar so they incorporate and live a healthy and happy lifestyle.
USER PERSONA
User Needs & Goals
The target audience is a younger demographic of men and women who are new or returning to fitness whose busy work schedule and hectic lifestyles do not allow for a gym membership. They desire a tool that is not only easy to use at any time of day, but allows for a variety of workouts in different levels of difficulty in order for them to stay motivated, have fun, and stick to a workout routine. Their goal is to be healthy and enjoy the associated benefits to working out such as a better mood, weight management, reduced risks of illnesses, and learning something new and fun.
USER STORIES & USER FLOW
User Stories
User Story 1
As a new user, I want to be shown how the exercises are done, so that I know I'm doing them correctly. I want to be able to share routines with my friends who may be interested, so that I can encourage them to become healthier.
User Story 2
As a frequent user, I want to be complete daily challenges, so that I can have an additional way to stay motivated. I want to track progression and record what I've done, so that I can see my progress over time.
User Story 3
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
User Flow
By understanding users' needs and goals, a user flow was created in order for users to perform tasks within the app.
WIREFRAMING
Low-Fidelity Wireframes
Low-fidelity wireframes were illustrated to represent the screens within the app as well as the flow of completing certain tasks. Displayed below are some of the screens found in Core Strength Fitness.
Mid-Fidelity Wireframes
For the ease of use, details are simple yet fully display the users' needs and goals. Once user feedback was collected from low-fidelity wireframes, mid-fidelity wireframes were created for the main features within the app.
Mood Board
Active. Motivation. Flexibility. These keywords comprise of the core foundations of Core Strength Fitness. This mood board provides an overall direction of the colors, images, and typography that need to be displayed in the high-fiedlity prototypes. Whether users are new or returning to fitness, the brand needs to match the goal of the users and should cater to their needs.
Style Guide
Once the visual direction of the app has been decided, UI elements were created and compiled into a style guide. With the use of colors, typography, imagery, icons and other elements, it is important to keep the screens consistent throughout the app.
WIREFRAMING
High-Fidelity Prototypes
Now that the style guide has been created, the screens within the app were produced as the final designs of the app. It is important to keep the color palette, imagery, icons, and overall feeling consistent throughout the screens. With a clean and simple look, the pop of orange presents an energetic and vibrant tone that makes users feel happy and motivated to come back for more. Below are examples of screens that have been created for Core Strength Fitness.
RESPONSIVE DESIGN
Designing for Different Breakpoints
After initially designing for a mobile app, different breakpoints for a desktop and iPad were created in order for Core Strength Fitness to be accessible across various devices. While similar features are displayed on each breakpoint, the arrangement of buttons and overall design varies in order to accommodate for given device being used.
Conclusion
Since the pandemic, fitness apps have been on the rise and have been increasingly popular. While there are various apps that have similar features, Core Strength Fitness was created to allow new and returning users to fitness feel welcomed and motivated to get back into a workout routine. Have users feel comfortable and identify with the overall brand allows users to stay motivated, active, flexible so they can achieve their needs and goals.
While diving in and learning the UI aspects of the design may have been quite different from UX design, it has been rewarding to try to master the UI concepts, especially through designing for different breakpoints and incorporating the more minuscule details that only help to enhance the overall design for various devices.
bottom of page