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

Our client is the NYU Solar Powered Media team. Our goal is to 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)

Mark