An Interactive Nutrition Lesson
Fruit Story augments a typical grocery experience via phone projections and story telling — getting kids subliminally excited about eating healthy!
A Very Conceptual Idea
Wireframes & Storyboards
Since this was mostly filmed at a grocery store (and with a 5-year-old!), I really had to properly time and plan out every scene. I was worried about both getting kicked out of the store and dealing with an annoyed child. I only ended up returning to Whole Foods twice, and they were really nice about letting me film, though I didn't bring a tripod for discretion.
Meet Your Hosts
Mark the Worm:A know-it-all bookworm who can tell you the exact nutrient content of any fruit.
Jeff the Bug:An adventurous (and ambiguous) bug who loves to fly around and explore the fruit world.
Faking it with Code
Every phone interaction from the video was coded as a separate web page to prototype the final app (for a more natural interaction when filming). At first, I thought: great! CSS animations will make this enjoyable and easy. It will all be good.
Well, it turns out that CSS animations run terribly on mobile devices. And I needed one of those for filming. Often the phone being used in the video would freeze, and we had to time some of the scenes pretty well. It also left my home screen filled with little icons. I designed for both the iPhone4s and iPhone5. You can to trigger an animation timed to the music of the final video.
To me, the sweet spot between design and coding is in the interactions. All of the animations in the prototype video was created using CSS and SVG graphics.
The Gif Fix
Behind the Scenes
It Really Takes a City.
I wanted this app to look as realistic as possible, and the favor list I called in for this was... HUGE. Let me take a moment to thank them all. Thank you Javier Rios for going through the trouble of letting me borrow your sisters mini-projector. Mariesa Dale and her adorable son, Kayden, for being a wonderful actors. Alex Lubinsky for doing Jeff the Bug's voice-over, and being an extra set of hands at the table set. Elaina Kimes for helping organize the filming in the store. Whole Foods for not kicking me out. And Ally Palanzi for being my hand model and letting me use her iPhone 5 to test screens on, and for letting me film the whole thing with her DSLR. Seriously, thank you SO MUCH everyone.