OVERVIEW
Deelish is an app that will help users inventory recipes, cook healthy meals and notify users when ingredients are expiring. Deelish wants a user-centric approach to their app, adding features and flows that make it delightful for people to use.
Timeline: 80 Hours over 6 weeks
Role: Lead UX/UI Designer
Tools: Sketch, Invision, Photoshop, InDesign, Illustrator
Deliverables: Mobile Prototype
RESEARCH
Competitor Analysis
I conducted a competitive analysis of similar recipe apps and tools to identify competitors and their strength & weaknesses. This helps me to understand Deelish's opportunity in the market.
Takeaways
Current apps do not have a feature to effectively manage pantry.
Recipe selection process works well in most apps, but meal planning is limited.
Interviews
I crafted an interview guide to question participants about their meal planning experiences. I questioned 4 potential users from a target demographic of age 35-50 to observe user needs, desires and pain points. I then summarized my findings into 4 key takeaways.
Problem Statement
This group finds information regarding cooking through recipes found on the web, magazines and restaurants. They feel that cooking for the family is important to gain control over nutrition and they like that it brings everyone together. They don’t currently have a single resource for managing their pantry and discovering new recipes.
DEFINE
Empathy Map
I transcribed the interviews and constructed an empathy map to organize observations by: feelings, family, ingredients, time, process. The purpose is to synthesize my findings from the interviews. From the empathy map, I organized observations into shared patterns and behaviors to identify developed insights and needs.
Needs
Urban parents need to fill their fridge with key ingredients that they can cook on the fly.
They need inspiration for cooking meals with the ingredients they have readily available.
Insights
Users currently do not have a tool to keep track of their pantry.
Users prefer not to be dependent on reading recipes while cooking.
Users look at cooking as family time.
Persona
Meet Laura, our persona for Deelish. Personas help humanize design by profiling a target audience member to design for. Laura is based on interview observations and empathy map insights. Moving forward, I based my design decisions on Laura's profile.
IDEATE
POV Statements and HMW Questions
This step helps me transition from the problem to the solution. In the POV statement, Laura’s needs are a result of her insights. I then put myself in Deelish's perspective by asking how might we help Laura from her point of view?
Individual Brainstorming
I brainstormed as many solutions as I could in 3-minute sprints for each HMW question.
Priority Features
Recipes need to leverage functionality of existing apps which work well.
Meal planning needs to integrate into recipe selection process.
Pantry needs to monitor inventory of ingredients in the user’s fridge.
User Flow
With priority features in mind, I took a deep dive and mapped out Laura’s path. The user flow helps me understand user decision-making, barriers and context to achieve a task.
User Task Testing
With solutions in place, I documented how a user would complete two tasks using a MVP. Observations helped me understand how the user interacts with the system to achieve a goal.
Recommendations
Add more descriptive headers for recipes and expiration notices.
Add real content and photos to provide clarity on recipes.
Remove progress bars in pantry and replace with numeric content.
Insights
Users were unclear on pantry notification.
Users were unclear on where to find recipes.
Users did not understand progress bar in pantry
Mid-Fidelity Wireframes
Using observations from the user task test, I applied recommendations to mid-fidelity wireframes.
DESIGN
Brand Guide
To craft Deelish's brand identity, I first defined the core characteristics of the company to be represented:
Contemporary • Minimal • Fresh
I then created a Pinterest moodboard to gather visual references based on these characteristics. With inspiration for Deelish’s design direction, I created a logo, chose brand colors and selected typography
UI Kit
To expand the brand guide, I created a UI kit that featured user interface elements to house all branded and designed interactive elements. This helps keep me consistent. To develop my wireframes further, I could easily drag and drop elements from this document.
High-Fidelity Wireframes
I populated the mid-fidelity wireframes with imagery, brand styles, and UI elements to create high-fidelity wireframes, a highly developed mock-up that I can present to the client.
REFLECTION
Details matter. Despite referencing my user flow and feature inventory, I found myself creating too many options. As a result I lost site of the primary function of creating an app that could monitor ingredient inventory and provide exciting recipe options with what was available in the user’s fridge.
Keep it simple. Once I simplified the user flow and used photography to help tell the story, a happy user path was more easily discovered.
Next steps:
Add real content. Test and iterate with real content to make further design tweaks
Add more features. Explore smart fridge integration and grocery store receipt tracker.