Strava
Strava is an exercise app that is particularly favored among runners and bikers due to its excellent GPS-tracking features. The design team was looking to update their old library of icons, so they hired me to overhaul the whole library.
Services
Icon Design
Team
Anton Schulz, Katrina Lofaro, Arlo Jamrog
Dates
2024, January to May (5 months)
Website
TLDR;
In 5 months, I explored 5 different icon styles, redesigned Strava's existing library of 360 concepts in 4 sizes, and shipped a total of 1,440 unique assets along with a comprehensive style guide.
Why they brought me on
Strava was in the works of rolling out some huge updates to their entire visual expression, including a new typeface, graphic elements, and a dark theme experience. Strava is primarily used as a mobile app, so for them iconography is a valuable brand piece and an essential part of their product experience. But their existing icon library needed an update. It had numerous visual issues and didn't properly represent the visual direction that Strava was headed. So the Strava design team brought me on board to completely redesign their icon library.
I mean, if you're gonna make icons for athletes, you oughta make 'em beefy.
The original set
Strava's personality is dynamic, energetic, and enthusiastic. But the original icon set didn't reflect those ideals. Many of the lines were intentionally separated at points referencing a "one-line" style, intending to reflect how athletes traversed their routes, but instead it made them feel incomplete and disjointed.
The icons also had a sharp, chunky, square-like design that was at odds with Strava's community and positivity based ethos. In addition to those design choices, the icons also had imbalanced weights, with some icons feeling much heavier than others.
The design lead, Anton Schulz, wanted me to relate to visual motifs around their key words, like brave, fierce, bold, passionate, inspiring, grit, and celebration. All of my future design decisions for the iconography were rooted in maximizing these key words.
Fortunately, they didn't really expect me to make squiggly icons.
5 different style explorations
The first step of the project was to test out some icon styles. This is where I really wanted to push boundaries and explore some unique visual motifs. I gave each of my styles a name so that they were easy to remember and compare: Achieve, Support, Endurance, Spirit, and Flow.
Each had specific rules that were used to influence their design, such as using rounded or square end caps or corners, or more intricate rules like matching the angle of the "A" from the Strava logo.
There's nothing a client likes more than options! Naturally, they wanted just one more.
Eventually, the design department preferred a mix of the last 2 styles, Spirit and Flow. The end result utilized the 2px line weight and the rounded corner, sharp cap style from Flow, while utilizing the 45° angles and streamlined, literal designs from Spirit. The final product was a bold, yet warm style that expressed both aspects of Strava's identity: the soft rounded corners adding a friendliness that captured its vibrant community of athletes, and the sharpness of the square end caps denoting competition, drive, and passion.
Below was the first comparison I presented, contrasting the bold new style with the thin old style. My new icon style carried much of the complexity from the older style, but made the concepts friendlier, bolder, and easier to comprehend.
As they say, "fortune favors the bold"! Though maybe that isn't meant to be taken literally…
First Drafts and the Review Timeline
After determining the style direction, we moved into the bulk of the project—designing at least one icon for every concept. I created between 1 to 4 versions of each icon. Below I'm showing only 1 version of each.
Though most of these were adjusted drastically, it was a good first step!
Now that I had a few options for each icon, we moved into the review phase of the project, when I introduced the team to my Review Timeline, my non-patented approach to streamlining reviews with my clients.
Essentially, the Review Timeline is a phased system that allows for seamless and asynchronous collaboration between the client and the icon designer, designed so that each party knows exactly what to do at any time.
The Review Timeline is divided into 3 main stages, with approvals moving from one stage to the next. These 3 stages are the Conceptual Review stage, the Executional Review stage, and the System Refinement Review stage.
Which image really captures the idea of "camera" in a flash?
The 1st stage, Conceptual Review, is for making sure the visual metaphor is clearly communicating the idea. Most icons start in this stage to validate that the meaning of the icon is clear.
It's like "spot the difference" in Highlights Magazine, but for icons.
The 2nd stage is Executional Review, where I test different methods conveying the same concept, adjusting details like the corner radius, scale, positioning, composition, shapes, and basically anything about the design that needs an adjustment. This is the stage where it's encouraged to be really nit-picky.
The last step before they're shipped, sailing stormy seas of unlinked components.
The 3rd stage is System Refinement, where I make adjustments based on patterns that have been established while working through the library. This is the last chance for reviewers to request any changes on an icon.
The Conceptual Review and Executional Review are divided into 4 columns: WIP, Ready for Review, Like, and Love. WIP is the zone where the designer makes adjustments and iterates on new versions, a zone that isn't meant to be commented on by reviewers. Ready for Review are all icons that are ready for the client to review. The client can then move their favorite version to the right, into either the Like column along with comments about how it can be improved, or the Love column to approve the icon for the next stage.
It looks intimidating at first, but let me tell ya, this is WAY more efficient than thousands of Figma comments.
The best part about this system is that it puts control over the process to both the client and the designer. Clients know that anything in the Ready for Review columns are ready for their review. And I know that if it's in the Like column, it needs edits (shifting it back to "Ready for Review"), and if it's in the Love column, it's ready to scoot forward to the next stage.
Sizes and Stroke Widths
After using the Review Timeline to approve every icon, I had a strong starting place to design all the sizes that Strava needed: a whopping 4 sizes for each icon! Extra Small (16px), Small (24px), Medium, (32px) and Large (48px).
Since the 2px stroke weight was quite bold, it was important make the stroke widths proportional. Eventually after some deliberation, the team decided to use these stroke widths: XS = 1.25px, SM = 2px, MD = 2.5px, LG = 3px
Icons come in all weights and sizes, just like people!
This unique set of stroke widths allowed for the icons to have a semi-bold feel no matter what the scale. The only caveat is that the XS and MD variations of stroke widths are trickier to design since the paths can't align exactly on the grid. XS strokes need to be nudged inwards by 0.125px, and the MD strokes by 0.25px, so that their outside edges are on pixel. This technique guarantees that the icons will look crisp when displayed on screen at their defined scale.
Icon designers can be pushy and shifty, but in only the best ways.
Dark Theme!
Late in the project, the team let me know that they were going to release the dark theme version of the app! So I needed to make sure my new set of icons worked well in both light and dark theme. Fortunately, only a few icons needed updates, which mostly were fixing tight negative spaces.
I wasn't gonna let dark theme darken my mood, just my phone screen.
Map Symbols
In addition to navigation and sports icons, I also redesigned their entire set of map symbols to match their new iconography. These are also called "points of interest" icons, and are essential for any map-based app.
This set had to use filled icons because the artwork gets really small, as far down as 7 pixels in height!
Final Details
After designing all the icons in all 4 sizes, the final steps were to package it in a way that would allow it to work seamlessly with their existing infrastructure. First, I renamed layers using my custom macros. The new syntax allowed them to easily export into the correct organization: Here's the whole syntax:
{size abbreviated} {dimensions} / {category}_{icon_name}_{highlighted?_}{size full}
For example, the filled/highlighted bookmark in the orange box has this name:
sm (24×24)/ actions_bookmark_highlighted_small
Without proper syntax, it would have been very taxing to organize these.
I also turned the icons into components. Each icon component had searchable keywords, flattened icon artwork, and pre-loaded export settings. Lastly, I delivered the design team optimized SVGs along with a detailed style guide, which also included some interesting case studies of notable icons. Below is just a small sample of the whole guidelines packet.
Conclusion
In total, I created 360 concepts at 4 sizes, with a final asset count of a whopping 1440 icons! This was a super fun project that encapsulated everything from the style exploration all the way to the final export of the icons and delivery. Since finishing this project, this icon set has become a core part of the product! It has also appeared on their 2024 Year in Sport recaps, and their headquarters even has the icons printed and displayed on one of their office walls.
Want to read more?
I like to write about icon design, so if you'd like to learn more about my craft and my process, check out my articles section. If you want to see more of my work, then click on one of my other case studies. If you're interested in working together, then contact me and we'll get started!