PT Distinction

Relaunching an online personal training platform with brand, UX, interface design and build.

Expertise

Strategy, Design & Technology

Platforms

Mobile app, Web app, Website

Delivered

Brand, UX, UI, Front-end engineering, iOS, Android

Launch project

Building a better training experience

PT Distinction is an incredible software platform. It empowers trainers to meticulously coach any number of clients, without ever needing to meet in person. How they train and who they train, is up to them. We’ve been delivering brand, UX, UI design and front-end build across three key assets - the marketing website, trainer portal and client app. Our aim is clear. Provide beautifully intuitive collaboration between trainer and client. Each new release further refines the workflow and outputs of current trainers and makes it irresistible for new trainers to get on board.

Working out a new brand.

The PTD community creates incredibly diverse programs. Training can be delivered for practically anything - from entry level yoga, to competitive power lifting. With this flexibility in mind, we identified the need to develop an all-inclusive visual language that would work across the board. We developed a unique design theme called ‘Circuit’. Underpinning every design decision from logo to micro-interactions, our central theme ensures consistency and clarity across all platforms and experiences.

Getting into the (user) flow.

We purposefully planned the entire system upfront. Sketches, wireframes and in depth IA quickly highlighted essential improvements needed. We refined the navigation so new and existing trainers could quickly grasp the multitude of options at their fingertips, without feeling overwhelmed. By taking a holistic view of the entire platform, we were able to methodically focus on specific page level design components and interactions with complete confidence in the bigger picture.

Marketing the platform.

The marketing site sells the software and the instant appeal of the UI. Its goal is signing up trainers for free trials. What could have easily become a bullet point list of features and functions, is an exciting showcase of the admin portal interface. Graphics of UI design components are layered and appear next to punchy copy. They sell the software benefits and beauty of the interface; they also make the user friendly branding and icons pop. The site speaks to trainers in their language, right down to the testimonials from loyal users.

Delightful program delivery.

The exercise program and workout builder is intuitive to use. It’s now insanely quick to create complex programs and workouts. Gorgeous interactions and UI details result in a truly delightful and satisfying experience. Clever visual cues help trainers easily add exercises to build their workouts. Smart design components and a selection of hover and load states, consistently point to what can be edited and dragged and when trainers have taken an action. And we built a mobile responsive version of the program builder, so trainers can add exercise programs on the go. It functions exactly like the desktop experience, with detailed interactions and content designed for a small screen.

The ultimate coaching companion.

The coaching app is designed for clients following an exercise program, and it’s a pleasure to use. They can literally train anywhere. Workouts are simple to follow in busy and loud gyms and all the important stuff is accessible with a one-handed grip. In just two taps, clients enter their scheduled workout. The interface becomes minimal and focussed; a visual device that threads through the workout echoes progression. There’s a stopwatch accessible from a bottom drawer, making it super easy to time exercises and send data to trainers. Clients can also view in beginner or advanced mode, depending on how much guidance they want. The app is feature rich to support clients in their fitness journeys. The minimalist interface is peppered with friendly icons. Bespoke templates make every action enjoyable, from viewing your schedule to chatting with your trainer.

A complete front end.

We built all the front end code to support the new UI and interactions. Code was released to PTD in stages, which made the process efficient, collaborative and iterative. We gave loyal trainers a beta site to play with, because there’s nothing better than real feedback on a working product. The responsive framework scales up and down and the condensed UI on a mobile means businesses and clients can use the platform on the run. We got to bring every interaction to life; it was then over to PTD to plug in our code. A beautiful user experience and design, realised through our front end development.

A boundless ecosystem of trainer and client collaboration.

Around the world, PT Distinction users are now enjoying an extensively improved digital product experience. It’s enabling trainers to run better businesses and helping everyday people meet their health and fitness goals.