BEAN TREE STORIES

CLIENT??School Project

ROLE? Concept, Research, Visual Design

DURATION??March – April 2018

Bean Tree Stories is an ipad app that helps to build lasting connections between consumers and their coffee through interactive immersive story telling.

Overview

There is growing interest in the entire coffee process from bean to cup in much the same way as we appreciate the finer points of wine, tea or chocolate.

The app takes the user on a journey through illustrated and animated representations of the countries where their coffee comes from and allows them to interact with special elements within them to learn more.

Goals

Based on the preliminary research results I was able to establish 4 primary goals from this project. The goals focused primarily on visual design due to project requirements and I took this opportunity to dive deeper into the visual design process and improve my workflow and my technical vocabulary.

To leave a lasting impact on the user and take them on an immersive journey.

A visually engaging design solution

Help users in appreciating and connecting with their coffee much via through this journey.

Be a source of knowledge imparted through an engaging experience.

Mood & Style

The direction uses painterly illustrations with clean minimal graphical elements. The interplay between white space and vibrant illustrations helps create engaging and easy to scan visuals.

Visual Elements

I attempted to address the goals I had set for this project through my visual design solution. I focused on the overall visual design as well as some surface level UI details.

Engaging painterly visuals

An illustration palette inspired by storybooks to add to the narrative nature of the project.

Smart story cards

UI elements driven by storytelling through a stepper based interaction that unfolds the story.

Interactive narration

Narrative and immersive UI to help carry the storytelling nature of the application.

Story sorting

Allowing users to sort through interactive elements on the screen.

Prototype

I began visualizing the experience through a series of concept animated user interactions in After Effects.

Immersive destination visualization

Articles sorted by tags to improve and speed up content access. This would also improve and make the search experience efficient.

Tag-Based content sorting

Articles sorted by tags to improve and speed up content access. This would also improve and make the search experience efficient.

Story visualization

Articles sorted by tags to improve and speed up content access. This would also improve and make the search experience efficient.

Final screens

Thank you!

Next Project –