Kelli Kreiter





A recipe driven approach to online grocery shopping. 



An investor approaches  who believes that there is a big market out there for online grocery shopping. The current working title for the project is 'Instashop'. 


To create and execute a thorough research study that will establish empathy  and an understanding of what users are looking for in an online grocery experience.   |  From the research, develop a POV that will guide the design of the product.  |  Design and build the interaction design using deliverables such as a site map, user flows, and storyboards.   |  Establish a clear visual design using deliverables such as a mood board and style guide.  |  Create a working prototype that guides the user through a given task. 


Two methods of research were implemented:

  1.  Interviews - In person conversations focusing on primary qualitative data.
  2.  Questionnaires - Written questions delivered to individuals focusing on primary quantitative data.

The goal was to determine whether the online grocery market does exist, who will be using the product, how they would be using it, why they would ultimately choose to shop online vs. a brick and mortar store, and to gain insight on how to ease the process of grocery shopping for users. 


From the research, two types of people emerged. Those that planned ahead and those that didn't. The people that didn't plan ahead found online grocery shopping to take more time overall than going to the store because they would have to take into account the lead time for shipping. However, those who planned ahead were able to reduce the active shopping time by using an online platform, having more down time to spend as they wished. 


I chose to focus on those who would actually use online grocery shopping, which were those who planned ahead. Working from the common traits, needs, and frustrations of the planners, the persona of Margie took form. 

Instashop: Persona

To empathize with Margie even more, I used a storyboard as tool. It depicts a common situation where Instashop would solve her fears and meet her needs. The storyboard and the persona are two tools that guided the design as I moved forward. 

Instashop: Storyboard


A card sort was performed to understand how people categorize food. For the most part, all people who participated, organized the food similarly to how you would find it in a brick and mortar store.  And so the original site map was structured to reflect the process of searching for individual items. 


Quickly the site map became overwhelmingly crowded  with all of the items and paths to find them. If the simplified site map felt busy, there is no doubt the product would also lack clarity. And it was true. Based off of user feedback, the structure was generic and hard to navigate. So, back to the research.

Margie the Meal Prepper inspired the change to bring the feature of recipes to the forefront. The idea was to save the most time and shop with the least effort. For Margie, the effort was in the prep; choosing recipes, figuring out what ingredients she needed, calculating the fractions based off of how many meals she wanted, and THEN finally start shopping. So Margie, and all Margie's out there, here is your solution. Instashop; recipes to your doorstep. 

Instashop: User Flow


Some of the words that drove the visual design include: ingredients, raw, organic, fresh, recipes, cooking. Using these as inspiration, the visual design took form including the color palette, typography, image style, and logo. 

Instashop: Style Guide


Below is an interactive prototype that was built using Sketch and Marvel.

Your task: You are cooking dinner for eight people this weekend. Someone suggests a savory chicken dish. You check your pantry and all you have is rosemary and some salt + pepper, choose a recipe and add the ingredients you need to your cart. 



Here is what I learned, and how the solution addresses the outstanding design goals.