EcoAI | UX/UI Case Study
As responsible residents’ of Vancouver, BC, we recycle. Some of us recycle because we take an interest in environmental sustainability, some of us recycle because we would be penalized by the city of Vancouver in the form of fines.
What happens when we don’t know how to recycle?
(Hint: see below)
Introduction
EcoAI is focused on using technological solutions and artificial intelligence to help people sort their waste more accurately, and reduce their garbage footprint. This is achieved by facilitating the decision-making process for people at the time of waste disposal, as well as making a cultural shift by educating people on recycling.
As the project lead, my role was to conduct user experience (UX) research and create a clickable prototype based on our research results.
The goal of this project was to design a fun interactive application (app) for the company, EcoAI.
Create a fun and interactive app to facilitate the decision-making process for people on waste sorting at the time of disposal.
Business Goals
Increase the recycling diversion rate to 90 percent on UBC campus.
User Goals
To receive assistance at the time of waste disposal in a fun and convenient way.
Project Goals
To cater an app to the user goals without compromising the business goals within a 3-week timeline.
UX Design Process
Research and Discovery
The Challenge
The brief of the project was to create an app to facilitate recycling decision making at the time of disposal, keeping in mind the following:
- The app must reduce the confusion of waste sorting
- The interface needs to be fun and interactive
- Utilize artificial intelligence with a camera feature
- Create incentive to use the app
- Educate users on recycling
- “Futuristic” branding (e.g., minimalist)
- Target population: Vancouver residents
Hypothesis
Most people are interested in recycling and contributing to environmental sustainability, as long as it doesn’t take too much of their time.
Domain Research
About 30%-40% of the population struggles to recycle properly due to the complexity of sorting at the time of disposal. This complexity stems from the diversity of the consumer materials as well as the differences in recycling streams based on the disposal location.
Why is recycling so confusing? To set the foundation for our research, my research investigated why Canadian’s experience difficulty at the time of waste disposal. Not to my surprise, Canadians are writing about this issue, and describing the issue as stemming from ill-education and misconceptions (Global News).
Contextualizing the challenges Canadians are currently faced with at the time of recycling allowed us to understand the issue and direct our research accordingly.
We investigated numerous recycling apps available for download in Vancouver, BC and globally. The apps we downloaded and explored include: BC Recyclepedia, Recycle bc, Surrey Rethink Waste and Poco Wasteline.
Comparative Competitive Analysis
To help visualize and compare the apps mentioned above, we did a comparative competitive analysis (CCA) (Figure A).
The CCA allowed us to easily refer back to our domain research and understand the information we gathered.
After creating the CCA visual, it became apparent that the key distinction between EcoAI and the apps currently available in the app store is that none of these apps utilize artificial intelligence.
As illustrated in Figure A, some popular features in recycling apps include searching items by text, access to geolocation, pick-up calendar and pick-up date reminders. This information taken into consideration when creating our user surveys.
User Surveys
After collecting preliminary research, we began formulating survey questions. Creating the survey questions posed obstacles for our team because the objective of the survey was not clearly outlined (e.g., do we want to collect demographic information from the survey?).
All of the questions drafted were well written and would be informative, however, not all questions were relevant to the project at hand.
To resolve this conflict, I suggested we create an affinity diagram to help visual which category our questions fall under (Figure B). Affinity diagrams are utilized by UX researchers to group research/data into meaningful clusters for analysis. Hence, affinity diagrams are not typically used to create surveys. However, this activity proved to be valuable, as it allowed my team to extract relevant information and disregard unnecessary information.
After analyzing the affinity diagram for survey questions, we created our survey using Google Forms. The objective of our survey was to understand the pain points of our users at the time of recycling and what might help resolve these frustrations. Below is an example of a question asked on the survey:
We deployed our survey to the Vancouver community using Reddit and Slack.
As we awaited for survey data to be collected, we conducted contextual inquiries by visiting local stores with recycling stations.
Contextual Inquiry
Contextual inquiries put UX researcher in the field to observe the behaviour of target users in real time.
Location: Whole Foods
Duration: 45 minutes
The contextual inquiry at Whole Foods suggested that individuals are able to easily recycle when presented with visual examples of what can be recycled (Figure C).
However, our contextual inquiry was not representative of the whole population because our sample was biased. People who shop at Whole Foods are generally more health and environmentally conscious, as Whole Foods specializes in organic products and promotes healthy living.
Therefore, we took our observations at Whole Foods with a grain of salt.
Survey Results
We received a total of 83 responses to our survey. After collecting the results, we analyzed the data using multiple techniques.
The first method of analysis was simple: read and understand the results.
The results seemed to indicate that our users are interested in recycling (Figure D), but they are often unsure of how to recycle correctly (Figure E).
These results suggest that there is a disconnect between the users intention to recycle and executing the action.
Our research also revealed that the majority of users prefer to be educated on recycling using images (Figure F).
To compliment this initial analysis, we created an affinity diagram to visualize our research and group the data into meaningful clusters.
All of the data points collected from the survey and contextual inquiry were included in the affinity diagram.
The affinity diagram shed key insights into our research findings and allowed the UX team to easily extract valuable information.
User Persona
The affinity diagram illustrated above helped create the user persona (below) for this project.
The user persona was a helpful tool throughout the design process and bridge the gap between research and planning.
Planning
The UX research set the foundation for planning the design and allowed me to identify user pain points and key features for the app.
The storyboard above helps build empathy with the user and creates context for the app.
As illustrated below, my team was able to identify the minimal viable products and create a simple user flow.
This flow was the second iteration after we eliminated the following features:
- Find a depot near you
- Track your recycling progress
- Point system
Feature prioritization helped us eliminate the features above and focus on the minimal viable product and stay within the scope of our project timeline.
Design
The design objective was to utilize the UX research to foster simplicity and ease of use in the app.
The user flow map paved the way for the first version of wireframes. Without the user flow, wireframing would have been difficult and time consuming because design variations are infinite.
After creating the initial wireframe, we conducted user testing to test the flow of the app.
Testing
Testing revealed the flow was simple and the app was easy to use. Key feedback we received was that the login screen should read “Login or Sign Up”, instead of just “Login”. This feedback was incorporated in the second wireframe iteration.
Moreover, after creating the initial wireframe, we had a check-in meeting with our clients before moving forward. This meeting was helpful and ensured we were on the right track and it was also an opportunity to gain feedback on our wireframe.
For example, our client requested us to consider eliminating the “swipe to learn more” feature on the login screen. Upon further discussion, the UX team decided to eliminate it because it encourages the user to actively start using and exploring the app.
Prototyping
Using the feedback gathered from the second iteration of the wireframe (as discussed above), we created the mid-fidelity prototype (below).
Below, you will see the mid-fidelity camera screen. This is where the artificial intelligence is incorporated in the app.
Based on our research, our users enjoy the ease of use of Snapchat; the user is able to easily capture a picture with one click. The EcoAI camera feature allows the user to take a picture of an item just as easily; with the click of one button, the user will visually capture an item and the app will automatically generate the results (Figure G).
Let’s get real; a recycling app is not the most exciting download available on the app store. To make our design a little more delightful, we incorporated humour to keep the user engaged (see below).
Using the mid-fidelity prototype, we continued user testing and began designing the high-fidelity screens.
Take a look at the high-fidelity prototype on InVision!
Testing
We tested on a total of 6 participants at all stages of prototyping.
The method of testing was structured; we identified the scope of the test and gave the user specific objectives. We took detailed notes on their interactions with the prototype (e.g., long pauses) and noted all feedback.
User Objective:
1. Search how to recycle an item using text input
2. Search how to recycle an item using the camera feature
3. View your reminders
4. View your calendar
Version 1 Testing:
Participant 1:
- The login screen should also say “Sign-up”
- Ensure all stages of the process includes headers to explain what is going on
- Ensure there is not any blank space
Participant 2:
- Have the camera mode icon on the right instead of the left
Version 2 Testing:
Participant 1:
- Should the option to log-in using the standard log-in and log-in with Facebook be its own screen? I.e., not below the screen that prompts the user to log-in
- Sticky notes are confusing while testing
Participant 2:
- Suggested a pop up for picture taking result screen
- “Not what you’re looking for? Try the text search or take a picture again”
- Should be able to swipe away the reminders or have an X to remove them.
Participant 3:
- Camera icon should be far right because it’s generally easier to access it with right hand using a right swipe function
Digital Prototype
Participant 1:
- The first screen the user should be directed to is the “search” screen because it is the first tab on the left
- The user should be able to click on the “plastic bottle” highlight after selecting it to direct to the results page
All feedback from testing was considered before moving onto the next stage. The team made revisions, referenced research and retested throughout the testing phase.
UI Design
We imagine a world inspired and more connected by creating positive impact on the environment.
The final design phase for this project was completed by the UI specialist on our team.
The UI design required a lot of continuous feedback and retesting to create the final product.
The design inception was to foster a feeling of simplicity, modernity, innovation and healthy nature. This was achieved by using white space and vibrant colours. The stable and serious typeface used creates a innovative feeling to the app.
Below you will find the high-fidelity version of the screens discussed in mid-fidelity prototyping.
Future Improvements
There is always room for improvement.
The 3-week timeline of the current project did not allow for many features.
Future considerations include incorporating a point-based system in the app (e.g., users are rewarded for recycling with in-app points). This system would also consist of progress tracking (i.e., tracking the number or percentage of items the user has recycled).
To educate our users and keep them informed on current events in their environment, future improvements would include an educational feature (e.g., blog).
Conclusion
Overall, the EcoAI project was a success! The team worked well and hard to create a simple, functional and minimalistic app to improve the experience of our users at the time of recycling.
The final product exceeded the business goals, user goals and project goals.
