What is Basil & Barley?
Basil & Barley is a recipes responsive web app aimed at home cooks looking for easy to follow recipes. There are many recipe apps on the market but it can be difficult to use them during the cooking process itself. My goal is to create an app that is easy to use while cooking. Whether they use their phone, tablet or bring their laptop into the kitchen home cooks should be able utilize the app with ease while cooking.
Who is the user?
After a round of user interviews, I used the insights that I gained to create three user personas representing users of various cooking skill levels and motivations. These personas helped guide my design decisions by having the wants and needs of users in mind.
User Flow
Usability Testing
The goal of this testing was to see if users can easily navigate the app on mobile devices and access key features to find and save recipes and ingredients.
Using an Invision prototype made with low fidelity wireframes participants completed four tasks:
Using an Invision prototype made with low fidelity wireframes participants completed four tasks:
• Find a recipe and save it to your recipe list.
• Add ingredients from the recipe you found to your shopping list.
• Access the recipe you saved from your recipe list.
• View the ingredients you saved on your shopping list.
• Add ingredients from the recipe you found to your shopping list.
• Access the recipe you saved from your recipe list.
• View the ingredients you saved on your shopping list.
Issues
• Save recipe to list and save ingredients to list buttons should be more obvious.
• Navigation to the user’s lists should be more clear.
• Users need clarification on needing to be logged into an account to access lists.
• Navigation to the user’s lists should be more clear.
• Users need clarification on needing to be logged into an account to access lists.
Wireframes
Moodboard
My mood board is based off the keywords, Fresh, Friendly, and Classy. The colors are bright yet slightly muted. The visual direction has a fresh morning feel which is clean and classy while still being friendly and approachable.
Style Guide
Based on the direction of my mood board I established the visual design for this project, keeping in mind the same keywords from the moodboard.
A/B Testing
I conducted a preference test comparing two versions of the layout of the Category Results screen. The results of the test showed that option 1 was the preferred layout for 91% of participants.
Responsive Design
Final Designs
