This is a personal project to design a user experience for social good. I chose to design a plastic-free shopping app to reduce plastic pollution and a complementary website to advocate for the whales.
This project is a work in progress.
UX Designer, UX Researcher
Conducting interviews, paper and digital wireframing, low & high fidelity prototyping, conducting usability studies, determining information architecture and iterating on designs
January 2022 - ongoing
Figma
Marine plastic pollution is a major threat that the whales and other marine species face. At least 14 million tons of plastic end up in the ocean every year. It has been estimated that plastic pollution kills 100,000 marine mammals including whales each year.
I identified a lack of understanding about personal impact as a crucial driver for the continued inaction towards reducing plastic use. In most cases, people continue to shop plastic products because they are the most convenient and inexpensive option.
My goal was to design an eco-friendly shopping app for users who want to do their part to reduce plastics in the ocean, therefore saving the whales. I wanted to include multiple eco-friendly brands in my product to allow users to browse a wider range of plastic-free products.
In addition, I wanted to design a complementary responsive website that will improve education on why whales matter, the dangers that they face, and help people understand how their individual actions can promote change.
I shared some data on endangered whales and marine pollution to develop interview questions for conducting interview. Most interview participants reported feeling badly about marine pollution but did not actively try to reduce their environmental impact on the oceans. The feedback received made it very clear that users would be open and willing to shop plastic free products if they had access to an easy-to-use eco-friendly shopping tool.
I created two user personas to represent the users who are concerned about marine plastic pollution and want to actively contribute to fixing the problem.
Age: 24
Education: Student
Family: Single, lives with parents
Occupation: Full-time student at NUS
“I will change my shopping habits if it helps to save the whales!”
Mahia is a full-time student at the National University of Singapore. She recently watched a documentary about the oceans and was horrified to discover that over 300,000 whales, dolphins and porpoises are killed every year as bycatch. Besides signing petitions, she does not know how she can actually help the whales.
Age: 42
Education: Undergraduate degree
Family: Married, no children
Occupation: Wakeboarding coach
“I need to speak up for the oceans, because the waves cannot speak for themselves.”
Alex is a surfer who loves the ocean and its marine life. He tries to use eco-friendly products as much as possible, and carries reusable cutlery and a water bottle wherever he goes. He gets discouraged because no matter how many beaches he cleans up, he still sees more trash and sea animals washing up dead.
First I started working on the designs for the eco-friendly shopping app. I focused on making the shopping process easy for users, and also to provide more information to users on how going plastic-free saves the whales.
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of shopping for an eco-friendly product from homepage to order confirmation.
I conducted an unmoderated usability study with 4 participants between the ages 21-60. This study was done remotely and took about 10-15 minutes for each participant. My goal was to find out if the main user experience of buying a zero-waste product, is easy for users to complete. I wanted to see the steps users take to make a purchase, and find out if there were any parts of the user flow that the user gets stuck. These were some of my findings.
Some users did not know where to start clicking from the homepage. While new users may need to learn more about the organisation or find out how shopping plastic-free helps the whales, this information adds nothing new for existing users.
Although there was a search icon on the top navigation bar, some users did not notice it immediately. It needs to be displayed more prominently on the homepage to make it easier for users to navigate to specific items.
Users need better cues to find out how the featured plastic-free products are more sustainable for the environment. They need to easily see information about the type of material used in making each product - and how it is a better substitute for plastic.
At the order confirmation page, one participant suggested a “sharing to social media” feature to encourage more people to get involved in the cause.
Based on the insights from the usability studies, I applied design changes to reduce the copy on the homepage to make it less overwhelming to users. As the app’s main user experience is to shop, I created onboarding pages instead to educate new users on how shopping plastic-free helps to save the whales since this information would not be useful for existing users. I also added a search bar to the homepage to make navigation to specific items or brands easier.
I also found that users needed to know the material used to replace plastic in the products featured on our app. This information can be found in the item page, but users need to see this information quickly when browsing all items. Therefore I added icons to all items on the homepage and category page, to show the type of material used in making each product. When tapping on these icons, a note appears to explain how the material used is more sustainable for the oceans and environment than plastic.
Another change I made following the usabiity study was the function of the CTA button on the order confirmation page. I renamed it to “Share” and added an overlay for sharing to social media. This allows users to share the cause with their friends and get more people involved. It also helps to scale our organisation and reach out to a wider audience.
In this stage I added colours and images to make my low fidelity wireframes come to life. I used lots of blue and green tones and wavy lines to represent the sea.
The high-fidelity prototype followed the same user flow as the low-fidelity prototype.
With the app designs completed, I started to work on designing a corresponding responsive website to complement the app. I created a sitemap to provide a high-level view of my website. For the website, I wanted to focus on education to increase awareness on why whales matter and the threats they face. The main goal of this website would be to drive users to our eco-friendly shopping app, so I included a clear CTA to “Take Action” which provides our users a direct link to the app store.
Following the same process as I did for the mobile app, I created wireframes and low fidelity prototypes for my website. I started with a mobile first approach then worked my way up to bigger screen sizes, including designs for tablet and desktop. I considered each device's screen size, the way content will be organised on the different screen sizes, and the way users will interact with each device. I ensured consistency and uniformity in my designs so that users can feel familiar across devices.
%20Mockup-1.png)
%20Mockup.png)
This project is a work in progress. My next steps are to continue building the rest of the website, add more educational resources for users to learn about whales and why they are endangered, as well as to conduct another round of usability test, and improve the design. I would also like to go back to the eco-friendly shopping app to find a way to provide incentives and rewards to users for purchasing plastic-free products.
So far, while working on this project, I have learnt that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Designing a data-rich, AI-powered portfolio strategy dashboard for retail investors.
Button Text
Redesigning a trading analytics platform web experience for mobile
Button Text
Designing a property listing portal for users searching for sale or rental properties.
Button Text
Conceptualising the AI features of Vama, to enhance efficiency in messaging.
Button Text
Crafting the Meetings functionality for Vama: An iOS mobile chat application
Button Text
Introducing monitoring and management functions for ANTlabs’ centralised dashboard.
Button Text
Designing a landing page for a custom and classic motorcycle show.
Button Text