Not only were we looking at revamping the entire look and feel of our product, but we also wanted to address problems with our icon family. For starters, there wasn't really even a family! Designers would copy and paste icons from different files without any link to a primary component. This was a big issue for maintaining design consistency across the app and web. Further, the current set of icons were a collection of random glyphs - from Noun Project redesigns to in-house creations to freelancer contributions - with no real cohesion. So, the two major goals of this Visual-Refresh-related- project were:
Icons are a highly individualized Brand artifact. They are a graphic representation of many visual design properties in one small glyph, and each company and brand has a unique approach. Because of this, I took a look at about a dozen fitness, wellness, and health apps and websites to see what kinds of concepts were represented as icons, and also, what kind of visual elements were carried throughout the icon families.
After collecting screenshots and adding my own commentary, I got together with the UX team to conduct a dot-voting exercise. I wanted to see what worked well and resonated with the team. Peloton and Nike gathered the most votes, which is not surprising.
We landed on a visual direction pretty quickly, but still went through rounds of feedback and testing in context. The working visual principles were:
The Freeletics icon family reflects the sport-focused brand. I wanted to focus on unique details that align nicely with the brand personality, as well as stand out from the crowded fitness space. Our Hexagon was the main inspiration for the angle, treatment, and direction of each glyph.
For the first time in its history, Freeletics has a global icon set to use across all touch-points. Further, the design team now has a single source of truth to access all the icons in the form of a Figma Library (and through design tokens). This helps unify our designs with the same set of icons, increasing our brand equity.
This project started as a side project because I noticed the team needed an icon set, but it turned into a critical part of the overall visual refresh for Freeletics. I'm super proud of where we've been able to take the brand!