FuelBand_hero

Project: Nike+ Fuelband

Role: UX & UI Designer 



Context

The Nike+ Fuelband was an idea that had been floating around Nike for years, ever since the Livestrong Band was launched in 2004.  Nike had also been creating running watches for years and had just launched a GPS running watch in 2010. That’s around the time I joined the Digital Sport team and became involved in the stealth Fuelband project.

scorboard

The concept of a scoreboard on your wrist that lit up when you interacted with the band was already established when I joined, but there was little more than a single button interface, 100 pixel screen made of LEDs and a font spec when I began to work through the many details that had yet to be defined.

Observation and problem definition

We needed to create a UI that allowed for 3 distinct modes.  

  • All Day Mode – Track daily metrics, including time of day
  • Session Mode – Start and end a workout session that tracked metrics for the duration of the session
  • Action Mode – Turn on/off settings and check battery level
fuelband-ui-model

Solving all the things

With only one button we were limited to a few interactions.

  • Short button press
  • Long button press
  • Double press

Using these different button interactions I was able to access these different modes and then using the mental model of a loop the metrics fell into place as shown below.  

fuelband-flow

Without a working product, we also needed a way to prototype the UI and experiment with how information would be displayed on the screen, including the timing and animation.  I worked with a developer to help us create a Flash prototype that allowed us to experiment with animation rates, ease in/ease out, fade in/fade out. 

fuelband-prototype

We also knew that the whole premise of the Fuelband was to “Get to Green” and reach your daily goal.  I had prior experience with animation as a motivator from my work at Silicon Gaming and I really wanted to create GOAL animations that motivated you to reach your goal – a reward that made you smile.  I took inspiration from 8-bit video games, opening movie credit sequences, sports, and yes, even Las Vegas.   Once you've created slot machine animations, the psychology never leaves you.

fuelband-goal-animations

Real world feedback

The response was awesome! It was reviewed by every tech publication, worn by every Nike fanatic and inspired ordinary people to be more active. Where other trackers had failed, Nike was able to make a product that was personal, motivational and fun, and that was largely due to its simplicity. It won many awards, including an IDSA Gold award.  Adding two more patents to my career wasn't bad either.

Key Takeaways

The Digital Sport team took Nike from a company that makes shoes and apparel to a products and services company.  The Fuelband did more to raise the profile of fitness trackers than any other product at the time. Rather than Jawbone's generic fitness models, the Fuelband had LeBron James in commercials and Serena Williams wearing the product on court.  

I feel lucky to have been a part of a stellar group of designers and engineers on this journey. Below is a great article reflecting on the Fuelband and its importance as a transformative product.

https://www.wareable.com/fitness-trackers/not-so-happy-birthday-nike-fuelband-2351

Selected Works

Walmart Store PickupService/UX Design

Walmart WirelessService/UX Design

Nike+ FuelbandProduct/UX Design