The Company
Beat81 is the most interactive, intelligent, and exciting outdoor group fitness experience on the market. By merging the best of mobile HIIT training, live heart rate monitoring, and expert coaching & support, they're helping people sweat smarter together.
The Challenge
Building products requires speed and scalability. Back then, as a very young company, things were close to becoming really complicated. The website, a customer app, a coach app, and a workout app were on different platforms and devices, and almost all of them were using a different design language.
Designers, developers, product managers, and other stakeholders were not speaking the same language when talking about user experience.
Because of this, the team proceeded at a slow pace when working on new features that needed testing before production. Furthermore, the initial brand design contained obsolete components that lacked scalability.
The Solution
The solution was to create a design system that allows us to scale efficiently and consistently; a system that allows us to speak the same language, with rules and guidelines. It is a collection of components that represent the Beat81 brand while being flexible enough to be used on several platforms: responsive web and tablet, mobile native apps, and TV.
Design System
I documented the status quo to map out all the elements, colors, and character styles we had and to find the inconsistencies.
As the next step, I documented the best practices and structure examples of other design systems, such as Uber’s Base, IBM’s Plex, and Atlassian’s.
At that time, what we needed was reduction. I kept the essentials for the MVP design system and discarded the unnecessary.
I followed the approach of Atomic Design by Brad Frost, starting with the tiniest element, the atom, and going up to molecules and organisms, and so on.
By doing so, I set the foundations based on our design principles and aligned them with our brand and company values.
During the creation of the design system, I frequently communicated with the rest of the team. When I deleted something, I made sure everyone on the team was aware of it.
To receive feedback from stakeholders, I created a simple, click-through prototype.
Identifying any potential flaws in the UI or UX prior to the build is invaluable to the process. Our approach enabled us to address these issues in the early stages of product development when amendments don’t result in financial drawbacks yet.
