The Making of Bountiful
Role: Lead UX/UI Designer, UX Researcher
Duration: May 2022 - September2022
Bountiful was my final project for the Google UX certificate program. The project was to create an app and responsive website for the greater good.
My goal for this project was to create an app to teach people how to cook, how to create healthy eating habits, and provide the tools to create meal plans, save recipes and ingredients, and add ingredients to a shopping cart. I chose this for my project because cooking is such a valuable skill, in that it is a great way to save money, save calories and has the added benefit of bringing friends and families together.
Initial challenges I overcame were how to best create a separate space within the app where users could gain knowledge about cooking and healthy eating habits.
I used Figma as my design tool, Unsplash for the images, a pen and paper for sketches, and the iconify plugin for all the icons.
User Research
I started off my user research by interviewing a handful of people about how they became interested in cooking, at what age did they started cooking and other questions related to cooking and learning how to cook. These interviews helped me gain perspective on the topic and guided me toward the target audience of the app. From the interviews I created two user personas that I would keep in mind while designing the app.
Persona 1:
Persona 2:
Initial Designs
I started the design process by sketching and doing an exercise of "crazy eights," which has become one of my favorite practices for getting those initial designs out of my head.
I followed up the sketches by creating wireframes of the dedicated mobile app with Figma.
With Bountiful I considered my personas and wanted a distinction between the recipes part of the app and the part where you can learn and gain cooking knowledge.
Home Page
Recipe of the Day Page
Recipes Page
From a visual standpoint with Bountiful, I wanted large images with minimal words and plenty of white space.
After investigating the competition, FoodNetwork.com, Tasty, Yummly, I gained some key insights on how I wanted the app to look and feel. I decided to only have a few options shown at a time, which reduces decision fatigue and creates a clean and inviting feeling.
User Findings
Once I completed the low fidelity wireframes, I conducted a usability study to see how well the app connected with users.
Participants for the usability study consisted of five people ranging from 19 - 63 years old, with varying ethnic and geographical backgrounds. Two males and three females.
The participants provided valuable feedback on all areas of the app.
After synthesizing the feedback I created an affinity diagram to help visualize and prioritize all the feedback.
Affinity Diagram
Mock-Ups and High Fidelity Designs
Creating mock-ups is always enjoyable to me, it's where the designs really start to grow and shape into something real.
For the mock-ups I really focused on the feedback from the participants in the usability study, mainly on user confusion with the icons and making adding items to meal plans or saving recipes more visibly apparent.
To clarify the user confusion with the icons, I changed some icons to make them more intuitive for the user and adjusted the icon position within the app. To help with visual clarity of saving recipes and adding items to meal plans, I used a vibrant orange color and created an animation where once a recipe was saved, an bar slides up from the bottom and indicates that a recipe has been saved.
Home Page
Recipes Page
Recipes Page
Recipe of the Day Page
The high-fidelity prototype for Bountiful can be viewed and explored here. Feel free to click through the prototype and let me know what you think.
Responsive Website
For this project also I created an accompanying responsive website for a desktop, tablet and mobile sized screen. Creating responsive websites is a fun challenge, as the differences between a dedicated mobile app and a responsive website are subtle but important.
Tablet Home Page
Tablet Recipe of the Day Page
Desktop Home Page
Desktop Tip of the Day Page
Mobile Home Page
Mobile Tips Page
For accessibility I added a speaker icon next to the step-by-step instructions for the instructions to be read aloud if clicked. I also added an accessibility tab at the bottom of the webpages for easy access.
Accessibility
Sticker Sheet
Conclusion
Takeaways:
This project was especially fun and personal for me, as I cook quite and bit and enjoy eating and learning more about cooking.
With Bountiful I kept the color palette simple, yet visible and welcoming. I realized that the images of the food are very colorful in themselves. So I chose a color that coalesced with the images and provided a lightness and an association with being healthy.
Creating the responsive website with different screen sizes was a rewarding challenge as it taught me how best to optimize screen space and what to prioritize when changing screen sizes.
If you liked this project and want to discuss it further or just want to chat email me at alexconiloguedesign@gmail.com
© 2024 by Alex Conilogue.