The fun flexible way to achieve your fitness goals.

Project Overview

View Prototype


2 Months

My Role

UI Designer
Concept Creation

Tools Used

Pen & Paper


Career Foundry Student project



Design thinking process

Since all of the research had been provided in the project brief, I was able to begin in the ideation phase, generating a range of ideas through sketches & wireframes which were then brought to life in the form of an interactive prototype.

The project

Finding the perfect routine and the motivation to do it on a regular basis can be difficult. FitFlex is a web application designed to help users stay active by providing fun routines and daily challenges that can fit into busy schedules. The app uses gamification and progress markers to track progression to help maintain consistent results.

The problem

The average user finds it difficult to find routines that suit their level and can fit into their busy schedule. They need a way to access different exercise routines and challenges in a way that is both enjoyable and motivating so that they can achieve their fitness goals.

The solution

By designing a web application that provides challenging and easy to schedule routines that motivate the user to reach their fitness goals by tracking their progression in a fun and enjoyable way.

User Flows

Based on user stories that were provided in the project brief, I came up with user flow diagrams that helped visualize the process a user would take when interacting with some of the apps core features. This enabled me to determine the most efficient way a user would navigate through a task to achieve their goals.

User story

As a new user, I want to learn different exercises, so I can figure out what is best for me.

User story

As a frequent user, I want to schedule exercises for working out, to build positive habits.

User story

As a frequent user, I want to to share my routines with friends, so I can encourage them to be healthier.

Lo-Fidelity Wireframes

Once the user flows were established low-fidelity wireframes were made. These wireframes allowed me to get a better visualization off the apps layout, enabling me to get an understanding of the hierarchy and positioning of certain UI elements.

Mid-Fidelity Wireframes

After I had finished creating the Low-Fidelity wireframes the next step was to improve upon the design by adding text and other UI elements. This was the stage where the designs started to take shape.

The Moodboard

For this step of the process I created a moodboard in order to gather inspiration that would bring the apps brand to life

Bringing the design to life


Visual Styleguide

Full Style guide

Final Outcome

Key Learnings

Understanding responsive patterns to allow my designs to adapt more effectively to each different breakpoint.

By designing with a mobile-first approach then adapting my content for larger breakpoints I have learnt how to use a progressive enhancement approach, only adding the minimum amount needed in smaller breakpoints for users to complete a task then expanding upon that in larger breakpoints.

By combining select tools with certain animation techniques I have learnt how to create animations that give my designs a sense of realism and authenticity.

The importance of the design handoff process, having a clear understanding between the designer and developer about what deliverables should be included, how they should be presented and most importantly keeping regularly involved with the apps development process to ensure that no issues arise.

Next Steps

Now that the final mockups and prototype has been created, usability tests will be conducted with selected participants to test whether the app is in need of further improvement.

Make iterations to the designs based on user-feedback.

Add new fitness statistics that the application can record and track so that users are able to collect more data from their exercise results.

Thanks for scrolling through!

If you get a chance let me know what you think or if you're interested in working together you can email me on