Ordering

Zitti
Case Study
ordering on mobile screenthe ordering landing page on desktop

Zitti (acquired by a Fortune 500 company) is a mobile and desktop app that streamlines back-of-house operations for restaurateurs. Operators can pay their bills, compare food costs, and place orders directly with their vendors through the app.

Team

pencil
Design
Perrin Legg
brackets
Engineering
Matt Hanlon
Emerson Pope
Corey Buecker

My role

I joined Zitti as its first hire, starting as a Senior Product Designer. Within a few months, I transitioned to Director of Product Design, leading design and shaping a user-centered product vision and strategy that scaled the platform from 0 to over 200 restaurants, 150 vendors, and 150,000 products.

Challenge

Pricing for food and other goods within the restaurant food supply chain is notoriously opaque with a lack of visibility into market pricing. Smaller independent restaurants pay much higher unit prices than larger chains and don't have dedicated teams to monitor and negotiate prices with their vendors. To compare pricing across multiple vendors, restaurant operators must manually cross-reference pricing sheets and vendor portals. And then operators have to make a mix of phone calls and emails to their reps or log in to each vendor portal to place each order.

We recognized an opportunity to create a tool that would provide operators with real-time pricing insights from multiple vendors, enable seamless ordering, and allow for analysis of past orders.

Research & discovery

Competitive Analysis

We performed competitive analysis on existing ordering platforms such as Sysco, Baldor, US Foods, Choco, and Rekki, and we conducted user interviews and shadowed operators. Operators were not satisfied with any of the ordering platforms that they had experienced—citing Sysco and Choco as platforms that were the easiest to use. They highlighted pain points like unnecessary back-and-forth with vendors, lack of pricing transparency, unfriendly user experiences, and limited visibility into orders that were placed.

competitive analysis example

User Insights

Some of these operators, such as David Battin at La Mercerie in New York City, did track orders in spreadsheets but expressed frustration with its inefficiencies and time-consuming nature. He emphasized that he needed an easier way to look back at past orders and see pricing at the time of ordering. This would help his team with reporting and ensure that they choose the lowest-priced items when possible without sacrificing quality.  Operators also reported frequent misunderstandings when placing orders manually over email, leading to back-and-forths with vendors that they didn't have time for.

We also interviewed vendors to understand how we could help their side of the ordering process. These representatives talked about frequently receiving orders with incorrect item information or lacking required details.

An example of an operator's order guide that they made for themselves in excel
a restaurant tracks orders in excel

Design & Development

We launched the ordering product in three stages: 1) universal order guide; 2) ordering capability; 3) order history

Universal order guide

As we developed designs, we used Excel and Looker Studio to create a preliminary price comparison tool that consolidated order guides. Though not ideal for UX, this version helped gather valuable feedback on essential information and features. Operators were excited about viewing a consolidated product list across vendors, but the data volume was overwhelming. Whether chefs accessed it on mobile or managers on desktops, the in-app experience needed seamless scrolling, a clear information hierarchy with a way to isolate the best prices, and a strong search function.

We operated on a continuous release cycle, launching each part of the experience as it was ready. First, we enabled users to confirm their item list, allowing them to hide unwanted items and add new ones. Next, we introduced the universal order guide in-app, giving users a view of their item list with updated prices.

The excel version -- ooph my eyes!
excel order guide
excel order guide, price history tab
excel order guide, summary tab
The looker version's mobile exerience—not good
the mobile experience of looker used to display an early version of an order guide
Users can manage their list of items
Editing an order guide item list
a confirmed item list for an order guide
Order guide item list
Prototype : confirming your item list
order guide
order guide, scrolled down
order guide, show only best prices

Ordering

Following the order guide launch, we shifted focus to integrating ordering within the app. Users can scan their item list, quickly identify the best price, and add items to their cart. When ready to order, they select a vendor’s cart and proceed to checkout, specifying delivery or pickup, date, and any special instructions. Once placed, both restaurant and vendor receive an email with order details. By handling item selection and quantities in-app, we ensured complete, accurate orders, streamlining communication between restaurants and vendors.

Order History

The final piece was adding an in-app Order History with basic analytics to help managers and sous chefs monitor order trends. This feature allows users to review past orders and analyze price efficiency, making it easier to track spending, align with budget targets, and access a record of purchased items without sifting through invoice line items.

order history landing page
analysis on order history detail page
order details on order history detail page
item summary list on order history detail page

Feedback & Iterations

Feedback was overwhelmingly positive, with operators reporting huge time savings. One sous chef, Chuy noted the order guide reduced his task time from six hours to 20 minutes.

Vendor insights

Operators appreciated the ease of comparing vendor prices but requested a quick overview of vendor trends to support negotiations. In response, we added insights at the top of the Order Guide, including each vendor’s best-price percentage, out-of-stock items, weekly price changes, and category-based pricing comparisons. We also indicated the percent by which higher-priced items exceeded the lowest price, highlighting savings opportunities.

ordering landing page with insights slider on mobile
ordering on mobile screen
ordering page showing categories and other ui improvements

Enhancing Usability

Based on user feedback, we incorporated vendor logos on item cards for quick recognition and enabled sorting options by category, product name, or price difference. To further improve clarity, we adjusted the product name’s background color, added numeric markers in checkout, and re-labeled fields that ESL users initially found unclear.

ordering page showing sort options
top of cart page on mobile
step 1, order details section on checkout
step 2, vendor information in checkout

Outcome

The ordering feature has significantly reduced ordering time, improved accuracy, and provided valuable food comparison insights.  It not only allowed operators a way to look back and analyze past orders but also to make informed decisions at the time of ordering.

Designed in Figma, built in Webflow
© 2024