Fitted is a responsive web app designed to encourage users to increase their physical activity, even if it’s squeezing in a five-minute routine. Users are provided with routines, guides, daily challenges, and interactive examples- viewable on mobile, tablet, and desktop.
Overview
Goal
This app allows people to find, save, share, and schedule exercises and routines that suit their preferences, time, and resources available.
Research
I conducted a competitive analysis to get an understanding of what features would make the web app useful. I then created a user flow diagram to help me visually plan out the site.
Competitive Analysis
SWOT profiles were made after analyzing MyFitnessPal and MuscleWiki. Based on what I observed, I came to the following conclusions about the opportunities Fitted has to set itself apart from the competition.
Opportunities
-
Workout demonstration and visuals of what muscles are the main focus of each exercise
-
Simplified filter page with more filter options
-
Information about preparing for exercises like recommended stretches or modifications
-
Weekly calendar view of scheduled exercises
-
Colorful, but simple color palette
User Flow Diagram
Based on user stories provided to me, I created user flows to understand and visualize how users will interact with the app and what steps they need to take to achieve their goals.
User Story 1
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
User Story 2
As a new user, I want to learn about different exercises, so that I can figure out what is best for me.
User Story 3
As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
It was clear that the main functionalities I would be starting with were the Home, Exercise list, Exercise details page, Quiz, and Daily Challenge. Thus the challenge began to make a content-heavy website feel simple and easy to navigate.
Design
I designed with a mobile-first approach to focus on the essential content for each screen before having a bigger space to work on
Low-Fidelity Wireframes
Based on the user stories and user flow diagram, I drew low-fidelity wireframes for all the main functionalities of the web app. I focused on using design elements that new users would find familiar to combat the challenge of being confused using a content-heavy website.
Landing page
Home
Exercise list
Mid-Fidelity Wireframes
After getting a basic idea of how I wanted to organize the app’s content, I started adding and refining UI elements, UI design patterns, text, and ideas of the icons I wanted to use, creating mid-fidelity wireframes.
Sign in
When there is an input error, there is a message of what the error is in red text and the input field is outlined in red.
Moodboard
At this point, I created two mood boards to figure out what style would suit this web app the best.
I think this mood board’s brighter colors and airy/light feel would help users feel more motivated and enjoy learning. The pops of color contrasting the light colors bring attention to the app yet aren’t too distracting.
The other mood board has more neutral, earthy colors and I would use it if I wanted to bring a dark mode to the app.
Visual Style Guide
Since the app is content-heavy, the style chosen is rooted in simplicity with pops of color. This is meant to keep user’s engaged - not distracted or bored.
Logo
Color Palette
Typography
Headers
Body
Icons
Menu
Close
Arrow
Expand
Search
Grid View
List View
Share
Favorite
Add to:
Filter
Options
Link
Calender view
Popularity
Alphabetical
Time
Difficulty
Equipment
UI Elements
Buttons
Input & Search Fields
Chips
Tabs
High-Fidelity Wireframes
This is the final design after incorporating various rounds of feedback. The design is light and consistent throughout all screens. I think keeping the style minimal helped counter the challenge I had from the beginning - which was how to make a content-heavy website feel easy to use. The interactions and gestures in the prototype reflect the intuitive and straightforward nature of the web app’s interface.
Landing page
Sign in
Register
Home
Exercise list
Filter
Search
Exercise details
Exercise tabs
Share
Quiz
Daily challenge
Responsive Wireframes
As I polished up the mobile designs, I started working on the responsive designs and how to reorganize the mobile layout into a bigger canvas in a cohesive manner.
Tablet - Low-Fidelity to High-Fidelity
Exercise list
I changed how the Exercise list page was formatted to make better use of more screen space. This way users will be able to look through more exercises faster and easier.
Exercise details
I reorganized this screen to hold more information and break it down into sections.
Desktop - Low-Fidelity to High-Fidelity
Exercise list
Desktop has the same list organization as tablet. However, the filter is now on the side so users can leave it open and play around with the filters easily.
Exercise details
Desktop has the same list organization as tablet. However, the filter is now on the side so users can leave it open and play around with the filters easily.
