Flame Case Study

Project Overview

For my UI specialization course through CareerFoundry, I designed a responsive web fitness app, Flame.

Context

Getting into an exercise routine can be daunting for many people, especially those of us who have no working knowledge of gym equipment or limited fitness know-how. Additionally, finding routines that fit into our jam-packed schedules is tough. Therefore, the goal of Flame is to motivate people of all experience levels to get into a fitness routine customized to their schedule, skills, and interests.

Flame logo

My Role

  • UI Designer

Timeline

  • 8 weeks

Tools

  • Figma
  • Balsamiq

The Design Process

1

Define
2

Empathize
3

Ideate
4

Design
5

Prototype

Define

To begin, I would need to start with the 5 W-questions to define the scope of the project:

5 W questions and answers as follows: Who? people who are new or just returning to fitness, want to find activities they like, and want to get into a good routine. What? A responsive web app where users can search and view routines, exercise guides, challenges, and other relevant info from any device, with the option to add workout sessions to their personal calendar from the app. When? Users can use the app whenever works for their schedule. They will use the app when searching for, scheduling, and actively following workouts. Where? Since the goal of the app is to get users into a routine that fits their schedule, users can use the app from wherever they would like. Why? To improve health and overall confidence without having to sacrifice valuable time.

Empathize

Who is the User?

The project brief provided the following proto-persona and user stories, which helped me to better understand my target audience and their needs, motivations, and pain points, which, as I knew from the wider UX lens, would help to inform my design.

Flame proto-persona, Rebecca.
User stories, as follows: As a new user, I want to learn about different exercises, so that I can figure out what is best for me. As a new user, I want to be shown how the exercises are done, so that I know I am doing them correctly. As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits. 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 complete daily challenges, so that I can have an additional way to stay motivated. As a frequent user, I want to track progression and record what I have done, so that I can see my progress over time. As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.

Ideate

Given the essential features and the above user stories provided by the project brief, I created a user flow diagram to better visualize the screens that would be needed within the app in order to help users achieve their goals.

flow chart showing all user flows.

Design

Low-Fidelity

Next, I used Balsamiq to create low-fidelity wireframes and prototypes to quickly map out the main functions of the app. I designed with a mobile-first approach, expanding to larger breakpoints once I had established my basic mobile designs.

Mobile Wireframes

Low-fidelity mobile wireframes made in Balsamiq.

Expanding to Larger Breakpoints

Low-fidelity wireframes of the home screen for mobile, tablet, and desktop breakpoints, shown left to right.

Mid-Fidelity

It was time to start translating my low-fidelity designs into mid-fidelity wireframes in order to btegin breathing some life into the app. At this point, I established my typographic styles, added some basic UI elements to my screens, and used common UI design patterns to inform the overall form and function of the app.

mid-fidelity wireframes showing 3 features: start exercise from the exercise info screen, rearrange order of exercises on the auto generate workout preview screen, and rearrange order of exercises on the build your own workout preview.
mid-fidelity wireframes of the home scren at mobile, tablet, and desktop breakpoints from left to right.

High-Fidelity

Now it was time to move on to the high-fidelity phase and truly bring my designs to life! The journey to high-fidelity would involve creating a mood board, refining my design elements, and establishing a style guide in order to create an engaging visual design that would showcase and further enhance the app's brand identity.

Mood Board

In order to set the tone and overall aesthetic of the app, I gathered my ideas visually with a mood board.

Flame moodboard, with 3 descriptive words reading: motivational, energetic, and approachable. Emphasizing orange and yellow as bright, primary accent colors with dark blues/navies and grays as secondary colors

Style Guide

I then created a visual style guide to establish consistency in my design from screen to screen, further strengthening the app's brand and overall look and feel.

Preview of style guide, showing color palette, typography, and iconography

Click below to see the full style guide:

Flame Style Guide

The Outcome

Presentation mockup photo showing home screen of flame on desktop, tablet, and mobile devices.
Presentation mockup photo showing woman looking at laptop showing the progress log screen.
Mockup of a tablet on a table next to yellow headphones and a glass of water showing the explore exercises screen.
Mockup showing someone holding a phone showing the exercise info screen for the russian twists exercise.
Mockup showing smiling person at their laptop with a phone in their hand. The laptop shows the explore exercise screen while the phone shows the progress log.

Prototype

Flame Interface in Action

Check out the brief video demo videos below to see Flame in action!

Click here to try out the Flame Prototype!

Learnings & Future Directions

Crafting Flame's UI from scratch for this course project has been an incredibly valuable and enriching experience for me, not to mention a lot of fun! As I navigated the delicate balance between visual aesthetics and functionality, I learned how clear communication and engaging visuals come together to shape the overall user experience of a product.

While my knowledge of UX design certainly informed the creation of Flame, given the project's primary focus on UI development, there's an opportunity to more deeply analyze Flame from a UX perspective in the future.

Specifically, I'd like to conduct user testing with Flame to validate the designs and overall concept at the current stage of development. This step will help provide valuable insights, ensuring that the UX and UI work together to create a smooth, satisfying, and widely accessible experience for all users.

Next Steps

  1. Conduct first round of usability testing to validate current designs and identify any areas of improvement.
  2. Iterate on designs based on user feedback.
  3. Match & expand functionality on both Tablet and Desktop breakpoints.

Thank you for reading my case study!