Design Inspiration is Everywhere

UX Lessons from a Night at the Bar

The Backstory

A few weekends ago, I was looking for somewhere interesting to dine out and ended up at a spot called BABA, a Balkan-inspired restaurant and cocktail bar.

It had a lot going for it — an inviting ambiance, delicious drinks, and cheeky signage (see below) that made it hard not to like the place.

But there was one element of the experience that impressed me far beyond the rest: the restaurant’s drinks menu.

Gotta love run-of-the-mill bathroom signs infused with a dose of humor, eh?

There’s no doubt that the selection of drinks was fantastic— but more specifically, it was the design of the drinks menu that blew me away.

Not only was it aesthetically pleasing, but it was also the most human-centered menu I’d ever come across. It made my drink selection process so much easier than usual.

(By the way, I should note that I have no affiliation whatsoever with the business, beyond having been a customer there one fine evening.)

How I usually select a cocktail

Most cocktail menus I’ve seen feature a laundry list of options that, frankly, can be a little overwhelming — at least to a layperson like me who’s not too well-versed in the world of mixology.

I typically end up picking a drink based on whichever has the most creative or punny-sounding name (Marzipan’s Labyrinth or Tequila Mockingbird, anyone?). Or sometimes the most seemingly interesting ingredient. A very scientific (read: borderline blasphemous) way to decide, I know.

Either that, or I’ll ask the bartender to help me choose. This usually lends itself to a discussion about what kind of drink I’m in the mood for, and after some back and forth, we might emerge with a decision.

I’ll admit, the drinks were about as enticing as the kickass menu design (Source: BABA)

How the menu design made cocktail selection easier

Luckily, I didn’t have to resort to any such tactics this time. No need for shots in the dark (no pun intended, I swear) or bugging the [way-too-busy-for-me-anyway] bartenders to help me out.

Instead, the menu itself guided me through my decision. It made me feel at ease — empowered, even — to select a drink I might actually like.

And, once I received my drink, the way items were depicted helped me ensure that the order I got was right. More on that very soon.

Lesson 1: World-in-miniature representations ensure that what you see is what you get

All too often, icons are thrown onto a page or screen in the hopes of making a design more useful, when in reality at times they add little value (and in some cases even hurt users’ understanding and serve as visual noise). Icons that are too repetitive, difficult to interpret, or only work if seen as part of a set tend to create more problems than they solve.

The icons in this menu, however, are a shining example of icons done right. They are simple, elegant, and ridiculously effective. With just a quick glance, it is easy to get a sense of what your order will look like, and what you can expect in terms of drink size and accompaniments.

Because these icons are so literal, they eliminate guessing games; what you see is pretty much what you get (only at a different scale, of course).

Icons on the menu help give you a sense of the “type” of drink you are about to order

These icons can help bar patrons in many scenarios. For example:

• If someone wants to avoid ordering a “girly drink”(though arguably that’s a silly way to label drinks in the first place), they can easily pick a drink that better reflects their preferences or the image they want to portray
• If the aim is to order a drink that’s especially Instagrammable, the icons can certainly make it easier to whittle down potential options
• If an order is bungled, there is a much higher chance that you as the customer will know to ask for what you actually ordered

Speaking of bungled orders, this is exactly what happened to me during my visit. I had ordered the “Fix Me Up”. Soon afterwards, the bartender handed me a glass but nothing with it. Though the drink was correct, the visual cues had primed me to expect something with my drink — and the supporting text reinforced this. This gave me the confidence to request what was missing (i.e., the side of chocolate that I was quite looking forward to).

Though menu design and delicious drinks may be their strong point, spelling is not ;)

These icons utilize the world-in-miniature (WIM) strategy, which is typically used for designs in the context of navigating through spaces and operating objects. For instance, we’re used to seeing world-in-miniature representations whenever we print preview something, or when we use an app like Google Maps or Waze to get around town.

Another example of the WIM strategy at work, making it easy for people to tell which of the car’s lights are on

These small-scale versions depicting a larger reality help us orient ourselves and prevent mistakes. In the case of our menu, the icons help people visualize their options and provide a sense of control around what’s being ordered.

The takeaway:

When applicable, use iconography to help guide people’s expectations.
(Restaurants with 83 — or even 10 — varieties of pasta, take note! This is a strategy that could easily come in handy to help patrons make decisions.)

Lesson 2: Jargon-free language and categorizations are drinker-centric vs. bar-centric

Another standout element of BABA’s drinks menu was how well it was organized and labeled. Instead of the 30 cocktails on the menu being listed indiscriminately — or in categories like “Our Specialties” or “Signature Cocktails”, which would really only mean something to employees or regulars — they were categorized based on the “vibe” or “mood” that the drinker was in (or wanted to be in).

For example, categories included “Light and Refreshing”, “Strong and Boozy”, and “Warm and Cozy”. These terms required no domain knowledge of mixology to decipher; all you needed to know was how you wanted your upcoming drink to feel. Talk about user-centric!

The page on the right was definitely calling to me, specifically the drinks that promised “Warm and Cozy” vibes

Good information architecture aligns with users’ mental models and meets them where they are. It presents people with choices that are meaningfully different, but not overwhelming. It forgoes the jargon and uses terms that users will understand, rather than puzzle over.

And as a result, it makes sifting through content — be it via a hamburger menu or a menu with hamburgers on it — quicker, easier, and a lot less daunting.

It’s no wonder, then, that “navigating” through the options on BABA’s drinks menu and honing in on a specific selection turned out to be such a breeze. Instead of having to wade through every single option, I instantly jumped to the “Warm and Cozy” section and selected a drink from there. The menu’s information architecture reflected the approach many customers — myself included — take when trying to choose what to drink (i.e., seeking out a drink that matches a certain mood).

Not only that, but the category names were easy to understand (hard to get much clearer than “strong and boozy”, after all). They were also distinct enough to make choosing a path relatively easy.

The takeaway:

Ensure your information architecture actually reflects users’ needs.

Lesson 3: Effective use of size, color, contrast, and negative space makes for easier reading

We’ve all seen those menus — the ones that have so many items all listed one after another with zero breathing room, in fonts that are illegible or all over the place, with color palettes that basically span the rainbow. Simply looking at the options can start to feel stressful, let alone deciding on what to do next.

The best documents and webpages avoid these issues by ensuring that they are scannable. They present information in a logical, digestible manner. This way, those consuming the content are not hit with information overload; instead they can take in key content as they need it.

The alphabetical order within each category of the spirits menu also helps people quickly scan for their brand of choice

BABA’s menu once again shines in this regard. In addition to being aesthetically pleasing, the visual hierarchy on the pages of the menu make them very easy to quickly look through. The content is separated into manageable chunks, the most important categories are the largest, and there is plenty of negative space that makes reading effortless.

Color is used strategically here to help the reader process different details of each drink description

In addition, within the cocktail menu specifically, color is used deliberately to separate basic details about a drink (i.e., black for name, price, and ingredients) with additional information about it (i.e., pink for a summarized drink description and icons indicating how it would be presented).

These subtle design decisions are hugely impactful. Not only do they increase the visual appeal of the menu, but they help improve its usability as well.

The takeaway:

Always establish clear visual hierarchy to enhance scannability.

It’s time to find inspiration beyond the screen

The BABA menu empowered me as a customer, and this is a testament to the value of carefully-crafted content and thoughtful design. Opportunities for elevating people’s experiences in meaningful ways come in many forms, and are definitely not just confined to screens.

While my “journey” with BABA definitely included its fair share of screen time (let’s be real, it all started on Yelp), the bulk of my experience with the establishment was in person. This made the quality of other touchpoints — like interactions with wait staff and the physical menu — a critical factor towards my satisfaction.

Given that all well-designed experiences tend to follow many of the same principles, off-screen environments can be a treasure trove of inspiration even for UX designers focused on the digital realm.

We can rack up a lot of design lessons from our everyday, real-world interactions, if only we take the time to notice. Today’s a great day to start.

P.S. I wish more menus, both online and offline, were as customer-centric and easy to navigate as this one. And I also wish more drink orders included the option of built-in, guilt-free dessert on the side!