Code Green

Product Design | Mobile App

Project Context

Climate Code Red is a hackathon organised by UCL, focussed around the concept of creating awareness for issues related to climate change. This hackathon was panelled by Red Cross, UN, WaterAid, Amazon, IBM and Microsoft Philanthropies. It was a university-wide event open to all disciplines and teams were formed randomly.

Team Composition:
5 students - 2 HCI, 1 Comp Sci., 2 Chemical Engg.

My Contributions

My Roles & Responsibilities:
UX Research, Setting Scope of MVP, Product Design artefacts (wireframes, visuals, prototypes, user journeys, etc), Project Management, Documentation, Logo Design

Duration:
1 Week
Tools Used:
Paper & Pencil, Figma, Canva, Zoom

The Challenge

As part of UCL's Climate Code Red Hackathon, the ask was to design a solution that would get people motivated and involved to have a positive impact on the environment.

The Solution

We went ahead with the idea of designing a mobile app, as mobile apps can be better personalized, there is provision to use native-device features and they offer an overall better experience than browsers. The app would enable users to make sustainable choices, provide access to environmental awareness resources and incentivize them for taking eco-friendly decisions. Clickable prototype with user flows, below:

Clickable figma prototype (view it on a desktop/ laptop for better experience).

The Result

Our team won the second runner's up position in an event that saw participation from thousands of students, comprising of undergraduates, postgraduates and research scholars.

The Design Process

With a week's time to conceptualize and submit a solution, a Lean Design Thinking Process was followed. It comprised of the following stages: Plan, Discover, Ideate, Design and Test.

The theme we picked was 'A Community Voice - Designing solutions that get people involved to have more impact'. The first step was to pick a particular track, which can then be targetted. We got together as a team and went through an initial round of brainstorming with an aim to understand, define and prioritize the problem.
‍
Discussions were framed around our understanding and assumptions about the topic, so that we could align around a PoV. We figured out that many of our decisions in shopping are simply inspired by the surrounding environment, encouraged byconsumerism. Due to lack of awareness, people tend to make unsustainable choices. This results in an increase in their Carbon Footprint, in turn, unknowingly contributing to Climate change.

The aim was to solve this problem by giving the user the required hints which mostly affects unconscious part of our brain. This could be done by offering rewards to encourage them to buy more eco-friendly choices.

Framing the Problem

Stage: PLAN

Understanding the Users

Stage: DISCOVERY

We dived deeper to understand the users and their shopping behaviours. Normally, at this stage, the goal is to get rich insights from the actual users either through qualitative or quantitative research methods.

Keeping in mind the time constraints, instead of field studies or user interviews, the best option was to conduct informal interview sessions with our family and friends. After a quick analysis of the responses that were received, the primary finding was the realisation that there are companies across the board which manufacture sustainable products and most of the end users are aware of the problem as well, but the connect was missing.

To widen my knowledge base, I explored published research and literature, such as academic journals, blogs and public surveys in this domain. This exploration pointed towards the fact that eco friendly products are generally more expensive, and for a variety of reasons ranging from - a lack of demand to high manufacturing costs. This forced people to go for regular conventional goods.

Conceptualization

Stage: DISCOVERY

Utilizing findings from the initial two phases, I created two user personas that would represent relevant users with different backgrounds and needs, and help me in empathising with potential users.

Since every one was in a different geographic location and different timezones, it was a challenge to manage the team remotely, especially if you have just known your teammates for a couple of hours!

All wild ideas were encouraged with a focus on getting out as many ideas as possible on the table. Most of the ideas that came up during the brainstorming session were arranged in a brainstorm map (depicted below).

Brainstorming

Stage: IDEATE

Based on the ideas collated in the previous step, it was now time to identify the details needed for a full concept. A set of features were derived by filtering out ideas that ought to add maximum value to the core goal i.e. helping people make sustainable choices and stay motivated enough to make this behaviour a habit.
‍
Backing my knowledge and experience at this point, I decided to adopt gamification as a way of increasing users' positive motivations towards the proposed app. Even exisiting research supports the claim that gamification can be an effective approach to increase motivation and engage users in a given activity. The following list of features were derived at the end:

Identify Features

Stage: IDEATE

Feature set

Displaying personalised statistics, such as - the amount of carbon offset that a user has saved while buying sustainable products.

Giving users the ability to scan their bills and receipts, which can be uploaded into the backend system.

AI backed logic would detect sustainable products from the scanned bills.

Introducing ways for users to earn rewards in the application, by performing certain tasks.

Users will be given a score (called Green Score) based on their sustainable purchase decisions.

Users shall be able to redeem the earned rewards, at various outlets or online stores.

The app would show certain 'missions' that a user can attempt, in order to earn more Green Score.

Giving user the option to support charities and raise their voice on social media, through the app.

Building Information Architecture

Stage: IDEATE

The quality of content and the ease of finding that content, are the main reasons why people visit websites. Based on the principles of cognitive psychology (such as mental models), an information architecture was designed. It depicts a basic flow of information and the different journeys that a user can traverse, within the application.

Creating Wireframes

Stage: DESIGN

At this stage, it was important to have a basic tangible solution in place that can be shipped in less than 24 hours so that the concept can be conveyed to the stakeholders (judges of the hackathon). The focus was on the overall flow. So, I started building low-fidelity wireframes. Design artefacts from this phase are illustrated below.

Final Screens

Stage: DESIGN

After finalising the app concept and basic user flows, the next step was to quickly come up with mood boards, followed by a style guide stating the color scheme, typography and a visual language for the project. As we had to churn out the final deliverables in around two days' time, we divided the activities within the team. I took up the task of designing the high-fidelity designs. Interestingly, this was one of my first projects where I had to create visual designs from the ground up.
‍
I followed Apple's Human Interface Guidelines and started designing components in Figma. The resultant designs have been depicted below:
‍

Validation & Discussions

Stage: TEST

These screens were tested within the team, to get quick feedback. Although, this would have cropped up some bias in the user testing, but a full-fledged usability testing session was not feasible, considering the time constraints.

The app was developed with some assumptions in mind, which were clearly stated to the stakeholders:

1. Budget Allocation and Brand Partnerships: The app is ideated with the assumption that sufficient budget will be allocated to develop the concept and appropriate sustainable brands will be ready to partner with the app for a good cause.

2. Market Availability: With an increased number of brands offering sustainable products and alternatives, the app will be encouraging such brands

3. Future Scope: In order to attract more users, the app can partner with the government to provide rebate on certain taxes for the users who are on the top of the leaderboard

4. Marketing Strategy: With user profiles in mind, we propose the use of internet advertising and social media.

We also proposed to use UGVs (User generated videos) :
‍
- for creating a down-to-earth feel. People can identify with fellow users.
- it helps explain how to use the app, to older demographic
- makes saving the environment, look cool

Key Learnings

This was a colossal learning experience. The most challenging aspect was shipping a solution in less than a week, especially when the entire team was remote and collaborated over Zoom!
(some key learnings mentioned ahead)

Result: We won the second runners up position.

You might have to face unrealistic deadlines. Just stick to the basics and work smart.
Resist the urge to skip a stage in the design process. They are there for a reason.
Storytelling is powerful. A poorly constructed narrative can make a good idea, sound really bad.