Tote
Spring 2020
Role
Motion Design
Conversation Design
Visual Identity
Team
Lauren Kenny
Ikjong Choi
Zoe Attwood
Julia Nishizaki
Tote is a concept animation for a conversational user interface made for Trader Joe's. It is designed to enrich the grocery shopping experience as a personal cooking assistant. Tote provides recipes, cooking instructions, ingredient substitutions, and a personal profile for users—which includes preferences and dietary restrictions. Tote personalizes recipes/ingredients based off of a user's profile and in the case of a group meal, multiple profiles.
My responsibilities for my team was to create explorations for the CUI states, identify touch points for the user journey, and create and animate vector assets for the concept video.
explorations—
Early on in the project our team chose Trader Joe's as our brand and wanted our CUI assistant to fit into their grocery shopping experience.
We discovered that Trader Joe's has a website with recipes online, based on the food they sell, that many users were not aware of. To leverage this, we mapped out a user journey based off of a general cooking experience to identify pain points and opportunity points for our assistant to fit into.
We then began to explore the visual identity for our CUI. We looked to Trader Joe's for a branding guideline but they didn't have one, in fact their visual identity was difficult to pin down. The closest style we could find was the Wall Street Journal's Hedcut illustrations. Based off of that and the warm tones of their stores, we began to iterate and create a visual guideline to use for the concept video as well.
We landed on a vector design of Trader Joe's iconic brown paper bag for our CUI and named it Tote—based off of their wide selection of tote bags. We then began to animate Tote in a few different states that it would be in when it is in context.
With our CUI finalized, we refined our visual guideline and began illustrating vectors for the concept video.
concept video—
With our vector assets made and our story finalized, we animated a motion design concept video highlighting the experience of a user finding recipes that suit her and her friends, finding an ingredient substitute, buying groceries for herself and her friends to eat together, and being walked through how to cook the recipes.
reflection—
This project reminded me of how much really goes into making and highlighting an experience, especially through motion design. There are so many small subtleties that made the storytelling more meaningful—music, color, shapes, movement, etc.
I wish I had the foresight to see how long creating the video would take. It might have helped more to cut down on the features we showcased and focus on refining the key interactions.
If I were to do a similar project again in the future, I would spend time conducting more research on what users want from a grocery shopping experience as well as conducting user testing to see how people respond to having the CUI in context.