01 The Challenge
A Desktop Grocery List and Shopping Experience
As part of a design challenge, I was presented with a project brief that provided guidelines for the creation of a desktop-first application that would assist users in creating and executing a grocery list. 

Primary required workflows and features included:

1. Making a list: 
●     Recipe sourcing and inspiration 
●     Ingredients I need / Ingredients I already have 
●     Previous lists 
●     Sales and coupons  
 
2. Executing a list: 
●     Sharing a list between users 
●     Backup plan if something is out of stock 
●     Managing what’s in your cart 
●     Sales and coupons  

Based on this information and a few other guidelines, I was told to design the experience up to wireframes. 
How Do You Grocery Shop with Your Desktop?
The users I interviewed used a wide variety of methods to create shopping lists: pen and paper, phone note-taking apps, photographs of notepad documents, and voice user interfaces. But what if you start your list-making process from your desktop?  I have to admit I was curious about a desktop-first process. What possible advantages could there be? 
I did some research, and the answer turned out to be "quite a lot."
02 Competitive Analysis
 
I explored several different desktop grocery shopping applications. I also looked up the best mobile grocery list apps, knowing that the actual list would eventually need to make its way onto a mobile screen so users had something to take with them to the grocery store.
Summary of findings:
●     Safeway App: While it's a great money-saving tool for both desktop and mobile, it becomes very tedious to browse, especially on a mobile screen. 
●     Out of Milk: This mobile app features a great user interface, a list which could be shared and viewed/edited by multiple users, and a barcode scanning feature that makes it easy to track the items you currently have at home. It only really lacked a money saving/coupon feature and a desktop-focused approach. 
●     Wikibuy: A website that is also a browser plug-in. I hypothesized that a lightweight browser plug-in would probably be the best way to create a grocery list, no matter where you navigated to. I studied how Wikibuy integrated into shopping experiences to see what I could learn.
●     Allrecipes.com: I remembered that Allrecipes allowed users to add ingredients directly from recipes to an account grocery list. I discovered it also had a very slick price comparison feature that displayed what items were on sale at different grocery stores. I knew I could integrate this feature into my own experience but go one step further to provide a total grocery list price so users could instantly decide which store to go to.  
03 User Interviews
I performed a series of user interviews with users aged 25-35, of various family sizes, and various shopping habits.
Questions focused on:
●     Pain points users encountered while creating grocery lists, both analog and digital.
●     Allowing users to recall specific grocery shopping experiences to discern what features were a priority for my MVP. 
●     Exploring the habits users have when they have to share lists with others.

Interview Results
●     Many users expressed a preference for a larger desktop screen with regard to grocery shopping or browsing sales/coupons.
●     Most users still often use paper and pen lists, but all had experienced forgetting or losing their list. 
●     All users were interested in saving money, of course, but most felt paper coupons were too tedious to use, or that digital coupons took too long to sort through.
●     All users expressed the desire to be more health-conscious but never looked up items ahead of time before adding them to a grocery list. 

Conclusions

●     Allow users to input items from any website they are browsing.
●     Sync lists across all devices and with other users who have been given access.
●     Streamline the coupon experience so users can discern the best deals and overall cost as easily as possible. 
●     Provide easy access to nutritional information and allow users to compare possible substitutions with ease.

Click down to below to see the final thoughts collected in one document, or each script individually.
03 Persona
Using my user interview results, I began to write user and job stories. I also organized my results into similar pain points and motivations. Synthesizing all of this data into a user persona allowed me to better visualize what the eventual experience may look like. 
Cassie
Cassie is a lifelong cook who frequents food blogs and recipe websites. She enjoys shopping and preparing meals but doesn't have as much time because of her job and child. Saving money is always a priority, but she doesn't have the time to cut coupons. She also needs to be able to easily hand off her list to her SO, should work prevent her from getting to the store before dinner.
04 Information Architecture

The first step I took was to imagine a scenario Cassie would find herself in, such as wanting to try out a recipe from one of her favorite websites, and mapping it out as a taskflow via Lucidchart. Once this was complete, I began to map out other tasks such as sharing a list or viewing an individual item. I then combined all of these small workflows together to form my application structure/sitemap.
I relied heavily on my competitive research during this phase, analyzing how other applications handled the flow of tasks and features which were similar to my own goals. 
Summary
The overall structure features two main tabs, a Grocery List of items to buy, and a Pantry List of items currently in the user's kitchen. Nearly all functionality is accessible from the Home Grocery List tab.
The majority of experiences will end with the user switching over to their mobile phone Grocery app, which features a synced copy of their desktop list they can easily check off as they physically shop at the store.
07 Wireframes

Sketches
I began my wireframe process by grabbing some paper and a Sharpie and generating sketches. If I felt comfortable with a sketch iteration, I began to generate it on Balsamiq, a wireframing tool. Sketching, wireframing, and information architecture blended together as I revised and explored different task flows and interactive design. 
Balsamiq Wireframes
I created my wireframes using Balsamiq as it allows me to easily reuse assets and share my work with others for immediate feedback. 
I wireframed out each of the functions outlined in my above sitemap, and the initial screens users will need to visit in order to download the browser plug-in and mobile application.

08 The Solution

My user research revealed there are a number of pain points around creating grocery lists. Physical lists can be forgotten, digital lists can lack needed interactivity, and shopping apps can be cumbersome to browse for sales, let alone to serve as actual lists. 
Taking advantage of the desktop's large screen allows for list creation as users browse recipe or other websites, and executing the list from a mobile phone alleviates several of the aforementioned pain points. 
My approach
I used an equal amount of competitive analysis and user interviews to uncover where the desktop could excel as a tool for creating grocery lists. I knew that an ideal situation would be one that made adding items, sharing lists, and comparing prices and nutritional information as easy as possible. I synthesized the features of a number of other applications into an experience that will save users time and money and reduce cognitive load.

Next to do:
●     Establish feedback loop for rough wireframes.
●     Explore stretch features such as: sorting items by location in store, third-party delivery UI, scanning items as they are discarded to automatically remove them from Pantry List and add to Grocery List, and possible plug-in features that detect ingredients on webpages and place 'Add to Cart' buttons nearby.

Thanks for looking!

 

You may also like

Back to Top