The Beauty Trap in Design

My primary responsibility as a UX designer and creative director is to get inside the mind of the client and their customer. To think like they do, anticipating stumbling blocks they may encounter even if a trained professional web designer would sail briskly through.

I’m a sucker for beauty. It shames me to admit it, but my favorite experience as a UX professional isn’t solving problems for the user, or knowing that I contributed to a ten percent increase in the client’s conversion rate. My favorite experience, and maybe some of you relate to this, is when a series of otherwise unremarkable letter shapes, buttons, colors, and blank spaces combine to create a breathless moment of aesthetic delight for the eye and mind.

I love a good page layout. I’m a chump for a visually well composed series of paragraphs. The proper degree of corner rounding for a given set of photos in relation to a box three columns over sets my little heart aflutter.

Good visual design has almost become a commonplace in our industry, at least on the websites of leading publications and organizations. Great visual design, however, remains as elusive as a black butterfly.

When great visual design occurs by my lights (because this is all subjective, and what delights me might leave you meh), I fall so in love with it that I can, if I’m not careful, forget my primary responsibility as a UX designer and creative director.

A web doctor’s first duty

My primary responsibility as a UX designer and creative director is to get inside the mind of the client and their customer. To think like they do, anticipating stumbling blocks they may encounter even if a trained professional web designer would sail briskly through.

What prompts this reflection is a recent lesson learned.

To wit: my team here has begun using good old Style Tiles instead of full web page comps to quickly explore potential user interface tonalities and share them with our clients. It’s worth quoting Samantha Warren, the tool’s inventor, to share why:

Style tiles are a flexible starting point that define a style to communicate the web in a way that clients understand. A style tile is more refined than a traditional identity mood board and less detailed than a website mockup or comp. When an interior designer redesigns a room they don’t build multiple options of the designs they’re proposing, they bring color swatches, paint chips, and architectural drawings. Style tiles act as paint chips and color swatches for the interface that we can execute on any device or at any dimension. It’s a truly responsive solution to visual design.

Our team has had good fortune with this technique, enjoying fluent brand conversations folks who aren’t used to talking about such matters, iterating faster, and reaching the right design decision more quickly than waterfall-driven comping would allow. We can also get into development sooner, especially when Style Tiles are combined with pattern thinking on the development side and the benefits of WordPress as a platform.

Managing expectations

Success with Style Tiles depends on ensuring that the client knows that what you’re showing them is a Style Tile, and not a web page comp. That’s easy to do when you present design in-person, but trickier when delivery is asynchronous via the web, as it often must be for our busy Special Projects team.

It’s easy for even experienced clients to mistake Style Tiles for web page comps when your designs are so polished (because your designers are so skilled), and the elements you’ve used in the Style Tile are so extensive (because you really gave it your all), that even a UX pro might initially mistake the Style Tile for a finished web page.

So enraptured have we become with Style Tiles that we recently asked one of our designers to create a Style Tile template for future work of this kind. Like you do when you’re onto something good.

Oops, I’ve done it again

Recently, as we were on the verge of asynchronously sharing a wireframes and Style Tiles presentation with a significant client, my team lead pointed out that the presentation was so lovely and so polished that it could easily be mistaken for a web page. To forestall that, we doubled our vigilance in setting up the client’s expectations via the Google Doc they see before they get to look at the work.

Less than 24 hours later, an unrelated client on an unrelated project asked if the Style Tile we’d shown him and he’d signed off on was a web page comp. He is an intelligent and highly media-savvy client, and we’d explained what Style Tiles were in a preliminary document, but for perfectly legitimate reasons, he hadn’t been able to fully digest that document. Also, as I looked at the Style Tile in question, I realized that I, too, had initially mistaken it for a web page comp—and wondered why there was no footer.

And here’s where I went wrong. Instead of realizing that a client might easily make the mistake I had, I felt embarrassment at my error and green-lighted the Style Tile as-is.

As a creative director, I should have seen my error as the same error a client could easily make. I should have worked with the designer to make the Tile less coherent, less aesthetically near-perfect, less like a simply gorgeous web page.

I should have done that, but the beauty of the presentation seduced me into forgetting my primary purpose as a creative director. Mea culpa, and lesson learned.

It’s the designer’s duty to create a presentation that’s as brand-appropriate and as purely pleasing as can be. But if you supervise other designers, it’s sometimes your responsibility to step in and say, “sorry—that’s a little too beautiful for our purposes at this stage of the process.”

My thanks to team lead Christie Wright, who caught the problem when I hadn’t, and to all my wonderful colleagues on #TEAM51.

Photo by Erol Ahmed on Unsplash.

By L. Jeffrey Zeldman

“King of Web Standards”—Bloomberg Businessweek. Author, Designer, Founder. Employer Brand at Automattic. Publisher, & Ava’s dad. Pete’s brother (RIP). He/him.