Since the inception of Freeletics in 2013, there hasn't been a major refresh of the brand language. In 2021, it's still perceived by many people, especially people who knew Freeletics from the beginning, as a hardcore product that will make you fit if you can somehow make it through the training programs.
However, as the product grows and expands, the brand needs to scale alongside. Our product offering is more mature, inclusive, and approachable, while still delivering the same kind of transformative results. Freeletics has outgrown its initial hardcore design and has matured as an industry-leading product. It's time to update the visual language to reflect this premium offering, while also addressing some years-old design debt.
Knowing that it would be difficult for us to AB test many of the Visual Refresh design updates, I lead the work to usability test these changes. Tests ranged from discovering sentiment among a variety of visual directions to ensuring the direction we chose presented the right attributes. All results and insights were presented and shared out to the leadership stakeholder group, who had final sign-off.
When it came time for execution, I oversaw the web refresh. From March to May 2021, I focused almost all of my time on designing and refining the specific content blocks that built up each webpage. These designs went through multiple critiques and reviews with the UX team and the brand team in order to get alignment and approval before launch.
Further, I spear-headed the implementation and adoption of Design Tokens via Figma. This work helped us rapidly make updates during the Visual Refresh changes, removed a significant amount of design debt, and now enables teams to build designs even faster.
Over the years Freeletics had developed a connection to blue. However, Freeletics is not a blue brand - Freeletics is a monochrome brand. With great restraint, we pushed toward a very limited product color palette and a set of colors explicitly used only for branded moments. This allowed us to really focus on content and layout, simplify our designs, remove dozens of blue hex-values in our code, and clean up years-old design debt.
Since we made the decision to move toward a monochrome product color palette, we needed to be very deliberate in how we used the brand colors. For key brand moments, like Training Journeys, God Workouts, and Achievements, we move to a dark theme, with the rest of the product being light theme. This helped give a visual indication of a special moment in the experience.
Since Freeletics started, the overall feel of the visual language hasn't really changed. With the release of Visual Refresh, the website received its first design update in about three years and also the first major redesign since the company was founded. We now have a full design system and styleguide for the first time, and our design files are clean.
The launch of visual refresh also corresponded with an enormous brand awareness campaign, propelling Freeletics into the future and solidifying the brand as a heavy hitter in the industry.
View the fresh new website and get inspired by our New Years campaign video below.