E-Save

UX Design, UX Research, 2019

E-Save is a Chrome extension I designed in a team of four. In this project, I participated in all process of research and focused on prototype building.

Background

Develop a solution that gives website users the option to change energy consumption/resolution of the website based on their needs.

Interviews

We interviewed 13 internet users (male/female mix, 18-40 years old).

Some questions we asked include:

Do you/have you ever used any software, plugins or settings to reduce the energy consumption of your websites? Such as ad-blocker?
Do you normally change the quality of a video? Why or why not?
How do you feel about autoplay?
Are you aware of the carbon-footprint of internet use?
If a solution is built into the browser, how likely will you use it? Why? What would encourage you to use it?
...

Insights:

A lot of people are unaware of the environmental issue of their internet-using activities. Our solution needs to raise awareness and should be easy to use
Two features that our users are already familiar with and would not mind using are ad-blockers and the ability to stop autoplay on websites.
People wanted to see a significant/visible impact such as how much energy they are saving by using our product.
People are motivated by personal gains.
They are generally not willing to compromise on the quality of videos, unless experiencing internet issues.

Persona

Demographics:

Michelle Harding, 23
Recent grad l Copywriter
Eco-Friendly
In a relationship
Has a bachelor's degree in journalism, works at Mashable
Likes to look up new ideas to decorate her apartment
Loves coming home after work and streaming movies/shows on Netflix

Goals & Tasks:

Michelle is environmentally conscious and tries to do her part. One of her problems is if it is too complicated or inconvenient, she will not participate all the time.
She uses the internet a lot for her job for research
She needs the load time to be quick so she can work fast and efficiently
She also uses it when she is home to stream tv and online shopping and looking up ideas on pinterest
Resolution is important to her, especially when she is online shopping but is not always necessary when she is reading the news.

Problems & Pain Points:

She doesn’t like when a video auto plays because she usually has a lot of tabs open and she never know which one is playing.
She is not aware of the carbon footprint problem for the internet but wants to learn more about it.

Quote from Michelle: “If I knew more about it, I think I would do something. My boyfriend and I are trying to be more sustainable, such as using reusable containers and metal straws. I would be open to it, I would give it a shot.”

We need to make our solution informative, simple and seamless to use.

User Flow

Sketches and Wireframes

Prototype

Interact with E-Save Prototype on Figma.

User Testing & Future Implementation

Through earlier user testing, we became aware of the Battery Saving option in Opera browser. Therefore, we created the Battery Saver toggle options in E-Save.

We also received other feedback that we can implement in the future:

“For the No Image option, I wish you can click on one image and it shows up.” -> On each blocked image, add a link for “Display Image”.
“What is HTML view?” -> Display two example views: regular v.s. HTML view
One setting across all sites, but can we store site-specific options? -> A “Store Settings for This Site” option
Can we motivate the users themselves? -> Add in weekly comparison of energy consumption (such as iphone weekly screentime notification)

Alex Yixuan Xu

Design-centric Work

Eccentric Work