Alex Yixuan Xu

learning experience designer passionate about education, accessibility, and playfulness

Design-centric Work

design thinking, research, documentation
The Wick Editor
E-Save Plugin
Greenfield
Bartending 101
IDM Showcase Posters
Accessible Groove Pizza

Ec-centric Work

concept, exploration, expression
Smile Machine
Content, Data, Space
Struggle
Balance of Life
Follow Your Teacher
Double: Two Souls in One Body

about ︎ + resume
linkedin | github
ayxx@nyu.edu
Mark

E-Save Plugin

UX 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.


Background

Our 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.

User Interviews

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.

User Persona

Demographics:
  • Michelle Harding, 23
  • Recent grad | 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 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.

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