Due to the terms of the NDA, we are unable to disclose the actual company name. For reference purposes, let's use the name 'Green Company' to represent the organization.
Green Company supplies restaurants with reusable containers for takeout orders and was looking to develop a new model. In this approach, customers pay a deposit for each container and return it to the restaurant to receive credit on their next order.
What were the issues associated with this model, and why did Green Company require our assistance?
For Users:
For The Business:
Green Company was looking for a web application that:
With a huge project scope and only 7 weeks to deliver a solution, time was our biggest constraint in this project.
Role
Deliverables
Tools
Team
A new web application designed to enhance the return rate of reusable containers and facilitate deposit refunds.
80%
Reduced containers return wait time
86%
Participants found the user flows for returning reusable containers and receiving a deposit refund straightforward
85
Got an excellent score (85) in “system usability scale” (a quick and reliable method of assessing the usability of design solutions)
We followed the “Design Thinking” process as a roadmap to make sure that our design decisions were supported by user research and feedback.
We started this project by doing some competitive analysis to understand the ways similar companies are approaching the same types of issues, and explore gaps and opportunities in their models.
We reviewed 11 competitors to see how their services were working.
Top 4 themes we identified between all these companies include:
We conducted 7 Interviews to gain a more thorough understanding of users' feelings and pain points throughout the process of returning Green Company's containers. The goal was to understand what made it difficult for them to return the containers or what motivated them to do so.
I created affinity maps to group the interview information into general themes and identify the exact pain points of the users, with the aim of prioritizing them.
After speaking with users, we compiled a list of problems. These included:
Experienced difficulty in returning the containers due to long wait times, and interacting with others
Expressed that they would prefer to receive a deposit refund after returning containers
Had difficulties finding drop sites
Creating affinity maps helped us gain a deeper understanding of the users' pain points and the challenges we faced. Moreover, it enabled us to craft 'how might we' statements that outlined the problems we aimed to solve.
1
How might we facilitate the containers’ return process?
3
How might we show customers where the drop-sites are in the store?
2
How might we assist customers in obtaining refunds through the app?
Based on the 'how might we' statements, we provided 2 user flows (return a container flow and Withdrawal flow).
Creating user flows allowed us to delve into greater details and monitor the steps users would take to accomplish each task.
Working collaboratively, my teammate and I each created paper sketches independently. We then merged our ideas to develop robust and effective solutions for each flow.
Here are my sketches prior to merging our ideas:
After combining our ideas, doing a guerrilla usability test, and getting feedback from stakeholders, the important changes we made include:
1
Design an onboarding process with 4 screens to improve clarity
2
Showing to scan QR code on the drop off lid first so it would help users avoid forgetting to scan it
3
Not to allot individual confirmation that requires a user action for scanning each container
4
Place the return button prominently on the home screen
After working on the style guide, we created the high-fidelity screens to make sure of what the product will look like. I also created all of the animations and transitions to use for the usability test.
Here are a couple of high-fidelity screens:
We conducted the test with a total of six participants, individually testing three of them.
After the test, each participant filled out a survey with standard System Usability Scale questions so we could evaluate the usability of our design solutions. The results were excellent, with a score of 85.
We handed off the results of the usability tests, along with some recommendations, to the clients, and considered our project finished. However, I wasn't completely satisfied with the way we had wrapped things up, so I revised the screens based on the usability test results, taking a step forward.
Here are the results from the usability test, and the revised screens after I created them:
Finding 1: Struggling to find the "Skip" button, desiring to log in on the first screen, and not wanting to see the "Sign-Up" screen during the onboarding process.
Finding 2: Struggling to understand the meanings of "Bin" and "Container", and the purpose of seeing the progressing number.
Finding 3: Getting confused by the top picture and the placeholder text.
Finding 4: Getting confused about why they are seeing the donation options again after choosing one.
Here are some final screens after usability test:
Helen Keller: “Alone we can do so little; together we can do so much.”
