Fitted

Timeline:

March 2021 - September 2021

My Responsibilities:

UI Design

Content Strategy

Wireframing / Prototyping

Context:

CareerFoundry UI Specialization Course

Overview

The pandemic caused an unprecedented rise in need for online at-home workout resources. I wanted to create an app for people who want to fit exercise into their busy schedules that would motivate them to maintain a consistent exercise routine. My goal was to design an app that would balance providing ample information and resources, while still being flexible enough for convenient use.

Here were some things I learned:

The whole is greater than the sum of its parts. By paying particular attention to specific UI elements, in conjunction they can produce a visually striking app with a distinctive personality.
Designing for different breakpoints. It’s crucial to acknowledge the contexts of differently sized screens, and prioritize which content is most important to display.
Always referring back to the original problem. Even though this was a project focused on UI Design, it was important that I kept referring back to the user goals and needs to guide my design process.

Interactive Prototype

User Persona

Because I was provided with a model persona, I focused on a couple of user stories to prioritize the needs that I wanted to make sure my app would address.

“As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.”
“As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.”
“As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.”

I then designed a user flow to illustrate which screens of the app could meet a target user’s goals and objectives.

Mid-fidelity Wireframes

An example flow from the Landing Page —> Sign Up —> Home Page

I paid particular attention to various UI design elements in designing these wireframes - for instance, I wanted to make sure that the frames of the content fit into the columns without bleeding into the gutters.

I chose to go with a 12 column grid for my mobile designs to allow the most flexibility for my content.

I also thought of ways to improve the visual hierarchy of my designs so as to make information clear and accessible to users.

By incorporating recognizable design patterns, I could improve the user experience by making the interface more intuitive and easier to navigate.

Password Security

Blank/Empty State

Progress

Gamification

The Personality of Fitted

After fleshing out the wireframes, I wanted to shift my attention to using different UI elements in comprising the visual personality of the app.

I started out by creating a mood board to gain inspiration from different images and colors that I thought could fit with the character of Fitted.

The mood board helped me decide on the different colors, fonts, and images that would inform the visual aesthetics of Fitted.

I wanted to create a logo for the app that reflected a sleek, refined, and minimalist aesthetic.

I ultimately went with the one on the right, as I felt it was cleaner and embodied the personality of the app more.

Finally, I created a style guide for Fitted to standardize all the different design elements that contribute to the feeling and character of the app.

Final Designs: Mobile

Designing for Different Breakpoints: Tablet and Desktop

In exploring how to adjust the content appropriately from mobile to tablet and desktop screens, I chose to brainstorm first with low-fidelity wireframes and then progress to mid-fidelity wireframes as a way to generate ideas and explore different possibilities.

Home Page: Tablet

I wanted to ensure that the content for tablet screens still fit appropriately within the 12 column grid.

Home Page: Desktop

I included a “Progress” card on the right side of the Desktop screen to present more information to the user on the Home page.

While I utilized a hamburger menu on the top left for mobile and tablet screens for navigation, I opted to use an actual navigation bar on desktop screens to take advantage of the added real estate.

Workout Intro: Tablet

I chose to maintain the modal window to introduce workouts to stay consistent with the mobile design.

Workout Intro: Desktop

I moved the image of the workout to the left as a way to visually contrast the content that describes the workout (Time, Difficulty, Overview).

Here were what some of the final mockups looked like on tablet and desktop:

Reflections

I very much enjoyed the challenge of focusing on how I could utilize different UI elements to create a responsive app that could motivate real users to maintain a consistent workout routine.

Here were some things I would have done differently:

Usability testing. With more time, I would have been interested in talking to potential users to see how the functionality of Fitted could be improved in addressing peoples’ needs.
Translate more screens to different breakpoints. I would have liked to further my work in designing for tablet/desktop screens to explore how the content from mobile screens could fit within different contexts.

Other projects

skinsource - iOS

Newsome-Bailey - Responsive Web