Leaf

Interaction Design

Challenge

How can users maintain sustainability amid time and effort constraints, with minimal direct rewards?

The Basics

Applied a thorough design process leading to a device and game design. Strategized user experience with detailed information architecture and wireframes, then transitioned to high-fidelity mocks. Emphasized visual details and consistency for a seamless user experience.

Details

3 months | team of two

Contribution

User Research, Ideating, Wireframing, Information architecture, Prototyping, Game illustrations, User Testing

Significance

8-16%

of total national energy

consumption constitutes to food production

$940 Bil/yr

global economic loss as a result of food loss and waste

20%

of consumer energy use accounts for cooking

Knowing the extent of negative impact a considerable amount of us have on our environment just by going about a regular day of cooking, we ask the question,

"How might we make our kitchens sustainable?"

Meet Leaf, your kitchen companion! This nifty screen projector easily attaches to your kitchen walls and cabinets, transforming sustainability into an engaging game.

Play for Points

Play challenges with friends for game-points and view how well you are doing within each 'ingredient house'.

Track Inventory

View items you have and add to list when use them. Update the ingredients at your convenience.

Master Recipes

Learn how to be an efficient chef by repeating recipes. Explore recipes using the ingredients you have.

Process

Research

Self Observation

My teammate organized, shopped for ingredients, and prepared a classic American meal. Meanwhile, I observed the intricacies of the cooking process and identified possible areas of improvement.

Survey

We designed a survey to explore users' perceptions of sustainability and their current kitchen habits. We gathered insights from 73 responses.

Contextual Inquiry

We strategized a semi-structured contextual inquiry, recruiting 6 participants for an observational study of their kitchen routines while preparing a standard meal.

Brainstorming - desk research

Buying Ingredients

cooking Meals

Cleaning Up

Contextual Inquiry - Affinity Map

Research Insights

1. People lack environmental awareness and information.

2. People can't see personal benefits of being sustainable.

3. People have habitual kitchen behavior that is difficult to alter and change.

4. People tend to improvise recipes more often.

5. People store food but mostly end up throwing it away.

Design Goals

Motivate

Instill environmental awareness to motivate users.

Show Progress

Assess and evaluate sustainability within the kitchen.

Habitualize

Encourage the breaking of old habits and cultivation of new sustainable practices

Ideation & Concepts

Ideation - Brainstorming

Concept 1 - Haptic protege handle control and visual display.

Concept 2 - A small projector screen with the projector

Concept 3 - A counter top digital device for recipes.

Final Concept

An interactive game that brings together people in an virtual space encouraging them to collectively maintain a Green Kitchen. The game is projected from a small control device. The user interacts with the device to play.

Motivate each other

Engage users in collaborative, community-based challenges with friends.

Track progress with points

Track progress using sustainability points, earned through various aspects of the game

Repeat to gain points

Monitor consistency and provide users with the chance to revisit and repeat challenges within the game

Concept use cases to discover potential failures and pain points

Design

Information Architecture

We addressed the challenges of organizing information across two displays (projection and game controller), understanding a distinctive user interaction method, and designing gameplay. This was accomplished through the development of a comprehensive information architecture.

Wireframing

We created wireframes for the game's three features, outlining how screens would visually present gameplay. Wireframing allowed us to efficiently plan and visualize the game's layout and functionality, streamlining the design process.

Visual elements

We aimed for playful visuals that convey the message of promoting sustainability. Inspired by isometric monotone designs, I crafted our assets in this visual language to strike a balance between playfulness and purpose.

Controller Physical Design

We aimed to visualize the appearance of both the game controller (projector) and the projection, envisioning their integration into the kitchen environment. Subsequently, we rendered the product design to bring this vision to life.

Visual elements for home screen

3D model of game controller (projector)

Let us level up to a Greener Kitchen 💚

Testing

We recruited five participants aged 23-27 for in-person or remote testing. Beforehand, we developed a testing protocol. To streamline feedback management, we utilized Miro to organize and prioritize test comments for implementation in the next iteration.

Testing Insights

Updating quantity is time consuming.
People wanted to have a view of all inventory items rather than in only specific 'ingredient houses'.
The 'more details' on the houses didn't seem to give users the expected insights.
Users expected 'challenges' to be a main feature in the home page.
Users wanted to know exactly when in the game they can score points.

Iteration

Overall information on houses

The first iteration design of the dashboard showed the overall view. It compared the weekly grocery expenditure and wastage percentage. The users did not find this information useful to track sustainability.

Focus on weekly sustainable progress in a house

In the second iteration we focused on visualizing the sustainable progress for the week. We split the view into an overview, weekly data and historical data.

"Challenges" are found under friends tab

In the initial design iteration, challenges were featured in the 'Friends' tab. Positive responses were received, but users expressed surprise at finding challenges under 'Friends.' Given the gaming experience, they suggested prioritizing challenges for better visibility.

"Challenges" in home page (Kitchen)

We relocated challenges to the homepage and revamped the main tabs for improved relevance. The kitchen now highlights 'Ingredient Houses' and 'Challenges,' with separate tabs dedicated to inventory and recipes.

Users can see level points in top bar

In the initial iteration, the user's gained points were showcased in the top bar, a fixed component visible on every screen. Additionally, users could track their points upon completing milestones.

Users can find leaf points throughout the game

We aimed to enhance the transparency of the points system. The updated game UI now clearly indicates when users can earn points along their journey. Tracking includes food wastage, recipes, inventory updates, and challenges.

Link to final Prototype

Link to product video

Reflections

Leaf emerged as the culmination of our interactive products studio class. In our dynamic duo, we complemented each other's strengths, spanning interests across the design process. By challenging ourselves in less familiar areas, I honed my skills in structuring and conducting research.

The unique interaction method of our solution posed a challenge in crafting the information architecture and wireframes, but collaborative efforts propelled us forward. Developing visuals and the product video demanded time and dedication, with valuable insights gained from testing underscoring the importance of iterations.

Positive feedback on our final deliverables brought a sense of accomplishment. This project significantly improved my proficiency in Adobe Illustrator, Figma, information architecture design, video production, and user research and testing.