E-Save PluginUX Design, UX Research, 2019
E-Save is a Chrome extension I designed in a team of four designers. In this project, I participated in all process of research and design and played a key role on prototype building.
BackgroundOur client is the NYU Solar Powered Media team. Our goal is to develop a solution that gives any website users the option to change the energy consumption and resolution of websites based on their needs.
We interviewed 13 internet users (male/female mix, 18-40 years old).
Some questions we asked include:
- Do you or 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?
User Interview Insights
A lot of people are unaware of the environmental impact of their internet-using activities. Our solution needs to raise awareness and should be easy for anyone to start using.
- 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.
- People are generally not willing to compromise on the quality of videos, unless experiencing internet issues.
- Michelle Harding, 23
- Recent grad | Copywriter
- 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 for internet usage 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.
Sketches and Wireframes
Interact with E-Save Prototype on Figma.
User Testing & Future ImplementationThrough 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)