Not only were we looking at revamping the entire look and feel of our product with the Visual Refresh project, but we also wanted to address problems with our icon family. For starters, there wasn't even a family of icons! 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:
Never existed before
Not only did we need a full icon set, the style of the existing icons needed to update.
Since this was a self-initiated project, I worked hard to proactively seek feedback and make critical decisions about the designs to move forward.
To ensure the teams used these new icons, I created an icon component library and merged all of the icons with the existing Figma components. This helped smooth the adoption process and make it much easier to integrate the new icons into current designs.
Not only were the icons merged into the Figma component libraries, we also merged them into our design tokens. With significant helps from the developers, I worked to ensure the web and native platforms adopted the use of design tokens. This helped us build a more consistent product with significantly less design debt.
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 a global library file (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!