Nike – Fuel
2011/01
Andrew Chee
2011/01
Andrew Chee
Interaction Design Director
R/GA Brand Development Group
Core Team:
Andrew Chee
Virgilio Santos
Marc Shillum
R/GA Brand Development Group
Core Team:
Andrew Chee
Virgilio Santos
Marc Shillum
Collaborators:
Brian Schmitt
Jonathan Han
Brian Schmitt
Jonathan Han
Source:
Concept
The assignment consisted of 3 parts:
The first image represents the initial prototype for the device (designed by Nike), followed by the initial vision of positioning Fuel as the universal currency to tie together all "digital sport" and activities within the Nike world, a natural extension to the concepts and foundations laid by Nike+ (e.g., Running+, Basketball+, Futbol+, etc).
The primary objective was to create a new product platform that would answer the simple question, "How am I doing?" in real-time throughout the active lives of casual to intermediate users. The key hardware to kick off the platform in development by Nike was the FuelBand, a wearable that augmented what normally would be a digital watch with an accelerometer and simple data transfer (initially dreamt to be wireless, but quickly simplified by Nike to USB) to the user's various computing devices.
The assignment consisted of 3 parts:
Behaviors
The hardware prototype quickly evolved. Taking inspiration from the color palette and dot matrix of the FuelBand, a graphic system was developed and explored, one that could easily convey progress over time in a playful, yet highly functional and analytical manner.
Explored, were representations of various activity from walking to high impact sport, various measures of time slices, goal-setting, friendly competition (individual or group).
The hardware prototype quickly evolved. Taking inspiration from the color palette and dot matrix of the FuelBand, a graphic system was developed and explored, one that could easily convey progress over time in a playful, yet highly functional and analytical manner.
Explored, were representations of various activity from walking to high impact sport, various measures of time slices, goal-setting, friendly competition (individual or group).
What developed were basic behaviors of the interface that were consistent with the characteristics of the hardware itself: color clearly as a temperature / bar of activity, forward motion as implied by what would most likely be scrolling animations for the LED matrix display, and related.
Language
The dot matrix language was further developed and refined to create a consistent functional iconography and even a distinct dot typeface for the brand.
The dot matrix language was further developed and refined to create a consistent functional iconography and even a distinct dot typeface for the brand.
A brand manifesto developed in parallel, titled "Everything Counts."
Nike Fuel
is a driving force,
an impulse
an incentive,
a stimulus
an encouragement
resulting in increased activity.
NikeFuel is your reward
for being active.
Running counts.
Jumping counts.
Biking and swimming
and playing all count.
Every time you’re active, it counts.
Everything you do changes you.
Makes you stronger, faster,
or just a little more fit.
Everything counts and we can count it.
And since we measure it and track it,
we make even the most
trivial activity matter.
A reward given to you for
reporting your activity.
Nike Fuel
is a driving force,
an impulse
an incentive,
a stimulus
an encouragement
resulting in increased activity.
NikeFuel is your reward
for being active.
Running counts.
Jumping counts.
Biking and swimming
and playing all count.
Every time you’re active, it counts.
Everything you do changes you.
Makes you stronger, faster,
or just a little more fit.
Everything counts and we can count it.
And since we measure it and track it,
we make even the most
trivial activity matter.
A reward given to you for
reporting your activity.
System
Likely the most challenging part of the project was the definition of Fuel —the universal metric of activity. Many metaphors were explored, giving meaning to the dots "filling" and "depleting" as that of a battery, a fuel cell, a gas tank.
Inspiration/references abound. On the more emotional (perhaps darker) side, the life battery/indicator from Logan's Run —however this time, you could "renew" throughout the day and we'd dial down the anxiety just a tad. There was even a potential to display the earning of bonus life/energy. On the more analytical side, I looked at candlestick charting, a system apparently developed by the Japanese to trade rice in the 17th century, now ubiquitous in stock market technical analysis. Visualizing activity rhythms / momentum / pace were particularly interesting to me, likely because of an obvious linkage to analog turntable strobe rpm indicators, BPM (beats per minute), and related.
In the functional / flow diagrams, I illustrate a slice of the high-level user experience, focusing on the point of interaction with the device (FuelBand or partner integrations), to methods of:
A key development in this stage was the importance of showing a surpassed as well as unachieved goal, and keeping this playful. Placed in a daily schedule, this "filling" behavior / system could extend graphically to any screen at any resolution.
Likely the most challenging part of the project was the definition of Fuel —the universal metric of activity. Many metaphors were explored, giving meaning to the dots "filling" and "depleting" as that of a battery, a fuel cell, a gas tank.
Inspiration/references abound. On the more emotional (perhaps darker) side, the life battery/indicator from Logan's Run —however this time, you could "renew" throughout the day and we'd dial down the anxiety just a tad. There was even a potential to display the earning of bonus life/energy. On the more analytical side, I looked at candlestick charting, a system apparently developed by the Japanese to trade rice in the 17th century, now ubiquitous in stock market technical analysis. Visualizing activity rhythms / momentum / pace were particularly interesting to me, likely because of an obvious linkage to analog turntable strobe rpm indicators, BPM (beats per minute), and related.
In the functional / flow diagrams, I illustrate a slice of the high-level user experience, focusing on the point of interaction with the device (FuelBand or partner integrations), to methods of:
Expressions
Iterations of the visual system, user interface, and interaction mechanisms via tight collaboration with Virgilio Santos, Jonathan Han, and Brian Schmitt.
Iterations of the visual system, user interface, and interaction mechanisms via tight collaboration with Virgilio Santos, Jonathan Han, and Brian Schmitt.
Refinement
At this stage, the universal metric had been defined, and the user experience was coming together. What was left was to form tighter integration between the screens and the device while in the primary context —on the go, mobile.
The following wireframes and simple animation illustrate the potential for real-time interaction/communication between the FuelBand and a mobile device —as companion devices / interfaces.
For this particular project, I found it most effective to illustrate both FuelBand and mobile device over the course of a day, states chunked by key points in the interaction:
The language of Fuel earned over the course of a day extended graphically in the week view, which doubled as an indicator of rhythm per user type, of which a starting set of 3 were recommended (however an infinite number of patterns could be developed):
At this stage, the universal metric had been defined, and the user experience was coming together. What was left was to form tighter integration between the screens and the device while in the primary context —on the go, mobile.
The following wireframes and simple animation illustrate the potential for real-time interaction/communication between the FuelBand and a mobile device —as companion devices / interfaces.
For this particular project, I found it most effective to illustrate both FuelBand and mobile device over the course of a day, states chunked by key points in the interaction:
Extension
The results of integrated brand/visual/interaction languages culminated in the graphic simplicity of the following prototyped screens. The language was designed to fill virtually any resolution, were consistent with / extended the hardware design, and embodied the playful / motivational attributes of the brand. Elements of this version can be seen in use today with more experiential installations involving projection and related.
The results of integrated brand/visual/interaction languages culminated in the graphic simplicity of the following prototyped screens. The language was designed to fill virtually any resolution, were consistent with / extended the hardware design, and embodied the playful / motivational attributes of the brand. Elements of this version can be seen in use today with more experiential installations involving projection and related.
