Carbonshop

Overview

Can the purchase decisions you make every day at the grocery store truly impact the environment? Greenhouse gas emissions from the grocery industry associated with agriculture, shipping, and food processing and storage truly are a good proxy for many environmental issues. However, few grocery shopping platforms inform and encourage users to make green purchasing decisions.
In order to make everyday green purchase decisions easier than ever, we designed a mobile application that includes data on the carbon emissions of common grocery items as well as a financial incentive program that rewards eco-friendly choices.

My role includes design concept initialization, user research (exploratory & in-depth), strategy & design discussions, mid-fidelity prototyping & testing, high-fidelity prototyping & testing, and final design with its validation.

Design Process

Problem

Research

Our team performed a thorough competitive analysis to look at how other products approached environmental awareness and to figure out how we could improve our strategy.

Our Competitors:

• Direct competitors are products that also encourage people to shop in an environmentally friendly way.


• Indirect competitors are products that assist people in developing an environmentally friendly lifestyle but do not have a direct link to shopping.

Goal-Setting, Visualizing Impact, Reward, and Gamification are the aspects we considered while conducting competitive research.

Overall, competitive analysis provided us with the following insights:

Research

We conducted 11 user interviews during the discovery phase of this project to gain a better understanding of users' grocery shopping habits. We mainly exploring what are the main determinants of their daily grocery shopping, what factors preventing them from buying environment-friendly products, and what possible incentives can be used to engage them into making more green decisions in their grocery shopping process.

The data was then used to create an affinity diagram in FigJam to help us find the insights. Overall, we discovered that when it came to grocery shopping, the majority of participants did not consider carbon emissions. Because:

Research - Key TakeAway

• Most products lack carbon footprint information, and most people are unaware of this information.
  Most participants did not notice any label about carbon emissions while grocery shopping previously and lack information/knowledge about the exact meaning of these concepts, making it less likely for them to consider related green products if they did not have access to this information previously.


• People are unaware of the environmental consequences of their carbon footprint.
  Participants are not able to see big impacts on the environment from the green purchase actions. Also, they could not gain immediate benefits from the green purchase decisions.


• People need approachable and engaging ways to participate in a low-carbon lifestyle.
  People express interests if the platform can provide an attractive way of having them join in. Also, raising awareness of environmental issues is a serious topic, and there should be approachable ways for them to understand and engage in relevant activities.

Reframe the Problem

Ideation

• (Abandoned) Label the total CO2 emissions from products
  Users will buy the kind of products they need, and the label of total CO2 emissions may not be very helpful. Users might not be vegetarians, for instance, despite the fact that plants emit less carbon dioxide than meat..
  


• (Selected) Use carbon emission compared to typical products (e.g. +20%, -20%) to label the products
  Users can purchase the kind of products they need while emitting less CO2.
  


• (Selected) Showing users the impact they have when they select low-emission products will help users become aware of the effects of their CO2 emissions.
People don't care how much CO2 they emit because they're unaware of the consequences. As a result, rather than just showing the CO2 they saved, we can also show their environmental impact.


• (Abandoned) To motivate customers, we can label products with an eco-friendly label and give them reward points for purchasing more eco-friendly products.
  Even if users purchase low-emission products, the total CO2 emissions remain high if they purchase a large number of items.


• (Selected) To assist users in developing a low-carbon habit, the app can set a reasonable goal for them and reward them when they achieve their goals.
  Giving users rewards for achieving their goals will motivate them to do so.
  

Design Strategy

Then, we came up with design strategies to address user’s pain points in green shopping:

• Visualize the green purchase process and impact
  According to our user research, we found that people lack carbon footprint information to help them compare different products during shopping. We want to provide users with carbon emission information of each product to help them consider carbon footprint when shopping. Visualization of carbon footprint data among many grocery products and recommendations of other similar products with lower CO2 emission can help find the products with lower CO2 emissions.


• Set the users' carbon budget as a goal
  Users need approachable way to achieve their low-carbon style. A user's carbon budget will be customized by the app based on their shopping habits. Users can earn reward points if their carbon emissions are within their budget. By summarizing their recent purchases and redemptions, users can also check their progress.


• Reward mechanism that prompts users to get green purchasing habits
  People can be motivated financially and would like to have an engaging way to participate in a low-carbon lifestyle. By accumulating bonus points that come from keeping spending within the carbon budget. Users can redeem free samples or donate money to plant real trees as financial incentives.

Information Architecture

With our design strategies, we started to create the information architecture.

Rationale:

• To remind users the impact they have had, our application displays the users' accomplishments on the homepage. Users may shop in different stores, so we integrated these stores into the homepage to help users to shop.
• Shop is one of our main navigation because users need to see product information when shopping. Users can browse different products or search for specific products while shopping.
• In users’ shopping carts, to draw users' attention to their impact on the environment, we will present customers with information on how much carbon emissions have been cut by their order this time compared to typical purchasing. Users can receive green points if their order has a lower carbon emissions.
• To encourage people who are unconcerned about the environment to consider green shopping, reward plays an important role in motivating consumers to buy low-carbon goods. Users can see their environmental impact on this reward page and redeem their green points for trees or green products.
• In the profile page, users can see their order history and their impact on the environment to summarize their purchases.

Wireframes

We used paper and pens to brainstorm and sketch our ideas individually, and we critiqued our initial designs together to define main features. Then we used Figma to implement our wireframes.

A: Global Search - users can search for products names, product categories, and stores.
B: Impact - users can see their impact of how many trees they have already saved. They can check details by navigating to the Reward section.
C: Browse stores - users can check previously visited stores and items added to the carts on the homepage.
D: Local search - users can search for specific items in the store.
E: Filters - users can sort search results with different priorities (e.g., highest rate of carbon emission reduction first).
F: Carbon emission tag - users can check the relative reduction rate in carbon emission compared to typical products.
G: Diet icon - Graphic icons that indicate different diets (e.g., vegan, gluten-free, locally produced).
H: Summary pop-up - users can see the subtotal of their carts from this store and possible environmental impacts after they check out.

I: Carbon emission tag - users can check the relative reduction rate in carbon emission compared to typical products.
J: Visualization bar chart of saved emissions - users can see the carbon footprints of this product compared to typical products.
K: Suggestions for replacement - Recommend users with lower carbon footprint products of the same category.
L: Carbon emission tag - users can check the relative reduction rate in carbon emission compared to typical products.
M: Total saved carbon emissions in the cart - users can see how much percentage of carbon emissions they saved in total by selecting a lower carbon footprint product. Users can also see the specific amount of carbon emissions they saved in this cart equals to saving how many trees.
N: Visualization bar chart of total carbon footprint - users can see the sum of carbon footprints in this cart compared to typical purchase.

Lo-Fi Prototype

In this section, we generated low-fidelity prototypes for several main flows which would be tested with users in further steps, illustrating how these pages are linked and flowing from one to one.

The app will introduce the rewards system to users during the onboarding process and will also create a carbon budget for users.

As with other online grocery store websites, users are able to search for a specific product or a category in the search bar and then check the product description(a. Carbon emissions you can save; b. Social impacts; c. Comparison between typical products and the product users reviewed). After that, our application would automatically recommend replaceable green products with lower carbon emissions to users.

The app will display users' environmental impact from green purchases. Additionally, they can use their eco-points to get free samples of eco-friendly products, donate their points directly to an eco-fund, or get different kinds of virtual trees by using them.

Design System

To gather our findings for further inspiration in both wireframing and high-fidelity prototyping, we created a moodboard.
Based on the moodboard above, we created a style tile. We found there is an agreement that most designs use green colors as well as plant icons to illustrate the sense of environment and ecosystem. Therefore, we decided to use a variety of green shades as our color palette. Our high-fidelity mockup mainly utilizes green and white colors to emphasize the concept of sustainability, nature, and health.

Hi-Fi Prototype

We implemented high-fidelity prototypes based on the style tile we initially decided. For the Hi-fi prototype, we designed pages for main flows including “homepage and product listing page” for users to search products and add to their carts, “product description”, “check-out and replacement product”, “profile”, “redeem and my forest page” - which covers most of sections on our application to make further user test sessions easier and accurate.

User Testing and Iteration

We conducted user testing with a Hi-fi prototype. We started revising our Hi-fi prototype based on feedback from the user testing session.

User Testing on UserTesting.com

To validate our final design, we conducted 12 unmoderated usability testing sessions on UserTesting.com to validate our high-fidelity prototypes. We set up a main scenario with different tasks with post-task questions to test if there are any usability issues we need to fix. We received both qualitative responses and quantitative data from the participants. If users thought the tasks were simple, they would give them a score of 5. This app's overall score is 4.35/5.0, indicating that it is simple and intuitive to use.

Outcome

Learnings

• Visualizations
  Evaluating what types of visualizations can deliver bigger impacts to users to motivate users constantly. We explored what forms of presenting carbon emissions can be the most accessible, intuitive and user-centered way for user experience. Also, we spent a lot of time on considering what types of visualization would motivate users best and to help them understand their contributions effectively.


• The Importance of Customization
  We found out that some users prefer to spend points to redeem goods, while others prefer to use points to redeem games. Also, it was interesting to find out people have different interpretations and understanding of carbon emissions and possible incentives. Therefore, it is important to think about motivating them in different ways.


• Balance business and environmental benefits.
  Balancing business and environmental benefits. One the one hand, we would like to utilize eco-points as an incentive and gamifications to keep users continually engaging in green shopping; one the other hand, as a green application, we aim not to encourage users to do extra purchases apart from essential daily grocery items as it would conflict our product vision - producing more carbon emissions. Thus, one lesson we learnt from this phrase is to achieve a balance between benefits from different perspectives.