Ecopost: A UX Case Study

The Team:

Bailey Le // Brian Berg // Brooke Jones

The Challenge:

Electronic waste is one of the fastest growing sources of waste. In 2014, approximately 41.8 million tons of e-waste was generated worldwide. E-waste has many different negative effects on the environment from toxic metals and chemicals, to air and water pollution. Electronic waste is an epidemic that does not receive enough attention and needs to be taken more seriously.

Our Goal:

To help encourage people to recycle their electronics and make the process as fast and easy as possible.

Research:

My team started by discussing our assumptions for our challenge. Then we began coming up with questions that could validate our assumptions. Questions such as:

• How many people recycle in general?
• How many electronics do they own/How often do they get new ones?
• How many recycle electronics?
• Why they do/do not recycle electronics?

Once we came up with all of our questions, we used several different methods of interviewing to gather our research. We sent out a survey to around 80 people to figure out roughly how many people currently recycle their electronics. Then we did “man on the street” interviews to find more information on why people don’t recycle electronics. We also talked with employees at tech stores such as Apple, Windows, and AT&T, that have an electronics recycling program to figure out how their programs work and how popular they are.

With our research we concluded that a majority of people do not recycle electronics. From our survey we found that only of quarter of them recycle electronics. When asked “What would it take for you to recycle your old electronics?” most people responded with either education or convenience.

Most people weren’t aware of the e-waste epidemic and the importance of making sure it is properly disposed of. Another reason was that the current process was very inconvenient for most people.

Our Solution:

Our main priority was to find a way of making recycling electronics more convenient. During our research we learned that in some European countries when they upgrade cell phones they can mail in their old devices to be recycled. We decided to go with something similar. A website that could allow users to order a box for their old electronics and then ship it back to us to recycle. We also wanted to dedicate a section of the site to educating people on e-waste and why it is important to recycle it.

Our User:

Using our research we created a persona for our website. Jason, a 29 year old salesman that would like to be more environmentally conscious but at the same time is too busy to go out of his way to do things such as recycle his older electronics.

Using our persona we created a user story map that outlined how our website would flow, and what we needed to do to make sure that Jason and our users can accomplish their goals. The user needs to be able to:

1. Figure out if their device is recyclable.
2. Figure out the right box size for their device.
3. Fill out shipping information.
4. Find additional information on electronic waste.

With those 4 things in mind, we created our user story map. We thought about all of the users goals and their narratives, and the tasks needed for the user to accomplish their goals.

Wireframes:

We knew we wanted the landing page to have a way of outlining our unique process of recycling electronics. We felt it was important that the user understands how convenient our process can be for them since convenience was the biggest factor against recycling in our research. We knew that we also wanted a big call to action on this homepage that would lead them through our checkout process that:

1. Informed them of devices we accept.
2. Allows them to pick a box size.
3. Fill in shipping information.

Having this main call to action front and center on our home screen allows the users to easily accomplish their primary goal. Through the top navigation on the website they would have access to pages that would help them accomplish their secondary goals that were related to knowledge. Pages such as a learn more page that informed on the environmental impacts of e-waste and a page that informs them of local places they can recycle their electronics.

Main call to action on our homepage wireframe.

Testing:

Testing on our first set of low-fidelity mockups we discovered some flaws in our design.

• As we tested we realized the guide for our recycling process was not clear enough for users.
• Most people didn’t understand our main call to action and didn’t use it much.
• Most of our navigation labels in the top navigation bar were confusing for people.

With all of this in mind, we redesigned our homepage to fix all of these issues. We started by reworking the infographic and changing it how we explained our process. Next we changed the label of our main call to action and redesigned the button to stand out more. Then we thought of better terms to use for our top navigation and even added a drop down menu for all of the pages that dealt with education. Once we finished testing these changes we decided it was time to transition to hi-fidelity mockups.

Hi-fidelity:

We decided to start the process of designing hi-fidelity mockups by first designing the homepage so we can decide on a consistent style. We went through many different designs. This was the part of the project that gave us the most trouble. We each had different taste in visual design, so designing a page we can all agree on was difficult. We knew that we should have the color green be one of our main colors due to the association of the color green with the environment and recycling. Our first few designs consisted of combinations of either white and green or dark grey and green. We eventually settled with a dark theme for our homepage.

Another aspect of the homepage that went through many changes was how we outlined our process. It went from a simple infographic to being split into 4 boxes that took up the full screen. That eventually turned into what we have now which is a box that can be hovered on to reveal information about each step.

Once we developed a style we liked, we began to apply that to all of the other pages. None of our other pages gave us any issues when we applied our style to them and turned them into hi-fidelity versions of the wireframe. I also started prototyping the website in principle and added a few animations to make the site flow better.

Conclusion:

Some parts of the project went more smoothly than others, but we all learned a lot through our mistakes and from this project in general. Looking back on the project I would have asked more questions during the research phase. I also would have reffered back to our user story map more throughout the design process. This project gave me more practice with UX design and taught me more about the foundations of UX design. I learned a lot about the research process and how to implement that research when designing a website. Through this project I was able to improve how I use research and testing to continually improve on ideas and wireframes to reach an end product that I am satisfied with.