waste not, DC
Case Study
The Goal:
Make the waste not, DC app with simple and easy navigation that takes the user through a straightforward and fast purchasing experience.
The Problem:
My findings indicated that users wanted a dedicated app or website that offers equally easy and fast locating and purchasing of zero waste items with pickup options as no such app exists for the metropolitan DC area.
Project Overview
The Product:
Waste not DC is a case study of a zero waste shopping application in the Washington DC area that strives to provide fast and easy access to zero waste products.. Waste Note DC targets any individual of all genders and backgrounds who wants to shop more sustainably and make a positive environmental impact.
Project Duration:
May 2022 - June 2022
My Role:
UX designer and researcher, designing an app for the waste not, DC app from conception to delivery.
User Research
Summary:
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was busy individuals who are new to zero waste products that need a quick way to purchase zero waste items with pickup options.
This user group confirmed initial assumptions about the waste not, DC customers, but research also revealed that fast inquiry flows was not the only factor limiting users from purchasing products.
Other user problems included app engagement and challenges that make it difficult to narrow down the specific type of product that the user is looking for.
User Pain Points:
1
No Dedicated App
There is no dedicated app for zero waste shops and products
2
No Location Feature
Since a dedicated app does not exist for the DC area, users are unable to input their address to find closely located shops
3
Time
Users need a fast and easy way to purchase zero waste products with advanced pickup options
Personas
Kevin
Age: 24
Education: BS, Business
Hometown: Washington, DC
Family: Lives 2 roommates
Occupation: Project Manager
“I’ve only recently learned about how much waste we produce as a society and the impacts it makes to the planet. I want to start small and make a difference.”
Goals:
-
Quickly locate local zero waste stores in immediate area
-
Order zero waste products online for quick and easy pickup
-
Find an app to get daily tips on small actions to do every day to make an environmental impact
Problems:
-
“I have a really busy schedule during the day and need to be able to order ahead of time so I can quickly pick up my products”
-
"I'd like to learn more about how to live more sustainably."
Kevin is an assistant project manager at a tech company living with his 2 roommates in the Shaw neighborhood of Washington DC. He has recently learned about zero waste stores and wants to start purchasing zero waste products to make an impact in his immediate community. He has a busy schedule during the day and needs an app/website where he can order ahead and pickup.
Lisa
Age: 58
Education: BA in Education
Hometown: Alexandria, VA
Family: Husband + 2 dogs
Occupation: Middle School Teacher
“I’ve always had a passion for the health of our planet and want to do everything I can so my grandchildren can live in a clean and safe environment in the future.
Goals:
-
Easily locate zero waste stores in the immediate area according to her location, whether that be home or at work
-
Be able to locate a store depending on products that are needed
Problems:
-
“I’m not very tech savvy so I need an application that’s extremely easy to use in order to find zero waste stores”
-
"I like to purchase products for home but also for work and want to be able to find stores around each location"
Lisa is a middle school teacher who lives with her husband and 2 dogs in a suburb of the DC Metropolitan area. She has always been an environmental advocate and grows a lot of her own fruits and vegetables. She now wants to get into buying from zero waste stores for other products she needs. Lisa is not very tech savvy and needs to find an app/website that is straightforward and easy to use.
Competitive Audit
An audit of a few competitor’s websites provided direction on gaps and opportunities to address within the waste not, DC app.
Paper Wireframes
Taking the time to draft iterations of the home screen of the app on paper ensured that the elements that made it to the digital wireframe would be well-suited to address user pain points. For the home screen, I prioritized implementing prominent product category buttons and a search bar to help users save time.
Digital Wireframes
While creating the digital wireframes, I wanted to create a landing page where the user could immediately input their location. This would ensure that nearby zero waste stores would be found immediately.
It was important to add a search bar along with product category buttons so users can easily search for or select the type of products the user needs to quickly purchase.
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was inputting the user location, selecting a product category, selecting a store, selecting a product, then completing checkout process. The navigation interactions on the bottom navigation bar were also implemented along with additional pages that are not part of the primary user flow. This was done in order to fully test the user experience in the upcoming usability studies.
Below, you will see a screenshot of the prototype interactions completed on Figma.
To view and test out the waste not, DC Low-Fidelity Prototype please click here.
Usability Study
Study Overview:
A moderated usability study was conducted over the course of two days with 5 different participants of different ages and backgrounds. The study revealed key insights that could be implemented in the re-working of the UX design of the application. The key findings can be found below.
Study Insights:
1
Most users wanted a type of indication that they had items in their cart.
2
Most users wanted more pickup options during the checkout process.
3
Most users wanted to be able to change the item quantity within their cart.
Mockups
Key Insight 1:
After the usability study, I gained a main insight that users had a difficult time understanding that there were items in the cart without a clear indication. This was set as the highest priority insight as it effected user flow in completing the checkout process. I fixed this by changing the color of the cart to a more high-contrast color when there were items added as a clear indication that there were items in the cart.
Before usability study
After usability study
Key Insight 2:
After the usability study, I gained a an additional insight that the checkout did not include a field to select a pickup time. This effected the user flow of the checkout process since the user was unable to select a pickup time. I fixed this by implementing two fields for pickup time options: one for ASAP pickup, and a field where the user could select a specific time if desired.
Before usability study
After usability study
Key Insight 3:
After the usability study, I gained an additional insight that the cart did not include the option to adjust item quantity within the cart page. This effected the user flow of the checkout process since the user would have had to go back to the item page in order to adjust item quantity. I fixed this by implementing plus and minus buttons next to the existing number quantity, so the user can save time and toggle the quantity amount within the cart page.
Before usability study
After usability study
Additional Mockups
High-Fidelity Prototype
Using the completed set of mockups, I created a high-fidelity prototype. I ensured to include the insights gained in the usability study and also made sure all proper interactions were working properly. In the high-fidelity prototype, the primary user flow can be completed in any of the product categories.
On the right, you will see a screenshot of the prototype interactions completed on Figma.
To view and test out the waste not, DC High-Fidelity Prototype please click here.
Responsive Design
For the responsive designs, I wanted to make sure I designed a desktop and mobile companion website to cater to every type of user that would want to use these services. This included adjusting page layouts to best fit a desktop screen with the same ease of use as the dedicated app.
Site Map/Information Architecture
While creating the sitemap, I implemented the use of a somewhat hierarchical menu when it came to the overall navigation of the sight and also implemented a sequential menu when purchasing an item.
Mockups
While creating the mockups, I understood that several features in the dedicated app would have to be reconfigured. One main feature in the dedicated app was the bottom fixed navigation bar. I adjusted this feature on the responsive desktop website and implemented a "hamburger" menu on the top left of the screen.
Other features such as the location indicator and search bar were moved to the top bar of the responsive website for easy and quick access - the user would not have to go to a separate page in order to change their location or to search for a products.
Takeaways
Impact:
The waste not, DC app has made users feel that they have more accessibility to zero waste items in their immediate area while making a positive environmental impact in their direct community along with a fast an easy purchasing experience.
One quote from peer feedback:
“I’ve been wanting to shop more sustainably and this app looks like something I would actually use!”
What I've Learned:
While designing the waste not, DC app, I learned that even though my design relied mainly on visual components, I could still incorporate navigational elements, text descriptions and calls to action which increased the app's accessibility and functionality. Specifically with accessibility, I ensured that I implemented high contrast colors and texts along with bolded headers to make the app easily viewable to all user types.
Overall Progress
My UX Journey:
The waste not, DC app was the final case study during my Google UX/UI Professional Certification (completed in June 2022). Looking back at the beginning of my UX journey, the amount of progress I have made as a UX Researcher and UX/UI Designer is clear. I am excited to continue honing in these skills and learning more about the UX/UI world, and most importantly, putting the user's needs first with every design I create.