Connie Xu


December 2020 | Web App Hackathon |

Product Manager


Leaf is an educational web app tailored toward children (age 9+) in an effort to mitigate the effects of carbon emissions starting with a new generation.

The project received the first place award in the University of Chicago's Francis Yuen East Asia 2020 Hackathon.

As the Product Manager of the hackathon, I worked primarily to create product specs, prioritize reaching a minimum viable product, and manage crises and obstacles. I was also a developer for the web app.



Hackathon Challenge: Innovate a solution to climate change by mapping personal carbon emissions.

Given the challenge, our team researched various products that we use on a daily basis and their carbon emissions.

From our research, we decided it would be interesting to explore the educational aspect of climate change for kids.



Asset Illustration

We created assets for an interactive room for kids to learn more about cabon emissions in a fun and immersive platform.

Middle & High Fidelity Mockup

I worked with the business lead to list some key product specs which would be passed on to the designers to aid in the creation of mockup drafts.

We drafted a middle fidelity mockup of our website on Figma. We consulted with our mentor in order to see how we could improve upon our project. With feedback, we were able to make meaningful changes to our high fidelity draft.

I knew the bulk of our time for the product would need to be saved for developing the web app, so I suggested we prioritize the build and start building portions of the high fidelity mockup as we finished them instead of waiting for all of the mockups to be completed (which would mean we would be wasting time and resources given that our developers would not be doing anything in this timeframe).



Front End Development

We coded our web app using HTML, CSS, and JS for our front-end.

At one point, our team was struggling to finish the back-end of our web app since the bulk of our developers were working on the front-end. So, I suggested that we switch our developer loads to place an emphasis on the back-end build.


Back End Development

We wanted to implement a room scan element where the user can upload a picture of their room into the application and receive results on how to improve their space to better the environment.

We coded the AI room scan aspect of our web app using Flask (Python). The site was hosted on AWS.

Pitch Video

The final pitch video (which includes the business plan and complete web app demo) can be viewed here.


Thanks for scrolling!