Designing a digital personal training experience
Paul Roeder and Stas Vaisman were asked to rethink the personal fitness trainer marketplace and workout app of the former Copenhagen-New York-based fitness startup FitBird.
Seamless experience through Cards
Every trainer is different, every training is different, every customer is different. In order to cater to the diverse needs, the requirement of this project was to design a UI, that will serve its user with the highest flexibility: Cards-based design.
A Card is a single unit of content or functionality, presented in a concise visual package. Multiple Cards can be rearranged and combined for any imaginable use case and context. Thus the whole user interface is constructed out of small distinguishable entities with a similar user experience.
In addition, this Cards-UI enables FitBird to implement as many new user stories as they want, without the need of changing other parts of their product.
After we defined a set of Cards based on the stories FitBird product owner provided, we combined them into containers and placed them on linked screens. In this way we created a flow chart – the masterplan for our new app.
The Graphical User Interface Design
The Card-UI is splitted into three layers: The screen, the container and the Cards layer. The screen layer contains general elements like titles and navigation elements. The container layer is placed in between and works like a frame for our Cards. The third and highest level are the Cards themselves.
Search & Discover
We designed several screens with search and filter functionalities, to enable the user to seek for a personal trainer he was dreaming about. At Fitbird, online-only training is possible as well as face to face.
Compare, Select & Book
The trainer detail page contains several Cards of personal information and the plans trainers offer. Users can choose between differen skills, price ranges, locations and watch workout videos Next up the user can select the desired training package and proceed to check-out.<
Sign up to Fitbird
On the following screens the user is able to create a new account at Fitbird. This is necessary to book a training.
The Workout Mode
On the Fitbird training dashboard, the user is able to see everything at a glance. He can immediately message the booked trainer or start and compare sessions. In addition he can manage his habits – a feature to improve your daily life.