Goodbye Nestlé, hello Organic Valley
By Julia Wang, Sami Foell, David Hewett, Niklas Britz
The Problem
There is significant ambiguity, mistrust, and confusion surrounding sustainable groceries and the food + beverage industry. Our extensive research with Gen-Z and Millennials has revealed that trying to identify trustworthy sustainable groceries, justifying their higher price point, and understanding the importance of “buying green” are challenging, complex, time-consuming processes faced by many modern day grocery shoppers.
Our Solution
Our mobile application, Sustainance, provides an intuitive, elegant digital solution to these roadblocks. Sustainance empowers shoppers to scan products to easily identify pertinent sustainability metrics, create sustainable shopping lists, and access credible, palatable information on products and companies to build their capacity in seeing the humanitarian and environmental value of going green. Users can elevate their grocery shopping habits to be more sustainable anytime, anywhere. From the home to the grocery store, the mistrust, ambiguity, and complexity around grocery products and corporations becomes a thing of the past: it’s sustainable grocery shopping made simple!
Paper Prototyping + User Testing
We initially identified several key tasks upon synthesizing our user research data: planning a weekly grocery shopping trip beforehand, trying to identify legitimate sustainable grocery products and understanding product labels. The next step was creating a paper prototype that allowed users to complete these tasks, which we presented to designers for a heuristic evaluation, who identified issues with several heuristics including visibility of system status and user control + freedom.
We then created a second iteration of paper prototypes based upon this initial feedback. Three usability tests were conducted with this second prototype to identify if our feature flows and information matched user goals and expectations.
We uncovered that there was ambiguity surrounding the sustainability tier system used to classify grocery products, so we created a link to additional documentation to inform users on the specificities of the tier system. Several participants incorrectly scanned product labels due to a mismatch in the interface and user models of what classifies as a label. To remedy this, we revised our scan feature copy and added visual label examples for greater clarity. Lastly, multiple participants indicated they found it frustrating to navigate through their scan history and saved scans within a single page. Thus, we created two separate tabs to separate scan history and saved scan results for more efficient information traversal.
The insights from the heuristic evaluation and usability tests allowed our team to arrive at a more meaningful and user-centric final paper prototype before diving into our digital mockup.
Digital Mockup
Building off our final paper prototype, we designed an interactive prototype using Figma. Feel free to explore our digital prototype here: Link to digital prototype.
Upon transition from paper to digital, we realized that much of our text-heavy components needed to be reformatted slightly to account for a smaller interface and web accessibility standards. The component to adjust item quantity in user grocery lists was simplified in the digital interface, now only requiring a single click per interaction to add an item and adjust its quantity. In the flow to create a new list, we implemented a progress bar to boost user understanding as to where they were in the list creation process and provide a sense of reward once a list was created. The ‘Home’ interface was redesigned to be much more minimal, simplifying the content to reduce the information needed to be traversed and processed by users upon entering the application. A tier system for product third-party labels was created to provide more depth to the results page of our scan feature. Lastly, some copy was consolidated to reduce interaction cost.
Task One: Planning a grocery shopping trip beforehand
Users are able to create and save in-app shopping lists to streamline their grocery experience. Sustainance presents grocery store-specific pricing, availability, and sustainability metrics in order to assist them in making sustainable yet budget-conscious grocery decisions. When adding new items to their lists, users have the flexibility to search products by name or category.
Grocery List Creation
Users will click the ‘Lists’ navbar option to begin their new list creation flow. All grocery lists associated with the account will be displayed here for consolidated, easy access.
To create a new list, the user may click ‘Create New List’.
Completing List Pre-requirements
Users will give a name to their new list for easy recognition and select which stores they plan on visiting to see accurate item pricing and availability. Users will select ‘Add Items’ to begin adding items to their list.
Searching for a list item
Users may search by name or category. This user searched for “Concord Grapes”, and was presented with two product cards. They can easily adjust the quantity and add items to their list from the search results, but can click each product card to learn more.
Interacting with Product Cards
Each product card provides details regarding its sustainability status. Each product tier is given further context with outlined sustainability criteria to boost understanding. Items with low sustainability tiers are accompanied with sustainable alternatives. Users may click ‘Add Item’ to add an item to their list. The list icon will update accordingly.
Sustainability Tier Documentation
Users may click the link titled ‘Learn more about tier system’ to access documentation outlining tier assignment, criteria, and availability to boost understanding and trust.
Viewing List Content
Once an item has been added, users may click the list icon in the upper-right hand corner (or access ‘Lists’ via the navbar) to access their newly updated list.
Through a pull up tab, users can view a summary of list items and total cost, giving users a better understanding of their grocery sustainability and expenses.
Task Two: Learning more about grocery product metrics and understanding their labels
Through a central ‘scan’ button, users are able to quickly scan grocery item barcodes or food product labels to identify metrics. Users are presented with easily digestible yet significant information surrounding the product (e.g. how it was manufactured) to elevate their baseline understanding. Users may explore each metric further. If an unsustainable product is identified, alternatives are presented. When a product label is scanned, users are presented with a legitimacy tier.
Scanning a grocery item
To learn more about a grocery item, users can click the central Scan’ button to scan the product’s barcode or attached certification label depending on their interest and goal. Documentation and examples provide users with greater understanding of what content is scannable.
Barcode Scan Results
The user is then presented with an overview of the scanned product, including details regarding the item’s sustainability and an overview of the products’s third-party labels with details regarding their legitimacy. They can save scanned items (bookmark icon, top-right) or add them to a grocery list (list icon, top-right).
Legitimacy Tier Documentation
Below the ‘Legitimacy Criteria’ section, users may click a link titled ‘Learn more about legitimacy tiers’ to access documentation outlining tier assignment and availability.
Interacting with stored scan content
Users may alternatively reference saved scan results or view their scan history. These features empower users to easily and efficiently access and reference items or labels of interest, assisting them to make more sustainable grocery decisions in the future.
Summary
Many grocery shoppers lack the necessary information regarding grocery products to confidently select trustworthy, sustainable options and understand the humanitarian and environmental implications their grocery shopping decisions have. We uncovered that our users are willing to invest time and money into things they perceive to be valuable. Our goal was to design a solution to encourage more sustainable grocery shopping by providing shoppers with the product and company information they need to see the value in opting for green grocery products. By elevating existing grocery shopping tasks and incorporating sustainability details, we’ve created a comprehensive product that seamlessly fits into our users’ grocery routines.
Sustainance is a digital platform that prides itself on removing the complexity around product comparison, understanding item labels, and researching grocery products and companies. With Sustainance, users can easily access the information they need in real time to feel confident in their grocery shopping decisions. It’s sustainable grocery shopping made simple!
