Local Greens
Making vegan & vegetarian foods more accessible through a responsive e-commerce website.
The Plant Based Foods Association (PBFA) has formed a new collaborative partnership with industry leading grocery retailers consisting of Walmart, Kroger, Sam’s Club, Whole Foods, Fresh Market, Target, and others. The coalition’s primary goal is to increase the visibility and accessibility of plant-based food options everywhere, from grocery shelves to school lunches and beyond.
Problem
Vegan/vegetarian shoppers pay special attention to certifications, ingredients, and allergy restrictions when shopping which existing e-commerce solutions do not fully accomodate. Shoppers are often left to do much of their own research about products in order to determine if they fit their needs. Furthermore, existing inventories for vegan/vegetarian products are often incomplete which requires shoppers having to visit multiple stores to purchase all of the products they need.
Solution
An e-commerce platform for desktop and mobile that addresses key frustrations in the vegan/vegetarian shopping experience with features that help users: quickly identify if a product is vegan/vegetarian, quickly identify product allergy restrictions, get started with vegan/vegetarianism, understand complex ingredients, and avoid the hassle of having to visit multiple stores.
Year Completed
2022
Role
UX designer responsible for all research, branding, visual design, prototyping, and testing
Tools Used
Figma, Notion, Illustrator, Dovetail, Zoom+Otter
Methodologies Used
User Survey, User Interviews, Empathy Mapping, User Persona, Competitive Analysis, Venn Diagram, Value Proposition, Secondary Research, User Flows, Task Flows, Sketching, Feature roadmap, Mid & High Fidelity Prototypes, Usability Testing
Meet Kate
Kate is a busy teacher with a growing family. She wants to provide healthy and eco-concious meals to her family. But she has trouble finding time to research products and grocery shop. She has an allergy to gluten and her daughter has an allergy to dairy, making shopping more complex and time-consuming.
“As a busy mom and teacher I spend a lot of my time between work and my children’s after-school activities. That leaves little time for shopping. But I want to provide my family with healthy and eco-concious meal options.”
Research
Secondary Research & Competitive Analysis
I scoured internet forums about kayaking and analyzed several direct and secondary competitor apps to get a good idea of what currently exists in the market.
Key Takeaways
One
While many sites exist for vegan/vegetarian specific groceries, none exist that utilize inventories from all available local stores while also specializing in vegan/vegetarian products.
Two
While most major grocery retailers have options for vegans/vegetarians, they don’t offer an easy way to vegan/vegetarians to easily set their preference to only be shown vegan/vegetarian options.
Three
The vegan food industry has been growing at a steady pace over the last decade and is only expected to continue to grow with millennials and generation z adopting vegan/vegetarian food preferences.
Value Proposition
This value proposition compares the visibility of vegan/vegetarian foods with the availability of vegan/vegetarian foods from major online and physical stores throughout the U.S. Availability scores were determined by combining the overall amount of products offered with the quantity of physical stores.
Key Takeaways
One
Major retailers score well on availability but are lacking in overall visibility of products.
Two
Visibility ranks high on specialized stores but are low in overall availability as they lack any physical stores.
Three
Local greens scores high on both metrics because of the utilization of many retailer’s local stores as well as an overall focus on vegan/vegetarian products
User Survey
A user survey was conducted with 132 responses to gain insights into vegan/vegetarian shopper demographics and overall experience with product identification as well as product viability.
User Interviews
I chose to interview a wide variety of age groups ranging from young adults to retirees to get a good overall view of vegan/vegetarian shoppers. Interviewees varied in age, occupation, and shopping habits. Interview questions aimed to understand shopping habits, frustrations in their current experience, key indicators they look for on products, and their overall understanding of product ingredients.
Needs
100%
look for vegan/vegetarian certifications on their products and prefer those certifications to be highly visible
need to be able to see and understand a product’s ingredients to help them be sure it was vegan/vegetarian
interested in an e-commerce solution tailored for vegans/vegetarians to help them find products in their local area
60%
expressed that they enjoy trying new products and would like a way to easily see new vegan/vegetarian products in their area
use store pickup and shop in-store but are interested in having them delivered to their home
Frustrations
100%
had difficulty determining if a product was vegan/vegetarian
had difficulty getting started with a vegan/vegetarian diet
40%
had trouble understanding ingredients
have to visit multiple stores to find all the products the are looking for
of interviewees had trouble finding allergy restrictions of products
User Persona
With the development of this persona I wanted to express the the most common user needs and frustrations to help me empathize with my users throughout the design process.
Problem Statement
Vegan/vegetarian shoppers pay special attention to certifications, ingredients, and allergy restrictions when shopping which existing e-commerce solutions do not fully accomodate. Shoppers are often left to do much of their own research about products in order to determine if they fit their needs.
Furthermore, existing inventories for vegan/vegetarian products are often incomplete which requires shoppers having to visit multiple stores to purchase all of the products they need.
designing solutions
Solution
An e-commerce platform for desktop and mobile that addresses key frustrations in the vegan/vegetarian shopping experience with features that help users: quickly identify if a product is vegan/vegetarian, quickly identify product allergy restrictions, get started with vegan/vegetarianism, understand complex ingredients, and avoid the hassle of having to visit multiple stores.
information architecture
After creating user flows and sitemap it was clear that:
One
There are many paths users can take to accomplish the the task of purchasing an item
Two
Grocery e-commerce is a very broad market consisting of many products across many departments
Three
Search & filtering would play an important role in helping the user find products
Four
The site would require a menu system capable of handling many items but still be intuitive to navigate without becoming overwhelming
Sketching Solutions
For my sketches, I focused my efforts on trying to create a main navigation that was simple on the surface but provided enough detail for users to find specific types of products if they wanted to. I had the idea of incorporating a toggle that would allow the user to quickly switch all products shown to them to be either vegan or vegetarian. That way, someone with a vegan only diet could be assured everything they were seeing is vegan.
Wireframing
Before I started working on high fidelity prototypes, I explored the basic structure of the site using mid-fidelity wireframes to get a better idea of how to scale elements and determine which layouts from my initial sketches would work the best.
building the brand
I wanted the brand to feel bright, natural and approachable. I borrowed the shape of an avocado and egg yolk to combine the ideas of vegan & vegetarian into one logo mark. I should also mention it resembles a GPS location pin, tying it into the local idea. I then paired a bold & fun serif with a modern and friendly sans serif for readability.
The Prototype
Desktop Homepage
Desktop Menu & Search
Desktop Explore Products
Desktop Product Page
Ingredients Info Overlay
Desktop Cart
Desktop Checkout Flow
Desktop Checkout Confirmation
Desktop Explore Recipes
Desktop Recipe Page
Main Pages On Mobile
Testing
Usability Testing
Usability testing was performed with 6 users with a mix of methods including moderated zoom & in-person, and unmoderated using Maze. Users were asked to perform 3 tasks:
Desktop
Find a specific product, review product information, and complete checkout
Desktop
Find a specific recipe, change the servings, add specific ingredients to cart, and complete checkout
Mobile
Find a specific product, review product information, and complete checkout
Successes
100%
used the search function to find a specific product
successfully completed all tasks
reported the website was easy to navigate and intuitive
Challenges
32%
had issues finding a specific recipe
16%
had issues with the layout of the recipe explore page – recipe items too close together
didn’t understand they were inputting a delivery address in the checkout flow
wanted to be able to quickly save recipes directly from the explore page
had trouble finding the list of specific ingredients on the recipe page
Revisions
The main changes implemented as a result of usability testing were spacing, contrast, and heirarchy.
Conclusion
Next Steps
Prototyping and testing of the recipe explore page, detail page, and checkout process on mobile.
Further refinement of the overall contrast and accessibility of the site
Prototyping and testing of the ingredient database and search function.
Prototyping and testing of the full menu system including department listings
What I Learned
Details Matter
Details that may seem somewhat low impact can end up having a large impact in the bigger scheme of things. Some examples might be proper color contrast and clear headers as seen in some of the results for my usability study. Small tweaks were made to increase the usability and accessibility of the site.
Surveys help inform user interviews.
This was the first project where I had performed a user survey before doing my user interviews. The feedback I received from my survey helped inform the questions I would end up asking in my interviews.
Groceries is a complex market.
Once I had begun my secondary research, it became clear very quickly that the grocery market is vast with countless products and categories. This helped inform my design decision to make the site search focused but include a menu system that was robust and expandable enough to handle the complexity of the grocery market.