Fitness Icons

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:

Goals

1. Create a unified library and single source of truth for the Freeletics icons

• Up until this point, any sort of unified icon library had not existed. Designers would copy and paste icon glyphs from project to project.

2. Reflect the Visual Refresh design language

• Not only did we need a full icon set, but the style of the existing icons needed to update to be more inline with the brand style.

Contributing designer to Design Systems

Proactively designing and seeking feedback

Since this was a self-initiated project, I worked hard to proactively seek feedback and make critical decisions about the designs to move forward.

Ensuring adoption

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.

Advocating for design tokens

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.

Sporty & robust

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.