An app to make contributing to the environment simple and accessible and motivating.

Overview

MY ROLES AND RESPONSIBILTIES

UX Research
User Flows and Personas
Ideation, Brainstorming and Sketching
Wireframing and Prototyping
User Testing

PROJECT

Timeline : August 21 - November 21

Team : 5 members

Problem Statement

Although we all know about the negative effects that humankind is causing on the environment, we are having difficulty contributing towards its reversal or even simply the betterment of the planet we live on. With this project, we aim to understand and address the concerns that individuals are facing while taking steps towards green activities.

Our goal is to make contributions to the environment simple and accessible and motivating.

Design Process

Research and Analysis

COMPETITIVE RESEARCH

Our research process started with competitive analysis. We did an in-depth competitive analysis of 11 applications currently present in the market. These applications were either related to the environment, trying to instil a habit or had some sort of a buddy/reward system.

Following is the list of apps we studied:

ReView
Ant Forest
Community rewards
Oroeco
SDGs in Action
Plant Nanny
Apple Fitness
Earth Hero
Joulebug
Bookly

We performed the competitive analysis to understand:

Different reward systems
How to inculcate habits
Trash segregation systems
Community efforts
Tracking effects of our actions
Buddy systems

SURVEY

Our next step was to understand what users think, in general about the environment. Are they motivated? Are they worried? Is it a real problem for them or do they act like climate change isn't an issue? Thus, before jumping into user interviews, we sent out a survey to users from all over the world. One thing we saw here was that people do think about the environment. Maybe when it comes up in a conversation, or when they read something about it on social media, but the concern is there at the back of their minds. So, going forward with an application that targets environmental concerns seemed like a very good idea. Below are a few snapshots of the survey questions and of the responses we got from the 143 users that answered.

USER INTERVIEWS

Based on our surveys, we understood that people are interested in taking at least some action to save the environment but they have issues in terms of it being too expensive, time-consuming or having no motivation. To specifically dig into these problems, we created a user interview questionnaire based on the responses received and conducted in-depth interviews of around 10 users.

EMPATHY DIAGRAM

We created an empathy map of a user which included what the user says, feels, thinks, sees and does based on our interviews. This also helped us form our personas. Below is our empathy map.

AFFINITY MAPPING

We received a lot of valuable pain points from the user interviews - but to put together the repetitive ones, we created an affinity diagram. That helped us identify the common issues that we would consider in crafting our solution application. Here is what our affinity diagram looked like:

PERSONAS

From this map, we could easily pinpoint our pain points and gain points. That was our biggest asset while creating the user personas. We created two of those - Isabel and Matt. Isabel represents a typical adult with too much work on their plate and having no time to do their part for the environment but also want to do something about it. Whereas Matt represents a slightly younger set of users who proactively try to do their part for the environment and also try to motivate people around them to do so. Below are the developed personas.

Persona 1

Persona 2

Persona 1

1/2

FEATURE PRIORITISATION MATRIX

After the creation of personas, we took all the information we had gathered and created a list of features that we wanted to include in our application. This list included features users asked for, features that we thought the users wanted, feasible and infeasible options, futuristic features and so on. We jotted that down into a prioritisation graph to further vote on how many features from the ‘yes’ quadrant we could actually deliver on.

Ideation: Brainstorming & Sketching

Once we finished the feature list, we discovered that there were a lot of features in the 'Yes' scope. Therefore, in order to determine the design priority, we held a brainstorming session to reclassify the features on the list.

After organizing all the features on the whiteboard, we determined what features can be the main features for the app and which features can be grouped together as sub-features.

To generate more ideas on the design of each feature, we adopted a design method similar to Crazy 8’s

We sketched our ideas in a limited amount of time
Explained the design to each other
Picked the favourite elements from each design

This process allowed us to explore more design solutions.

Scenarios & User Flows

Following the sketching session, in order to provide a more seamless user experience and pave the way for future wireframe design, we created user flows based on the scenarios. According to the flows we created, we gained a better understanding of how each screen could be connected to serve the entire app experience.

Wireframing & Pilot Testing

Once we set the scope of our project and got clarity on all the features we wanted to add we moved towards designing the low fidelity wireframes. After that, we prototyped the wireframes so that the designs could be used as a single flow for the pilot testing. To make sure that the wireframes looked consistent we followed the basic guidelines for the designs.

In order to get initial feedback from the users we conducted 10 informal user tests. We got insights into where our designs needed improvement and which aspects need to be more defined. These tests were really helpful for us to get feedback from users and improve our designs at an early stage to avoid rework and saved a lot of time.

Prototyping

STYLE GUIDE

We decided on setting design guidelines for Ecowin, to aid transitioning to hi-fidelity prototypes easier and ensure consistency on the app

The guidelines were set in accordance with Apple’s Human Interface guidelines. We created a moodboard to collate all the ideas and concepts, colours and font styles we had in mind for the application. This helped us to form a style guide for our final designs.

DESIGN SYSTEM

Next, we worked on the design system where we collected all the reusable design components and assets. This design system helped our team to achieve higher efficiency, consistency and scalability while designing the final prototype. It included all the common components which would be used for multiple screens starting from mobile screen size (with grids set), colours and fonts as assets, all the forms of buttons including primary, secondary and text buttons, form fields like input fields, dropdowns, checkboxes, search bar, badges, progress bars and cards.

HI-FI PROTOTYPE

After building the design system, we started converting our lo-fi wireframes to high-fi designs. During this process, we made sure to modify the designs based on the user feedback we got from the pilot testing. We used the components from the design system to work on the final screens. We made these screens as realistic and possible to get better insights and validate our designs by conducting user testing on it.

ONBOARDING

Signing up and setting preferences for customised user experience.

NEWS AND UPDATES

Get latest updates in the form of articles, videos and blogs related to environment.

TRASH SEGREGATION

Learn how to segregate the trash in 2 easy steps.

AR REVISIT

Check out how a place looked like in the past. Compare it with the present scenario to understand how climate change has affected the locations.

TASKS AND CHALLENGES

Perform our easy tasks and challenges which help you contribute towards the environment and also earn rewards.

SUSTAINABLE RODUCTS

Explore articles related to sustainable products and attempt quizzes to test your knowledge and earn rewards.

User Testing

Next, we planned to conduct 2 user tests with high fidelity wireframes. The first test was conducted on our first set of high fidelity designs with 6 participants on usertesting.com.

We received a very broad scope of responses with some participants feeling excited to use the application, to some participants getting frustrated on being unable to complete the tasks. The crucial design iterations that were to be made were in the Dashboard, Task section, Profile section, Trash segregation section and the community section.

Following the design iterations, we proceeded to the second user test which was conducted with 9 participants to explore more of the app and provide feedback for complete page designs. We were elated to see the positive feedback we received from the participant in our second user test.

In order to make sure that the user explores all flows and sections of the prototype for both the tests, we created 8-10 tasks for the users to complete. After each task we asked the users 2 questions:

Were they able to successfully complete the task?
How difficult was it to complete that task?

Followed by these tasks we asked the users retrospective questions, in order to get a better view of where the application stands in terms of design and usage:

What frustrated you most about this app?
If you had a magic wand, how would you improve this app?
What did you like about the app?
How likely are you to recommend this app to a friend or colleague (0=Not at all likely, and 10=Very likely)?