BeatFit UI designs

Creating a sleek UI for a music app for fitness studios. Matching the music to the beat.

Back to My Work
BeatFit UI Design
a cactus

CLIENT

BeatFit

DATE

2020

ROLES

UI design
Branding materials

COLLABORATORS

CEO

The gist

I was approached by Antony to help him create the visuals for his exciting new music fitness app. He’d already created what he wanted on paper but needed something more “real” to get things off the ground. I researched some examples of similar products and set to creating visuals to match his ideas. I incorporated his branding with a sleek UI, which could be used quickly by an instructor on the go. He also required some visual design to spice up documentation which complimented his new venture.

Skills used

Research and analysis, Sketch, Keynote, Photoshop

A typical class playlist

Showing the a typical class playlist.

The detail

Antony works in a senior role at a London based elite fitness company specialising in gyms. Their gyms were recognised as some of the best in the world and he had helped them get there, so it was safe to say he knew the fitness space pretty well.

He’d come up with a great app idea to help instructors run their fitness classes more efficiently and offer a better experience for members.

This app required a simple, quick to use interface that instructors could glance at during a session. I was provided with some basic wireframes which we analysed together before any UI work would take place. The wireframes, in general, had a pretty nice flow with three simple avenues for users to take depending on the feature they required. We made some small changes to improve the UI such as the example below where I removed multiple secondary CTAs out of the main screen and into a submenu, which allowed for more white space and a clearer display.

Wireframes

Examples of the wireframes the client provided.

UI mock up

A mock up included a revised UI.

Once the mock ups were completed, I created a prototype that the client wanted to run through with his team. He also asked for a visual for a dashboard version that could be used on iPads as required.

Part of the prototype

Just part of a large prototype

App visuals

Shots of the app during a session.

The final part of this project was to produce supporting documentation for the client. The app is still in the early stages of development and we are looking forward to seeing future progress throughout the year.

I really enjoyed this project and would have liked to have a chance to worked on the user experience aspect more but was hired purely for UI. I managed to impact a few areas but feel more time spent on UX could improve the product further.

Supporting documentation

Supporting documentation

Other work

OurPeople Events
UX design | UI Design

Improving the ability for users to be able to access, interact with and manage events in the OurPeople app.

Read more
OurPeople Events
OurPeople Website
UX design | UI Design

Redesigning the OurPeople website with a super short turn around, adapting under world changing circumstances.

Read more
OurPeople Website
View all