Trainr

Trainr is a fitness web app that I created for my UI specialisation course at CareerFoundry. The project focused on primarily on composition, visual design principles and UI.

Duration: 3 months

Tools: Sketch, Invision

Trainr offers trainer-led workout programs to users that are new to fitness. The main objective of this project was to encourage users to exercise regularly and stay motivated through tailored, flexible programs that would be easy and fun to follow.

I designed this moodboard to feel friendly, helpful and fun.

Given that our user is new to exercise and wants some help getting started, using vibrant, contrasting colours, rounded edges and a combination of illustrations and light-toned photography helps make Trainr approachable and playful.

The colour palette is compliant with WCAG 2.0.

Logo

Trainr’s logo combines an exercise weight with a wordmark.

Colour Palette

Purple is bright, positive and playful while still maintaining a sense of calm.

The secondary palette is used in combination with the primary palette to create illustrations. 

Typography

Avenir was chosen for its simple and clean feel. Sofia Pro was chosen for its rounded, friendly shapes. Used together, these fonts give users a welcoming impression and are easily legible.

UI Elements

Various UI elements have been created in order to create a cohesive product image. Rounded corners, careful use of colour and clean, simple lines have been used.

Onboarding

Trainr is designed to help users easily achieve their fitness goals. 

New users are given the option to specify their fitness goals in order to gain access to relevant workout programs.

Home

Users have easy access to their real time data, current workout programs and daily challenges.

The colour scheme is used carefully throughout this screen in order to create a clean and minimalistic view.

Illustrations enhance the aesthetic and emotional appeal of Trainr. 

Workouts

The main workout screens prioritize exercise demonstration videos and the countdown timer. 

This gives users a clear understanding of how to do each workout and how much longer they still have to go. 

Statistics

Trainr’s minimal statistics screens are easily understood at a glance. 

Tapping the individual statistics cards will bring up a more detailed view of each statistic.

View the interactive prototype here!

Statistics

The contents of the statistics screen differ greatly for each breakpoint. The mobile version shows the user a stats dashboard that they can click on to access more details.

The tablet version shows both the stats dashboard as well as the selected statistic (in this case, the “Calories Burned” graph).

Finally, the desktop version includes all of this as well as the user’s Profile section on the right of the screen, where she can view her data at a glance.

Workout

All three screens prioritise the exercise videos that users will be following, as well as the countdown timer.

The key difference between the screens is that the mobile version combines the exercise video and the timer into one element. Given that there is more space on the tablet and desktop screens, these elements are displayed separately.

Landing Page

Trainr’s landing page is the entry point for both new and returning users, so the main CTA’s for each user are the focus for each screen. The mobile version makes use of one column of content, while the tablet and desktop versions make use of two.