Revolutionizing Fitness Engagement
Fitness made easy with EveryFIT – a responsive app that fits your schedule and fuels your motivation.
Problem
Addressing the Barrier to Fitness Engagement
Entering or re-entering the fitness scene can be difficult. Not only can exercise feel intimidating, but it often requires a time commitment that many people can't find room for in their busy schedules. People need a way to create an attainable workout routine that fits into their schedules and motivates them to reach their goals.
My Role
As the sole UX/UI Designer, I owned wireframes, and all things design based on the research provided.
Audience
Individuals who are new or returning to fitness
Device
Mobile-First Web Application
Deliverables
Wireframes
Prototype
UI Design
Style Guide
User Flows
Usability Testing
Scope
Create, test, & design core features for MVP and establish a style guide
My Role
As the sole UX/UI Designer, I owned wireframes, and all things design based on the research provided.
Deliverables
Wireframes
Prototype
UI Design
Style Guide
User Flows
Usability Testing
Scope
Create, test, & design core features for MVP and establish a style guide
Audience
Individuals who are new or returning to fitness
Device
Mobile-First Web Application
Crafting a Solution
After analyzing the data from interviews with individuals who have varying relationships with fitness, we began crafting a solution.
Our proposed solution is EveryFIT - a responsive web application designed to empower users to establish adaptable exercise routines that seamlessly fit into their daily lives. EveryFIT allows users to customize workout durations based on their schedules, fostering inclusivity and community support for fitness enthusiasts of all backgrounds, ages, and body types. This approach aims to motivate users to embrace a healthier lifestyle.
User Personas and Stories
Understanding our Users
Based on our analysis of the provided research and the proposed solution at hand, the stakeholders and I collaborated to generate a user persona to serve as our guidepost moving forward.
To guide the design process, I considered the following three key user stories.
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 schedule exercises for working out, so that I can build positive habits.
As a frequent user, I want to share routines with my like-minded friends, so that I can encourage them to become healthier.
User Flows
Visualizing User Flows
Before delving into Low-Fidelity Wireframes, I created a primary User Flow diagram that outlined the user’s journey to accomplishing each of the goals in the user stories above. This diagram helped to provide a clear visualization of the app's navigational structure, and also served as a foundational blueprint for our design approach.
Iterative Wireframes
Wireframe Evolution
I began by sketching initial Low-Fidelity Wireframes to grasp screen layouts and essential functionality, which I then digitized and prototyped in Balsamiq and InVision for basic functionality testing. After receiving positive feedback from usability testing, I made a few refinements and advanced to Mid-Fidelity Wireframes. In this phase, I established a layout grid and focused on spacing consistency and establishing a clearer visual hierarchy.
Landing
Dashboard
Browse
Filter
Description
Schedule
Share
Landing
Dashboard
Browse
Filter
Description
Schedule
Share
Mood Board
Setting the Visual Tone
Before diving into the visual design, I wanted to clarify the look and feel of the app by establishing a Mood Board. There are partial brand guidelines that exist for this project that focus on the messaging and tone, so the goal here is to take that a step further by assigning visual qualities that encapsulate the desired easy, motivating, and fun style. I decided to feature Orange as the primary color in my palette to achieve this. Research shows that the color orange depicts strength, endurance, determination and success, while also exuding enthusiasm, encouragement, and fun. These qualities align with our objective of motivating users to achieve their fitness goals.
Visual Design
Crafting the User Interface
Now that the wireframes have been established & validated and I’ve clarified the visual tone, it was time to begin designing the interface. This is a mobile-first application, so this was the primary breakpoint I designed for. However, once mobile was established and approved, expanded on these designs to accommodate both tablet and desktop breakpoints.
Style Guide
Creating the Guidelines
Following these designs, I created a Style Guide to document the initial design guidelines and ensure consistency in iterations to come. You can view a preview of this Style Guide below.