“Quality” should not, need not be a four-letter word in product design

Addressing presentational quality within an MVP-focused culture can be a struggle, especially when teams are guarded against pixel-perfect design.

Situation: Frankie is a product designer for ExampleSite.com, an editorial publication that sells subscriptions. She represents Design on a high-performing product team. Frankie is happy on her team and usually aligned with Anika, the Product team lead, and Roy, the Engineering team lead, on matters of scope and priority. But not always.

The team is working on a new product feature. Frankie rushes to meet a tight sprint deadline, shipping a workable but flawed MVP design. Roy estimates the difficulty and code development commences. Everyone is happy.

Days later, Frankie submits tickets for design iterations to improve presentational quality. Her tickets are not prioritized during subsequent sprints. Frankie is told that issues about neatness and aesthetics are not important compared to "things that drive the business."

Frankie loves her teammates, but they can sometimes think like Econs rather than Humans. As a result, ExampleSite.com carries noticeable design debt. Frankie is alarmed but not experienced enough to articulate convincing arguments to make her case. Her points of view sound more like complaining and moralizing. She is told by Roy and Anika that she should be less “pixel-perfect” (oof!) and more agile.

The conundrum:

• Anika and Roy are doing their jobs, shipping code at a productive rate and prioritizing based on their estimations of importance and difficulty. Their concerns are valid; "pixel-perfect" mindset can be a problem, especially if it causes delays or a designer to drift from the team and into caves.
• Frankie wants to do her job too, but she's blocked and frustrated. She is correct—presentational quality is undervalued, and ExampleSite.com's poor presentational quality is damaging to their business.
• Who’s right? They all are. Process is important, and so is presentational quality. How important? Let’s consider the thought process of one potential customer, Dana, during the discovery segment of her customer journey. (Insights are brought to you by the wonderful world of behavioral science.)

The power of the first impression

Dana is smart, curious, and civic-minded, someone who might consider subscribing to a premium news website. She follows a link to an article on ExampleSite.com. It’s Dana's first visit to the site.

Within seconds of arriving at the article—even as quickly as a fraction of a second—first impressions are formed by Dana’s unconscious, automatic thought process, including perceptions of quality and value. This is Dana's Automatic System at work. The Automatic System (also known as System 1) and the Reflective System (System 2) are distinct cognitive processes. The Automatic System is intuitive, occurring unconsciously and effortlessly, leveraging preformed mental shortcuts and stereotypes. The Reflective System is rational, effortful, and analytic, called into action when more challenging mental analysis and assessment is required.

The Automatic System forms first impressions. Within a split second, first-time visitor Dana intuitively:

• Infers signals from the presentation
• Compares ExampleSite.com to available stereotypes in her brain
• Forms associations
• Assigns ExampleSite.com a value relative to other websites

Signals abound in the design, including noise levels, spacing, typeface attributes, color, neatness, cognitive ease, inconsistency, noticeable flaws, and familiar content and layout patterns (both good and bad).

Anchoring and Adjustment

Once formed, Dana’s first impression becomes an anchor, a mental evaluation that occurs when people intuitively assign a value before rationally estimating that value.

If Dana returns to ExampleSite.com and reads additional articles, she may notice that the less-than-stellar look and feel belies high-quality and well-written content. Her original anchor placement would be adjusted, but such adjustments are slow and gradual, always restricted by the pull of the original anchor.

Halo Effect

Dana’s first impression of the article may apply to all of ExampleSite.com. The halo effect is a cognitive bias that extends impressions we form—positive or negative—about one aspect of a person, product, or brand to other areas as well. If Dana’s anchor for her first experience is “blah,” she’s likely to assume all aspects of ExampleSite.com are "blah."

Dana's Customer Journey

A poor first impression will haunt Dana’s customer journey. If she gets as far as a paid-conversion proposition (high value perception is a prerequisite), the foundation laid by a poor first impression will inhibit her decision.

What does this mean for Frankie and team?

Undervaluing quality has put them at a disadvantage. Overcoming the poor first impression will be slow and unnecessarily difficult. A positive first impression, conversely, would have spotlighted the quality of the content and elevated the proposition of ExampleSite.com. It would have made the team’s lives easier and encouraged conversion.

It also means that there is a disconnect between the team's definition of viable and the way people respond to their products. We want to believe people will stick with us patiently while we figure out our issues, and their evaluation of us will improve commensurate with our sprint outputs. Science disagrees.

I should pause briefly here to clarify a couple of points so none of you shoot out my porchlight:

• I'm not anti-agile. I'm pro-agile and heavily invested in process. If we're savvy, we don't need to decide either/or (speed/quality).
• Discovery isn't the only thing that matters; I get it. There is a lot more to design strategy, such as the way it supports reinforcement and retention. That's for a future article. For now, onward with perception and first impressions.

Extrapolating the principles to product design

I immersed myself in these behavioral principles in 2018, when I worked at Advance Local, which is a hub for a collective of regional news organizations. Their digital products had always been free and ad-supported, and now they were planning to sell digital subscriptions for the first time. My team and I wanted to contribute meaningfully to the mission.

First, we conducted our own user tests to validate the aforementioned principles. Why did we bother? After all, the concepts described had been heavily validated. Psychologist Daniel Kahneman was awarded the Nobel Prize in 2002 for his work integrating psychology insights into economics. Behavioral economist Richard Thaler likewise won a Nobel Prize in Economics in 2017 for related nudge research. We tested for three reasons:

1. Because very little of the research led by Kahneman, Thaler, and other leaders in their fields pertained to digital editorial products. We wanted to be confident that we could extend their principles to our products.
2. Because some popular behavioral science research has come under scrutiny, before and since then, including accusations of flawed or fabricated data. A group of concerned academics at DataColada.org have executed some notable takedowns. We didn’t want to lead our company over a cliff or squander trust in our design team.
3. Because it’s not enough to be right; it’s important to be effective. Nobels notwithstanding, my colleagues at Advance Local were dubious of these seemingly weird and unfamiliar concepts that didn’t match their opinions or experience. Validation using our own digital products may not have popped any buttons on Kahneman’s or Thaler’s vests, but it was meaningful in aligning our teams and instilling confidence in our design strategy. It was important that we made the journey together.

Tests and takeaways

Here are some of the tests we conducted that validated the principles of automatic thought process and anchoring:

• Article and homepage value perception: We conducted 10-second testing on article pages and homepages from eight publications in order to (1) validate the principle of automatic thinking and anchoring, and (2) surface design strategies that will make a difference. Takeaway: Design choices clearly affected value perception. Read more about the test here.
• Effect of color and typography: We created multiple versions of a small subscription offer CTA, each time changing only one variable—the color or the typeface. Based only on what participants saw, we asked them to estimate the cost of a monthly subscription. Read more about the test here.
• Usability boosted by adherence to heuristic pattern: One simple change—the addition of a small topic label that was low on useful information—changed user feedback regarding a homepage design from "very disorganized" to "organized." Read more about the test here.

Recommendations

Having validated that presentational quality matters, how do we help Frankie, Anika, and Roy? We help them by never putting them in a position to debate the importance of design quality during a sprint. Those decisions should be resolved well before that. Here are some suggestions:

Lead

• Say it out loud. Senior leadership must make it clear that quality is expected. Failure to send that message gives permission for mediocrity.
• Set goals. Establish company goals for user experience and design. If your mission talks about quality but your remits are limited to page views, conversions, and ad impressions—quality will suffer.
• Elevate design literacy. Facilitate design thinking, workshops, and brown bag lunch sessions. Be involving. Convert dysfunctional debates into informed, collaborative discussions. Well-facilitated design thinking is a win for everyone. It boosts enthusiasm, personal investment, and leads to superior work. Eradicate us-versus-them mentality. There is no them; it's only us.

Front-load design decisions

• Shrink your design footprint. Minimize the moving pieces in your design. Excess is opportunity for debt. Do you really need all of those templates and components? Be tough on yourselves.
• Leverage design systems. Design systems are a collection of predetermined design decisions. They speed development time and bake in quality. Invest less time in one-off design and development and more time fortifying your design system. Design from the inside out.
• Consider adopting design tokens. Designers build tokens with presentational attributes for typography, colors, spacing units, and more. Those tokens become global presets that are scaled out when building all components. Quality imbued in tokens has far reach.
• Prioritize timeliness of insight. Design quality is measurable. Don't guess. Get out in front of your roadmap. Conduct UX and design research early enough to guide decision-making.

Solve for quality in your process

• Be reasonable. We don't want quality-induced paralysis. We want to ship design and code frequently and fluidly. Accept and embrace the idea that product is going to ship before you're 100 percent in love with the design. That's okay. What we want—process that iterates quickly and affords predictable cycles for incremental improvement.
• Be true. If designers observe that iterative improvement is a false promise, they may jeopardize scope in an attempt to nail everything perfectly on the first pass.
• Stop saying "pixel perfect." It's a counter-productive, passive-aggressive term from a culture that assumes quality equals drag. Don't ask if presentational quality is important; level up and ask how you can achieve it efficiently. If you can't manage speed and quality, you're hurting your business.
• Schedule regular design tokens releases. Tokens attributes are output from your design application, such as Figma, as JSON. JSON files are then ingested into your front-end styling code. Scheduling regular JSON releases and re-ingestion enables designers to make presentational improvements while minimizing engineering time involved.

No sloppy design specs

• Optimize your design spec process. A design spec is a religious document. It is a contract between designer and engineer promising concise, unambiguous instructions provided in a logical, consistent order. A healthy spec process increases design fidelity and decreases design churn.

Be defensively responsive

• Prepare for the worst. Don’t build designs that can look good; build designs that can’t look bad. Responsive and adaptive strategies should embrace unpredictability of content. Eliminate breakable, fixed-width patterns in favor of fluid, defensive designs.