An Electronics Recycling concept on Web — A UX Case Study

Elimisha
Elimisha
Nov 4 · 7 min read

Diving into the Facts

New technology is coming out every year at a rapid speed, and on average Americans only hold on to their phones for only 27 months.

The Challenge

How can a website encourage environmentalism? and how can we create an efficient way for people to recycle electronics?

Investigation

Competitive Analysis

Before getting started in my group research. I created a competitor’s analysis on electronic recycling websites to determine how each business differs from the other. I wanted to compare features each competitor is using. Seeing how each business markets to their users is a useful way of analyzing factors on why their audience decides to use their websites.

Understanding Our Users

As a group of three, we strategized on how we wanted to approach our goal which is to ultimately promote electronics recycling and encourage users to use our site to do just that.

We conducted five in person interviews to collect data on where, why, when and how people recycle. While also sending out an online survey to gather both qualitative and quantitative data. In just two days we received 181 responses! Here are some of the results we found.

Define

User Persona

Reviewing the results from our research, we created a User Persona based on the main goals and frustrations. We used this persona to guide design decisions and refer back to throughout our design thinking process to ensure the users goals were being fulfilled every step of the way to create a pleasant experience.

Empathy Map

I created an Empathy Map using our User Persona to visualize what users may be thinking, feeling, saying and doing while using an electronics recycling website. My goal was to eliminate these pain points while structuring my design.

User Story Mapping

Ideate

At this point as a group we had came up with a design for our website together but through design critiques we encountered challenges. The design was not as simple as we initially thought, and from a users view point it actually ended up being too complex.

How do we fix this? By the time we broke off from our groups it was time to start working individually. I had to take the critiques and restructure the design from scratch.

Things to Consider

  • We had excluded our Get a Quote section from the original design. I decided to reincorporate this into my redesign since it was a critical resolution for many users pains points and frustrations when it came to recycling.
  • I switched from our side navigation to top navigation to create an easier flow from page to page. I started sketching new ideas out for the homepage until I came to a final decision.
  • Our rewards system also had flaws, why should customers have to build up points and wait to receive compensation for recycling? That would discourage users from using our service if they have to wait to be compensated and may revert to other services that offer same day incentives. I took out rewards and replaced it with an instant cash incentive provided by the recycling kiosks and added a mailing option for those who may not like using a service kiosk.
  • “Why do I need an account if I am only using this service once in awhile? I don’t think I will be able to remember my username and password for this site.” I chose to remove the account page to simplify the recycling process. No account needed!
  • While also redesigning I came up with my website name Diverge. Which ultimately stands for Waste Diversion. Waste Diversion is the process of diverting waste from landfills through recycling.

Card Sorts

I had conducted open and closed card sorts from the previous design and used these as a reference when structuring the content for my site.

Site Map

A site map was created to determine the layout of the pages in the website.

User Flow

User Flows helped me show the step by step processes throughout the website.

Low Fi Wireframes

Usability Testing

I sat down with 6 participants to review the functionality of my website. I had each participant use my prototype on my laptop and navigate through the pages of my website as if they were trying to recycle their own electronics.

Participant Feedback

  • “The dropdown icon was too hard to click, it was too small”
  • “I couldn’t find where to go next after I entered my information on the mail in page, maybe you could make it more clear on what the next step is.”
  • “After clicking the continue button on the review details page I had no idea it was the last step in the process until I saw a confirmation pop up.”
  • “The icons on the bottom of the homepage were a little confusing, I clicked on one thinking it would lead me to the find a kiosk page but it took me to the mailed in page, it would be more clear with different wording.”
  • “I thought the line above the drop box on the get a quote page was unnecessary, I actually thought it was a fill in the blank line at first.”

My Observations

After seeing some of the users struggle with my design, I had personally noticed things I left out as well.

  • How does the mailing process work? and how will users get paid?
  • How many steps do I need to complete in order to complete the mail in process?
  • What is the process?
  • What if my mailing address is different than where I want the check sent?

My Resolutions

  • I created a progress bar to show what step you are currently on in the process and how much further you have until the process is complete.
  • I listed brief details in the progress bar to explain what each step is.
  • An option to change billing address was added, just incase they would like their check sent to a different location.

I went back and edited aspects of the visual design based off of information collected from my usability tests. I ended up with the final results shown below.

Hi Fi Wireframes

Conclusion

If I had more time I would have continued the Iterative Design Process. There are more features that I would love to add to my website. Some concepts I did not get to include based off of my user testing was

  • The Get Started call to action button lead to the About Us page, and users found that confusing, and did not expect the CTA to take them there. If I had more time I would design a new page, so when users press get started it would take them to an on-boarding page that introduced them to the different methods of recycling, then giving them an option to select which method they would like to proceed with.
  • How are devices priced? This was a question someone had asked and my webpage did not throughly answer their question. If I had more time I would design the FAQ page separately from the About Us page. Users didn’t expect the FAQ’s to be hidden in the About Us page and would like it to be visible on the homepage as well.
  • Why is the Diverge logo on the Get a Quote page? A user didn’t like the look of the Diverge Logo being on the Get a Quote page, they mistakenly took it for a clickable button. In the next design I would be sure to try and create a more appealing design so there isn’t further confusion on why the logo is there.

There are always more opportunities when it comes to recycling. Which makes for plenty of room for Diverge to grow!

Thanks For Reading

Elimisha

Written by

Elimisha

Bringing a unique perspective to investigating and analyzing how users feel in order to solve problems and find creative solutions to ensure an ideal experience

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade