How a Branded UI Can Improve Conversion

An ecommerce site first and foremost needs to be useable. You certainly can’t checkout if it isn’t clear where the checkout button is. Design details can seem trivial to merchants, especially with the monumental checklist of features and technical integrations needed for launch. But the customer’s perspective might differ.

I recently came upon a beauty brand ecommerce site in search for the perfect skincare product. As I was browsing, I noticed all of the UI elements were gray and basic-looking, the product images were poor quality, and the checkout form was buggy. I ended up purchasing a different product on Amazon instead, simply because I didn’t trust the outdated site.

This is where a branded UI truly matters. As designers, it’s our job to portray the credible voice of a brand, both subtly and overtly throughout the experience, all while keeping UX best practices top of mind.

You’re being judged

First impressions matter. Think of your site as being judged up and down by a scrutinizing interviewer. The interviewer wants to know they can trust you and wants to be sure you’re genuine. The same mentality goes for your ecommerce store. When a customer lands on your site, they will be able to get some sense of your brand persona within one second. And in this one second, customers will subconsciously form an opinion about your brand, good or bad.

A hue difference

Choosing colors wisely for the web can make your site not only stand out from the rest, but also ensure no customer is left behind. There are several different types of colorblindness, and at SD we ensure color contrast is compliant for AA accessibility standards. Ensuring all customers, including those with visual impairments, can read your Calls-to-Action (CTAs) will help them convert. Color can also be used strategically. For instance, using brighter CTAs or specific sale messaging, to further guide the customer through checkout.

Just the right type

It’s not only what your messaging is saying that’s important, but it’s the feel of the letterforms themselves. You might literally be telling customers your brand is trustworthy and credible, but your typography choices could be saying the opposite. Your fonts should match your brand’s voice. At SD we typically suggest using one typeface for <h> tags and another for body copy. This is to give the typography on the page a little more depth and contrast, which improves legibility overall.

Hummel’s typography matches the brand’s voice and provides a clear hierarchy with the use of multiple font weights.


Better legibility ultimately proves for a better experience and a quicker workflow for the customer.

Please click here

Without buttons and links there are no actions. Now, how can we make those buttons so cool that they’re practically irresistible? Enter a cool hover effect that’s relevant to your brand.

Blonde Salad’s header delights with adorable hover animations in their utility navigation.


What if they were even informative to boot? A button with a loading animation built in informs the customer that something is happening.

Villa features an add to cart button combined with a loading animation when clicked.


A fancy hover animation isn’t appropriate for every brand, but with a little thought your buttons can visually stand out and drive customers to click.

The subtle power of animation

Think of animation as finishing touches on a site that give the brand a boost. They can significantly enhance the feel of a brand when implemented subtly and smoothly.

All Birds incorporates playful animations throughout their homepage that gives a playful yet credible feel to the customer.


Movement on a page will automatically draw the customer’s eye, so it’s best to incorporate animations subtly, or allow the customer to initiate larger aminations on hover or on click. Reconsider including any animation that slows down the speed of the main workflow. Frustrated customers won’t care that your lazy load looks awesome if it’s slowing down their purchase speed.

Paintbox’s logo moves together as the customer scrolls down on the homepage.


Consistency is crucial

At SD, designers place all their branded UI elements into a web pattern library that is referenced by developers when building the site. Keeping these elements consistent provides customers with the confidence they need to quickly and easily achieve their objectives. Anything that looks out of place could be viewed as a bug, which lowers credibility. Patterns in layout and UI elements improve efficiencies, leaving your customers feeling they’ve spent their time wisely.

Brand recall

It’s important to remember conventions exist for a reason. Not every convention should be or needs to be changed to achieve a successful, unique branded customer interface (UI). For instance, studies have shown customers are 89% more likely to remember your brand when your logo is placed in the top left of the page.1 It may be tempting to try to be unique, but in this case, customers are so used to seeing the logo placed here, that it only makes sense to follow tradition.

Think through everything

The tips above are only the beginning. There are other details such as the styling of the header, loading animations, icon styling, 404 error page styling, and modal styling that should be considered when thinking about designing a successful branded ecommerce experience. The designer has done her job when the customer leaves your store with a positive feeling and a desire to shop again.

There are many nuances to a branded UI, and when implemented thoughtfully and consistently your shopping experience will shine. Many brands today have dedicated time and resources to perfecting their UI, as they should. When the customer’s impression is one of confidence, it’s certainly time well spent.

Did you like this blog? Check out out Part 1 and Part 2 of ‘Why Attention to Detail Matters’ or contact us if you have UX, UI, or design Q’s.

Written by: Lindsay Stork, Interactive Designer

1. Whitenton, K  (2016, February) Website Logo Placement for Maximum Brand Recall. Retreived from






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


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.

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.


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.

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.


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.

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

Every Little Thing, Part I

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

Think Critically

“Pay attention to what you pay attention to!” – Amy Krouse Rosenthal

Here are two arguably true assumptions about designers:

Designers are admired for their attention to detail.
Designers are mired by their attention to detail.

Designers have a reputation for caring too much about details that no one else notices outright. Conversely, we are known for taking care of seemingly insignificant details that, when incorporated into the greater whole, significantly and noticeably influence how everyone interacts with the world around them. While our work can seem imperceptible, it is highly intentional. In fact, good design is ingrained in everyday life without any of us — designers included — even noticing.

Admittedly, designers can be meticulous to a fault. Zeroing in on minor details can take us off course when our vision becomes too myopic. Other times, we arduously sweat the small stuff, which can bloat project budgets. We’ve all been there. And we learn, over and over again, the importance of stepping back, evaluating design choices in their entirety, and discerning when the end justifies the means.

Now here is one assumption about designers that is inarguably true:
Designers steadfastly attend to detail.

Whether to our detriment or success, designers pay close attention to details because it’s our calling. If we’re truly present and thoughtfully examining everything we see, feel, and touch, real problems reveal themselves. More and more companies are adopting design thinking not because it’s buzz-worthy, but because honing design skills, like the ability to perceive, empathize, and iterate, helps solve problems that matter.

Let’s explore at how a web designer’s attention to detail can improve user engagement with a product or site. First, we’ll share an example of how it plays out internally at Something Digital.

Think Aesthetically

Creative Team QA Tests
QA Testing at Something Digital

White-glove attention to detail is part of every step in SD’s process, from discovery to deployment. But a prime example of when design thinking takes center stage — and is occasionally controversial — is during front-end QA testing.

For every project, the design team conducts an end-to-end comparison of mockups and pattern libraries to live sites. We’re not only looking for fidelity, ensuring that meticulously predefined rules are followed, but we’re also regulating consistency, cadence, and continuity. We report bugs that range from margin issues — adjusting space between elements so that content is evenly distributed, logically grouped, and legible — to functional errors, in which a page or an element on a page impedes the checkout process.

We’re not aiming for pixel-perfection, which is an impossible task given browser and device irregularities. The goal is to meet an acceptable standard. But that doesn’t mean attention to detail falls by the wayside. All documented QA issues are collaboratively classified as low, medium, high, or critical. And every issue is eventually addressed in order of priority.

Much to the chagrin of designers, margin and padding flaws are often considered low issues, because to technical teams, project managers, and clients, they are aesthetic and don’t directly prevent a user from accomplishing a task. And while true, designers will counter that these flaws could be proven over time to slow down or frustrate users, indirectly decreasing conversion. What if users can’t tell which step of a form they’re completing because the margins between the labels and fields is too great? What if they’re checking out on a phone and they can’t tap the correct input for payment method because the radio buttons are grouped too closely together?

It’s the role of the designer to see problems at more than face value, foresee how they might persist in the future, and critically examine if resolving them, however small, is worth the effort.

It can be a mistake to be nit-picky, jeopardizing scope. It can be a mistake to ignore details, jeopardizing usability. Designers walk a fine line, but if we’re self-aware, user-aware, and openly communicate with our co-workers and clients, our attention to detail can be what separates a functional website from a thriving one.

For more in-depth examples of how the SD creative team digs into detail, see Every Little Thing: Why Attention to Detail Matters, Part II.

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

Me, You, & Everyone

Designing with Users in Mind

At Something Digital (SD), we prioritize designing best-in-class User Experiences (UX). During our project discovery phase, we invite clients to tell us who they believe their users are — and who they want their ideal customers to be. Then we validate that perspective against quantifiable data. We start by zeroing in on two user types, and review analytics to determine their general demographics, like age range, socio-economic background, and geolocation.

However, we get that users aren’t numerical statistics; they are humans with real-life concerns, independent of what we tell them they want and need. We can’t know everything about each lifetime value (LTV) customer — it would be invasive to dig that deep — but based on their shopping patterns, we can glean their attitudes toward ecommerce, identify their habits, and anticipate how to best meet them where they are.

So, we create personas: illustrations of specific users, describing their daily routines, behaviors, values, hopes, and even anxieties. We paint a slice of life.

If we start out empathizing with well-defined primary and secondary personas, we design interactions that work for many people. Then, we track engagement over time, continually A/B test, and iterate on the experience so that ultimately, our designs work for as close to everyone as possible.

Having empathy means being vulnerable: opening ourselves up to possibilities outside of our own limited understanding and letting go of attachment to our personal preferences. We don’t have to completely abandon the design trends we’re into, typefaces we worship, and slick page transition animations we’re crushing on, but we do need to holistically consider how our design choices impact people who aren’t us.

Our job is to think big: we don’t design User Interfaces (UI) and interactions for only our clients, their stakeholders, or ourselves; we design for a sum of people who want to be heard, welcomed, and respected.

SD follows a strategic process when including and excluding design features.

Before proposing a feature, the answer must be ‘yes’ to at least one of the following questions:

1. Is it necessary?

2. Do we believe it will measurably improve the overall experience (and can we back that claim up in advance with research)?

If the feature passes this litmus test, we ask a series of questions guiding us to make conscientious decisions about how best to present and implement it.

To put our checklist into practice, let’s create a case study around a design feature. And to convey how even a simple feature can be controversial when it comes to user-centric design, we’ll refer to a no-frills homepage content block. The example we’ll asses is a static promotional block featuring three product categories.

Desktop Content Block Visual

Who does it serve (and does it, really)?

If we were to draw a Venn Diagram asking, ‘Who does a design serve?’, there would likely be three circles of varying size: ‘Stakeholders and Administrators’, ‘Designers and Developers’, and, finally, ‘End Users’. Initially, it probably looks something like this:

Venn Diagram Example 1
Our job is to radically reshape those circles, giving precedence to users and finding the sweet spot where our design expertise intersects client and user requirements. Practically, it should look more like this:

Venn Diagram Example 2

In the case study example:

— The block directly nods at the stakeholders — we see the parent company announced in the headline, subsidiary brand logos on product images, and buttons featuring those brand names.

— But it speaks to users, too. The headline copy purposefully welcomes users to ‘meet’ the subsidiary brands, the subheadlines casually address users with the familiar ‘you’, and the photography shows users what to expect.

— The content block follows the client’s brand guidelines and sparks the user’s curiosity.

check iconCheck!


What do we want the feature to do? What do users want the feature to do?

When I design a homepage, I personally want to be proud of it. I also want it to knock both the client’s socks off. I wonder, ‘what elements of this can I animate?’ and then scour inspiration and photography sites for the perfect image to perfectly crop and perfectly color-correct to account for any text that displays over top. But that’s ego getting in the way of business. We’re not designing sites for stakeholders or ourselves; we’re designing for everyone.

Take pesky pronouns out of the equation, let go of subjective ideas of perfection, and get to the bare bones. Our most basic objective is to design something useful and user-friendly. Even if we know, like us, our clients want magic, what users need matters first.

In the case study example:

— Target presumably required a straightforward content block that efficiently drives users to specific categories, and therefore drives conversions.

— As for users, let’s divide them into two types — new and returning — and ask, ‘what do they need?’ New users visiting a homepage might look for a range of the products or services being offered. Returning users might look for fresh content from a brand they trust. ALL users want to navigate to the content they need as quickly and frictionless as possible.

— The designer introduces customers to new products and directs them shoppable categories not too far below the header navigation.

check iconCheck!

Think of a site that oozes ‘wow factor’. Sure, the designer eventually added the bells and whistles that make it exceptional, but they likely first aligned their clients’ and their users’ goals before asserting their own aspirations and inserting their own assumptions.


What does the feature do in practice?

Break the feature down into its fundamental ingredients. How does each UI element work within the design?

Mobile Content Block Visual

In the case study example, we see:

1. A Headline, which provides context.

2. Images with brand logos, which in addition to being contextual, help to distinguish the different categories.

3. Subheadlines, microcopy that expresses the voice of each subsidiary brand and specifies what kind of products the categories contain.

4. Buttons, which take users to the next phase of their journey.

— While the headline and subheadlines use persuasive marketing copy, these buttons would arguably benefit from actionable language (e.g., ‘Shop the Collection’ instead of ‘A New Day’).

— On the other hand, many bases are covered here. Because the brand logos are embedded in the images, they are large enough to be legible on small screens.

— Additionally, the buttons repeat the brand name in plain text for users with visual impairments who may not be able to see the images at all.

check minus iconCheck minus.

Now, let’s repeat this exercise, but with UI attributes like colors, fonts, and photo art direction. How do our design choices work for the design?

In the case study example, we see:

1. A gray background, which separates this content block from the ones surrounding it. Visually compartmentalizing the content makes it easier for users to digest.

2. A light-weight headline, which conveys elegance and doesn’t compete with the subsidiary brand logos.

3. Single-subject images with pastel backgrounds, which contribute to an approachable look-and-feel. While the compositions vary (left-aligned, centered, right-aligned) and the subjects differ, the selection feels intentional, unified, and balanced. The soft backgrounds make the products pop.

4. Rounded corner buttons, which, alongside the gray borders identify the content as clickable. The size is large enough that it can be easily tapped on a small device.

— Overall, the UI attributes grab attention, establish a content hierarchy, and express the brand. Our color, typography, and imagery choices work hard and often unperceptively to make it easier for users to accomplish tasks.

— We could further improve the design by assigning buttons a color background or border, instead of the gray and white, to better contrast with the gray outer container.

— Also, more closely pairing the buttons with their related content would help users select the correct category when shopping on a mobile device.

check minus iconCheck minus.

The more we assess the design choices we make, we are more likely to make thoughtful decisions over short-sighted ones, and the better equipped we are to defend our designs to clients and stakeholders.


Is it ready to ship? Is it ready to iterate on?

Are we ever really ready for anything? Is anything really ever finished? Continuously evaluating how a design performs for users — and tailoring it to their evolving needs — sets a good design on the path of becoming a design paradigm.

Have real people test a working prototype. Observe them and ask:

1. Is it intuitive?

2. Is it memorable?

3. Does it integrate with the overall experience?

If the answer is ‘no’ to any of the above, take a step back. Sometimes we fail to think of ways a design could be potentially harmful to users or, after multiple rounds of client feedback, we trim out something that made the design stand out in the first place.

When we design with empathy, we try to look at our work through many different lenses and if necessary, dismantle our hypotheses, however well-researched they were. Ask if a design can be simplified without stripping its personality and push back if a design decision negatively impacts the UX. Through deep inquiry, we can find meaningful solutions to the cracks in our design before they become craters.

Once we’ve workshopped a design and it meets the required criteria, we test it. SD recommends A/B testing, via experimentation platforms like Optimizely. Alongside usability testing, we compare A/B test results with analytics data over a controlled time to figure out if our target users understand what a feature does and they follow where our design choices are guiding them. Whether we decide the design is effective or defective, we incrementally test solutions to improve it.

Designing with users in mind is a job that is never over. User’s tastes, habits, and needs change over time, not unlike an ecommerce store’s inventory, branding, and profit goals. Being empathetic, critical, and flexible is essential. We weigh the variables, we wireframe the possibilities, we audit our work, and we test it over and over. Because the true testament of success is that we’ve done our due diligence to create user experiences that serve as many real people as possible.

Written by: Gina Angelotti, Interactive Designer

Copy Writing Icon

Using your Words Carefully – Part 2

Last week, we talked about the value of serving your customers the content they deserve. We also outlined that smart copywriting;

– Gets to the point quickly
– Uses active verbs
– Is concise, clear, and consistent
– Anticipates and answers questions
– Has a distinct voice
– Puts customers (or others) first

Today, let’s take a closer look at writing headlines, supporting copy, and microcopy that follows these six rules and examples of them in the wild. I’d also like to highlight a handful of design best-practices guaranteed to give your words an even greater impact.

Improve Your Headlines

Let’s rank the following headline iterations:

1. SD is the source for free writing tips from industry experts (Meh)
2. Our industry experts offer free writing tips online (Ok)
3. Get free writing tips instantly from industry experts (Better)

Headline 1 is informative, but lengthy and doesn’t speak to anyone. Headline 2 is less wordy and includes a less passive verb, but still leaves out the customer. Headline 3 is the best option because it invites customers to participate, introduces the active verb ‘get’ and keyword ‘free’ right away, and adds one more incentive: time. But wait — can we trim even more?

Get free expert writing tips now (Best)

Landing page headlines arguably have the greatest impact on bounce rate because customers are likely to skim the copy and stop reading when they find the information they came for (or leave if they can’t find it). Headlines must captivate, impress, and satisfy a customer — all in under a second. No biggie, right?

Write headlines that are direct, helpful, and empathetic:

– Place actionable keywords up front
– Expose problems and offer solutions
– Recognize how customers might feel before coming to the site HomepageInvision’s Homepage headline is active and inclusive. Welcome MessageHandy’s welcome headline reassures customers above all else. HomepageAirbnb engages customers to interact and incentivizes it.

Copywriting expert Dane Maxwell suggests combining three key elements for an effective headline:

– The result (What the customer wants)
– The period (When the customer wants it
– The objections (What happens if the customer doesn’t get it when they want it)

While there’s no fail-proof method for writing an engaging headline, Maxwell’s formula is a strong foundation because it’s structured, expresses urgency, and prioritizes the benefit to customers.

Trim Your Body Copy

When you text your friends, you’re likely sending as few words as one (or not even, because the laughing crying face emoji says everything) and you probably aren’t typing full sentences on where to meet for coffee. Like texts, the supporting copy on your site should express both your personality and the customer’s mood and desires in just enough words to avoid confusion (‘Let’s meet the one on St. Marks w/ the tall (Canadian flag) barista’).

Supporting copy too often focuses only on marketing goals like boosting SEO and appeasing stakeholders, which is helpful for robots, but is not for the real people who want your products or services. Effective supporting copy packages the necessary keywords, legalese, and product details into brief, useful, digestible units.

Try these dos and don’ts when writing meaningful supporting copy:


– Rely on it to explain workflows
– Dumb it down
– Write complete sentences or paragraphs
– Exhaustively list product features


Make it easy
– Design an intuitive UX first. Smart headlines, calls to action, and User Interface (UI) interactions allow customers to move through workflows even without supporting copy

– Respect your customers’ time, circumstances, and intelligence. Get to the point quickly with the simplest language possible. Keep in mind that efficient copy makes a big difference to customers who access the site from small screens, use screen readers, or require translation.

Break it up!
– Break copy into bulleted or numbered lists, setting reasonable limits on the number of list items. Be willing to cut any text that doesn’t directly serve customers.

What’s in it for me
– Highlight the benefits. Describe what a product’s features will mean to your customer.

One more tip: Some of the world’s most recognized brands use a writing principle called the Rule of Threes. That’s because three is the smallest number required to make a pattern, and as humans, we’re wired to memorize them. When we bucket key takeaways into groups of three — and keep them brief — they are more likely to stick with customers. Homepage Casper pairs three benefits with icons for extra punch. Homepage Allbirds backs up a personal story with three related product features. Homepage Wealthfront includes not one, but three main headlines on their homepage to reinforce exactly what they do.

Maximize Your Microcopy

Imagine rushing to make a connecting flight in an unfamiliar airport. You listen for announcements, look for gate numbers, follow the flow of passengers, and eventually make it to right terminal. But if those cues are communicated in a foreign language you don’t understand, what do you look for? First, don’t panic! You most likely will scan the crowd for customer service agents, look for corridors with signs that feature iconography and subtitles in multiple languages. It’s the smallest details that put you at ease and get you where you need to go.

Likewise, microcopy is the unsung hero of website content. It goes largely unnoticed, yet these seemingly insignificant snippets of copy do a great service. Accounting for buttons, links, form placeholders, instructions, error and success notifications, tooltips, loading messages, and more, microcopy shows customers where they are within a workflow, drives conversions, and assures them that their private information is secure. To better meet customer expectations, plainly outline your expectations of them.

Write compelling microcopy that:

1. States exactly what to do
2. Reassures customers
3. Catches attention
4. Reinforces site tone
5. Clearly labels icons and forms

If auditing the microcopy on a site, focus on Calls to Action (CTAs), which are sometimes one-word and too generic (e.g., ‘Submit’, ‘Send, and ‘Go’). Not only do vague buttons and links lack personality, but they can also confuse and frustrate customers. Temper their concerns by specifying what will happen when they click (e.g., ‘Complete Your Registration’, ‘Send Your Comment’, ‘Get the Newsletter’). Calls to Action Casper’s buttons specify the product page they lead to. (Also notice the ‘magic’ number of buttons).

Lulu Lemon Shop  Lululemon’s promotional banner and footer forms feel personal, using microcopy to relate to the customer. Homepage Wildfang’s Calls to Action match the young, spirited brand voice.

Design for Content

Have you ever reviewed a design mockup and wondered what ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit’ means? It’s ok if you flunked Latin, we’ll translate it for you: ‘You and your design team aren’t on the same page about content strategy.’

Avoid waiting until the design phase to start collaborating on and compiling sample copy. It’s impossible to gauge how a site will authentically look and feel, or how much content the client will need to add or trim, if populated by dummy copy. Build a content library in advance containing copy that is representative of the brand voice.

Now let’s say you’ve handed over that perfect, polished site content to the design team. Well-written, targeted copy will fall flat if not organized within a visual system. Designers can enhance good copy by applying the following UX and UI design best practices:

– Starting with the smallest screen sizes in mind
– Establishing a consistent visual hierarchy that prioritizes content based on font size, weight, color, and orientation
– Left align copy vs. center align
– Setting the maximum number of characters per line to 45-75
– Distinguishing primary CTAs by size and color
– Reserving certain colors within a palette for clickable objects only
– Meeting minimum accessibility color contrast ratios
– Stacking forms to follow common eye patterns

A few examples: Example Apple prioritizes headlines, distinguishes supporting features in a digestible way, and highlights CTAs using a single color. Product Page Curated Kravet’s Product Detail page buy form has a strong type and color hierarchy and is aligned for fastest completion. Mobile Mobile Example Maddie, like all SD ecommerce sites, was designed mobile first.

Test Your Copy

While we’ve given you a comprehensive checklist of copywriting tips, we need to re-emphasize that ‘Customers Come First’ is the most important rule of all. Scribble it on a note and stick it to your monitor, write it in magnetic poetry on the office fridge, get it tattooed like a cheat sheet on the palm of your hand (ok, maybe don’t do that one).

How can you ensure that your copy not only appeals to your customers, but also keeps up with your customers’ needs? Always A/B test. Using tools like Optimizely, you can compare variations of headlines, body copy, and microcopy being served to customers against a conversion metric to get real-time, data-driven feedback. Display the ‘winning’ variations — the copy that gains the most traction — and continue to refine it over time as your customer base grows and/or changes. A/B testing your copy helps customers help you.

Kickoff time is now! Your project team is formed and you’ve assembled an audience. It’s time to draft a game plan for headlines, supporting copy, and microcopy for your site. Uncap your red markers and circle these three key copywriting plays on your dry erase board, captain:

1. Keep it real. You succeed if your customers succeed.
2. Keep it short and sweet. Say what you mean, in your voice, in the simplest language possible.
3. Keep it fresh. Prioritize copywriting from the start, test it, and refresh it over time.

Copywriting strategy starts and ends with your customers. If you follow our tips and write smart, both you and your customers win big.

Written by: Gina Angelotti, Interactive Designer

Copy Writing Icon

Using Your Words Carefully – Part 1

We’ve put together a list of tips and best practices to help you become a ‘web copy writing God’. Below you’ll see why it’s important to approach content strategy from a user perspective. Follow our tips to ensure your business goals and target customers needs are equally met.

When planning website content, the first questions to ask yourself are:

– What conversions do I value?
– What do I want customers to do?
– How do I want customers to feel?

But remember: Websites succeed when customers succeed. It’s not only about what designers, content strategists, or stakeholders want.

When customers visit a website, they’re initiating a conversation. Talk, listen, and respond to them.

For a successful user experience (UX), ask your customers:

– Who are they?
– Where are they coming from?
– How do they feel right now?
– How are they accessing the site?
– What do they need?

Then ask:

– How can I help them fulfill their needs?
– How will they feel navigating the site?
– What will make them feel more comfortable and safe?
– How will they feel when they accomplish their goal?

If you get to know your customers, you can anticipate their needs and better meet their expectations. You can plan content that:

– Meets them where they are
– Guides them through workflows easily, quickly, and transparently
– Communicates what you want to help them accomplish
– Instills confidence

There is plenty of data to identify which demographics most frequently visit your site, but customers identify themselves as more than their age, gender, ethnicity, and residence. They are real people with complex lives.

A key step in content planning is creating personas, specific examples of customers who use the site and their backstories. With personas in mind, you can tailor copy that personally and effectively speaks to your core customers. Personas are an especially useful tool if a website lacks substantial analytics data because you can make decisions that appeal to a defined target audience, if not a sample of actual users.

Ultimately, from a business standpoint, you value conversions, you want customers to complete certain tasks, and you want them to feel good about it. But to achieve that desired outcome, you have to put ego aside and communicate directly, specifically, and compassionately.

Now, imagine you’re having real face-time with your best friend. As a model BFF, your role is to ask her what’s on her mind, what’s missing in her life, and what you can do to help her. And you will go to extremes to show her that she’s the center of your attention.

Approach customers with the same intention. No, the delivery may not always be so casual depending on the service your website provides, but you should be communicating to users as if one-on-one. Standout copywriting speaks to individuals.

Like a friend offering wise advice, smart copy:

– Gets to the point quickly
– Uses active verbs
– Is concise, clear, and consistent
– Anticipates and answers questions
– Has a distinct voice
– Puts customers (or others) first

Getting real with your customers is just the first step. Next week, in the second installment of ‘Using Your Words Carefully’, I’ll be sharing practical applications of these six copywriting rules as well as design strategies to make your content shine. Stay tuned!  

Written by: Gina Angelotti, Interactive Designer 

Infographic Alert: Personalization

personalization infographic


is the practice of dynamically tailoring the content of your site to suit the wants and needs of each individual user.

How to Achieve 

Use personalization to achieve your business objectives and increase revenue with tools like A/B split and multivariate testing, content profiling and segmentation targeting.


Benefits of personalization include more conversions, traffic, repeat visitors and happier customers. Imagine the possibilities when your website has the ability to sense and adapt to what each visitor wants.

Attention Span

The average human attention span decreased from 12 seconds to 8 seconds¹. Great content isn’t enough to stand out. Brands need to make an instant connection with their audiences by providing information that is custom-tailored to the user.

Marketing Costs

Content is one of the most inexpensive customer acquisition tactics. Traditional marketing requires the use of aggressive push mechanisms. Marketing through personalization brings audiences, leads, and customers to you².


¹Statistic from Statistic Brain 2013
²Statistic from Demand Metric
Vectors adapted from

Photography and Web Design


The internet is a visual medium. Visitors judge with their eyes and will only digest the content if you make the whole experience a pleasurable one.

“No matter the images you have in your library they will rarely be suitable for the task.” – Kris Jeary, Squiders


You need photography that:

1. Has been taken by a professional.
2. Has a brief from both client & designer.
3. Shows products in high resolution.
4. Will render well on various devices.


Benefits of allowing a web designer to direct the shoot include: clear vision, images that work with site, obtain images with purpose, and boost sales.


“What about stock photos?” – Your Subconscious


Good photography will show off the product and foster a sense of trust. Make the visitor trust you more than your competitors, let them know you are real people and not machines.


Choose your professional carefully. You want someone who:

1. Ask the right questions
2. Wants to understand your goals
3. Has web photography experience
4. Can balance different types of shots


Give you designer the tools to best meet your goals and present your product in the best possible light.

You won’t regret it. 

Calls to Action – Not to be Overlooked

How do we get customers to click buttons on a website that result in online purchases? The almighty Call to Action (CTA for short), if used correctly, is a key element for your ecommerce user experience. When a potential customer arrives they need relevant information, available options, and a sense of how to purchase your product(s). A shopper’s basic intention is to purchase a product you are selling, so it’s your responsibility to help them reach their goal.

Let’s start at the beginning of the process and have a look at the Homepage. It often consists of a unique combination of the following: your logo and brand colors, main navigation, product images, a few words of marketing magic, and general information about current products. A Call to Action can be as varied as the products you sell. It can focus on a new season, a set of related products, or an individual items. A lot of the terms you use to characterize and advertise products can often apply to CTAs as well.

Below are some guideposts we use to help define and focus the CTAs for a given project:


Primary, secondary, and tertiary. Pick out a few key products and prioritize several to be featured. Add some secondary options and possibly a few standards or moderate sellers to present a healthy mix. There is no right or wrong in terms of amount. Fewer options will offer focus and more will offer variety.


Bigger is not always better.  The key is to direct users to your clickable content areas, but not pressure or beg them to interact. Primary CTAs can be designed with a button-like presence, secondary ones can be a slightly smaller button style, and tertiary options can be a basic, text-based link.


Click Here? No! Even though this is the intended action item for your customers your CTAs should never mutter those two words. Potential customers are already at your doorstep. They don’t need remedial instructions on how to open the door. “Click here” doesn’t describe the end result. What is “here”? How do you deal with multiple “click here” options? Use descriptive, active language that describes the CTA’s intention. Incorporate compelling action words and be unique while staying within your brand guidelines.


Place CTAs in a location that doesn’t compete with your product images. Ideally, you want your CTAs to have some breathing room (or white space) and prominence on your page.  Give them a strong relationship to your product images and marketing messages. Avoid dead ends; include at least one CTA on every page of your site.


Chartreuse is a must! (Kidding) Current branding guidelines or your style tile can dictate options. You may need to improvise or get creative!  Contrast and alternate colors are often good solutions.  As a final check, I like to do  the “squint test” CTAs should stand out but not overpower the page or design in general. Ecommerce projects are complicated and have many moving parts. If you want to know where to apply some effort, having your CTAs focused and properly defined is a good place to start. Doing so will enhance a user’s shopping experience and lift your bottom line.