Understanding the Problem

• People who are new or returning to exercise need a way to get started in an easy fitness routine with different exercises of their choice and ability level.

• It can be challenging to stay motivated, find time and maintain healthy exercise habits.

• Those who are new to exercise need a way to learn about different exercises and view demonstrations.

• Those who are interested in starting a new fitness routine need a way to schedule their workouts and track their progress.

User Persona

Rebecca’s Goals

• Learn how to exercise properly

• Find exercise routines she can enjoy to help her lose weight and get in shape

• Use a tool that will keep her motivated and help her fit exercise into her busy schedule

User Stories

• “As a new user, I want to be shown how to the exercises are done, so that I know I’m doing them correctly.”

• “As a frequent user, I want to be able to schedule exercises, so that I build positive habits.”

• “As a frequent user, I want to share routines with my friends who may also be interested, so that I can encourage them to be healthier.”

• “As a frequent user, I want to compete in daily challenges, so that I can have an additonal way to stay motivated.”

• “As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress.”

User Flow

I created a user flow diagram in order to map out each step our user persona needs to take in order to meet her objectives.

Wireframes

In the next step of the design process, using a mobile first approach, I created Mid-Fidelity wireframes of the main task flows: Show Exercises, Daily Challenge, Schedule Workout, Share Workout

Moodboard

In order to create a cohesive visual design, I began by compiling a moodboard that reflects the app’s aesthetic, tone and color palette. My goal was to convey positivity and inclusivity and make design decisions that would be accessible and visually appealing to a broad audience. From there, I was able to design a complete style guide for the product’s UI elements, logo, imagery and typography.

Final Design

Once applying the style guide, I continued to refine the mobile screen designs through iteration. I then moved on to progressively advance the design to be responsive at the tablet and desktop breakpoints.

Next Steps

This project could continue to advance by expanding the feature possibilities at the larger breakpoints. Usability testing could be conducted to gather feedback on the design which would create opportunity for further improvement.

Conclusion

This project allowed me to exercise my Figma design skills, deepen my familiarity with style guides and continue to explore visual design in general.