Disjointed Web Design processes, and how Restaurants then got the short end of the stick

BentoBox is a marketing and commerce platform for restaurants. Our product suite helps restraunts create digital storefronts to engage with diners, diversify revenue streams, and action on guest data.

Background & Goal

BentoBox would like to expand its total addressable market by revamping its flagship website builder. Our goal is to improve design flexibility and facilitate more independence for restaurants to design their websites themselves.

Internal interviews revealed some key insights for our Next Gen website builder

• Our structured pages (menu pages, private event pages, etc) are too rigid—any piece of content should be able to go on any page

• Section names should be more economical, and reflect their purpose on the page, not their layout.

These two insights turned our focus to the building block content a customer would want to add to a page. The feedback about naming conventions made us realize we should engage our customers for what naming conventions might make sense to them.

Methods

I adopted a number of qualitative and quantitative research methods to generate enough material for product design to wireframe a brand new architecture. I set up two panels with our primary users — (1) an in-house web design team and (2) the onboarding team who gather design requirements from customers — to understand how brand assets (colors, fonts and logos) are currently collected.

I asked these panels:

• what customers expected from their digital storefronts (ie, did they expect the website to match online ordering)

• what processes were in place to support styling needs

• timelines

As a follow up, I conducted a data audit of all the style fields in our legacy data system to discover gaps in user need and overlaps between existing products.

Product Design and I then created a prototype of all the data needs in Airtable so we could present a new framework to the in-house design team.

Key Learnings

We learned the real room for improvement is not how long it take the team to style a storefront — but rather the operations around styling these storefronts are overly complicated because styles aren’t centralized. Multiple designers are dispatched to style a single account because there are complex cross-team dependencies that needed to be met in order for designers to do their jobs. The problem is customers are delayed in getting the designs they’re paying for.

Web Design is taking great lengths to make the branding consistent across websites, online ordering, catering, etc. While it only took 28 minutes to style online ordering, the operations around a design take 2 days and 15 hours. In addition to an improved UI, designers needed the ability to style async from these other teams they’ve been depending on.

Outcome: I created an organizational blueprint (giant flowchart) for how customers get onboarded from a design perspective (how assets are collected + when / who styles different products / when do customers get touchpoints with design / when do customers go live). I used this blueprint to start formulating a new user flowchart for the new architecture.

Next Steps: Online Ordering and Catering use all the same styles. If we let web design work independently, we could support same-day turnarounds for launching customers — improving our time to launch by multiple days.