Fruit Story

An Interactive Nutrition Lesson

Fruit Story augments a typical grocery experience via phone projections and story telling — getting kids subliminally excited about eating healthy!

Fruit Story flowchart Fruit Story Sketch

A Very Conceptual Idea

The assignment for this project was to change an existing behavior for a client, and we were encouraged to use methods and things that may not exist just yet. ...What? That's so many things. 1. Change an existing behavior, to 2. Benefit Edible Arrangements, and 3. Use technology that doesn't exist yet.

But I came up with using phone projections (which I think WILL be a thing soon, since they are beginning to manufacture mobile phones with projection features), to project animated characters onto fruit and get kids excited about fruit when their diet is most vulnerable.

I created this app as an extension of the Edible Rebranding.
View the Edible Case Study

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.

Fruit Story Sketch

Interface Design

Fruit Story Characters

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.

Fruit Icons
Fruit Story on Phone Nutrition facts

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 interact with the screen to the right 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.

See the Pen Jeff the Bug in Flight Mode by Una Kravets (@unax3) on CodePen

The Gif Fix

To emulate "scanning a barcode" in Fruit Story, I filmed movies from my phone and re-created them in film (simulating a capture feature). This was the only way to avoid overlays other inherit features in iPhone video mode.

I quickly discovered that iOS 6+ does not support the autoplay feature of videos. Also, videos pop up in separate windows when played. Since I just wanted to fake the video as a background, I had to convert them to gifs. Yes, this increased the file size, but it was a compromise that worked. The phones used in the filming really worked overtime to keep up with the page load.

Original .mov file (563 kb)

Gif example

Converted gif (5.8 mb)

Filming behind the scenes

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.

The projection setup Fruit Story Screens