🧸 Leaf - Web App Designer & Developer

Leaf is an educational web app tailored towards children (age 9+) in efforts to mitigate the effects of carbon emissions starting with a new generation.
The project recevied the first place award in the University of Chicago's Francis Yuen East Asia 2020 Hackathon

My Role

Project Manager
UI/UX Designer
Illustrator
Web Developer

Timeline

2 days

Team Members

1 Project Manager
2 Designers
4 Developers

Tools

Abobe Suite
Procreate
Figma
Visual Studio Code (HTML/CSS/JS + Flask)

Overview

Phase 1

Feature Selection

The hackathon prompt was to develop something that mitigates the effects of carbon emissions starting with a new generation. Therefore, we wanted to select key features such as an interactive and educational room as well as an AI capability to provide immediate feedback for user groups on their carbon emission usage.

Phase 2

Asset Illustration

Because the web app, Leaf, is designated for young children, we made sure to have high interactivity and bright colors throughout the illustrations. The usage of a mascot makes it easier for our user group to stay engaged with the app. All assets were made with Procreate and the Adobe Suite.

Phase 3

UI/UX Web App Mockup

We created Lo-Fi and Hi-Fi mockups of the Leaf web app on Figma. The UI/UX process was imperative in making sure the entire team was on the same page for what we wanted the web app to look like.

Phase 4

Web Development Building

We built the web app using HTML/CSS/JS for the front-end and Flask (Python) for the back-end based off of our UI/UX wireframe. We implemented AI room scan feature to make the web app even more interactive. The final demo and pitch can be viewed here.

Phase 1 - Feature Selection

Phase 2 - Asset Illustration

Phase 3 - UI/UX Wireframe

Phase 4 - Web Development Building

Watch the full demo and presentation here: Leaf Demo Launch