Grubhub
Agency
Online
Ordering
SDK
-

Grubhub is an online ordering food marketplace usually associated with delivery from mom-and-pop shops and small to medium restaurant chains. 100+ location fast casual and quick service franchises are often looking to customize their online ordering experience, so working with Grubhub is not an option.

THE PROBLEM:

grubhub doesn’t offer bespoke online ordering solutions for large restaurant chains.

Grubhub acquired LevelUp, now Grubhub Agency, a company that develops native apps solely for the aforementioned large restaurant franchises. Working for Grubhub Agency for five years, I saw potential to devise and launch a new responsive web ordering product for agency clients.

Bite-sized
summary
-

The Grubhub Agency online ordering SDK was a MASSIVE undertaking that started out as a new product idea between me and my fellow product manger, Scott Kominsky. It was designed to extend merchant brands to a new channel; it has completely taken off as its own product offering since being fully built in 2018 and in one year, has been sold to agency clients over a dozen times:

• $250K in flat-rate revenue (sold for $20K to $40K depending on configuration)

• Recurring revenue of $50 per location per month (around $10K in weekly revenue and growing)

• Custom configurations and features (that are then built into the SDK to be resold)

• Adoption by clients like Chase Pay, Nando’s Peri Peri, Smoothie King, and so many more

Objectives
-

SDK must be configurable for different menus: time-scoped items, calories, images, prices, descriptions and more

UI should be white-labeled for different brands

Integrate with all existing endpoints to support native app offering: account features, customer loyalty, ordering provider support and payment

UX must factor in accessibility and language support (especially for customers like Chase)

Copy and customer journeys should be scoped to fulfillment type (pick up or delivery)

Scalable features should be built in as configurable components

Challenges
-

Testing environments

Bugs, bugs and more bugs (e.g. data return errors and integration interruptions)

Competition with agencies and competing products like, OLO, Punchh and Door Dash

Accounting for all empty and error states

Timelines for custom development and branding

initial Research

Native vs. Responsive Web, or both?
Grubhub Agency, previously known as LevelUp (I’ll refer to them as Grubhub going forward), had only ever built native apps. Focusing on restaurants as of 2013, they were the pioneer in the space that built Sweetgreen’s native branded payment app. The app changed the role and demand of tech in the restaurant industry. Since investing all of their time and money on native, and building out their Android and iOS SDKs, Grubhub had always perceived agency web apps to be competing products with their native apps. It also didn’t help that like most tech companies, Grubhub was under-resourced, contributing to the decision to not venture into new product territory.

Desktop and Web
Grubhub Agency users place orders mainly during the “lunch rush” between 11:30am and 1:30pm. However, the typical user is sitting at a desk during these times in front of a laptop or a monitor. My fellow product manager and I watched our clients like Dig Inn and Potbelly Sandwiches invest in their desktop experiences, layering a fully custom UI that on the back-end integrated with Grubhub’s API. Why were they building web apps?

• Web is easier to maintain: deployments don’t require wait times or approval from app stores

• Web can be less expensive: native often implies the support of two complex platforms, iOS and Android, that require two specialized development teams

• Sales channel opportunity: with the push for native apps, we forgot that most users don’t want to download native apps for every restaurant

• Web is available across multiple platforms and on most devices (like TVs and tablets)
  

Tech taking over Restaurants.
The push for a tech transformation in the food industry is relatively new and there are now expectations of digital payment, online ordering and loyalty (not in archaic punch card format). It is expensive and time-consuming to build a new product, especially for restaurants, when restaurant operations are costly and tech is perceived as a small piece of business. Therefore, it made complete sense to build this cost-effective, branded and responsive product.

competitive analysis

Agencies
Grubhub Agency is known for white-labeling their products. Though they advertise native apps and the new web product as custom, they are often not building code from scratch nor are they creating shiny new layouts. I would say semi-custom is a more accurate descriptor. In my five years at Grubhub, I pushed for details like interaction design and micro-animations to be a part of the design process. Despite client’s expectations for these finishing touches, they were never a priority to Grubhub. It is these ingredients, in addition to a completely bespoke UI and customer journey, that puts agencies in a class above. The downfall of agencies? They often don’t have the tech chops to support all the features a restaurant may want, and maintenance can be costly throughout the lifetime of the product.

Industry Competition
Door Dash, Postmates, UberEats, Punchh, Olo, Revel, Toast, should I go on? While some competitors are food ordering marketplaces and some are direct competitors that develop these semi-custom apps, along with the tech demand in the food industry came a supply of resources.

The leg up for Grubhub? Having a feature-filled platform (loyalty, payment, reloading funds, gift cards, integrations, and more), and their success in attaining customers (via their SMB product).
Unfortunately, I cannot share Grubhub’s data.

As a result of their existing client roster and majority in customer market share, the web SDK product would also allow for a single login across all restaurants.

The SDK took me about two months to design from sketching to approved wire-frames, and post-design, I became a full-time developer. I took on all front-end development work for styling the first round of clients: Burger21, fresh&co, Chase Pay, Honeygrow, Minigrow and more.

process

My Value
Working at Grubhub for five years, I had personally designed and developed mobile experiences and interfaces for more than 200 of Grubhub’s clients. As much as building one-off apps sounds SO exciting, where everything is innovative, the drop-shadows flow and the typography has no guidelines, I have learned the importance of designing data-drive experiences for scale.

At Grubhub Agency, 500+ apps (Android and iOS) have been churned out maintained; every UI and UX that was designed was repurposed, which is a totally different design skill set and way of thinking.

Brainstorming and Sketching
I downloaded a myriad of ordering apps such as:

• Panera’s app - reknown for its customer journey and UX

• Sweetgreen’s app - touted for its silky interactions

• Chick-fil-A’s app - highlights a visual order customization UI

• Door Dash - great map view UX

• and more

After conquering the world of research by reviewing our data, studying UI trends, mapping user journeys, scanning competition and trusting my instincts, I began sketching a rough idea of each screen. To me, sketching should consist of endless annotation and expectations of that screen’s features.

Wire-framing and Prototyping
As the sole designer on this project, I came together with my Product Manager counterpart, Scott, and we hashed out the UX on our whiteboards. From there I started wire-framing in sketch, checking in with Scott to review the UIs and interactions of individual elements, like hovers, clicks and empty states. I went through eleven rounds of designs, until all UI elements and UX decisions were approved. Many UX decisions (like the account side nav) were removed for scalability and UX reasons.

Brief Code Overview

• The base web SDK was built using ReactJS (it was originally built in Angular)*.

• The code base consists of React components and config files to specify layouts, menu IDs, app IDs, language, copy, default styling and more.

• All components have associated styling variables (such as border-width, line-height, font-size and drop-shadow).

• When creating a repository for a new client, any SASS changes to a variable, edits in copy and modifications to the config files overrode the base SDK.
  

My Hybrid Role, Developing Twice and Building a New Team!
The SDK took me about two months to design from sketching to approved wire-frames, and post-design, I became a full-time developer. I took on all front-end development work for styling the first round of clients: Burger21, fresh&co, Chase Pay, Honeygrow, Minigrow and more.

*After creating the wireframes, we worked with an external team of developers to build the SDK in Angular. However, considering how configurable all of the elements in the the SDK were, we realized Angular was not the ideal framework. So, we hired a secondary team of developers to build a new code base in ReactJS, which allowed everything to be segmented into variablized components.

Since Grubhub Agency had never focused on web, there was no full-time full-stack developer in house; we quickly learned we needed to build a team and hired a development lead. Under the new lead, I continued to work on styling, adding variables to SDK and built my first React component.

Building a React Component
Nando’s Peri-Peri Chicken wanted to feature a menu item atop of their menu listing. Because the SDK intends for all code to be reused, I built a feature image React component that synced with the config and assets directory. This enabled all future clients to turn on and brand a menu feature image as well!

Sketch
-

Main screens outlined in chicken scratch with plenty of annotation and an agenda of page features

Page’s UI elements sketched (e.g. dropdown UI)

Mapped the customer journeys

Tools

whiteboard

sketchpad + pencil

InVision Freehand

Wireframe
-

Digitally recreated sketches with the elements configured for white-labeling

Versioned the document, and labeled screens by device and description

Tools

Sketch

Prototype
-

Exported assets, wire-frames and high-fidelity screens in their appropriate resolutions and formats

Created working prototypes for client’s approval and internal testing; included screens for error and empty states.

Annotated prototype screens to describe customer journey and branding opportunities

Tools

InVision

Axure

Sketch

Develop
-

Created client repository

Exported screens to Zeplin

Ensured all menus, ordering providers and flags were correctly configured in back-end admin

Tested endpoints to return correct data

Styled all elements screen by screen (desktop then mobile)

Committed, pushed and merged changes

Uploaded assets to template SDK: typefaces (converted to webfonts), svg icons, rewards images, and background images

Implemented all copy changes

Built ReactJS components

Added new style variables to SDK components

Tools

GitHub

Rails

ReactJS

SASS

Command Line

Visual Code Studio / Sublime Text

Zeplin

Postman

HTML

JIRA

Grubhub admin

Launch + Scale
-

Tested environments (staging, QA and production)

Repeated the development process for each new client and developed custom work into the SDK for up-sell opportunities

Documented process

Tools

Confluence

a new product

Clients!
The evidence of the product’s success is clear with the huge brands (who can afford to build their own products) use of the SDK. Also, Grubhub now uses the web SDK to test integrations for new locations in its QA environment!

The Numbers
As a result of the SDK, its ability to be branded, and many configurations, thus far:

• 2 New Full-Time Hires

• $250K in flat-rate revenue

• 15+ restaurant chains in contract

• 3000+ locations each generating $50/month