Leaf App

UX design, UI design

Project Overview

For a course at the ITU University of Copenhagen, my group and I came up with a future design for nutrition—as a sort of speculative design. The idea was that you would have a Leaf dispenser at your home, your office, etc. that would give you nutritional Leafs (small papers with nutritions) based on data through a sensor attached to you arm. You could then scan the sensor with your phone and buy Leafs in the app. This is that app.

My Contributions

As the rest of my group did other designs (website, etc.) I made the designs for the app.

Selected pages in the app.

Process

The process of designing this app is presented below.

Wireframing

Before making designs with high fidelity, I made wireframes in hand and discussed them with my team mates. I did this to save time while making sure they agreed with the plans I had for the design of the app.

Best practice for iOS

The app was created using iOS guidelines and inspiration from apps like Wolt.

Mock ups in Figma

All designs for the app was made in Figma.

The app

The following will go through functionalities in the app.

Explore

Explore is meant for you to browse for new tastes etc. In this future world, restaurants and companies will specialize in flavors to add to your leaf, which can then be sold in the app. The user interface of this page is inspired by apps like Wolt.

Machines

If you are on the go and need to find the nearest machine (dispenser), this is a handy feature.

Statistics

To keep track of your consumption look in Statistics. Here you can see an overview for each day, week and month.

Profile

In your profile you can see and edit data about yourself to make sure that you get the nutritions you need. For example, if your the sensor on your arm detects a lack of vitamin D, you can see it here and Leaf will make sure you get it.