Plantiful is an organization focused on helping people learn how to cook healthy meal at home. The organization needs a tool that helps people learn cooking by combining the best elements of all the cooking. Plantiful’s primary target users include college students and adults who are concerned with eating out and now knowing what’s in their food and want learn more about food nutrition and cooking.
The Role
UX designer leading the app and responsive website design from conception to delivery
UX designer leading the app and responsive website design from conception to delivery
Brand Identity | User Research | Wireframes & Prototype | Usability Testing | Visual Design
Project for Google UX Design Professional Certificate
The Design Process
Empathize & Define | The User
Interviews were conducted and empathy maps were created to understand the users and their needs. Through research, a primary user group was identified: working adults who want to cook healthy meals at home for their young families but feel overwhelmed by current outdated options. Feedback from the research clearly indicated that users are open and willing to learn basic and advanced cooking skills if they have access to an easy-to-use tool to guide them.
User Personas
User Journey Map
Goal
Learn how to cook from scratch
Learn how to cook from scratch
Competitive Audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with Plantiful app.
Goal
Identity and understand the effectiveness of products and features currently in market for healthy cooking.
Identity and understand the effectiveness of products and features currently in market for healthy cooking.
Ideation & Prototype | Ideat
Paper Wireframes
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on detailed step by step instructions and grocery list.
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on detailed step by step instructions and grocery list.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Plantiful app. These designs focused on delivering personalized guidance to users to help hone their cooking skills.
After ideating and drafting some paper wireframes, I created the initial designs for the Plantiful app. These designs focused on delivering personalized guidance to users to help hone their cooking skills.
Ideation & Prototype | Prototype
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was selecting a recipe, follow all steps, and add ingredients to shopping list.
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was selecting a recipe, follow all steps, and add ingredients to shopping list.
Ideation & Prototype | The Design
Visual Elements
Test | Usability Study
Usability Study Parameters
Usability Study Findings
After creating low-fidelity wireframes, I conducted some usability tests to validate my designs. I get to observe users’ frustrations and discover which area of design works and which need improvements. Here are some feedbacks received
After creating low-fidelity wireframes, I conducted some usability tests to validate my designs. I get to observe users’ frustrations and discover which area of design works and which need improvements. Here are some feedbacks received
Test | High-Fidelity Design
Based on the insights from the usability studies, we added detailed onboarding questions about user preferences and added “Just For You” section on the home screen based on user’s answers.
User needed intuitive way to shop for ingredients, we added “Grocery List” at the main navigation to provide clear indication while shopping at the store. Also, added option to shop ingredients online.
Additional design changes included adding detailed step by step instructions and including link to every step so they can follow it on video by pausing or forwarding video at any time during cooking process.
High-Fidelity Design | Final Mockups
Responsive Design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Plantiful sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
With the app designs completed, I started work on designing the responsive website. I used the Plantiful sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Sitemap Responsive Design Mockups
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Next Steps
Conduct another round of usability study to authenticate wether the pain points users experienced have been successfully resolved.
Provide users tools so they can customized meal plans and save them for future use.
Conduct more user research down the road to decide any new areas of need.
Conduct more user research down the road to decide any new areas of need.
