TylerGAID
Published in

TylerGAID

Bunches

UX/UI Case Study and rethinking the grocery delivery experience

Bunches Mobile Freshness Scale

Introduction

nline grocery delivery became highly popularized in 2020 due to sanitary concerns surrounding COVID-19. More people than ever are foregoing the in-person shopping experience in favor of having groceries delivered by services such as Instacart and Amazon delivery. The sudden increase in online shoppers revealed some very clear frustrations with existing services.

Instacart and other online grocers “replacement item” option often yields interesting results

According to a poll of 113 users who stated that they utilize grocery delivery at least once a month, most expressed that their main issues with grocery delivery are related to fees and inventory issues. Bunches addresses popular user problems through its business model and online interface, while creating a unique shopping experience and expanding the Bunches brand identity to strongly communicate its values of being affordable, accessible, and environmentally friendly.

Value Proposition

Affordable: What sets Bunches apart from its competitors is its zero-delivery cost. By grouping orders together by location, the business is still highly profitable without delivery fees.

Accessibile: According to the International Food Security Assessment 2020–2030, the number of food-insecure people in 2020 is an estimated 844.3 million. By providing its service at no additional cost or fees, Bunches improves food security by making grocery delivery just as affordable as shopping in person. Grocery delivery also benefits people who do not have easy access to transportation to and from the grocery stores. Bunches’ target market is cities, where there are lots of potential customers in one area, many of whom do not have cars to get to stores and where food desserts are common.

Environmentally friendly: While Bunchers can’t get delivery on-demand, they are incentivized to use the service because of the benefit of the environment and the lack of associated fees. By grouping orders in the same area, Bunches greatly cuts down on carbon emissions typically associated with individual grocery shopping.

“If you are a person in a single household and you drive to the store and drive back, that is an entire car that is dedicated to a round trip to and from the store,” [Shelie Miller, sustainability researcher at the University of Michigan] said. While a delivery truck is likely to have higher carbon emissions per mile compared with your personal car, “the miles associated with that grocery cart are much smaller because you have lots of groceries on a single truck,” Miller said.

Because Bunches delivers from its own warehouses, it cuts down on last-mile emissions. Last-mile emissions refer to how food is transported from its production source to a customer’s table and is where a lot of carbon emissions can occur.

How Bunches Works

Illustrations showing how Bunches works

Customers shop from a large selection of goods that are housed at a temperature-controlled warehouse location. When a Buncher is ready to check out, they are prompted to select an existing delivery date and time, or have the option to propose a new delivery date and time. For an order to placed, at least two other Bunchers in the same area must select the same delivery date and time, and users are notified when their suggested delivery time is approved. Bunchers are incentivized to select a popular delivery time with an offer of a small percentage off of their total purchase price.

Orders are delivered via food truck to a convenient drop-off location. The truck has several items on board that can be purchased on-demand on kiosks attached to the truck. Items on board include beer and wine, baked goods, sale items, “last-call” produce (produce that is less fresh than normal), and popular snack items. When a customer arrives at the Bunch Truck to pick up an order, they are prompted to scan their custom QR code from the Bunches app, which verifies that they are picking up their order and automatically logs them into a personalized interface. This interface shows items customized to the Buncher based on their previous purchasing patterns.

The Design Process

User Research

The following information was collected from 113 grocery delivery service users.

According to a poll of 113 users, 39.3% of people who use other grocery delivery services, overwhelmingly Instacart (45%), get all or almost all of their groceries via the delivery service and 42% use the service once a month. This data informed my decision to provide a service that allows for large orders and think about how users were going to get their items from the Bunch Truck to their homes, especially thinking about differently-abled users such as the elderly. The solution was less of a design decision and more of the decision that the hypothetical Bunches employees would assist those users since the truck would be within a short distance of their homes.

From collecting data, most users said that some things that they like about grocery delivery is convenience, speed, and not having to go to the store. Similar to Instacart, Bunches does not allow the user to get delivery whenever they want, but they do provide several options for delivery dates and times.

The main frustration most users had with other delivery services is the cost of fees. The Bunches business model completely eliminates those fees and the cost of a slight inconvenience. Users also liked to pick their own produce, which they can’t do on an app. This informed my design decision to create a ripeness scale that allows users to designate the ripeness of certain products. Specific ripenesses may also come at an added discount.

User Journey and User Flow

Brand Assets

Naming: This company is based on the idea of togetherness and doing things for the common good. I wanted the name to reference grouping and to be friendly and fun. The word “Bunches” comes from the term commonly associated with produce, such as “bunches of carrots”.

Designing the Logo: During sketching, I started out creating very geometric and simple images, considering symbols that were typically grouped, such as produce, or animals such as a squirrel. I got pretty stuck at this point, and decided to work on the rest of the brand and come back to the logo. I think that coming up with a logo for a non-existent brand that I, myself, didn’t quite understand yet was a very unique experience that I don’t know if I will encounter again.

I kept returning to the logo design as I fleshed out the rest of the Bunches brand and better understood how the logo would be utilized across different interfaces and the logistics of the business model.

Early versions of logos

The final logo combines an image of a strawberry and an outline image of the company’s crates, a unique element of the brand. Although the logo is not seen on every screen of the interface, the symbol of the crate is carried through every screen as the ever-present shopping cart icon.

Photography: I used background photography as a way to make the brand more personable and relatable to its customers. In the Bunches brand guide, I designate that all photography should feature groups of people cooking and hanging out, and each photo should be edited with a custom Lightroom filter that I created myself.

The product photography style is distinct, using bright, lightly textured, solid backgrounds with the product laid flat on the surface with heavy directional light to create strong shadows. Each food category has a unique color background to make it distinguishable from other categories and navigating the interface easier, so the user always knows where they are on the site. This style of photography is commonly seen on food delivery sites such as Caviar and Grubhub.

Illustration

Illustrations appear to visualize instructions, since the business is a little complicated. The illustrations use thin outlines, like the buttons and icons.

UX Deliverables

Bunches App

The Bunches app is the customer’s primary means of using the service, since there is an on-the-go portion of the user journey. Its main features include sections for browsing products, an option to choose the ripeness of produce before you add to cart, and coordinating delivery options with other nearby customers.

Bunches Website

The Bunches website functions secondary to the app and has similar functions, with added information not included on the app, such as more in depth information on the company on the landing page and subscription management.

Bunch Truck Kiosks

The Bunch Truck also includes a few items that you can purchase directly from the truck such as beer and popular craving items. When a customer sees a Bunch Truck in their area, they can go right up to the purchasing screen and browse the items currently available for immediate purchase. Bunchers can also use the screen when they pick up their order to verify that they are picking up their order. When a customer scans the QR code attached to their order receipt, they can then pick up their order and are logged into a customized screen that includes those add-on items and suggested items for them.

The interface design is slightly different from the website and app. The UI is adapted for the outdoor setting, using high contrast materials that are better suited for the outdoors.

UI Elements

Microanimations for add to cart buttons

Originally, square materials were a distinct part of the brand, but I found that some elements didn’t work well with squared edges, such as product cards and background shapes. I tried to use squared styles wherever possible without sacrificing practicality, which can still be seen on the buttons and customized icons.

Extending the Brand

Bunch Truck

The Bunch Delivery Truck with Kiosks and illustrated wrap

The Bunch Truck is designed to reflect the crates, with the bottom portion being made up of wood paneling. The branding is clearly plastered on the sides, with the icon on the doors and full name across the side.

Advertising

Examples of advertising

Bunches focuses on urban areas and utilizes popular street advertising techniques, producing a series of bright and clever posters for use on subways, bus stops, and busy streets. Advertising emphasizes the unique aspects of the brand such as free delivery, the crates, and the idea of togetherness.

Collateral

Bunches utilizes organic packaging and uses plastic as little as possible. Grocery orders are delivered in branded crates that are easy to transport and clean for reuse. Branded canvas totes are a fashionable and environmentally friendly way to encourage users to advertise for us. Crates found and repurposed, rather than manufactured in order to reduce waste, therefore each crate is slightly different from the next, but each is branded with the Bunches logo

Branded totes and crates

Conclusion

The direction of this project took some interesting turns, from trying too hard to make the UI unique, to completely changing the brand mid-way through the semester. As someone who likes to create stories to drive my design, I spent a good deal of time developing the Bunches business model before starting on the visuals, and that planning helped me to better understand the brand I was creating. My biggest takeaway from this process was learning the balance between engaging UI and practical UX, and how “boring” UI doesn’t always equate a boring user experience. This project taught me more about myself as a designer and how my work style fits into the design process, and most importantly, that user-centered design will always yield the best product.

Credits:

Designer: Abby Steinour

Art Director: Abby Guido

Institution: The Tyler School of Art — Temple University

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store