top of page

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:


 

Frame 1.jpg

Persona 2:

Frame 2.jpg

Initial Designs

PXL_20220822_221719545.jpg

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

Home Page.jpg

Recipe of the Day Page

Recipe page 1_edited.jpg

Recipes Page

Recipes Page.jpg

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.

2022-09-29 (2).png

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

Home Hi-Fi_edited.jpg

Recipes Page

Recipes Page

Recipes Page Hi-Fi_edited.jpg

Recipe of the Day Page

Recipe of the Day page High-Fi_edited.jpg

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

Tablet Recipe of the Day PAge_edited.jpg
Tablet Home Page.jpg

Desktop Home Page

Home Page Mobile.jpg
Tips Page Mobile.jpg

Desktop Tip of the Day Page

Home Page Hi-Fi.jpg
Tip of the Day Page Hi-Fi.jpg

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.jpg

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

  • Instagram
  • Behance
  • Linkedin
  • Dribbble

© 2024 by Alex Conilogue. 

bottom of page