Project Details
Tools: Sketch, After Effects
Role: Design
The Fitbit Surge was the first device to have a wildly animated goal celebration. This was a tight collaboration between design and engineering. Not only did we have visual challenges with only 1 color but we had performance restrictions. Our animations needed to be both highly performant and look great. I also contributed some ideation to the Fitbit Blaze device animations. Including celebration moments as well as navigational explorations.
Challenge:
- Surge wasn’t a graphics powerhouse
- You have a single color
- Animating large portions of the screen is costly
- Celebration needs to be fun!
- Strapped for resources, both on device and engineering
Sequence animation
- Surge is really good at doing simple sequencing.
- Scaling of objects in a sequence became our root tool in developing our goal celebration
- Randomizing/Sequencing gave us a common language when we collaborated with engineering
ANIMATION ELEMENTS
Rethinking our language while collaborating
Changing how we described our animations helped engineering accept that they were possible and let them know we knew the limitations of the device.
- Don’t say “scale” - Surge can’t scale in a traditional way
- Don’t say “mask” - No masks on surge, but you can cover elements
- Use terms like “swap” or “cover”
ALSO
- Break down how you built it. Then show engineering how.
Sequence all the things!
- Surge couldn't scale text
- But we could swap text sizes really quick
- Could we swap text sizes and use X/Y position to trick your eye?
- You bet we did!