Amy
Huang

Wren

An app to help you track and offset your carbon footprint.

Interactive Prototype

Introduction

Wren is a “green-tech startup (that) helps people take action against climate change. Here’s how it works: Users sign up on Wren and begin tracking their carbon footprint. Then, the company plants trees to make up for its users’ carbon footprint on a monthly basis. The company launched two months ago and has recently launched Wren as an employee benefit.”

Taking the concept of this startup, we prototyped a mobile app that enables users to track the emissions of their purchases, view their emissions log, and subscribe to causes that offset their carbon footprint. We chose a mobile app because this allows users to carry the interface with them and reflect on their activity in real time.

Stakeholders

The primary group directly impacted by our interface are those who care about their environmental impact and choose to download the app.

The group of people that will be indirectly impacted by our interface includes those who carry out carbon-offsetting projects, since, by presenting their project on our interface, they will be exposed to all of our users and it is likely that they will get more support and funding. This also means that the people who live in environments where these projects are taking place are also indirectly impacted.

Another group who are indirectly impacted are the producers of products and services tracked by the app. Noticing that they are contributing to carbon emissions, users may choose to substitute high-emission items for lower-emitting ones which will affect the sales and revenues of the producing companies.

On a larger scale, everyone will be indirectly impacted. As more people become conscious about their everyday carbon emission, the overall emission is likely to go down, which will benefit everyone living on this planet.

Key Ethical Questions

How much are the behaviors of users being changed to produce the predicted indirect impacts?
Are all the carbon-offsetting projects we choose to include in our subscription store really making a positive impact on the environment?
Are these projects being considerate of the people who reside in the areas where the projects are taking place?
How will the reduction of sales in these products impact the firms and industries that produce them?
Will people who work in such industries be able to effectively retrain to work for more environmentally-friendly producers?

Sketches

With these quesitons in mind, each member of my group set out to do our own wireframe of what we envisioned the app to look like.

We then combined the best features from our ideas to proceed to our high fidelity prototype.

Graphics

Design Choices

In our high-fidelity prototype, we decided to create the experiences of logging purchases and subscribing to support carbon-offset projects, instead of also making the logging transportation and meal functionalities, because we want to focus on one main task for our user testing sessions. We eliminated the bottom tab bar design because our app has a simple navigation flow. We chose to use arctic fox as our app icon and main identity because its survival is being affected by global warming (more carbon emitted → worse global warming → more glacier melt → no habitat to live).

During the critique, we received feedback that the log on the homepage didn’t have clear affordances for a tab that could be swiped up, that the second darkest blue we were using did not have enough contrast against the darkest background color, and that the yellow we used for exceeding the daily limit was not negative or aggressive enough.

Based on this feedback, we brought the log tab higher to make it immediately stand out and exaggerated the glow around the tab to make it look like a separate layer. We also changed the color code of the blue to a light but less saturated color so that it has the same effect but better contrast against the dark background. We also changed the yellow for the full circle to an orange which is more glaring and aggressive.

Log your daily activities by selecting it from the app's database. Each item or activity has a emission amount attached to it.

Keep track of your total emissions from the home screen or from your daily log where you can see all your activity from the day.

Donate to causes to help offset your own carbon footprint! You select the cause and Wren sends your donation to them for you.

User Testing

Main Task: Log some items, check them in your history, and subscribe to a new cause to offset your footprint.

Sub-Task 1: You have made the following purchases today: one electric kettle and one shampoo. Please log them using the app. Select these items from the list of recent items. Do not search for them in the search bar. It is OK if you logged more or wrong items.

Sub-Task 2: You forget that you also purchased 3 pens today. Please also log them following the same process as the previous step.

Sub-Task 3: Please check your log history to see what you have logged.

Sub-Task 4: Subscribe to a carbon-offsetting project to reduce your carbon emission today!

How does the fox in the middle of the circle affect your carbon emission mentally?
What would you say about your overall experience using the app?
What frustrates you most about his app? What do you like?
If you had a magic wand, how would you improve this site?

Hypotheses

Users will have different ways of adding three pens because users can either use the “plus” functionality to log all three pens at once or log one pen each time, three times.

It will take longer or more tries for users to discover where the log history is because there is no clear textual or pictorial indication of where the log history is, and there is no clear affordance for clicking.

Users will spend longer finding the subscription store because the symbol is relatively small and it is located in the top-right corner, which is far from the center of the screen. Also, there is no clear textual indication of “subscription store”.

Metrics

Results

Although we hypothesized that people will have different ways of adding three pens, all three users were able to discover the adjusting quantity functionality and complete the sub-task using it. The high error count of sub-task 3 supported our second hypothesis, as users made much more mistakes during this task. We couldn’t tell if users spend more time on this sub-task because we do not have a baseline to compare to. From our user testing videos, all three users had no trouble discovering the subscription store icon, so our third hypothesis is not supported by our testing either.

Analysis of Tasks and Metrics

Overall, all three of our users completed the four sub-tasks successfully, except for one of the users in the last sub-task, spending 30 to 90 seconds on each sub-task. Sub-tasks 1 and 4 involves more steps to complete, and therefore it makes sense to see people spending more time completing them. It is worth noting that, although sub-tasks 1 and 4 are more complicated by nature, the users only made 2 errors in total, which shows that our logging and subscribing flow is easy to learn and use. The errors made were all careless mistakes, where users interpreted either the task or the UI incorrectly. One of the user did not complete sub-task 4 because his session was interrupted by his baby. Sub-task 2 is similar to sub-task 1, so people learned how to use the UI after completing sub-task 1, resulting in 0 error count and short time on task. Sub-task 3 requires only one click on the home screen, but, due to our design not showing clear signal and affordances, users had trouble identifying where to click. They often had to click at multiple places before finding the right place, resulting in low user satisfaction (3.67 out of 5), while all other tasks have 4 or above.

Possible Interface Changes

As suggested by some testers, we might consider adding an icon or button for log history with some textual description. We could also move the history to the “log” tab and make it an integrated part of the logging function.

Testers pointed out that an arctic fox is not an obvious choice for the logo of our app. We should either make it more explicit by explaining our concept, probably in the app store. We would not consider changing our logo to a tree, as proposed by some testers, since we want to distinguish ourselves from most other apps, which tend to use the tree as a conventional environmental icon.

To reduce confusion, we should change the title of our subscription store page from simply “projects” to “carbon-offsetting projects”, so that it would be more obvious to users what the term “projects” means exactly.

We could potentially expand our “tips” section and integrate more educational information into our app to teach users how to actively reduce carbon emissions.

Takeaways

Overall, we found that the testing experience was really smooth, successful, and helpful to us.

Surprisingly, we found that the test users from UserTesting.com were very good at thinking out loud which was especially helpful to us for figuring out what their mental models were and how they were using our app.

We felt that the clear instructions we provided helped us get a feel for a real-world situation where users are looking to complete specific tasks and helped us gage if our interface was successful in aiding them in such tasks.

Ideally, we would have liked to test with users using a touchscreen phone. However, we realized that the data collected from the test could be different or incomplete and that, as our prototype was not responsive, it would not have functioned well on certain screen sizes. We also noticed that the recording tab used by the users blocked out part of our prototype so better display and recording technology would be a helpful improvement.

Special thanks to Jason, Carrie, Michael, Brown University's 2019 Fall CS1300 class, Jeff Huang, and all our amazing TAs!

Programs used for this project include: