Role
UI Designer
Timeline
6 Months
Tools
Figma
Product Vision
FITTED was born to motivate people into an exercise routine that suits their level, schedule, and interests. Finding exercise routines for your level can be difficult, especially if you want to try something new. This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info. Secondly, finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
Initial Goals
Establish foundation layout of the app, tone, and branding.
Develop extensive catalog of workouts for users to choose from.
Design various features into the app such as a search and filter function, exercise scheduler, achievements and challenges, and progress tracker.
Ensure accessibility across all pages of the app.
Mood Board
Style Guide
The First Stages of Prototyping
In our initial prototypes, we kept the layout very simple since we were just laying the foundation and brainstorming different ways to format the app for the most user-friendly experience.
From the dashboard, users would be able to navigate to their history on the app, be able to browse for experts, and access the blog for quick tutorials.
When users search for an expert, they'd be able to select someone who's a good match, works in the industry for the problem they want to solve, and read more info.
Once a user clicks on an expert’s photo, they’ll be directed to the bio page that lists an expert’s background info, experience, and qualifications and certifications.
Prototype Updates
After our first round of testing, we updated brand colors, started to fill in pages with more detailed information and iconography, and built out scheduling feature.
From the home page, users will be able to photos of an expert. Home page in general was updated with more dynamic visuals.
User can read through the expert's bio and qualifications in more detail and click the phone icon at the bottom to book a call.
A calendar will pop up, and users will be able to select a date from an expert's open availability.
Final Stages of Prototyping
In building high fidelity prototypes, we primarily focused on upgrading the visuals, incorporating accessibility features, and balancing each page with imagery and text.
Login screen built to include logo at the bottom for branding purposes, new mauve colored button, easy options to create an account or reset password, and ability to show or hide password when entering.
Expert’s profile page now comes complete with iconography to indicate what field they work in, whether or not they’ve been verified, and how many likes and reviews they have. Each section of their bio is also expandable to reduce text clutter.
Home Screen now customized with personal greeting and important notices or updates at the top of the screen. Again, new mauve colored buttons were incorporated, and highlighted icon in bottom navigation to indicate which page a user is on.
When users click on the “Book Call” button, a calendar pops up on the same page instead of a separate page. When users click anywhere on the screen off the calendar, it will go away. Colors of the calendar have also been adjusted to match brand colors.
Browsing experts page now includes a robust search feature with ability to use filtering system, and each expert’s photo now includes their name underneath as well as icon indicating what field they work in.
The account info page also includes custom greeting and includes user’s profile photo which they can easily edit by clicking on pencil icon. Info will not be saved unless all info is filled in. Missing info is indicated with red triangle icon.
Looking Forward
Our work is not done here. Even after launch, we will continue running surveys and conducting usability tests. This will be especially important as we add new features, pages, and information. Our primary focus is to make sure that users can find the info they’re looking for in the fewest clicks possible and connect with experts with as little of a headache. We want to continue recruiting qualified experts and fill a need in the market where we help users solve a problem and not add another task to their plate.