153 tab toggles, 53 copy & paste clicks: a web design misadventure

BentoBox is a marketing and commerce platform for restaurants. Our award-winning web design takes a white glove approach to onboarding customers.

Background & Goal

When a restaurant onboards with BentoBox, a member of the web design team will style all of a restaurant’s digital store fronts – their website, online ordering, and online catering.

Our legacy design system has numerous style fields where the designer needs to copy and paste color hex codes. 

Example:

• Page background color = #F5EFED

• Button fill color = 2292a4

• And so on

The goal of this early-stage product discovery was to identify and quantify the pain points with existing design system for our internal web design team — the power users of the platform.

Methods

I watched recordings of how the web design team uses our current design system. I got recordings of a senior web designer styling a simple “ready to go” website (ie, one with minimal customization) as well as a highly customized website for a large hospitality group.

• I watched each recording first to note the design process, noted patterns.

  • I wrote down every interaction on the screen

• I then analyzed these interactions to detect patterns and pain points

• The screen recording showed wild amount of copy and paste

• Toggling across 4 different browser tabs

• 3rd Party Tools

  • I paused the video to note what 3rd party tools the designers interacted with, what was in those tools, and how they interacted with the tools (ex: a designer used Adobe Photoshop to make a transparent background version of the logo for the website)

• I then re-watched the recording a second time to quantify pain points and understand more thoroughly how the designer engaged with their various tools. Because I noticed a bottleneck in all the tab toggling and copy and paste, I tallied every time the designer Copy & pasted a hex code OR toggled from one tab to another.

Key Learnings

In the 30 minute design session, the senior designer toggled tabs over 135 times and copy and pasted hex codes 53 times. 

The designer was toggling between four browser tabs

• An Asana ticket with design requirements — this is where the hex codes were provided

• A color contrast ratio tool, that allowed the designer to confirm the colors would meet WCAG accessibility standards

• The design system itself

• The live website

Takeaways:

• Structured Data: There’s a need for structured brand data, namely color. The sheer amount of copy and pasting alone demanded it. The designer could instead choose colors from a color library. Perhaps a dropdown instead of an entry field.

• Automate color contrast ratio: The need for structured brand data deepened when I considered the designer’s need to validate contrast ratio for every color combination.

• Realtime Preview: A lot of the tab toggling also came from needing to check the designer’s work on a live website. Every color change needed to be published to live. My second major takeaway was the designer’s might benefit from a realtime preview of the changes in progress without toggling to a different browser tab.