Background

Greta Thunberg is one of the many individuals of our generation concerned about the future of our planet and the need for immediate action to combat climate change. As part of the weekend hackathon, my team and I wanted to tackle this issue and raise awareness of how individuals can contribute to lessening their impact on the environment through simple daily tasks.

Leaf won the Best Experience and Design award.

I was the sole designer on the team alongside 1 business analyst and 4 engineers. I was responsible for the product design and UX/UI experience for the app. Whilst the hackathon was short, some key achievements listed below:

Applied design sprints to inform our process. I was able to effectively apply the design sprints process to identify the problem, ideate on the solution, prototype and implement the final product.
Executed end to end. The fact that the engineers were able to code the final designs in such a short period of time demonstrated our ability to execute and ship features as a team.
Won the design award. It's worth noting that the best designs are not a result of the designer on the team. Each person from design, engineering and business was able to contribute to the solution which resulted in a very collaborative and impressive result.

Understanding the problem

I conducted a brainstorming workshop with the team to uncover pains felt by individuals. It was revealed that:

Individuals were unaware of their direct impact of their water, electricity and consumption on the environment
Individuals wanted to take action on reducing their carbon footprint but didn't know where to begin
Individuals would be more conscious of their actions if their impact was quantifiable and measurable

Product vision and solution

From these findings, we decided as a product to identify key business goals:

We want users to understand the impact of their current usage
We want users to take actions to reduce their water, waste and electricity usage
We want users to understand how their actions positively affect change

As a starting point, we each did some market research on competitors to investigate the current offerings in the market and take inspiration from particular features that we liked about each app.

I then conducted a 15 minute sketching session to encourage each member of the team to draw out their vision of the solution.

Defining the MVP

Based on the sketching sessions, it was revealed that there were commonalties in the product vision. We identified the following key user stories:

Set a goal. Users can define environmental goals e.g. to save electricity, conserve water, reduce waste.
Receive tasks to do. Users receive a list of actions to perform based on their goals e.g. turn off unused lights, turn off running taps, switch off unused powerpoints etc.
View impact over time. Users can see their progress over time and the measurable impact of their actions on the environment.
Earn Rewards. Users are rewarded for efforts towards reducing their carbon footprint in the form of discounts on electricity and water bills.

In order for the engineers to begin on the architecture, I mocked up the main screens for the MVP based off the sketches created by the team and came up with the following:

Login screen
Register profile
Select a goal
To do list
Progress dashboard
Rewards page

Designs

With the clock ticking, I quickly did some mockups of the basic user journey before going over it with the desired styling. I opted for a refreshing gradient look and the simplicity of the UI. I then created for the developers a clickable prototype in Invision.

Get started screen
This screen was simply created to showcase our logo and encourage users to click on the button to get started.

Register account
Users would fill in a simple sign up form to create a new account.

Goal definition
‍Users can select one or more environmental goals that they wish to achieve.

List of daily tasks
Based on the goals selected, users would receive a list of daily reminders and tasks to raise awareness of reducing their carbon footprint in their day to day.

Progress tracker
As users completed the tasks, they would see their water, energy and waste levels over time. There would also be quantifiable results showing how their actions contributed to a positive impact on the environment.

Rewards
To encourage people to use this app, we would partner with businesses such as AGL, Sydney Water and Origin to offer discounts and rewards on energy and water bills for users who make a conscious effort to reduce their carbon footprint.

Development

I used Invision to allow the engineers to inspect the HTML and CSS of the designs. The team used Glitch to develop the application and the app was built using React. It is accessible via the web and on native iOS app.

Results and takeaways

We were able to successfully implement 75% of the designs and delivered a presentation at the end of the hackathon to a panel of judges. We took home the Best Experience and Design Award at the end of the night.

Thanks to Girl Geek Sydney and Canva, I had a really enjoyable experience at this hackathon. I was extremely fortunate to have worked with some incredibly bright and talented female engineers and business analysts to come up with a product in a short period of time.

Some key takeaways from this hackathon are that:

The best designs come from collaboration. It was inspiring to see how each person was able to bring to the table a different perspective during the sketching sessions. I noticed that non-technical people are unlimited with their ideas due to their lack of technical knowledge; whereas technical people are grounded in reality and can be a great sounding board for what is possible.
Design thinking is key to effective products. This lean framework really helped to shape the workshops and discussions with the team as it allowed me to stay focussed and on track throughout the entire hackathon.
First impressions first. Hackathons are all about selling the dream. Putting the user experience first is vital because people will only care about how they use the product. The simplicity of our app's experience helped to differentiate our proposition and stand out.

Leaf

OVERVIEW

ROLE