design challenge

Instarecipe: new feature design for Instacart

Role

UX Designer, UX Researcher, UI
Time frame
5 days
the challenge

The design brief was to think of a problem for an existing food app and design a new feature. This was done in 5 days with no prior assets. I conducted rapid user research on friends and family, came up with ideas, then prototyped and designed in Figma. As food and cooking enthusiast, I had a lot of fun with this one.

Defining the Problem

What are we having for dinner tonight?

In life, we rely on a combination of resources just to start cooking. Like watching Netflix, sometimes we spend more time deciding what to watch than enjoying the movie. Below is just the cooking section of my phone 😱:

Do others also have this problem? I couldn't possibly start designing without external validation, so to test my hypothesis I did some rapid research on family and friends with the simple 3 questions:
1. Do you currently use any grocery delivery apps?
2. When you buy stuff on an app or just go grocery shopping in general, do you already know what you’ll be making?
3. Have you ever missed an ingredient when grocery shopping and if so, why?

“I struggle with making recipes so often lol. I kinda buy like the main ingredients I usually use, and I also come up with a few recipes I want to try, but don't plan it entirely set in stone”

“I honestly just google and pray LMAO, I usually am too lazy to scroll further down the Google too 🤣”


“If I'm shopping and I forget a recipe it's because I either tried to remember all ingredients and didn't write it down or save the website..”

“The biggest single pain point is missing an important single ingredient, and having to go todifferent/multiple store in search”

Looking for opportunity during the user's shopping journey

Based on the pain points above, I mapped out the user journey of a person going grocery shopping and focused on where the pain points occur.
HMW reduce the need for memorization, bookmarking webpages, or external apps during the grocery shopping process?
HMW ensure that users have the right supplemental ingredients as well as the right tools to create the dish?
HMW reduce the time and energy spent scrolling online for recipes?

The persona represents the main pain points that came up during my research, those being 1. not knowing what to make 2. forgetting recipes due to not saving webpages 3. forgetting or misreading a recipe because it was too complicated.
To focus on these pain points I came up with the experience pillars of recommend, remind, and reduce to keep the feature focused throughout the process, prioritizing the biggest overall problems. By setting goals to fulfill these three needs, we can stay focused and measure the outcomes.

Ideation and brainstorming

Divergence and convergence of new feature ideas

I wrote down all the ideas that I could think of that would solve our discovered pain points, going broad and fast initially. Then I picked the best/most relevant ones and focused on designing features around those ideas. For this part it was important to focus on speed and rapid ideation instead of perfection.

design process

Sketching out the flow and wireframes

Two flows were created for this project, one was the ability to bookmark recipes and the other the recipe recommender based on the items already in the user's cart.

Check out the low-fidelity user flow in Figma

Sketching out the flow and interactions:

Branding and UI

Branding guidelines

Came up with branding and typography from scratch in a few hours.

UI screens

Different device sizes were considered, including how the top nav bar would work on mobile.
Below are the bookmarked meals feature and the recipe recommender feature.

retro

What are the outcomes of our new feature? Did we meet our goals to recommend, remind, and reduce?

📈 Business

🖥 Product

👩🏻 User