Visual Refresh

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.

Goals

1. Refocus on our core audience and be more gender neutral

• ‍Scale back the "hardcore" traits of the visual language to capture more of our core user group, without completely turning off our hardcore athletes.
• Rebalance the masculine focus of the brand. The predominantly male photography, the tone of voice and idea of success comes from a masculine perspective of tough and unforgiving. There is also an overuse of ALL CAPS which comes across as aggressive and yell-y.
  

2. Align design language across departments

• Develop for a cohesive design language between product and marketing.
• Create a Single Source of Truth library and style guide to help current designers and new designers or freelancers create work with confidence.
  

3. Address technical issues

• Enhance our accessibility score by removing text-over-image with gradient overlays. This treatment has also forced us to cover up critical parts of images because of layout constraints.
• Select a new type faces that scales and localizes to all of the languages we support.
  

Contributing designer & web design lead

Leading and advocating for usability testing

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.

Evangelizing design tokens and supporting implementation on web

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.

Refresh not redesign

Define our monochrome brand

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.

Make it pop

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.