CASE STUDY - DECEMBER 2020
Larry’s Deli
Modernizing an ecommerce site to help a business combat COVID losses
Introduction
As COVID continues to reshape the landscape of small businesses and how they complete sales, many have found themselves unequipped to adapt their operations to be online and contact-minimal. Larry’s Deli is a well-known local staple in Warwick, New York with a loyal customer base, but their business has waned as many people fear buying food in local places where there is greater risk of transmitting infection, electing instead to order online for pick-up or delivery.
Larry’s Deli currently lacks any sort of online ordering system, and only hosts its menu on Facebook. They also only accept call-in orders (for catering alone). I chose to design an online product for them that would ease online ordering for its customers and even attract new ones. I wanted to ensure that operations at Larry’s remained safe or became safer, that the product was easy-to-use for users coming from all platforms, and that Larry’s branding was updated and made more consistent across their digital presence.
Project Overview
Goal: Create an easy and intuitive ecommerce product for Larry’s Deli with renewed branding
Timeline: 2 weeks, 90 hours
Role: UX/UI Designer, UX Researcher, Visual Designer
During COVID, Larry's would benefit from safe order fulfillment options and an updated online product to access them.
Collecting the Data
Assessing the local market
It was important to understand the local landscape of comparable Delis and how they had adapted to business declines during the pandemic. I found that most local delis lack even a landing page for information, let alone systems for ordering online. A few are available on delivery apps (Door Dash was the most common) but for most, it seems in-person ordering is the sole option offered. In a climate where consumers have become less comfortable making food purchases this way, this provides an opportunity for Larry’s to strengthen its business model by being one of the first to offer contact-free options.
Interviewing local deli-goers
I wanted to gain a greater understanding of the pain points associated with online food ordering, as well as users’ concerns with ordering food during COVID. I set out to conduct interviews with local residents who had been to Larry’s before. From my two interviews, I concluded that safety and convenience were of high priority, and both users found themselves ordering food online more often because of attempts to minimize contact during the pandemic. However, they both also used apps to order their food, despite knowing that local business lose a cut to those apps, because they knew the process was reliable and easy.
Understanding larger trends for local businesses
To further understand the habits of users of food delivery during COVID beyond the local scope, I also distributed a survey to 22 users to affirm or qualify what I had heard from my 2 interviewees. Some notable takeaways are shown below.
Users were in a 50/50 split about ordering from local restaurants without contactless order fulfillment options; one half said they wouldn’t order from restaurants without those options, while the other said they still would if they knew they liked the food.
59% of users said that their first stop when ordering food online was a delivery app like Door Dash, Grubhub, or Seamless. These apps have established branding and systems of ordering, meaning that they are often faster and more convenient to use than a restaurant’s own systems.
My research with users showed me that safety, speed, and convenience had to take priority in my design to put Larry's ahead of delivery apps.
Crafting a persona
After collecting the conclusions from my user interviews and surveys, I was able to create the below persona, Rawad. His priorities reflect the needs users expressed (safety and convenience) and his background reflects the reality of many people living at home during the pandemic. His pain points also come directly from concerns users expressed, including the desire to support local businesses while simultaneously wanting to preserve the health and safety of his family and himself.
Defining the Product
Determining the feature list
Working off of my research takeaways and the users’ priorities, I began developing the product’s feature matrix to ensure I could track the features necessary for the MVP and those that could be developed later. Because my timeline was compressed and because I wanted the initial product to be straightforward and easy to implement, I tried to limit the full list, which is available to view here.
To keep the product simple and stay within my timeline, I prioritized a smooth and easy checkout flow, navigable menu, and a visible deli hours and location.
I wanted to make note of further expansions that could bring users delight by catering more extensively to their pain points, like saving payment information for quick future orders, creating an account that would provide loyalty rewards, and a search function for the menu. These features were outside of the scope of the MVP, but I knew that users would really appreciate them based on their feedback.
Determining the Information Architecture
To gain a better understanding of how users would group menu items and features in a product like this, I conducted an open card sort exercise with 10 users. The results were mostly as expected; users grouped items mostly by meal, and grouped deli information and order methods separately. The most common groupings are shown below:
The final map of content
Mapping those features during the open card sort exercise gave me a good idea of how to organize the information architecture of Larry’s new product, shown below. The structure of the website is as close to one-page as I could make it, to ensure that users felt ordering was easy, everything was immediately available to them, and that there weren’t confusing page mazes on the way to conversion. I also wanted to ensure that a headline for COVID safety was visible on all pages to allay any fears about safety during order fulfillment.
Planning for the most common user path
In my final step of empathizing with the user before wireframing, I considered what the most common path might be for Rawad. It seemed like users really emphasized the speed and convenience of delivery apps, so I made sure that I modeled a flow that was simple, easy to follow through with, and unobstructed by any diverging paths or distractions. The resulting, most direct path to conversion that I came up is shown below.
Time to Design
Planning the visual layout
Now it was time to lay out all of the site’s elements visually, to understand the interplay between them within the viewport. I was once again led by my goal of simplicity and minimalism, because users had stressed their desire to move quickly through the ordering process. At this point, I decided to scrap my idea of toggling between a static and active menu, as it seemed like an extra step that would have little payoff for most users.
Branding revival with a classic deli twist
I wanted to refresh Larry’s branding to make it resonate more with modern users and to allow for the recognition and reliance that users have on pre-existing delivery apps. I was inspired by their current street sign, and modernized it through the process below into my final logo and brand color scheme.
Larry’s previous paper menu
Logo ideation
My final logo design pays homage to Larry’s current (though inconsistently applied) brand color and logo design, but is refreshed for a modern audience to be more vibrant and clean. The colors also harken back to delis and diners of past eras, playing on the red-and-white theme commonly associated with the awnings associated with those past businesses.
Rounding out the UI Kit
I completed my UI kit with design touches including the typography guide and drop-down menu designs below. These designs were completed with simplicity, minimalism, and ease of use at top of mind. I made sure that all of my design elements were easily scalable for Larry’s in case they wanted to create new assets down the road, like a new print menu or store sign.
My branding was a geometrically simple and modernized version of classic deli design, inspired by Larry's current branding.
Putting all of my designs together
I applied my new branding to my lo-fi wireframes, and did some tweaking to ensure that the result was still easy to look at, simple to navigate, and designed to give an impression of reliability. The result is shown below.
Mobile Prototype
Desktop Prototype
Putting Larry’s Deli in Users’ Hands
Usability testing in two forms
It was essential to know if my design choices had paid off for potential users of this app, so I used my prototypes for testing through interviews conducted over Zoom, and also distributed a link to my Desktop prototype through Maze for more extensive results.
Biggest User Testing Takeaways
Users on Desktop consistently noted the non-intuitive transition at the “Added” confirmation button page where the Cart and Checkout buttons were not able to be activated. User results from Maze corroborated this trip-up area.
Users pointed out a major oversight, which was the lack of a field for inputting the user’s name during checkout to be used when identifying their order for Pickup.
Usability testing uncovered a few essential changes: improving contrast, ironing out bumps in the user flow, and adding a place for the user's name on their order.
Iterating on my first prototype
The usability test results and interviewee feedback uncovered several areas in my prototype where improvements could be implemented without a very heavy lift. I made these edits (shown below) because they were consistently brought up by users.
Having to click to confirm the added item in my flow tripped up many users, so I replaced the step with an automatic animation that eliminates any confusion
Some users pointed out that the drop-down menus had a low-contrast hover indicator that blended into the background, so I improved contrast in these areas by using a darker gray
The order confirmation page now includes the customer’s name (which they can now input) as well as a quick headline about the protocol for picking up safely at the deli
I added an input field where users can input their name to more easily identify their order upon picking it up
Conclusion + Summary
Key Takeaways
Modernizing and developing a product for Larry’s Deli showed me just how essential it is for local businesses to adapt to the evolving needs of their customers. Especially during the COVID-19 pandemic, users are turning to established apps with extensive user bases to order goods and food in an attempt to minimize contact with others. Delis and restaurants will find themselves at a disadvantage if they cannot provide their customers with these options, and will still take a loss to the fees charged to them by delivery apps should they choose to take that route. Products that look and feel solid and legitimate that provide people with the services they need to adhere to social distancing can help local small businesses to protect themselves from massive losses in sales due to this effect.
Challenges
Building a product from the ground-up that must not only compete with, but improve upon the experience of long-standing delivery apps requires attentive research.
Working under a compressed timeline forces prioritization; at times I felt I may have spent too long in areas that didn’t provide me with the biggest payoff, though I was able to correct for those missteps in the end.
Insights
Most users of ecommerce sites have common priorities; efficient checkouts, simple user flows, and immediacy of relevant information.
Sometimes very useful additions to your product can go over your head when you’ve been knee-deep in the design process; user testing showed its value when it returned the feedback that a field for customers’ names should be included in my checkout flow.
Final Thoughts
Though ecommerce products all operate within a mostly standardized framework, developing one for Larry’s Deli showed me just how distinct different forms of conversion can be, and how users of those forms have much different expectations and priorities for that each product.
I enjoyed how directly I could apply feedback from users in this project, because I could both see and understand the value of their thoughts and concerns. In a product that could potentially be used by many people on a frequent basis, noting every detail of what could be improved to ease conversion is an essential focus.
Rebranding for Larry’s provided an enjoyable set of limitations to work within. I wanted to reference the historical aesthetics of classic delis while also minimizing any sort of departure from Larry’s current logo, and having those confines on my work actually allowed for much more creative ideation and adaptation on my part.
