An Event Apart: The Role of Visual Design

by Luke Wroblewski August 26, 2014

At An Event Apart in Chicago IL 2014, Jenny Lam talked about the value of visual design in digital products and shared some tips for evaluating aesthetics. Here's my notes from her talk Hit it With a Pretty Stick:

  • User experience designers need to understand a lot of things in addition to visual design. But as the discipline has matured, our understanding and evaluation of aesthetics has not. How do we champion aesthetics in our work and in our organizations?
  • Most of us believe in the value of visual design but in the real world we often have to convince others as well.
  • Visual design's impact on the bottom line is real. For example, Mint licensed a technology from someone else and added a user experience on top. That created $170 million dollars in value. Every dollar spent on aesthetics yielded Gillete $415+ dollars vs. only a $7 return from advertising. Design-driven companies outperform the S&P by 228%.
  • Companies that invest in design have better customer satisfaction, increased loyalty, employee retention, and more.
  • Aesthetics also communicate credibility and trust. In Stanford research, look & feel is primary driver of credibility.

Visual Design & Teams

  • For creative projects, we need creative leaders. If there's a leader at the top with a creative vision, great. If not, the creative leadership can come from the hands-on design team.
  • Interaction designers and visual designers have different skills. Interaction: HCI trained, Product Definition, User Flows. Visual: Graphic Design, Sensory-minded, Brand-centric. Together they're a powerful combination.
  • Give your visual designers accountability. Empower them. Carry through on aesthetics internally to create a design culture.
  • Dotted line relationships to the marketing team can help design teams get the resources they need to create great experiences. Marketing tends to have big budgets and cares about the visual aspect of products.
  • Visual designers can take ownership of in-house creative. Shirts, posters, etc are very visible and can show off visual design quality.

Aesthetic Principles

  • Aesthetics are about three components: integrity (how true & cohesive is the design), harmony (how the parts relate to the whole), and radiance (how we feel when we experience a product).
  • Integrity puts us out there, allows our brand to be memorable. The visual interface has become as important as a brand logo.
  • We remember only really good experiences and really bad ones. Not average experiences.
  • Harmony: all our elements need to support the central story. Use patterns, textures, and color sets to unify designs into a cohesive whole.
  • Look to nature for ideas of color harmony.
  • Radiance: light, shadow, and material allows you to create a sense of environment.
  • Make sure you tweak/edit default settings in your drawing apps. Don't use standard drop shadows, design them. Keep dimensions "human relatable": how would things look in real life?
  • Details matter. When we're delighted, the interface feels like fun and easier to use. Look for opportunities to delight.

Tools & Techniques

  • Methods to create a design language: futurecasting, moodboards, positioning matrices.
  • Futurecasting: imagine the end state & how people will feel. What will the press release be, how can the visual design support that?
  • Start with words: talk to stakeholders to figure out the visual direction that's right for a project. Ask people why they chose specific adjectives.
  • Positioning matrices (where a brand fits on a spectrum), moodboards, and more can help set the right visual direction.
  • Everyone can have an opinion but critique is not art direction.
  • Rules of critique: visual designer is the owner & gets a veto, write down agreed upon goals, focus on feedback not on solutions, don't come up with solutions as a group.
  • Say: “I don’t know what to focus on first.” Not: “It’s too cluttered.”
  • Say: “I’m having a hard time reading the text." Not: “Make the font bigger!”
  • Remind people you are a professional.