Do Restaurant owners feel at ease with web design terminology?

BentoBox is a marketing and commerce platform for restaurants. Our website builder + ecommerce tools gives restaurant owners and operators direct control of the tools they need to drive more success.

Background & Goal

Product decided to move forward with building the brand center (foundations research) so web designers could create global styles for a restaurant that would power the branding for all a restaurant’s digital storefronts (ie, website, online ordering, online catering, email marketing, etc).

We wanted to ensure our design decisions now could scale for the future. Our current business model included professional team of web designers to style a restaurant’s website, but in the future our business planned to expand downmarket which would mean restaurants would do more self service. Our open question was, could restaurant owners style their storefront with as much ease as a web designer?

Methods

Product Design created a prototype in Figma which we plugged into UserTesting.com. Product Design and I recruited 10 people who identified as restaurant owners or operators through UserTesting.com’s recruiting software. We then issued the same test to 4 web designers from our team.

The test required a user go through the Brand Center’s styling interface step by step, assigning fonts & colors to various components (ie, buttons, headings, background, etc). 

With each task, the tester was surveyed:

• Asked if they completed the task successfully

• Yes, they completed task successfully

• Or no, with 6 different reasons why they didn’t complete the task (including an option to explain in long format)

• Asked if any terms or actions felt unfamiliar or if they didn’t understand. 

• They were asked to give a score between 1-5 (Very Difficult to Very Easy)

Key Learnings

Even though the testers gave an average score of 4.7 (signifying the tasks were very easy to understand and complete) we did get some qualitative feedback that was instructive to bringing our designs up a notch. 

• BentoBox’s Legacy Design tool didn’t have tool tips or help text, and so neither did our new design. Web Designers were expected to know these terms, but we learned we couldn’t assume the same for restaurant owners. We decided to update our designs to include help text. The design terms restaurant owners found confusing included:

• Hover State (for buttons or links)

• Cards

• Drop Shadow

• The Brand Center incorporated a live preview, so as you changed colors you’d see the colors change on the live preview. Our user testing prototype did not have the Live Preview feature due to the complexity of the different states. But we realized:

• The live preview should always reflect what you’re working on. When styling a Menu, for example, the live preview should show a page with a menu.

• Before handing off the project to engineering we added a couple more requirements for how the Live Preview would interact with the Styling interface. For example, even if a restaurant didn’t really understand what a “drop shadow” was, at least they could get realtime feedback if they checked the box.