Designing a mobile application to make online shopping a sustainable experience
CHOICE is a mobile application allowing users to shop for sustainable brands and products.
CHOICE gives users the ability to filter through brands and products based on their different sustainability qualities and the user’s needs. It also houses the CHOICE INDEX, or a sustainability index, where users can go to learn more about what these sustainable qualities mean.
Users are overwhelmed by the lack of resources and inconsistent and false information when they try to shop sustainably online.
Create a way for users to shop sustainable products and brands with helpful and transparent information.
Lead UX/UI Designer
May 2021 - June 2021
As the world of consumers continues to trend towards a more digital experience, it's also trending towards a more sustainable one. Research shows that eco-friendly and sustainable options continue to be a top priority across demographics when it comes to consumers. And while brands and companies are making the switch, research also shows that consumers remain unsatisfied with their ability to be more sustainable, claiming that factors such as convenience, transparency, and the availability of sustainable products, continue to be huge issues in the push to become a more sustainable consumer.
33% of consumers are more online now than they were 12 months ago
50% of people only buy from eco-friendly brands while 48% know they should but don’t because of convenience
The majority of people agree that they’d like to make more sustainable purchases.
Two big factors remain:
Lack of awareness: While consumers are motivated to buy sustainably and committed to the research of products and brands, most still don’t understand how to decipher ingredients or even where to learn how
Availability: Consumers are committed to spending more money with their favorite brands if they were to offer more sustainable products and transparency surrounding their products
More people are shopping online now than ever; and while 50% of users buy from eco-friendly brands, another 48% know they should but don’t because of convenience. The purpose of this study is to understand what is missing from users’ online shopping experiences that prevent them from making more sustainable and eco-friendly purchases; and how e-commerce sites/apps can make their shopping experiences more sustainable - from the products that they offer, to the packaging that their products are shipped in, to how they are reducing their carbon footprint with deliveries.
Evaluate the decision-making process of users trying to shop sustainably online and the pain points that they face to create an online shopping experience that offers convenient and transparent sustainable products.
Why aren’t users buying more sustainable products?
What do users need to help them make more sustainable purchases?
Are users interested in buying sustainably, but just don’t have the knowledge and resources?
How to create a one-stop online shop for eco-friendly and sustainable products?
I received 29 responses to my survey of which 52% said they shop online at least once a week and 76% answered that they would like to shop more sustainably online but found it difficult to do so. Five people in this target demographic were then interviewed to better understand user pain points and behaviors.
AFFINITY AND EMPATHY MAPPING
I used affinity mapping to organize my interview notes by identifying and grouping similar thoughts and comments from my interviewees. Then I was able to decipher two distinct types of online shoppers and begin building personas based on the two empathy maps below.
"Being sustainable is a lifestyle choice, whether it's shopping in-person or online"
Motivated by a companies' missions
Spend a lot of time and energy researching sustainable products
Major pain points include overwhelming amounts of misinformation, lack of transparency from companies, and confusion around sustainability
The Convenience Shopper
"I'd like to be more sustainable but it's not a top priority where I'm at in life"
Driven by convenience, affordability, and accessibility
Goals include being sustainable without having to put in extra effort
Pain points include lack of education and awareness about sustainability
HOW MIGHT WE...
How might we create awareness around shopping sustainable online?
How might we educate people on sustainable online shopping?
How might we create transparency around sustainability?
How might we make sustainable online shopping convenient?
How might we make sustainable online shopping inclusive and accessible to all?
How might we simplify the information out there regarding sustainable online shopping to be clear and correct?
USER FLOWS & RED ROUTES
I used this method to determine what the main uses of the application would be.
After clearly defining the users' goals, I was able to begin sketching low-fidelity mock-ups. The User Flows helped me determine which screens the user needed to engage with and the best page layout for these screens.
LOW FIDELITY WIREFRAMES
After sketching, I used Figma to bring my design to life in these low-fidelity wireframes. These frames highlight the users' main goals and the key features of the app.
Choice is here to help. Leading by example, Choice shows us that every small decision makes a big impact and that by helping people make earth-friendly decisions, we’re all doing our part to save the planet.
Shopping sustainably can be an overwhelming process. People forget that it’s really the little things, the small decisions we make every day, that over time become a lifestyle choice and make the most impact.
Start where you can, with what you can. We’re here to help you make smarter, more informed decisions. Every choice matters.
Making sustainable decisions should be inclusive; no one has to save the earth by themself. This brand is about showing people how easy it should be to shop sustainably, and that every decision they make for the planet is a good one.
Transparent | Convenient | Reliable | Modern | Inclusive
The style guide reflects the brand attributes and will help it reach its full potential.
HIGH FIDELITY WIREFRAMES
Using the style guide, I created high-fidelity wireframes of the app in Figma.
HIGH FIDELITY PROTOTYPE
Using InVision, I developed a clickable prototype ready to test the following objectives:
Shop products by sustainability terms
Shop Featured products
Shop all products
The overall impressions of the app’s UI design
Find solutions to problems that arise during red route flows
To test if the overall purpose of the app is apparent and helpful
Can users browse products by certain sustainability characteristics?
Can users browse featured brands and products
Can users browse and understand the sustainability terminology/information aspects of the app?
Add a back arrow functionality next to the search bar that remains present on most screens
After conducting usability testing, I focused on the following key feedback:
The overall opinion of the UI is agreeable. It is modern and clean as the branding intended.
I adjusted the navigation to include reversible actions.
Although the users had some confusion surrounding the sustainability logos, I chose to keep them as they were since one of the main goals of this app was to educate users on sustainability.