FITTED
What
Responsive Web App
Role
UI/UX Designer
Why
Student Project
This web app assists users in discovering suitable exercise routines, making it easier to start new fitness activities. It offers guidance, interactive examples, and information to support users in their exercise journey.
Additionally, the app promotes incorporating short routines, even as brief as 5 minutes, into busy schedules.
User Flows
Initial user research and persona was already included in the brief, so I started by drafting user flows based on supplied user stories.
Rebecca lives in an apartment with her boyfriend and 3-year old daughter. She is very tech savvy, as she works on computers every day.
Rebecca seeks weight loss and improved fitness due to her sedentary job.
She's looking for a tool to fit exercise into her busy schedule.
As a beginner, she wants guidance on proper workouts.
Rebecca desires enjoyable exercise routines.
“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”
Persona: Rebecca
Software Developer
“As a new user, I want to learn about different exercises, so that I can figure out what is best for me.”
“As a frequent user, I want to be able to share routines with my friends who may also be interested, so I can encourage them to become healthier.”
Wireframes
The initial basic wireframes were really helpful for finding problems with the app. Since we're offering a wide range of activities, it's important to have good filtering options so users can easily choose exercises they like. But, because the app is meant to introduce new activities, we also need to make sure the search results are manageable without limiting the variety of exercises available.
Exercise Browser
Scroll to find exercise
Clearly labelled category
Browser w/favorites
Horisontal Scroll for Favorites
Info Page for Individual Exercise
Favourites divided by category
Exercise screen with video
Exercise Info
Filtering by categories can make the selection process easier, but how can the app make sure the user gets the right kind of exercise?
According to Harvard Medical School*, the most important types of exercises are:
Aerobic Exercises
Strength Training
Stretching
Balance Exercises
This will form the categories in the app, and emphasis is placed on hitting targets in all of them.
*https://www.health.harvard.edu/exercise-and-fitness/the-4-most-important-types-of-exercise
MoodBoard
The app's core aim is to promote healthy habits by introducing new exercises that align with busy schedules. Emphasizing positivity and motivation is key, while avoiding an overly intense fitness focus. The primary audience, young professionals, necessitates a professional and respectful tone, free from infantilization.
Style Guide
Based on the moodboard and initial wireframes, I developed a comprehensive style guide for the project. This style guide serves as the foundational framework for my design direction.
High Fidelity Wireframes
The wireframes have undergone final design iterations, with a strong emphasis placed on achieving both consistency and the incorporation of efficient and intuitive user interaction gestures.
Landing Page and Log In
Animation
Browsing and Filter
Calendar
Responsive Design
The application has been designed to accommodate various breakpoints, thereby ensuring a consistent user experience across different devices. One of the most noticeable differences is the permanent placement of filters on the desktop version, and managing the column count to avoid visual clutter and overload.
