Maintaining a healthy vegan diet can present several challenges, one of which is finding nutritious alternatives to animal-derived products. Commercially available vegan options are often highly processed and nutritionally lacking, leading many individuals to prefer homemade alternatives. This requires access to specific ingredients, including vegan-certified bacterial starter cultures, which can be difficult to source. Additionally, it may be a challenge to find vegan versions of necessary nutritional supplements, such as probiotics.
Recognizing the difficulty of finding and purchasing these products, I came up with the idea for the "FUNctional Foods" e-commerce website to address these challenges and make it easier for individuals to access the ingredients and supplements they need to maintain a healthy vegan diet.
The "FUNctional Foods" e-commerce website was my second project in the Google UX design professional certificate program, and my first experience using Adobe XD as a design tool. Despite a challenging start, I am proud to say that I was able to quickly become proficient in Adobe XD within a week, and this was a valuable and rewarding experience for me. The platform provides the flexibility and features that I needed to deliver my ideas and designs for the "Functional Foods" e-commerce website, which was a great tool to learn and showcase my skills.
Recognizing the difficulty of finding and purchasing these products, I came up with the idea for the "FUNctional Foods" e-commerce website to address these challenges and make it easier for individuals to access the ingredients and supplements they need to maintain a healthy vegan diet.
The "FUNctional Foods" e-commerce website was my second project in the Google UX design professional certificate program, and my first experience using Adobe XD as a design tool. Despite a challenging start, I am proud to say that I was able to quickly become proficient in Adobe XD within a week, and this was a valuable and rewarding experience for me. The platform provides the flexibility and features that I needed to deliver my ideas and designs for the "Functional Foods" e-commerce website, which was a great tool to learn and showcase my skills.
PROJECT OVERVIEW
The Product:
The "FUNctional Foods" responsive website was designed with a singular focus: to enhance the shopping experience for individuals on a vegan diet who rely on microbial-based products for food-making and health maintenance
Project Duration:
October 2022 to November 2022
Main problems:
Maintaining a healthy vegan diet can be challenging in several ways:
1) Commercially available vegan alternatives of animal-derived products are often ultra-processed and unhealthy from a nutritional point of view, so people prefer to craft some of those foods at home. This, in turn, requires specific components including vegan-certified bacterial starter cultures
2) It could be difficult to find a vegan version of some necessary nutritional supplements, including probiotics
Finding and purchasing vegan microbial products is an uneasy and time-consuming task. To address this issue I came up with the idea of the "FUNctional Foods" e-commerce website
1) Commercially available vegan alternatives of animal-derived products are often ultra-processed and unhealthy from a nutritional point of view, so people prefer to craft some of those foods at home. This, in turn, requires specific components including vegan-certified bacterial starter cultures
2) It could be difficult to find a vegan version of some necessary nutritional supplements, including probiotics
Finding and purchasing vegan microbial products is an uneasy and time-consuming task. To address this issue I came up with the idea of the "FUNctional Foods" e-commerce website
The goal:
Create a product that will provide a seamless shopping experience for vegans looking for microbial-based products for food or health application
My role and responsibilities:
In this project, I served as a UX/UI designer and was responsible for the design and development of the "FUNctional Foods" website, from the initial concept to final delivery. My duties included conducting a literature review, creating paper and digital wireframes, developing low- and high-fidelity prototypes, conducting usability studies, ensuring accessibility compliance, and iterating on designs to ensure responsive design
UNDERSTANDING THE USER
User Research summary:
Secondary research:
- As veganism continues to gain popularity, consumers are becoming increasingly conscious of the nutritional value of their food, paying close attention to the functionality of their foods and food supplements 1, 2, 3
- Nutritional shortfalls commonly associated with a vegan diet can be overcome through the consumption of certain microbial-based products, such as nutritional yeasts and their derivatives, and microalgae and their derivatives 2, 3
- The lack of regulations for processing and labeling vegan probiotic products makes it difficult to determine if the probiotic is truly vegan without carefully examining the table of ingredients 1
Users interviews:
- A large percentage of self-identified vegans regularly consume microbial-based vegan products, such as probiotics and microbial proteins, in the form of supplements
- Many of the interviewed users reported utilizing microbial starter cultures for the creation of vegan fermented foods and beverages
- A significant portion of the interviewed users indicated that they typically search for and purchase microbial-based products online
User Research: pain points
- When shopping for vegan probiotics online, users often find that their options are often limited to a single brand
- Online stores that offer starter cultures may not have a specialized selection of cultures for vegan foods
- Users searching for vegan food supplements that enhance the nutritional value of plant-based foods may come across products derived from soy or peas, which may not be suitable for individuals with allergies
Persona:
Competitive audit results
Strengths:
- A wide variety of microbial-based options is available at IFF
- Navigation is easy to use and aesthetically pleasing on Fermentation Revolution's platform
- A diverse selection of microbial-based nutritional supplements can be found on iHerb and 12 Baskets
- A wide variety of microbial-based options is available at IFF
- Navigation is easy to use and aesthetically pleasing on Fermentation Revolution's platform
- A diverse selection of microbial-based nutritional supplements can be found on iHerb and 12 Baskets
Weaknesses and opportunities:
- Currently, none of the evaluated services specialize in vegan products or offer proper filters to search for them
- While IFF allows users to search for microbial-based products for both food and health applications, they do not sell to individual customers, only for B2B
- Currently, none of the evaluated services specialize in vegan products or offer proper filters to search for them
- While IFF allows users to search for microbial-based products for both food and health applications, they do not sell to individual customers, only for B2B
- Complex navigation and difficulties in finding a specific group of products were noted on IFF and iHerb platforms
Key Competitors
STARTING THE RESPONSIVE DESIGN
Sitemap
In order to ensure cohesion and consistency throughout my design of the "FUNctional Foods" website, I began by creating a sitemap to serve as a guide for its organization and structure
Paper wireframes
In the design process of the key screens of the website, multiple versions were created in order to identify the optimal combination of design elements that best cater to the needs of potential users
Digital wireframes
To ensure a polished and user-centric design for the website, the initial paper wireframes were refined and then translated into digital wireframes for both desktop and mobile screen sizes. The main focus during this process was to address common user pain points by implementing a clear design that groups products effectively, making navigation more intuitive and effortless
Low-fidelity prototype
Digital wireframes were used to create the initial low-fidelity prototype for the further usability study.
Tested user flow consisted of:
1) Finding starter cultures for plant-based foods
2) Finding vegan probiotic cultures
3) Finding the cheapest probiotic
4) Adding it to the cart and check-out
1) Finding starter cultures for plant-based foods
2) Finding vegan probiotic cultures
3) Finding the cheapest probiotic
4) Adding it to the cart and check-out
Usability study: findings
To gain valuable insights on the usability of the website, a low-fidelity prototype was subjected to a moderated usability study, which was conducted remotely with 5 participants over a period of 30-40 minutes. The study revealed several key findings:
- Users expressed a need for a dropdown menu with product groups, accessible from the top navigation bar, in order to improve the efficiency of navigation
- Most users take the price per package as the sole factor in selecting the cheapest probiotic product, without considering that products may contain a different number of capsules per pack and different quantities of the active ingredient in the capsule. Thus, a more accurate way of sorting the price is required to help users select the cheapest product
- There is a need for more accurate way of sorting the price to be able to select the cheapest product
REFINING THE RESPONSIVE DESIGN
Mockups
With the insights gained from the usability study, the low-fidelity prototype was carefully refined to address key issues and improve the overall user experience. The resulting screens were then used to create mockups of the product, which served as a foundation for the final website design. The process of incorporating feedback from real users into the design and development of the website, helped ensure that the final product was tailored to meet their needs, resulting in an intuitive, user-friendly design
High-fidelity prototype
In order to achieve a high level of precision and realism in the website design, mockup screens were used to create a high-fidelity prototype. This prototype was then put to the test in a second round of usability studies, to further validate the design and identify any remaining issues. By utilizing a multi-round usability testing approach, I was able to gather valuable feedback from users and refine the prototype for optimal usability and user satisfaction
Impact:
- "I'm delighted to have found a product that caters to my specific needs as a vegan. Too often, I have felt excluded when searching for vegan foods and supplements"
- "I am thrilled to have a product that eliminates the need for me to meticulously review the list of ingredients for each probiotic product to ensure that it is vegan-friendly"
What I’ve learned:
- Even something as seemingly simple as dietary preferences can contribute to feelings of exclusion in society
- Proper information architecture is vital for effective user interaction with an interface. Even if a store has a diverse inventory, if the location of a specific product is not intuitive to the user, it can greatly hinder their ability to find and purchase what they are looking for
Next steps:
To gain a deeper understanding of the user experience and identify any remaining pain points, I will conduct another round of usability studies. This will provide valuable insights that will help me to continue refining the design and ensure that the final product is optimized for usability and user satisfaction
