Vegan Guide is a fully-responsive website that helps saving animals lives through sharing knowledge, tips and guiding a vegan shopping experience, featuring a blazing-fast search bar. My role was to create a product, test and design all the UIs related to the project. I collaborated with product development, design and engineering to launch the first phase of the project.

Table of contents


VeganGuide.Me

The problem definition 

Searching for vegan products is tricky, because we don’t have all the resources available in only one place. People usually spend a lot of time to find the right product and information about it. How to keep it all together and make the search easier?

The foundation for this project is based on a research focused in vegans' behavior as well as how to facilitate their searching and shopping experience.

Our first priority was to make it possible for the users to find specific information in a easy and very fast way, for multiple platforms.

The user research

Talking to real people and finding out patterns related to search behavior is the key.

Me and my partner started with surveys and interviews, and we gathered 13 different profiles (of vegans, vegetarians and vegan-friendly people), to talk about vegan searching and shopping experience.

Among all the great feedback we got, here are some interesting comments:

  • “I'd like something that was easy to use and clear. Sometimes I encounter confusion about whether something is actually vegan.”
  • "A comprehensive guide that covers recommendations for vegan food, clothing, and products, would be amazing.”
  • “I would love a feature showing results for all categories and showing the history of the company, product and all certifications.”

We found out through user research that 51% of the users use a laptop of find information about vegan products, while 43% use a smartphone and 6% use tablets or other platforms.

It turned out that a responsive website is the best way to present our vegan guide, with a strong focus on the mobile concept. 

Based on our study, here are some pain points about other vegan guides:

  • Inaccurate/outdated information
  • Difficulty to find information about brands and ingredients
  • Confusion between products not tested on animals versus vegan products
  • Poor UI 
  • Missing interaction with other vegan-friendly people

Understanding people's struggles to find information about vegan products was crucial for us to refine the design solution.

The design solution

A responsive and clean website that will go beyond vegan products and will also include tips and experiences about veganism.

After the interviews and through patterns and research, we determined our persona and our top goals:

  • Unify the shopping experience across mobile and web
  • Develop a powerful search tool, showing organized results through keywords
  • Provide a light and responsive layout, clean and easy to navigate in multiple platforms
  • Direct the user to other respectable vegan websites, giving different alternatives for each subject
  • Facilitate information, gathering and sharing to build a helpful vegan community

With these goals in mind, we used the persona to design storyboards and screens to define the best user flow, testing several steps to find vegan products, in different segments.

Persona

Persona

The design process

The main feature of the vegan guide is the search bar. It isn’t a simple bar, but a powerful tool that is easy to use and very fast to find precise information, powered by full-text search technology. Inspired by the Yoga Glo APP, Yummly and the customer service page on Walmart.com.br, the results are presented in categories, showing a very organized structure.

The user will be able to find its results in a very performant and smooth fashion, making it easier to surface related information and recommendations to explore more about other vegan products and ideas. 

Based in some wireframes, we designed the UI concepts that reflect all that we have been learning from our research and test results: to make it simple on the layout and the language. 

After a few iterations, we decided to start just with the basic categories of vegan products, and later on, we will add more categories, based in future tests and statistics. 

Next, you can find the initial black & white wireframes, and after them the final solution which got implemented on the website.

The low-fidelity wireframes

Home page layout

Home page layout

Article page layout

Article page layout

Mobile version layout

Mobile version layout

The high-fidelity designs

Home page

Home page

Category page

Category page

Article page

Article page

Search results page

Search results page

Mobile Home page

Mobile home page

Working prototype

Check out VeganGuide.Me.

Reflection

The project had many challenges, but the most difficult piece was combining information and datas to provide a great content. Thankfully we were able to reunite articles through the search bar, which made the vegan shopping experience fluid and complete.