There are a number of online grocery shopping platfoms on the market, including Instacart, Peapod, Jet, Thrive, and Amazon, which aim to provide busy people with a time-saving, cost-effective way to purchase the groceries they want. However, one of the challenges of online grocery shopping is that it takes away customers’ ability to select their own fresh produce, and it seems that most online grocery services do not adequately facilitate easy shopping experiences for people with particular dietary needs. For example, customers with gluten allergies, vegan customers, paleo customers, and customers who only purchase local organic produce all seem to experience challenges when attempting to fulfill their grocery needs online.
This project seeks to address these identified challenges by offering a new grocery shopping experience known as Instashop. Through a ten-week, user research-informed design process, I identified target audiences, defined project priorities, and proposed clear information architecture and interaction design to support customers’ goals to order groceries. I also proposed branding and visual design guidelines, and designed the user interface for the new product.
Identify potential target users for a new online grocery shopping product; learn their motivations, needs, and attitudes about grocery shopping
Identify challenges and frustrations that people encounter in grocery shopping, both in person and online, as well as opportunity areas for improving the shopping experience
Design a research-informed solution that addresses people's specific needs and goals for a satisfactory grocery shopping experience, with a focus on clear interaction design and user interface design
Identify and design the desired branding for the new product to enhance the user experience
Who buys groceries online, and why?
Who is willing to buy groceries online, but not yet doing so? What are some of the reasons they do not buy groceries online?
What do people find frustrating about buying groceries in-person? What do people find frustrating about buying groceries online?
What do people find enjoyable about buying groceries in-person? What do people find enjoyable about buying groceries online?
Which companies are already in the online grocery shopping market? What do they offer, and where do they fall short?
How might a new product/service uniquely, successfully meet people's needs, goals, and desires for grocery shopping?
I began the user research online, where I sought demographic data of potential target users. Based on target users identified in secondary research, I conducted targeted user surveys and interviews with people in order to learn more about their experiences with grocery shopping, both online and in person.
Through secondary research, I identified three groups of potential target audience members:
people who already engage in online grocery shopping
people who already engage in online shopping, but not for groceries
people who do not yet engage in any online shopping, but are looking for alternatives to going grocery shopping in person
Through user interviews, I wanted to develop a better understanding of how people buy groceries. What factors did they consider when buying groceries? When, where, how often, and for whom did people buy groceries? What did people enjoy about grocery shopping, and what do they wish were different about it? Had people tried buying groceries online before, and if so, what had their experiences been like? If not, what were some of the reasons they hadn’t tried online grocery shopping? These were among the many questions I asked participants during interviews.
I learned through the surveys and interviews that people were not completely satisfied with their in-person grocery shopping experiences. Some common frustrations included long checkout lines, poor customer service, difficulty locating some items within stores, and the high costs of organic, ethically sourced foods. would be willing to try online grocery shopping if there were financial incentives, competitive product prices, transparency about the company’s ethical practices, minimal packaging and waste produced in delivery, and quality assurance on fresh ingredients. However, the interview participants indicated that they had not yet found an online grocery shopping solution that met these needs, so all participants still preferred to shop in-person, where they felt that they had more control over these factors.
“I do like being able to hand select produce, I spend way too long handling them and trying to find the most beautiful vegetables.”
“By the time [the online order] gets delivered, does it lose quality?”
"If it was allergen friendly - like clear allergy statement on the site and i don’t have to go digging in the forums to find it...and if I knew the food was ethically sourced and affordable, like a combination of that.”
“Unfortunately, affordability over being conscious, organic vs non - all of that.It’s always the price and how long it will last [that affects my purchasing decisions.]”
Through the research phase, three key personas emerged: the busy single parent, the activist with a food allergy, and the source-conscious recent college graduate. Each persona has specific beliefs, attitudes, and goals for grocery shopping, but they all share some common characteristics, including the willingness to try new grocery options, the desire to save time and money, and the desire to eat healthy, nutritious foods.
After establishing the three personas, I developed empathy maps to accompany each persona. The empathy maps provided further insights into each persona’s daily experiences, thoughts, and feelings, particularly around grocery shopping.
I supplemented the primary and secondary research with a competitive analysis of three popular online grocery shopping platforms: Instacart, Peapod, and Jet. By doing so, I was able to develop a better understanding of the current online grocery shopping landscape, and to know what competitors already offer customers, both in terms of product features and business services.
The features included in the competitive analysis were generated through the user research findings; in the research process, users had shared features they wished to see in an ideal grocery shopping app, and I included them in the analysis. Through the analysis, I was able to identify common features that the three competitor products have, as well as the features that competitors lack. The features that all products have are features that might be considered “standard” or “expected” in the online grocery shopping industry, and would be important to consider designing into the new product. The features that did not exist in all competitor products were opportunity areas, where a new product could have a unique impact on customer experience.
In-depth research helped to clarify target users and their needs for satisfactory grocery shopping experiences. It also provided insights about the state of the online grocery shopping industry, the value propositions that current companies offer, and the areas for possible improvement to better meet the needs of customers.
Based on research, it became clear that people want a time-saving, wallet-friendly way to purchase fresh, high-quality foods and ingredients. Many people who shop for groceries in-person are willing to switch to online grocery shopping, so long as online grocery shopping meets their specific dietary needs, their budgets, and their ethical values, including environmentally sustainable business practices and fair wages for employees.
These findings and priorities would guide the subsequent stages of Instashop’s design process. Clear content strategy, thoughtful interaction design, and appropriate user interface design would become critical to Instashop’s ability to fulfill these core user needs — and ultimately, to succeed in the online grocery shopping industry.
I approached Instashop’s interaction design by first gathering input from people, in the form of card sorting. Grocery shopping offers plenty of ways to organize contents; while there are many patterns in the ways that grocery stores categorize and store products, there is no universal solution. It was critical that I invested time in learning the ways users might expect to see products arranged in Instashop, so that I could design interactions that would meet users’ expectations of how to find products they wish to buy.
I conducted card sorts both in-person and online. In both cases, I presented participants with a set of thirty cards, each with a specific food item on it (such as “low fat milk,” “almonds,” “Gala apples,” and “sparkling water.”) Participants were tasked with grouping items together and labeling the groups they created.
The card sorting resulted in a variety of category types. Some participants created more conventional labels — labels that we see in some grocery stores — such as “produce” and “baking.” Other participants created labels based on their own dietary needs, such as “foods that I don’t eat.”
After conducting the card sorts, I identified common patterns and themes that emerged in the groupings that participants produced. I then used these core groupings to inform the information architecture, in that I generated a site map with pages representing the categories identified through the card sorting and its analysis.
Next, I designed a user flow to demonstrate a possible journey that a user might take when using Instashop. The first user flow helped identify points along the path where users might be faced with choices and decisions, and helped identify the key pages to include when designing wireframes. User flows are also critical for preventing the design of dead ends or other paths that might leave users stuck on a page, unable to complete their intended goals.
Then, I reviewed the site map and user flow in conjunction with the competitive analysis from the Research phase in order to product a UI Requirements document. This document, which outlines key screens and relevant features for each screens, would serve as a guide as I proceeded with wireframing.
With an initial site map, user flow diagram, and UI requirements document underway, I was able to begin wireframing key screens and testing proposed interactions with prototypes.
I reviewed my user flow and selected six screens to sketch with pen and paper. I then used the sketches to guide the design of wireframes for mobile, tablet, and desktop screens. Along the way, I annotated key features of the wireframes to describe their functions and proposed value to users.
I drew on common design patterns to inform my wireframes. Doing so helped ensure that the wireframes would follow commonly accepted design patterns and align with users’ expectations and improve the learnability of the new application.
Once I had designed a set of prototypes, I was ready to conduct usability testing. Usability testing is a critical checkpoint in the user experience design process, precisely because the focus is to evaluate how users navigate the proposed product. Usability testing with mid-fidelity prototypes before proceeding with higher-fidelity design composites is key to ensuring that users can actually complete the tasks they intend to complete with a product before visual design elements are incorporated. I was able to focus the scope of the feedback on pain points within the way that people navigate the site and make necessary iterations early in the design process, so that I could solidify the function of the product before designing its final form.
My goals for usability testing were as follows:
Identify key usability errors people might face when searching for a product, adding a product to the shopping cart, and completing the checkout process
Gain user perspectives on the content, structure, and flow of the mobile app prototype
Identify and prioritize key problems that users experience during the test, based on severity and frequency
Identify specific pain points, as well as points of delight, that users experience when interacting with the prototype
The usability tests revealed both the aspects of the prototype that people enjoyed and appreciated, as well as the aspects that caused confusion and frustration.
Participants were drawn to the free delivery offer, to discounts, and to the designated sales section
The option of saving customer information for future use
Minimalism and simplicity of the prototype design
The familiarity of the prototype structure in relation to other online shopping apps
Options to shop by dietary needs
Designing a“Search Results” page
A product price comparison feature to help people evaluate whether the price of a given product is a good deal
A clear explanation about how groceries would be delivered, and the addition of a “special instructions” field in the checkout process
The prototype did not inform the users about whether they needed to create a new account
The results of the usability testing helped inform priorities for iterating on the wireframes:
Adding a “Search Results” page that displays multiple search results for apples
Adding specific product descriptions to product pages
Removing extraneous items from the cart
Adding a log in/sign up page during the checkout process to provide users with information about the account status
After a first round of usability testing, I began to iterate on the wireframes based on participant feedback. Usability testing revealed that potential users of Instashop would be interested in seeing the product focus more on customized shopping experiences for users who have specific dietary preferences. Valuable features to consider in the iteration included:
Options for users to indicate dietary preferences (e.g. vegan, paleo, gluten-free, soy-free) -- wherein users would only see groceries that meet their dietary preferences. For instance, users who indicate that they are vegan will not be shown meats or animal products.
A clear option for quickly re-ordering from past purchases (with small modifications as needed.)
A subscription grocery service in which users select their dietary preferences and receive automatic deliveries of select goods that meet their preferences.
While iterating on the mid-fidelity wireframes, I also began designing the product’s logo and branding. Based on both the initial user research and the usability testing, I knew that people wanted a product that was convenient, easy to use, reliable, and trustworthy. Users wanted to feel that the new product was truly helping them by making their grocery shopping experiences simpler and more enjoyable, and wanted a product that seemed to care about customer satisfaction over revenue. I also knew that the freshness and quality of products sold in Instashop was a key priority for target users.
With this information in mind, I experimented with logos, wordmarks, color palettes, and typography that felt casual, soft, and friendly — all of which would help people feel comfortable approaching and using the new product.
With additional user input on the proposed branding options, I finalized the designs and incorporated them into the high-fidelity mockups of the key screens.
After finalizing the visual design of the product, I began producing high-fidelity design composites, building off of the mid-fidelity wireframes. I narrowed the scope of the higher-fidelity composites to desktop and mobile screens because participants in both the initial user research and usability tests seemed to prefer desktop and mobile devices to tablets.
Within the time constraints of the project, I focused on designing high-fidelity composites of the full home screens in desktop and mobile view.
This case study represents the start of a bigger design process for the development of the Instashop product. In addition to designing a complete set of high-fidelity screens, it would be necessary to conduct additional usability testing with multiple user flows in order to better understand how people engage with the product, identify more features to improve, and design an even more user-friendly product.
Furthermore, it would be especially necessary to design key screens that represent Instashop’ unique value propositions, including customized views for users’ individualized dietary needs, subscription services, and cost comparison tools.