Table of contents
- Table of contents
- The problem definition
- The user research
- The design solution
- The design process
- Working prototype
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.
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
Article page layout
Mobile version layout
The high-fidelity designs
Search results page
Mobile Home page
Check out VeganGuide.Me.
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.