Vegan food market and efficiency of online shopping
Growth of vegan foods industry
The global vegan food market size was USD 33.14 billion in 2023 and is projected to grow from USD 37.37 billion in 2024 to USD 103.00 billion by 2032 at a CAGR of 13.51% during the forecast period.
The problem
As the vegan foods market is growing rapidly along with the need of time-saving solutions it's necessary to provide it also for people with more unique type of dietary prefferences.
Online shopping experience
I analysed 3 apps websites focusing on range and presentation of products in terms of distinctions of it fitting to dietary preferences and category design. I also evaluated the basic features in terms if they are designed in a way that would be helpful in saving users time. I evaluated mobile experience of this apps. The companies I audited were Avocado Vegan Shop, Instacart and and Thrive Market.
In-depth interviews
To better understand the needs and challenges faced by potential users, I conducted a 4 of in-depth interviews. Here are some key insights gathered from these discussions:
Vegan Groceries app users
Based on previous research I created two personas for this project. Even though their lifestyles are completely different their core needs overlap - time saving solution for vegan diet groceries.
Information design to make an app intuitive
To make an app as intuitive and easy to navigate as possible I established information architecture of my design.
How can users save their time?
To outline all the necessary functionality I created flow diagram of the main tasks the user can do. One of the flows is shown below - it's list creation feature flow that was created to help users save their time while doing shopping online . Fail states were also created but are not shown due to space constraints.
The design begins
Once I broaden my knowledge with reserach I started to design first screens. First step of the design process was creating the low fidelity wireframes of app. Apart from creating basic ecommerce app screens I wanted to develop list creation feature wireframes which was my solution to time saving problems. Those low-fidelity screens are included in this case study.
Smooth and clean user interface experience
When designing visual interfaces for this app my core focus was to make it usable, readable and simple. I wanted to make it easy for users to get familiar with the content and find easily what they are looking for. Inspired by official V-Label sign used to mark vegan and vegetarian foods I went with green for my CTA elements and used lighter shades to give accent to other important elements. I wanted the user interface to be simple and clean, so for background I decided to go with white and for good contrast I picked dark shades of grey for texts. This use of colors made the design simple and scanable. For text I went with simple sans-serif font Plus Jakarta Sans. As I didn't want to distract the users from the most crucial informations on the app most visual elements used in the design were photographs of sold products, illustrations showing categories and progress in processes.
Creation of design system for an ecommerce app
Final design solutions for Veganic e-commerce app
Making the app alive with interactivity
I connected my high fidelity designs into clickable prototype. That will allow me to test the website on a first group of users to see if my solution is usable and user friendly. Created prototype includes creating a new shopping list process.
To enhance the user experience and fluidity of an app I designed microinteractions that make whole experience more enjoyable and easier to digest by the users.
Check out the prototype yourself!
Is the shopping list feature intuitive and usable?
Study Goals
Study results
Prototype Update Concept
Due to time constraints, I was unable to run a second usability study on the updated prototype. However, I made updates by adding labels next to the icons related to the shopping list feature, as the concept is not widely known. I also decided to change the order of information in the list creation process, starting with the name and optional description, and ending with a picture that aligns with the user-created lists. To make the process more understandable, I included additional text guidance at each step.
Below I included propositions of new designs for some screens. However, I think it would be needed to include some onboarding tutorial on how this feature works, what users can do and what possibilities the shopping list feature give them.
Before
There was an floating icon button that was needed to be used to create a new list, which was confusing to users as it's not a common action for such a button.
After
I changed the floating icon button to the button with label that indicates consequences of taken action. That way od button design give users more guidance into unknown action.
Before
To create a list users were given a task of adding a photo first which made them quite confused about what it reffers to. Overall users were taking quite some time to finish this part of a process probably because it didn't feel familiar to them.
After
To make this section easier to navigate I switched the order that users are given to insert particular informations about the list. First they insert name and optional description and later on they pick photo based o list topic which I also set as optional part of the creation. I also decided to insert more explanatory text to give users more guidance about what they need to do to finish the task.
Project Overview
While working on this project, I conducted desk research to gain insights into the vegan food groceries industry. I performed an extensive competitive audit of other e-commerce apps and websites to evaluate how companies present their products, categorize items, and what features they offer to users. To identify the challenges people face while shopping for groceries online, I conducted in-depth interviews. Based on this research, I created user personas and began designing. I started by creating low-fidelity wireframes, focusing on a shopping list feature that I proposed as a solution for saving users time. While creating the high-fidelity design, I aimed to make the app as simple and readable as possible, with a strong emphasis on the products themselves, complemented by a design system. I turned my UI designs into a clickable prototype to test with potential users. I then conducted a usability study, and based on the findings, I revised and redesigned certain parts of the app.
Metrics
As the app was created for portfolio purposes only, I won’t have the opportunity to measure the success of my design solutions. Nevertheless, if it were developed as a real product, I would focus on the following metrics:
Purchase Conversion Rate for Shopping List Feature – This metric would show the percentage of users who use the shopping list feature and complete a successful purchase compared to the total number of users who use the feature. This data would help assess how effective the feature is in driving conversions.
Time to Purchase (Shopping List Feature vs. Manual Shopping) – I would use this metric to compare the time it takes for users to complete a purchase using the shopping list feature versus manually searching and adding products to the cart. It would help determine if the feature effectively reduces the time needed to complete the shopping process, as intended during the design phase.
Funnel Drop-off Rate Analysis – By gaining insights into the critical parts of the user flow where the highest percentage of users drop off, this metric would help identify pain points or issues that may need improvement.
My learnings
During this project, I had the opportunity to understand how much work is required to design an app. I learned that it's essential to strike the right balance between a creative visual style and ease of use, ensuring the design remains clear and user-friendly, without overwhelming users with unnecessary visual elements. I also realized that introducing new functionalities to solve user problems should not take priority over designing the core aspects of an e-commerce product. For instance, a list creation feature can be a valuable addition, but it won't be useful if users struggle to find the products they need or abandon the checkout process due to its complexity. Lastly, I discovered that the solution a design proposes might not always align with users' needs. Testing and evaluating the design with real users is critical to ensure the product meets both business and functional goals.
