Back to work

Weight Management Badge designs

Project Overview

My role
User(s)
Stakeholder
Tools
Visual Designer
Employees of medium to large companies
Creative Director
Adobe Illustrator

Gamify weight management

The weight management application of the Healthways suite was very elaborate. It involved coaches, tracking diets, exercise & more. While loosing or maintaining a healthy weight is its own reward, we wanted to give the user something they could show off that reflected their accomplishments.

Solution

Keep users engaged & wanting to achieve the next level. Create an badge or badges for each challenge. For Weight Management incorporate gamification to continually push the user to keep going.

My role

Visual designer working with a creative director to develop & push each badge concept. This project is still one of my favorites, because it let me be myself & have some fun, really push the limits of Illustrator, & create something that would really be a surprise to the user.

We ultimately ended up on a concept where the badges felt a bit more like tokens that didn't feel so flimsy. The more rich rendering fit better with the photos & textures of the weight management site.

Early iterations

The first concepts of the Weight Management badges were based on vinyl stickers. While we loved these & their personality, they ended up being a little to playful for the client.

Example: Nutrition Ninja

The Nutrition Ninja quickly became the crowd favorite which made buy in on the new badges fairly effortless.

Early Concept
Final

Other early concepts

Final versions

Here are the final forms of the first set of badges that we delivered. Once all the badge naming was set & we found the right look & feel, this was the final result. We wanted the user to be excited about unlocking that next badge, on the site we would tease them with the silhouette of all the badges they could unlock.

Badge construction

I made this a personal challenge, to really see how well I knew Illustrator, but to also create what you see below with as few shapes as possible. I gained a new mastery of the appearance panel, pathfinder, & gradient tool for this project.

Minimal shapes

This was the first badge where it clicked for me & created this icon with seven shapes. To reduce the number of shapes I explored gradients to give the illusion of multiple circles in this case.

Full render
Outlines

Gradients & repetition

Gradients & repetition were key in designing the sunflowers. Each pedal was a single shape & the main sunflower was only a handful of shapes repeated.

Full render
Outlines

Brush Tool

Illustrator just released their Brush Tool & this project presented the perfect opportunity to explore it further, plus who really needs an excuse to sneak in a Street Fighter reference into a project?

Full render
Outlines