Overview
As part of Weight Watchers rebrand to WW, I helped design more than 100 milestone badges to recognize a variety of user achievements. From steps taken to tracking healthy eating habits, these virtual awards were designed to recognize and help users celebrate even the smallest of victories along their health journey.
Use case
These illustrations were used in important moments of member's journey to congratulate them for achieving a specific measurable, and attainable goal.
Design Process
I worked closely with the Director of Design at WW and explored new direction to create milestone badges. I started by reviewing the new brand guidelines and understand the new aesthetic to reflect in my work. I needed to create a cohesive style and a set of principles that reflect new brand in our product. These badge designs were to inspire healthy habits for people, families and communities.
Here are some of the early sketches:
I studied the new color palette to understand how to use the color combinations that works best to create a clear and bold design, yet simple and vibrant.
Here are some color explorations:
I presented my explorations to the team and after few rounds of discussions and feedback, I had a composition that was aligned with the new brand aesthetics. To ensure the style looks consistent with other visual elements and UI components of our product I created mock-up screens with the badge designs.
Final Design
I was able to achieve an element of flatness and simplicity, and brought that to life by pairing with the use of bold colors. A holding circle was used for the composition of each illustration to keep visual design consistency with WW logo and other iconographies. I created a library of illustrations that could be used through out the app.
In Use
Here are few examples of the milestone badges in the app screens:
