Madison Poe
Product Designer

Designing a mobile application to make online shopping a sustainable experience

CHOICE iOS Application

OVERVIEW

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.

CHALLENGE

Users are overwhelmed by the lack of resources and inconsistent and false information when they try to shop sustainably online.

SOLUTION

Create a way for users to shop sustainable products and brands with helpful and transparent information.

ROLE

Lead UX/UI Designer

TECHNIQUES

User Interview

User Persona

User Flow

Wireframing

Prototyping

Usability testing

TOOLS

Figma

Miro

InVision

TIMELINE

May 2021 - June 2021

USER RESEARCH & ANALYSIS

SECONDARY RESEARCH

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

RESEARCH PLAN

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. 

OBJECTIVE

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. 

RESEARCH QUESTIONS

  1. Why aren’t users buying more sustainable products?

  2. What do users need to help them make more sustainable purchases?

  3. Are users interested in buying sustainably, but just don’t have the knowledge and resources?

  4. How to create a one-stop online shop for eco-friendly and sustainable products?

CHOICE iOS Application

SCREENER SURVEY

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. 

SYNTHESIS & IDEATION
Affinity Map

Affinity Map

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.

CHOICE iOS Application

USER PERSONAS

The Researcher

"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...

  1. How might we create awareness around shopping sustainable online?

  2. How might we educate people on sustainable online shopping?

  3. How might we create transparency around sustainability?

  4. How might we make sustainable online shopping convenient?

  5. How might we make sustainable online shopping inclusive and accessible to all?

  6. 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.

Red routes and user flows for each

Red routes and user flows for each

UI DESIGN & PROTOTYPING

SKETCHES

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.

MOODBOARD
I chose this imagery because it feels modern and this brand should feel realistic, relevant, and familiar. It's important for the user to feel like this brand is convenient to their lifestyle and easily integrated because shopping sustainably should be easy.

I chose this imagery because it feels modern and this brand should feel realistic, relevant, and familiar. It's important for the user to feel like this brand is convenient to their lifestyle and easily integrated because shopping sustainably should be easy.

BRAND PERSONALITY

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.


BRAND MISSION

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.

CHOICE iOS Application

STYLE GUIDE

Transparent | Convenient | Reliable | Modern | Inclusive

The style guide reflects the brand attributes and will help it reach its full potential.

CHOICE iOS Application

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:

  1. Shop products by sustainability terms

  2. Shop Featured products

  3. Shop all products

USABILITY TESTING

OBJECTIVES

  • 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

TASKS

  • 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?

CHOICE iOS Application

REDESIGN

  • Add a back arrow functionality next to the search bar that remains present on most screens

CHOICE iOS Application

MEASURING OUTCOMES

After conducting usability testing, I focused on the following key feedback:

  1. The overall opinion of the UI is agreeable. It is modern and clean as the branding intended.

  2. I adjusted the navigation to include reversible actions.

  3. 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.