300+ ICON family & Guidelines

The icon set was long over due for a redesign from the ground up. The old collection became a kitchen sink with icons of all different styles and sizes. This redesign brought not only consistency to all the icons but also created a system for other designers to keep contributing while keeping the new icons part of the same family. 

 

200+ innital icon set

I started with the 200+ icons we had in the consumer icon set. While doing this redesign, many patterns where repeating in the icons. This took me to start the Icon Guidelines which helped me stay consistent and other designers to start contributing to the set. 


icon guidelines

The icon system was designed to be flexible and versatile. My process was very simple. I took the original icon, extracted the meaning that was intended to convey and started exploring new options. Once I was happy with the new icon, I tested it in different sizes from 64px down to 16px. I would then go back to the Guidelines and write and rewrite the documentation. 

They are now used in all platforms: Web, iOS, Android, Apple Watch and Android Wear.


icons-getaways.png

Travel icons

Designed in collaboration with Andrew Kelly and using the Icon Guidelines documentation we crafted these icons that were used for the Getaways standalone app.

Documentation helped to maintain the look and feel. These icons were later also included in the main Groupon app for the travel section. 


icons-visual.png

visual team icons

Designed in collaboration with the Visual Team. This set included lifestyle icons for online and offline marketing campaigns. 

Documentation helped to maintain the look and feel. These icons were later also included in the main Groupon app seasonal categories. 


icons-beforeafter.png

Before & After

Designed in collaboration with the Visual Team. This set included lifestyle icons for online and offline marketing campaigns. 

Documentation helped to maintain the look and feel. These icons were later also included in the main Groupon app seasonal categories. 


Animation

green-cart.gif

Shopping cart

Designed in Framer, this playful little guy helps bring the user attention to let him/her know that the item was successfully added and where they can access the cart. 

check.gif

confirmation check

The goal was to call the user's attention and provides better visual feedback that the purchase process is complete and the transaction was successful.