Overview
Grocery Cart is a feature integration on the BigOven iOS app that allows users to order direct from local grocers. The project was headed by me and our iOS developer, with guidance and oversight by our CEO and marketing director. I served as the lead UX and UI designer throughout the development process.
Background & Objectives
Grocery Cart was spurred by a combination of recent trends in grocery delivery and the need to get a leg up on our competitors, a few of which include AllRecipes, Yummly, and Epicurious. Due in part to Amazon's acquisition of Whole Foods, retailers were (and still are) becoming increasingly aware of the need for a convenient shopping experience—an experience that is aided by services like grocery pick up, home delivery, and online ordering. Given our existing offerings, the above market push, and the need to separate ourselves from an overly-crowded app category, grocery delivery was a strategic item for us to add to our feature set. Doing so would not only serve our increasingly young, urban users—millennials accounted for over 25% of BigOven's user base—but it would also better our chances of attracting interest from big-box retailers or netting outside funding.
A few points of research that validated Grocery Cart as a concept: the number of online grocery shoppers more than doubled between 2016 and 2017 (FMI and Nielsen); millennial users were the most likely demographic to use online channels for grocery shopping in 2017 (statista); 40% of online grocery shoppers said their primary grocer does not offer eCom in 2016 (Unata), indicating room for growth and royalty opportunities; and to put it plainly, the market is moving in the direction of eGrocery: Sam’s Club signed a deal with Instacart, Target acquired Shipt, Walmart and Kroger continue to expand their network of grocery collection points.
Product & Design Concept
With the above in mind, we set out to develop a product that answered two key questions: (1) How do we integrate Grocery Cart into an already feature-heavy app? (2) How do we create a simple, convenient experience that allows users to manage multiple carts?
As mentioned, BigOven is chock full of functionality. The freemium app boasts over twenty distinct features, and was developed to encompass all aspects of the cooking cycle—recipe discovery, sharing, organization, meal planning, and shopping. With Grocery Cart, we wanted to complete the cooking cycle by fulfilling the final step: purchase. While introducing Grocery Cart provides a beneficial alternative to in-store shopping, adding functionality to an already feature-heavy app posed as a major obstacle to development. The BigOven iOS and Android apps had recently undergone a redesign with a select focus on simplicity, so clutter and confusion were things we needed avoid when approaching Grocery Cart.
Early on in the process, we experimented with integrating Grocery Cart with BigOven's Grocery List, an existing feature that allows users to create and manage a digital shopping list. The thinking behind this was that a hybrid tool would reduce friction by providing users with a single place to manage both their Grocery Cart and Grocery List.
However, we quickly learned that this presented a cluttered, chaotic and counter-intuitive view to the user. Instead, we opted to give Grocery Cart its own dedicated interface—users can access the feature by simply selecting a cart icon located on the upper right of the app. The icon is counter-badged so users can easily reference how many items are in their cart. On top of reducing clutter, separating the two features allows users that will inherently never use Grocery Cart the freedom to continue accessing Grocery List without disruption or confusion. The additional space enables us to fully build out Grocery Cart and maximize its long-term potential. After resolving setup, we moved on to configuring the onboarding process.
After paper-prototyping the layout of the app, I moved on to defining Grocery Cart’s overarching design principles, which helped lay the foundation for how we approached the design.
Humanized—Despite grocery delivery being powered by technology, people aren’t machines—we follow certain behaviors whether we’re in a store or on an app. This meant constantly asking myself: What are some familiar tendencies that we use when grocery shopping? How can we incorporate these shopping patterns within the design? It's always better to build on people's already-learned tendencies as opposed to teaching them new ones. Familiarity is easy, new things are scary.
Clean and efficient—Grocery shopping is often associated with feelings of stress and chaos, so we wanted the complete opposite communicated within the design: clean and simple. The number one reason people opt for grocery delivery is because it’s easy and it saves them time. On our end, this meant featuring clearly defined lines, breathable space, and easily readable text—elements that help facilitate the user’s goal getting groceries quickly and easily.
Onboarding
One thing our team understood entering the design process is that the majority of households don't shop at a singular store—rather, people shop based on specific needs and preferences. For example, I'll buy bulk at one store (Costco), produce at another (Fred Meyer), and meat at separate location (QFC). This created the need for users to be able to manage Grocery Cart across multiple stores. With this in mind, we developed an authentication process based on location services. Once opted in, users can add grocers based on a simple zip code search. The app will survey nearby stores, and render a list of locations that utilize grocery delivery or pick up. If a user is visiting Grocery Cart for the first time or has yet to add a store, they will be prompted to do so through cart's empty state. If they've already added a store and would like to add an additional store, they can do so through their dedicated cart settings, referred to as "My Stores." Once a user has registered and signed in to a store account, they can begin adding items to their cart. Lucky for us, many users had already opted in to location services because of a past feature that helped cooks determine meals plans based on the weather forecast.
Beta Build
Grocery Cart View
Visually, I wanted Grocery Cart to maintain an emphasis on cleanliness and simplicity. This is represented within the design through the use of neutral colors, limited text, and breathable space. It's easy to overdo designs that feature a lot of elements, so we did our best to only include core information: product name, quantity, price, and image. The user's eyes are drawn from top to bottom, allowing them to view the most important information in sequential order: Which store does the list pertain to? What items are on my list? What is the grand total? Am I ready to check out? This clear visual hierarchy, along with the contrasting color on the call-to-action button, helps direct the user through the information flow.
What's more, by prominently displaying the product images, users can get a quick sense of their list without necessarily having to read each item’s name, similarly to how we scan for familiar packaging in a grocery aisle rather than moving from item to item inspecting each name. As mentioned, this was a recurring theme in my approach to the product design—replicating the in-store shopping experience in the form of a mobile app.
Functional Design
So, how does a multi-store system translate on the UX front? To access a separate cart, users simply swipe left on the store icon. To reinforce this gesture, the UI features subtle visual clues like a carousel and displaying a small portion of the next cart. The store logos make for strong visual signifiers so the user can get a clear sense of which cart they're looking at.
For convenience, the search bar shows by default, allowing users the ability to add and sift through items without the hassle of double tapping. Integrated within search, is a section for Recently Ordered items. Most shoppers have a staple of items they purchase when going to the store—essentially a default list of easily perishable products (produce, toilet paper, etc.). Through Recently Ordered, users can quickly reference, toggle to and re-order these staple items. Cart items can be removed by reducing the quantity to zero, after which they are presented a snack notification confirming the removal.
To distinguish between existing cart items and search results, we differentiated the call to actions. Items that have already been added to cart will display plus/minus functionality, whereas prospective items display an "Add to Cart" button. This distinction allows users to quickly determine whether or not an item has already been added to their cart.
We used the same approach for replacing/editing cart items. While most of us are fairly brand loyal when it comes to grocery shopping (I don't think I'll ever buy a soy sauce that's not Kikkoman), many of us still purchase based on price. Because of this, we wanted to ensure users had an easy option for replacing existing cart items. When a user taps on an item, search results for the generic term (i.e. chicken broth) will display. They're then given the option of replacing the existing item—these always appear first in the feed and are denoted with a check mark—by tapping "Select Item." Whenever an "Add to Cart" or "Select Item" button is selected, a separate "Done" button appears from the bottom of the screen, allowing the user to confirm all changes and return to the Grocery Cart screen.
When ready, users can check out through the Grocery Cart screen. They're then presented a mobile web version of the grocery store's check out flow. Though this is obviously not ideal from a UX/UI standpoint, there are some serious development and legal challenges when assuming responsibility for processing payment information. Taking this into consideration, we chose to table a better version of billing for a later iteration of Grocery Cart.
*Note: these are earlier iterations of Grocery Cart—given unforeseen circumstances, we did not have time to implement the above designs.
End Result
As much as we were able to accomplish in a five-month span, there were still many UX/UI items we wish we could have addressed in the MVP version of Grocery Cart: (1) ensuring no item gets left behind: cross-checking Grocery List with Grocery Cart, (2) aggregating search results from each store into a single view, which would allow users the ability to compare pricing between stores, and (3) providing a better experience at check out. As mentioned, check out redirects users to a mobile web view of the retailer's billing process instead of a custom, more integrated experience.
Given all of the movement in the retail industry, Grocery Cart was an exciting design project to spearhead. It presented a handful of UX/UI design challenges that led me to realize just how picky we are when it comes to food. All of the variables at play—cost, quality, convenience and location—made it difficult to create a shopping experience that applied to millions of users with drastically different sets of needs and preferences. Despite these challenges, I believe we accomplished our initial objectives of creating a distinct, simple, and stellar Grocery Cart experience. It attracted interest from several big-boxes, eventually landing us an in-person presentation with the VP of technology from a major retailer. In the end, Grocery Cart caught the attention of a separate digital commerce company and factored into their decision to purchase BigOven in January of 2018. And though we were unable to validate our work with user data, the feature proved to be an extension of BigOven's core competency of using technology to make the life of a home cook easier.