VeganGuide.Me project

Description

VeganGuide.Me is a fully-responsive website designed to help saving animals lives through sharing knowledge, tips and guiding your vegan shopping experience, featuring a blazing-fast search bar.

Related work

• Check out veganguide.me.
• Check out VeganGuide.Me logo.

The problem definition

To build a contemporary vegan guide, offering a convenient and easy way to find information about vegan products, with the promise of simplicity.

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

Besides vegan products, VeganGuide.Me will go beyound that and will also include tips and experiences about veganism.

The User Research

In order to define the best way to present a vegan guide, me and my partner interviewed different profiles of vegans, vegetarians and vegan-friendly people, so that we could study our solutions for the vegan guide.

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

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

We found out through user research that 51% of the users use a laptop of find information about vegan products, 43% use a smartphone and 6% use tablets and 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 surveys and interviews, here are the pain points about other vegan guides:

• Inaccurate information
• Difficulty to find information about brands and ingredients
• Outdated information and confusion between products not tested on animals versus vegan products
• Poor UI
• Missing interaction with others vegan people

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

The Design Solution

Concepts to solve the problem:

• A powerful search tool, showing organized results through keywords
• 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
• Social medias profiles included, helping to share information and to build a helpful vegan community

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 simple to use and very fast to find precise information. 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 the information needed 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.

On the image gallery below you can find the initial black & white wireframes, and the final solution which got implemented on the website.

The first wireframes

Homepage layout

Category page layout - Same design for all categories

Article page layout

Mobile version layout