Lead UX/UI Designer
YETI Coolers
20 Weeks
The previous icon set had no consistency with dimensions, line weight, or style. The collection felt unprofessional and lacked brand voice.
The top priorities in my first round of updating the icons in our brand style guide were the global navigation icons (Search, Account, Cart, Hamburger Menu) as well as the value proposition icons (Store Location Pin, Free Shipping, Free Returns, Warranty) that live on every PDP.
One of the brand styles I landed on was a proportional balance of 2/3 to 1/3. For example, the head of Account icon is 1/3 of the visual weight while the body is 2/3. This can be seen in the Search icon with the magnify glass being 2/3 of the visual weight and the handle being 1/3. Again, you will notice similar proportions for the bag used in the Cart icon.
The second style I decided would fit the brand well was giving the icons a two pixel gap. I felt that this would give the icons a sense of ruggedness to better fit the YETI brand voice.
Another way I designed with the YETI brand voice in mind was by creating a new account icon where the body and shoulders resemble mountains since we're a brand with a passion for the outdoors.
The last styling I wanted to implement was having a mix of flat and round terminators on lines. This seemed like a good fit for the brand since we have a good mix of female and male customers and I wanted to appeal to that blend of energies. The rule for this design is that corners will be rounded and ends will be flat with square edges.
My second round of updating icons in our style guide focused on new versions of old icons as well as icons that our completely new to our collection as more and more use cases pop up in our design work.
From left to right, I created a new Order Tracking icon, updated our Chat icon and Heart/Favorite icon, created a new List icon, updated our Fast Checkout icon, Edit icon, Notification icon, and Espresso icon.