Fit Now
Overview
The Challenge
For the UI for UX Design course with Career Foundry, I was challenged to create a responsive web app that would motivate people with different fitness levels, schedules, and interests, to exercise.
The Background
When beginning a new fitness journey, it can be difficult to find exercises that are right for your skill level and interests. It can be even more challenging to find time to exercise with a busy schedule.
The goal of this app is to simplify the process of finding and learning exercises that suit any individual's needs. Additionally, it aims to motivate people to stick with fitness by helping to incorporate these exercises into their current lifestyle.
My Role
I was responsible for the IU design of this project including: wireframes, mood board, final UI mockups, interactive prototype, animation, style guide, brand icon and icon set, and handoff package. The time frame for this project was December 2019 - April 2020.
Research
I began by researching other fitness apps to learn how they solved the design problems that this app would present. I discovered that many apps had simple user flows that allowed users to access workouts and exercise information immediately or with very few clicks. This is optimal for people with busy schedules and limited time.
Additionally, creating this as a responsive web app would be ideal, so people can search for or view exercises from anywhere, and add these exercises to their personal calendar.
My Approach
Persona
Using the UX research provided in the project brief, I compiled information into a persona to guide my UI design work. Visually bringing the persona to life makes it seem more realistic and easier to design from the user's perspective.
Paper Wireframes
I used a mobile-first approach to creating this app to focus on the core functions users would need to achieve their goals. I started by sketching out my preliminary ideas for the app's basic functionality using paper wireframes. These key functions were derived from user stories based on the needs and goals of the persona, Rebecca.
Key Functions
- Searching for new exercises
- Learning about how to do different exercises
- Scheduling exercises in a personal calendar
- Special daily challenges for additional motivation
- Earning achievements for completing exercise goals
- Tracking personal progress
- Sharing exercises with friends
Mood Board
Partial branding guidelines were given for this challenge. Therefore, I built a mood board to clearly define the design direction that I felt suited my persona's background and goals.
Rebecca needs an app that will help her add quick, low intensity exercises that are not overly complicated into her busy schedule. Therefore, I created a mood that is motivating and energizing, but not intimidating. Exactly what Rebecca needs.
Mobile Mockups
By using a mobile first approach, I was able to focus closely on only what is MOST important to a user of this app. At the top of that list is starting a workout.
After quickly establishing their starting point and goals, users land at the dashboard. Here they can immediately view a workout with one simple click, and they can start the workout with a second click.
I utilized text sizes, contrast, positioning and white space to help create a visual hierarchy on each of the screens. This helps users quickly scan to figure out how to complete their desired task.
Paper Wireframes: Desktop and Tablet
After completing the UI for mobile, l expanded the designs into tablet and desktop views to complete the responsive app. My navigation remained the same, but I scaled up the size of many elements and was able to add extra details to allow users to see more at a glance.
Style Guide
To ensure that my design guidelines for the Fit Now app can be consistently applied by anyone who picks up the project moving forward, I created a style guide.
Check out my full style guide here.Animation
I created a simple, yet fun animation to get people excited to begin their workout. After clicking the "start" button on the workout, the animation will automatically launch and count down to begin. It elicits a feeling of competition, which will motivate people to give their best effort during the workout.
Conclusion: The Final UI
