Visual Refresh

Freeletics

Poster designs on a black background with typographic layouts of workout program names and images of people working outPoster designs on a black background with typographic layouts of workout program names and images of people working out
tl;dr
Design Systems
Native App
Responsive Web
UX Research
AB Testing

How might we modernize and unify the Freeletics experience?

Client
Context

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.

Collection of screens describing the current mood and tone of Freeletics. Screens range from the app and app store, website, eCommerce, social, photography, ebooks, and other marketing materials

Responsibilities

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.

Solution

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.

Full product palette for content and background colors
Full product palette for background and content colors
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.

Localization proof of concept for the training journeys posters
Localization proof of concept for the Training Journey posters
Before and after mockups of the website
Before (top) and after (bottom) of the website
No items found.
Impact

The biggest visual update in years

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.

Get inspired

More Work