Every Little Thing, Part II

Every Little Thing: Why Attention to Detail Matters, Part II

In our last installment, Every Little Thing: Why Attention to Detail Matters, Part I, we talked about the benefits of being detail-oriented and the drawbacks of perfectionism. We also briefly walked through Something Digital’s Quality Assurance testing process, in which thinking critically and carefully impacts designers, teams, stakeholders, and users alike. Now, we’ll look at an external site through a critical lens to show how something as small as margin or font size can impact usability, accessibility, and brand loyalty. Regardless if your goal is to serve a community, to build a following, or to to stand out among your competitors, investing in a well-planned, well-executed, serviceable design is one of the best long-term business strategies. Paying attention to detail matters. Design matters, period.

Think Compassionately

“The single biggest problem in communication is the illusion that it has taken place.” – George Bernard Shaw

Alongside monitoring analytics, conducting regular UX audits helps us to gage the health of a website and pinpoint areas for improvement and growth. If we only skim for quick answers to explain why site performance is down, we might overlook hidden roadblocks or miss key details. During an audit, we investigate forward, backward, inside and out. We don’t just scan for existing mistakes, but we also note what is working well, compare competitor sites, and suggest enhancements that can later be measured with analytics. It’s much like how we weighed design decisions in the original discovery exercise, only now, we have live visuals, real customer engagement, and data.

Coming out of an audit, we want to validate if our designs work in the real world, if they are user-friendly, and if there are any failures in communication, that we have practical recommendations for fixing them. To illustrate our approach at SD, let’s put on our designer goggles and comb an example web page — something neutral and widely read: a New York Times feature  — and call out small details that positively impact usability, readability, and legibility (and what could be done better).

Desktop Visual Examples of NYT Article Top: The site header and article hero image; Center: Related articles; Bottom: An image with a descriptive caption

 

Mobile Visual Examples of NYT Article
Left: The site header and article hero on mobile; Center: White space around advertising; Right: The submission form

Usability

DESIGN DETAILS AT WORK
Header: A sticky navigation follows users on scroll, giving them access to the main menu, search, and sharing tools. Notice the soft shadow clearly separating the header from the page content. Within the navigation, the title of the article displays, allowing users to refer to what they’re reading, regardless of where they are on page.

Feedback: Hover states, like color changes on social icons or the zoom tool on images, inform users when something can be clicked. The number within the comments icon updates regularly, letting users know there’s a lively discussion happening around the content that they can participate in.

Related content: A sidebar of related articles includes contextual images and headlines to give users a holistic view of how the story has been covered in the past and prolongs their engagement with the site.

DESIGN DETAILS TO REVISIT
Because the article is long, a ‘Back to Top’ button could help users jump to the beginning of the article. Likewise, if the sticky header was enabled on mobile, users browsing on their phones could easily access the navigation.

Readability

DESIGN DETAILS AT WORK
Typography: There is a maximum width on paragraphs, limiting the number of characters per line, which makes long blocks of text easier for users to read. Additionally, there is a clear typographical hierarchy. Content is broken up by subheadlines, quotes, and sidebars, and each type is consistently styled.

White Space: There is a substantial amount of breathing room between advertising and the article, so that users can distinguish paid content from brand content.

Mobile: All of the content that was overlayed on a hero image on larger screens drops below the image on small screens, so that users can easily see, read, and tap it. No features are lost from device to device.

Clicks to Conversion: The design doesn’t ask the user to do more work to get more content, like hiding the story within tabs or behind a ‘read more’ link.

DESIGN DETAILS TO REVISIT
Paid ads could be deferred or relocated, so that they don’t break paragraphs. Also, if the total estimated time for reading displayed at the start of the article, users could anticipate how much time they need to invest to read it, potentially reducing abandonment.

Accessibility

DESIGN DETAILS AT WORK
Links: Font colors meet accessibility contrast requirements, and most links are additionally underlined. Multiple visual indicators distinguish links from static copy for users with impairments like low-vision or color-blindness.

Images: Each photo in the article is methodically captioned, which is helpful for blind users who require a screen reader to navigate the site.

Microcopy: The submission form features labels the clearly specify what should be entered into each field, minimizing confusion. Additionally, microcopy preemptively outlines required fields, input character limits, and terms and conditions.

DESIGN DETAILS TO REVISIT
While the submission form has specific labels and calls to action, the search box does not. However, both forms could benefit from higher contrast borders and larger inputs for mobile users (at least 40px).

Overall, has communication been made successfully? Yes. Can communication be improved? Always. In this example, we only brushed the surface. But we can conclude the designer thoroughly iterated and tested their work, adding features — not flourishes — to serve users at every move.

Think Strategically

“Integrity is the essence of everything successful.” – R. Buckminster Fuller

Do thousands of marketing emails stuff your inbox per week? Is it even possible to commit to inbox zero in today’s e-commerce ecosystem? For a designer, a more important question is: What qualities do the few you actually open all have in common? I’ll venture a guess that they:

  • Use charming, witty, or persuasive subject lines.
  • Exhibit high-quality photography.
  • Mirror site patterns, so that the email-to-site click-through experience is virtually seamless.
  • Have a strong brand voice setting the tone of every interaction.
  • Do all of the above consistently.

 

The question I always have for winning marketing campaigns is rhetorical: “How are they always this good?”

The answer is obvious: Nothing is accidental. Designers pay attention to every detail, head to toe, err, header to footer.

To show how attention to detail impacts brand integrity, let’s review an email marketing campaign. Again, to be neutral, we’ll look at a vertical outside of SD’s current client roster: Outerwear. In the example below, we chose just three qualities that link Patagonia’s standout UX strategy to their longevity.

Visual example of Email
A few examples from one recent Patagonia email marketing campaign

1. The subject asks a question, and the layout answers it.

Designers aren’t necessarily copywriters, but even if they don’t directly contribute to the marketing calendar, they are responsible for weaving the planned theme through the visuals (Note: SD’s Creative Team are BOMB copywriters). The subject asks for input, so users can opt in. Contextual photography of real customers, earing the product in real environments, provide the answer. In case you doubted Patagonia’s authenticity or dedication to outreach — both brand hallmarks — the designers even included captions and credits.

2. The typography is big, bold, and legible, and it’s mostly html.

Why is that last part so crucial? Not only is content visible to all users, even if their email clients have disabled showing images by default, but it also scales better. Often, embedding text within images ignores how most people read email: on their phones. If you can’t read the CTA, was it ever truly even there? For designers, it may seem risky to display html content instead of embedding text because it means giving up control over how the design will be rendered by different email clients. But a good designer is one who delights in problem solving, and therefore doesn’t mind going through multiple rounds of test sends to get a result that is flexible and accessible.

You might argue that some email clients can’t render webfonts, so embedding type on images is the only way to stay 100% on brand. But in the case of Patagonia’s emails, they’ve done their research and chosen google fonts — along with a defined stack of backup web-safe fonts — that closely resemble the ecommerce site typefaces. Being adaptable > leaving users out. The email reads clear and crisp on all screens by all users. If Patagonia promotes corporate responsibility, every design choice must, too.

3. The color isn’t just for kicks.

First, the email is stripped of color, save for the rich photography and buttons, which are the same hex values as the ecommerce site CTAs. Second, there is ample whitespace surrounding each content block so that they are digestible and free of noise. Third, the monochrome logo is isolated header and the navigation, also black, is minimized.

Color is thus reserved for clickable content — and all of it really pops! Essentially, the designers forge the trail they want users to follow, without having to give directions. Attention to detail leaves no one guessing. As an even more subtle detail, the buttons leading users to Patagonia’s shoppable categories are orange, while the buttons navigating to influencer, blog, and informational content are purple. I suspect that over time they have A/B- and user-tested everything down to button color and taken into account what resonates with their recipients, particularly the many that have become lifetime customers.

Although we only grazed the surface in this example, we validate that designers have the power to reinforce brand awareness and loyalty. They find common ground between design principles and core brand principles. They elevate copywriting and use visual language to say what words alone can’t about the brand. And if they’re dedicated — and always testing! — they can engender a unique brand voice that stands out — and thrives — on the internet.

The Takeaway

Being perceptive to the details in the world around us isn’t just about what’s in our immediate surroundings and what’s urgently signaling us right now. It’s important to see — and foresee — how every little thing can impact the future (and the users living in that future, interacting with that world). It’s the duty of designers to meticulously observe everything, so that they can identify problems and make educated decisions to help solve them. It’s also our duty to notice and learn when to take a step back. Through our examples, we’ve given you insight into SD’s internal design process and demonstrated how designers double as strategists. On one end of the spectrum, we can be nit-picky perfectionists (and we know it!), but on the other, we can be the best ally for your business by generating and sustaining a loyal following, guiding those users through conversion workflows, and advocating for their needs. Attention to detail pays off. We see it. Do you?

Special thanks to swiss-miss  for the continuous supply of design inspiration and inspirational quotes, some of which are featured here.

Written by: Gina Angelotti, Interactive Designer