Woman comparing website on mobile phone and laptop

Stand Out from the Pack: Optimize Your Top Performing Product Pages for Contrast

As a consumer, superlatives influence a lot of my choices. I’m a runner, so I often search running, fitness, and outdoor magazines for their editor’s picks of the best training gear. Recently, while shopping for a running mask, I compared lists of the top tried-and-tested neck gaiters. Then, I scoured product reviews from multiple retailers, zeroing in on the highest ratings, the lowest ratings, and the reviews voted most helpful by other customers. Finally, when I was ready to take the plunge, I ordered from a website that seemed the most trustworthy among them by offering a quality guarantee and no-fuss returns.

The superlatives that convince us to buy, like best, top-rated, safest, or most-exclusive, emerge by comparing and contrasting.

By definition, making a decision means choosing one option out of a field of options. In the context of shopping online, consumers may compare a product to other similar products, or they may compare buying that product to buying nothing at all. If you’re a direct-to-consumer (DTC) retailer, when optimizing for conversion it’s important to ask: what information matters to your customers and why do they ultimately choose you over your competition?

As we head into the fourth quarter of 2020, ecommerce retailers and partners will be confronted with plenty of reasons to push for standing out among the crowd.

COVID-19 is still spreading with the potential to surge in the colder months, so transparency, consumer safety, and delivery speed may outrank other motivating factors. And because consumers may also have fewer opportunities to try products first-hand before buying online, it will be critical for product pages to show upfront as much relevant information as possible. Compound that with the Holiday season approaching, in which consumers tend to purchase from larger retailers offering the lowest prices, best shipping rates, and simplest return policies.

The challenge is to be flexible and adapt to your customers’ shifting priorities in order to win them over and win out among a multitude of competitors vying for the same outcome. But this should ALWAYS be true, in any quarter, of any year, with or without a looming pandemic.

How do you attract your customers’ attention and keep it? You have to earn it. Take your best-performing products and highlight:

  • How they compare with other products like them on your site.
  • How they compare with other products like them on your competitors’ sites.
  • How your site offerings compare with your competitors’ sites.


Some consumer behaviors are out of your control, like multi-tab shopping — opening multiple tabs to simultaneously browse similar product offerings across many stores. But you can change the way customers interact with product pages while they are on your site by engaging them with relevant content, conveying expertise and trustworthiness, and helping them discover for themselves why your site or your product is their best option. Give customers enough information to rationalize their decisions by:

  • Diversifying product images.
  • Reinforcing value propositions and differentiators.
  • Incentivizing purchases.
  • Empowering customers with direct comparison tools.


Let’s look at how some brands within the Fashion and Apparel, Electronics, and Health and Beauty verticals are effectively making a case for their products and services, keeping in mind that just because it works for them doesn’t mean it will work for you. While no solution is one size fits all, Something Digital’s Conversion Rate Optimization (CRO) program can help you determine where to focus, develop a testing strategy, and measure its impact. Instead of following your gut and potentially losing money on changes that may not actually work for your customers or may not be the most impactful to the experience, A/B test data-supported ideas. The insight gained through A/B testing will help you make better business decisions, resulting in a positive ROI.

Diversifying Product Images

Nike product pages lead with emotion, without saying a word. In this example, the gallery displays large, crisp images of the shoe at every angle. The motion of a video draws our attention to all facets of the shoe and how it looks on a real body. Full-width photography captures actual runners focused, sweating, and persevering while wearing the shoe. Nike also demonstrates the technical components of the product, which as evidenced, is engineered to be worn by the world’s top sports stars. Nike isn’t simply selling a shoe; they’re selling the promise of achievement through hard work.

Nike Air Zoom Pegasus 37 product page on desktop

A view from below of a runner jumping a hurdle wearing Nikes

Compare the same product on your average sporting goods site and you’ll likely find that while the static product photography is just as sharp when zoomed in and might even showcase the shoe’s high-quality, it doesn’t tell the story Nike does. Often, retailers fail to contrast isolated product shots with lifestyle photography of the product in action.

Nike knows their customers’ ambitions and goals. They anticipate the questions their customers will have about the construction, material, sizing, and capabilities of a product and answer those questions through a diverse collection of images and videos. Customers need not to look further for visual proof.

Consider A/B testing the impact of:
  • Increasing image sizes.
  • Showing more images per product.
  • Showing more image types (various angles, details, technical features).
  • Incorporating video into the gallery and/or product details.
  • Incorporating lifestyle images into the gallery and/or product details.
  • Adding user generated images.


Reinforcing Value Propositions and Differentiators

Nike not only imbues brand messaging into purposeful and compelling media, but they also assert a clearly defined position and tone of voice in their product descriptions. Each headline is either directed at “You” the individual (e.g., “Tuned to Your Preferences”), or it builds up the new technology (e.g., “How the Peg Keeps Getting Better”). Or, it does both (e.g., “Your New-and-Improved Pegasus”). The persuasive supporting text reinforces qualities that differentiate Nike from other activewear brands — longevity, durability, worn and loved by elite athletes — and backs up their claims by thanking “You” the customer for giving Nike the feedback that made this new innovation possible. They intend for customers to emotionally invest in the product and rationally justify buying it.

Content areas within Nike's product details

Wireless headphone brand Jaybird doesn’t wait for customers to scroll to the product details. They know that if a customer has multiple tabs open to compare their earbuds to others like Bose and Beats, they need to compete by displaying key differentiators upfront, above the fold. Assuming that not all customers scan for the same information, they include a both bulleted list of incentives below “Add to Cart” button, and above it, a short paragraph summarizing who the product is for (endurance athletes), how it might be used (long distance runs) and how the features that ensure success (long battery life, waterproof). Jaybird appeals to the type of consumer who makes a snap decision about a brand solely based on their first impression.

Jaybird Tarah Pro product page

For customers who are willing to scroll, the supplement startup Orgain breaks down content into digestible chunks of information on their product pages. Their bold, eye-catching nutritional facts highlight what sets them apart from the competition. In addition to a succinct and straightforward product description, they showcase their awards and certifications in a grid, with each block touting a visual badge (e.g., a Prevention Award), a headline confidently heralding a claim (e.g., “Proud Winner”), and a sentence to reemphasize their enthusiastic brand voice (e.g., “We’re obsessed about clean protein and it shows”).

Then, like Jaybird, they punctuate a list of other outstanding qualities with checkmarks, which serve to visually substantiate these claims. Instead of technical specs, Orgain opts for an FAQ. Their customers are likely to feel assured about the purchase and are less likely to waver or shop elsewhere because all or most of their questions have been anticipated and answered.

Orgain Protein Powder product details

Consider A/B testing the impact of:
  • Aspirational/emotional headlines and product descriptions.
  • Displaying key differentiators and benefits above the fold.
  • Chunking product details into easily digestible sections.


Incentivizing Purchases

Price is often the deal maker or breaker when customers are comparing products. If you can’t offer the lowest price, you can offer other amenities to compete.

Bose, like Jaybird, offers waterproof wireless headphones for a comparable price. But Bose doesn’t hold the punches. Above the fold, Bose employs no less than eight methods to incentivize purchases:

  1. Displaying the original price, or MSRP, with a strikethrough and the competitive sale price in a larger font than the product title.
  2. Including a link to ‘Find a Store’, giving customers the flexibility shop in either a brick-and-mortar location or online.
  3. Integrating with Klarna enabling customers to pay in installments.
  4. Conveying urgency by estimating a fast 2-day delivery if the customer orders within the provided time window.
  5. Reminding customers how much they are saving by buying the product on sale.
  6. Advertising free gift wrapping.
  7. Offering bundling, in this case, a 50% discount on charging cases when customers purchase the headphones.
  8. Rounding out the total package plugging their 90-day Risk Free Trial.


Bost SoundSport headphones product page

Jaybird similarly shows a strikethrough price, but not in a comparatively large font size. They also call out free shipping and a money-back guarantee, but by comparison with Bose, these incentives are minimized.

And what happens when you throw Amazon or Walmart into the mix? Alongside marketplaces, brands like Bose and Jaybird have the added competition of potentially more user reviews, 2-day delivery, discounts for credit card sign up, conveniently stored addresses and credit cards, and, of course, familiarity. To go up against these behemoths, what you bring to the table needs to stand out.

Consider A/B testing the impact of displaying the following near the “Add to Cart” button:
  • Payment plan details.
  • Free shipping messaging.
  • Loyalty benefits.
  • Return policy link and satisfaction guarantee.
  • Risk-free trial policy details.


Empowering Customers with Direct Comparison Tools

On Running, an athletic shoe brand based out of Switzerland, ensures customers are outfitted with the best possible shoe for their terrain and goals by enlisting three direct comparison features on their product pages.

First, within the size guide, customers can select their usual shoe size either from a dropdown of On models or from a dropdown of competitor brands and based on that combination, they will recommend a size. Second, within their technical specs, they have a direct comparison tool in which customers can see the shoe they’re looking at side-by-side with another On model. The data visualization is minimal, well-structured and stripped of technical jargon; customers can quickly scan back and forth between to two to make an assessment.

On Running size chart

On Running model comparison chart

Lastly, On serves up alternative products, enabling customers to preview other models and color assortments without leaving the product page they are currently browsing. The images are large enough that customers can compare the alternatives to the shoe featured in the main image gallery. Products are tagged with badges that indicate whether they are “New Generation”, “New Color”, or “Last Chance”, which could persuade customers who might like the original shoe, but associate “New” with “improved” or who might associate “Last Chance” with “lower price.”

On Running alternative products

And because the “Add to Cart” button sticks to the screen top on desktop and screen bottom on mobile devices, it follows users on scroll. While examining the cross-sells, customers can add items to the cart, including the original product, without scrolling back to the top of the page or navigating to a new product page. A customer might come to a decision at any moment. On not only equips buyers with direct compare and contrast tools, but they are also ready to capture the sale.

Consider A/B testing the impact of:
  • Adding comparison charts on page.
  • Adding a size guide.
  • Comparing the fit of other brands with yours in the size guide.
  • Showing alternative products with large images.
  • Add badging to distinguish products.


Closing the Loop

Before I suit up for a lap around the park, let’s review.

Customers make decisions by comparing and contrasting. Recognizable brands like Nike, On, Bose, Jaybird, and Orgain don’t just rely on their reputations to increase sales. Through research, they discovered that diversifying product images, reinforcing value propositions and differentiators, incentivizing purchases, and empowering customers with direct comparison tools all have a big impact on the bottom line. They earn their customers’ attention and keep it by investing in CRO, gathering observational and quantitative data on their customers’ behaviors, hypothesizing how they can influence a behavior change, testing out different tactics on their ecommerce sites, and monitoring the results.

At SD, our top priority is for your business to thrive. There is no one size fits all strategy to persuade your customers that you are the best choice for them, but our CRO program can help you form a clear picture of who your customers are, what their frustrations are, and what motivates them in order to rollout focused tests and measure their impact. Are you ready to hit the ground running? Contact us today to learn more.

Animated gif of lipsticks

Give your site a product-driven makeover

This beauty brand’s trailblazing strategy will inspire you

Often during the design phase of an ecommerce site, stakeholders focus on perfecting the aesthetics of the homepage with the assumption that it’s the face of the brand and the first touchpoint. But if the homepage over-emphasizes the brand proposition while downplaying or delaying the ability to shop, it may not deliver the best ROI.

For starters, customer intent can vary. New visitors may want to see a broad range of products up front, whereas returning shoppers might view the homepage as a pit stop on the way to making their next purchase.

Consider this: when gathering requirements for any project, Something Digital asks organizations to prioritize their valued conversions, and nearly all of them define increased sales as their number one success metric. How can we help customers find the products and services they need easily and with fewer barriers?

Let’s do the math. In a typical journey, customers land on a homepage, browse a menu, navigate to a grid of products, narrow their requirements with filters, click through to a product detail page, and decide if they want to buy the product. In this scenario, it takes them five steps just to think about adding one item to a shopping cart.

How might the number of steps decrease if…

  • Most content blocks on the homepage linked to products?
  • The homepage showcased best-selling products that can be purchased on the spot?
  • The navigation linked directly to products?


But wait: what if paid search ads didn’t drive to the homepage all, but instead directed customers to the best-performing category?

It’s time to try a more efficient workflow. At Something Digital, we advocate for clients, researching trends across verticals and recommending ways to stand out in a growing, competitive B2C ecosystem. Let’s make a case study of one brand we’re seeing break the mold, Glossier, an innovative online beauty retailer. We’ll observe how they optimize the site’s navigation, homepage, categories, and product pages to guide both new customers and loyal followers into making quick, but informed purchase decisions. First impressions matter; here are some User Experience (UX) and Content Marketing tips to get them right.

One caveat before we look into their strategy: Glossier is always enhancing the site and updating content to keep it fresh. Visual examples described and shown here were captured in August 2019.


Megamenus — navigation menus with multiple columns of category links and promotional calls to action — are ubiquitous in ecommerce. But Glossier’s stands out from the pack. Hover over any category on devices larger than a tablet to trigger a panel flyout menu featuring the image, title, and a brief description of every product in it. We have enough visual and verbal information to click through to a product directly without ever visiting a landing page. If the silhouette images aren’t convincing enough, pass your cursor over them to reveal real-life applications of the product. Not only is the desktop navigation streamlining the path to product, but it is also an immersive experience.

Glossier's desktop megamenu and mobile navigation

Glossier looks out for their mobile shoppers, too. In addition to the traditional hamburger menu, which when tapped, expands to display the navigation, we can also intuitively swipe left and right through a list of categories that display outside of the site header at all times on all pages. These categories follow us as we scroll, minimizing friction caused by expanding and collapsing the mobile menu.

Animation showing Glossier's search functionality

Bonus Feature: Shopping via search is as satisfying as browsing the desktop navigation. We see relevant results — a set of large product images, names, and descriptive badges —that dynamically update in real-time as they continue to type. And all results lead directly to products. No tapping return, no page refresh; Glossier shows us that the standalone results page is a thing of the past.


There’s often debate about the first content area on a homepage: Should it be a rotating carousel or static image? Should it fill the full screen width or have ample padding around it? Should it be cropped to fit within the elusive ‘fold’? But what if we spent more energy planning not what is looks like but where it links to? While hero images on most sites drive to a category page, Glossier goes bold and links to a product detail page for a top-performing product instead. Click the lifestyle half or the packaged product half of the split hero image; either way you bite, you’re one step closer to commitment. Plus, Glossier updates the hero often, so every product gets its moment in the spotlight.

Glossier's desktop and mobile homepage

Then comes the holy grail of content: Six featured customer skin-care routines fuse editorial, User Generated Content (UGC), and merchandizing into one powerful sales pitch. Conceptually, it convinces us that flawless skin is attainable with an easy DIY regimen. Could it be possible that one day they might showcase YOUR routine? Clicking through any of the real names and faces routine takes us to an intimate profile where we can read about someone like us, follow their routine, and add the full set of products to our shopping bag. Glossier gives us the proof we need to make a decision, no Product Detail page (PDP) required.

Baymard Institute, a leading web usability research institute, recommends that homepages promote at least 30% of the site’s main categories to adequately convey product diversity. Glossier does this by alternating category Calls to Action (CTAs) with a selection of best-selling products from those respective categories. We have options: dive deeper into the catalog, add products to our bag right away, or get more information from the Quick View directly from the homepage.

Glossier's desktop and mobile quick view

Bonus Feature: Quick View is optimized for mobile. Many retailers neglect or disable Quick View for smaller screens, but Glossier takes on the challenge and succeeds; everyone from any device can view product details at-a-glance.

Product Listing Page (PLP)

This is not your average PLP. Within the first viewport — the visible area of the web page — a contextual image and marketing copy communicate the brand voice, while a capsule product collection shows the scope of the category. These featured products are given prime real estate and are strategically merchandized to align with promotions, email marketing, and inventory. We’re enticed to look at items we might not have considered before defaulting to our usual browsing patterns. Plus, there is no false floor. We get brand flavor and a substantial taste of the product set, encouraging us to scroll for even more crave-worthy content. Like the homepage, all products can be viewed, configured and purchased directly from the PLP.

Glossier's desktop and mobile product listing page

Presumably because they have a small product set, we can sort, but not filter products. However, we’re still able to efficiently find the serum, moisturizer, or gift set made for our unique skincare needs. I call this the “MVPL” effect: Minimum Viable Product Listing. First, products have short, unequivocal names that describe what they do. Next, each product has up to two badges: one that displays on top of the image to advertise deals, and one that displays below the name to plug special features. We circumvent the PDP, getting helpful details here and now. Lastly, by combining the price with the CTA, Glossier streamlines visual clutter. It’s clear exactly what we’re adding to our bag, how much it costs, and how much we’re saving.

Hovering over a product on Glossier's desktop product listing page

Bonus Feature: Every hover is an opportunity. For example, hovering a product image reveals an alternate contextual image, intended to surprise and delight us. Some static images hover to animated gifs, telling a story, without words, about who shops Glossier and how they use the products. These joyful interactions persuade us in a way that no bulleted list of benefits can. As for CTAs, button hover states differ when products can be added to our bag right away vs. when we need to make size or color selections. For instant purchase items, the bright, accessible text color on hover reinforces urgency. And in case we still aren’t ready to take the leap, hovering anywhere on the product triggers a reminder that Quick View is an option, too.

Closing the Deal

If we have sufficient information to bypass the PDP, great! If we need more, Glossier’s efforts to push traffic to their content-driven product pages pays off tenfold. Let’s roundup the top five most effective selling tools on the PDP. We’re convinced. Will you be?

  1. Silhouettes? Please. We need results!: The photo gallery, which includes images of real people who swear by the product alongside studio and model shots, is a visual testimony to quality. Plus, makeup captions mention which product variation the person is wearing.Glossier's desktop and mobile product detail page image gallery
  2. It’s all in the details: Everyone shops differently. Whereas I’m a sucker for clever descriptions, you may be more pragmatic and need a structured list of product details to trust the brand. Glossier’s specs vary in length and format, accommodating all of us. Perhaps cute, hand-drawn icons representing product benefits — like a peach for ‘plumping’ — resonate with you? Glossier has those, too.
  3. W.A.K.: As we mentioned earlier, UGC is GOAT. We can read, search, and filter reviews to fill in any gaps within the product specs. And we can rate and leave reviews — pics included — contributing to the community. Post-purchase, we can share our IRL routine and post our experiences to Instagram, where other brand devotees can shop the look. Word-of-mouth is powerful, especially sealed with a shade of raspberry pink.User generated content on Glossier's desktop and mobile product detail page
  4. We’ll have one of everything: Related products and cross-sells are effortless to add on. In essence, we can design our perfect bundle from a single page.
  5. Easy, breezy, beautiful, transparent: Glossier doesn’t have anything to hide, literally. We’re enticed to scroll through the enjoyably rich one-long-page layout and we’re never asked to expand, collapse, show more, or show less to get information. Fewer steps = a faster path to checkout.


Bonus Feature: Retailers often opt for a tabbed or accordion layout instead of a one-long-page layout, arguing that customers won’t want to scroll, but Glossier shuts that myth down. The primary CTA conveniently follows us on scroll, AKA Sticky Add to Bag. From anywhere on page, we can access the Buy Form, the area on the PDP where we select color, size, quantity, and/or any other product variant and add the item to our bag. We’re free to explore; the option to buy will be there for us when we’re ready.

Glossier's sticky add to bag feature on mobile

From header to footer, homepage to the shopping bag, Glossier’s ecommerce strategy is product-focused. Their online store experience is tailored for customers to make informed purchase decisions early on in as few steps as possible. Every CTA either navigates to product pages or allows us to bypass PDPs entirely — even signing up for the mailing list triggers a welcome email that links to, you guessed it, a product. And it works. According to Bloomberg, Glossier’s revenue more the doubled last year.

But it doesn’t end there. Glossier could further optimize the site in the future by displaying alternative products for zero search results, saving customer preferences to personalize content, or inviting new customers to take a quiz unlocking the best products for their skin type. They exemplify why retailers should consider deviating from the traditional checkout funnel, investing more in PDPs, and shortening the path to conversion.

Are you inspired to rethink your conversion strategy? Something Digital’s award-winning Designers and Digital Strategists can help you revamp your site’s UX and Content Marketing — and measure the revenue impact. Give us a call or email us to meet your business goals today.

Writer: Gina Angelotti, Interactive Designer


Optimizing Cross Navigation on PDPs for Up-Sells and Related Products

Make Your Investments Last

As an online retailer, you probably invest a tidy sum to attract consumers to your site. The last thing you want is for prospects to land on a product page and click away immediately because they didn’t see exactly what they’re looking for.

Fortunately, there are ways to make your product detail pages (PDP) work harder for you by keeping visitors on your site longer, thereby increasing the likelihood they’ll find what they need and even boost the value of their orders. This post examines the role that Magento’s up-sells and related products features play in promoting those goals.

Up-Sells and related products Defined

First things first, Magento defines up-sells and related products as they appear on PDPs in very specific ways. Up-sells aren’t necessarily more expensive products, in fact, as we shall see below, higher cost items may be a deterrent for some consumers. Rather, up-sells are similar products, ideally within the same price range, as the item the consumer has chosen to look at. Related products are accessories; if a consumer is on the product detail page of a ski jacket, related products may be ski gloves or a ski hat.

Let’s see how these features can work to your advantage.

Accommodate a Greater Range of Shoppers

It’s important to keep in mind that people come to your online store from different viewpoints. Some may be super familiar with a brand and know exactly what they want, while others are less familiar with a product category, and are exploring available options. As a retailer you need to accommodate both people at once, which can be a challenge.

This is where up-sells and related products excel. By displaying a range of additional options on a product detail page, the shopper who knows exactly what they want can add it to their cart and be on their way, whereas the shopper who is still in discovery mode will have the opportunity to compare products quickly, easily and conveniently. For this reason, we at Something Digital consider it a best practice to give both cross-navigation options a lot of weight.

Placement of Up-Sells and related products on Your PDPs

Obviously you want the product featured on the PDP to be most visible, but a best practice is to ensure that consumers can see additional options without squinting or opening a new browser tab. That means the up-sells and related products should display within the viewport to the furthest extent possible. If shoppers see they have multiple options in their desired price range, they’ll take the time to comparison shop, which in turn, increases the likelihood of a conversion.

Differentiate Between Up-sells and related products

Although we recommend using both up-sells and related products, take care that the two are easily distinguished on the page. Related products should have a different treatment than up-sells, so as not to confuse the customer. This is a mistake I frequently encounter as I shop the web. Up-sells and related products should be populated in different ways.

Avoid Sticker Shock

Up-sells in Magento are all about providing choice, and not getting a consumer to blow their budget. If a shopper is looking at a $200 ski jacket, it’s unlikely they’ll seriously consider buying one that costs $1,000. In this scenario, a best practice is to display a range of similar coats by different brands at the same price point (within $20 or so).

The same holds true for related products. If a shopper has a $200 budget for a ski jacket, avoid related products that are close to or above that price point. In other words, promoting a $20 ski hat or a $15 box of feet warmers will likely result in additional purchases, but not a $250 pair of ski pants or $300 pair of goggles.

Promote Comparison Shopping on Your PDPs

The main goal of up-sells is to cater to people who aren’t sure of what they want. The strategy should aid in their product discovery process, without the need to click between multiple pages and browser tabs. This is particularly critical for sites with hundreds or even thousands of product SKUs. No consumer has the time or patience to weed through 2,000 product pages, so when they select a specific item from your product listings page, they’re providing you with critical insight into their requirements. Use that as an opportunity to help them in their discovery process.

There are a variety of data points that help people compare products at-a-glance. Including things like price, consumer reviews or stars, along with a photo will help them compare products from the original product detail page they selected. We also recommend a brief description, including details like material, dimensions, or other features, so they can easily assess how each product differs.

If the product is one that relies on visuals, like a ski jacket, make sure the images of your up-sells and related products are large enough to assess and compare. Providing shoppers with pertinent details will help them compare products.

Promote Self-Bundling

Consumers are more apt to purchase related products if they can add them to their cart or bag from the PDP of the main product they wish to buy. This isn’t a requirement for your up-sells but it’s definitely a good practice for your related products. By offering three or four related products, you allow the individual shopper to create a custom bundle. Incentives, such as free shipping or 10% off orders above $100, prompt customers to bundle.

Track Products of Interest

Consumers who are deep into discovery mode may find it difficult to keep track of or find products they’ve looked at previously. You can help them by adding a third-party plugin that allows you to show customers products they’ve already viewed. This will go a long way in helping them make a decision from a single page, which is precisely the goal.

Question or comments? We’d love to hear from you.

EYEO Festival Takeaways Banner

Something Inspiring: EYEO Festival Takeaways

I’ve been to forums in the past where speakers onstage serve up Kool-aid, in the form of flashy innovation, the illusion of collective harmony, or myths of the illusive work-life balance. And, I admit, I’ve drunk it when I’ve been thirsty for something, anything, to get me out of a design funk. But now I know there’s someplace better. In EYEO, I found a festival in which speakers serve up the human side of technological innovation, the power of critical mass, and first-person accounts of successfully, and industriously, making space in life for work that excites us.

This summer, I attended what I hope to be the first of many EYEOs, and the takeaways still feel fresh and refreshing, like the life water we all need to reenergize our careers and reevaluate our creative choices.

EYEO is an interdisciplinary tech conference that encourages collaboration across industries, borders, and cultures. The festival draws driven thinkers and leaders from all over the world, including visual and audio artists, designers, developers, engineers, data scientists, educators, and social activists. Its mission is to show how those identifiers are fluid, how our curiosities overlap, and how our communities can be more inclusive. EYEO encourages participation and the forging of new partnerships; their slogan is “converge to inspire.”

At EYEO, speakers present ideas that rise above sterile case studies or sales pitches. We’ve heard that all before and we sign up for EYEO because we know we deserve better. EYEO attendees instead get eye-opening humility, humanity, transparency, storytelling, comedy, and calls to action. Talks range from academic — like a social history of the American hardware store — to deeply personal —a first-person account of how a tragic event can alter one’s life course — to curated panel discussions that spark a fire in those of us who see injustice in the industries in which we work. Every captivating talk, roundtable, and meetup asks us to think about how we can leverage technology for good, and why we should be.

There is no marketplace and almost no corporate swag, which in itself says a lot about the principles of the event organizers. Instead, EYEO gave attendees a single notebook in which they could memorialize quotes, ideas, and sketches. Classic. Understated. But the magic is how it was designed. Prior to the conference, attendees completed a survey of short questions about their personalities. Are they optimists or skeptics? Are they adventurers or do they play it safe? Then, Accurat, an information design company lead by speaker Giorgia Lupi, transformed the submissions into an abstract data visualization that is printed on the cover, like a secret code.

The brightly-colored notebook is not only a vehicle for ideas, but also an icebreaker, an artifact, and a reflection of how each of us plays a role in a greater community, which can’t be overstated. Now it’s my turn to give back, so I’ll start by sharing my notes from the conference as they can be applied to the working environment and the work that we do at Something Digital.

Notebook + Book
Left: The EYEO notebook designed by Accurat and Pitch Interactive.; Right: “Dear Data”, an amazing book on soft data written by two EYEO speakers and friends, Giorgia Lupi and Stephanie Posavec.

Humanize Data

We have unlimited data plans with which we listen to playlists curated to our tastes, order products that are recommended for us, and monitor our health stats. Data science is literally on the pulse of everything that happens in our lives and we’re producing data all the time. Everything we do, say, hear, and see is data. Although we may not be aware of it, we’re making and processing data, from the moment we wake up to the moment we go to bed — even while we’re sleeping. Data can be for us to help us measure our own progress, or it can be for a corporation to market products and services to us tailored to our predictable behavior.

From a personal perspective, because of its deeper technological applications, data can often seem out of our control, or like an unreal, mysterious ‘other’ (I know I’m being watched by the device in my hand and on my wrist, but that’s just the world we live in). From a business perspective, because my work is about designing better user experiences based on data analysis —monitoring click-through rates, traffic, and popular searches — data can seem tactical, a means to an outcome.

But a common call to action among many of the speakers at EYEO is to rethink what we classify as data. Slowing down, being present, observing, and taking note: that’s data. Sources of data are everywhere. It could be as banal as the minutes a subway train arrives off schedule each morning or as critical as documenting the daily side effects of the medications we take. Counting something means it matters. Spending time reviewing this kind of data — sometimes referred to as ‘soft’ or ‘folk’ data for its lack of social currency — means spending time with ourselves.

How can this humanistic approach to data be applied in commerce? One way is to allow people to see themselves in data. We create personas by observing real behaviors of real people, making predictions based on their lifestyles and interests, and designing with the intention to show them that their needs are valuable. Data becomes a way to communicate intention. UX design is an industry driven by subjective data, like user feedback. In user testing, we ask questions to lend visibility to data that otherwise goes unseen and unmeasured.

Soft data in the marketing world can be found in social sharing and user generated content. For example, the eyewear store Tens.co features a widget showing visitors in real-time which products other customers are purchasing in that very moment. Instead of promoting only the cross sells or upsells stakeholders think customers should buy, the widget enables customers to see what appeals to the people within their affinity community and be persuaded — or not — by their own observations, giving them credit and entitlement.

Ten.co ExampleTens.co provides a visualization of what other customers are buying in real-time.

The term ‘soft’ data underestimates its merit. Observed data, in conjunction with numerical data, can be more impactful on a human level, because it reminds us that we aren’t nameless hash marks; our personalities, opinions, and stories are as important as our buying power.

Data, after all, is people.

Get Empowered

Another big talking point for speakers was to mix up power structures. Fear, paranoia, the feeling as though we are being violated by giving up data without consent — when nearly our every move is always recorded, it’s hard to not feel disempowered by technology. Add on disenfranchisement and biases that stem from a lack of diversity among the engineers who write algorithms, and it’s no wonder that an atmosphere of mistrust is brewing. And yet! We all still carry our little glowing rectangles with us everywhere anyway.

The message from many speakers at EYEO is that objects of power are only powerful when we put them in the right hands. But how do we make data less disempowering and more empowering?

Or, as Carmen Aguilar y Wedge of Hyphen-Labs asked: “What is it you need from me to see you as human?”

Vimeo Still of Hyphen-Labs ProjectOne of many inspiring projects by the women at Hyphen-Labs.

One way is to think of data analysis as a service rather than self-serving. Use data to diagnose actual problems and identify the right tools and people to fix them, instead inventing solutions to problems that weren’t there to begin with and may produce even more problems over time.

For example, when we take on clients with existing sites at SD, we evaluate their site data as it is and recommend technical debt remediation before launching new marketing initiatives. Broken components and security breaches make customers feel confused and unsafe. We show the clients the holes in their system and offer a step-by-step roadmap to fill them. By tackling the backend problems first — issues customers can’t see but that hinder them from completing tasks — we’re indirectly improving the front-end user experience and flexing our expertise to serve our client’s and their customer’s best interests first.

Another way to do good by data is to mix up power structures. If advancements in technology are predicated on the confines of the platforms and languages we use, how do we use that technology to tell stories that are not written by the marketing department of larger corporations? How do we tell new stories?

Start by bringing new voices to the table, listening, collaborating, and giving those voices due credit. In a panel on diversity, one speaker noted that HR departments don’t have a pipeline problem, they have an effort problem. One reason I’m personally proud to work at SD is that while at first I had little web experience, the managers who interviewed me saw my perseverance and history of work ethic as an advantage, and that as an outsider, I brought another perspective to the creative team. Over the course of my tenure here, I’ve witnessed SD making great strides in recruitment and retention, giving all employees the freedom to directly interact with clients, communicate their ideas, and release their code, strategies, and designs out into the wild right away. New voices that cross cultural, racial, gender, and age lines help organizations approach problem solving at multiple angles, because how each of us sees the world is path dependent and, most importantly, valuable.

Diversity — and openly discussing diversity — within an organization equips teams to be more aware of the needs of users who might otherwise go unnoticed. EYEO speakers also called on those who represent the majority to assert their privilege to protect users who don’t always get the same protections. As a web agency specifically, we need to think about the safety of every community and every individual interacting with our work by:

1. Building accessible sites.

2. Prioritizing data security.

3. Designing not just for personas, but for representation.

What if frequent visually distracting pop up notifications distress users with PTSD? What if we QA test a site on broadband internet, but it is intended to be used in a region wherein access is more limited? What if a brand aims to market their products to ‘everyone’, but the lifestyle images they display on their product pages persistently only show models of one demographic?

This leads me to:

4. Ask questions. A lot of them.

It’s a mistake to assume anything is instantaneously understandable. Coming up with a thorough checklist as a team and asking as many questions as we can is how we break free from expert mind — what we already know or think we already know — and how we prevent faceless data from amplifying our biases. This is how we get closer to actual personalization, the kind that isn’t invasive or creepy, but is humble and constructive. Questioning leads to iteration. Iteration lead to prototyping. Prototyping leads to an evolving product that continually becomes more usable for everyone. It is yet one more argument for making slow observation and human feedback a part of our professional practice.

Go Forth and Do Better

For their encouragement to humanize data, get empowered, play with new people, and to find as many ways into a problem as possible — overall, to just do better! — I can’t thank the EYEO festival speakers and organizers enough. And I encourage you to visit eyeofestival.com to meet the speakers and watch videos of past talks.

I leave you with one last scribble from by trusty yellow notebook: Find delight in the work that you do. For me the delight comes from being able to inventory the data of my own life and add a point on that graph, however its modeled, for the invaluable learning opportunity EYEO afforded me to become a better designer and advocate for SD, our clients, their users, and you.

Website Personalization: UX Design for Smartphone Conversions

5 UX Optimizations to Improve Smartphone Conversions

Those of you satisfied with your ecommerce smartphone conversion rate, say Y-E-A-H! (chirp, chirp, cricket, cricket) No, seriously though, if you are satisfied you might want to quit being basic and keep reading—there is always room for improvement.

Adobe’s 2016 mobile retail report stated, “while 26% of shopping carts on desktop turn into an order, smartphone carts only see a 16% success rate— conversion rates are nearly 3x higher on a desktop than on a smartphone.”1

adobe analytics conversion trend by device

adobe analytics conversion by deviceWhen it comes to improving your ecommerce site’s smartphone conversion rate the first thing you’ll want to examine is the user experience. You’re probably thinking, “our site is responsive, isn’t that a good thing?”.

Well, yes and no.

“Responsive design is a tool, not a cure-all. While using responsive design has many perks when designing across devices, using the technique does not ensure a usable experience (just as using a gourmet recipe does not ensure the creation of a magnificent meal.) Teams must focus on the details of content, design, and performance in order to support users across all devices.”2

At the minimum, every ecommerce site should utilize a responsive design. However if you really want to improve your conversion rate, custom optimizations to the mobile experience can make all the difference.

Users spend 20x more time on apps than the mobile web3 because apps tend to be more focused and optimized for a smartphone users’ needs.

app vs web usage

Clearly all this data shows that something’s amiss on the smartphone experience and tailoring the experience is key to fixing certain issues.

Therefore, this post series covers a high-level set of user experience (UX) best practices that can help improve smartphone conversion.

Best practices aren’t the end-all be-all of optimization. In fact, they’re best used as a baseline. Start here, but don’t end here – because best practices don’t work for everybody, and best practices are rarely actually the optimal solution.”4

That being said, follow these 5 optimization tips and you’re sure to see some conversion improvement.

1 Focus on what’s important.
2 Think about content.
3 Pay attention to layout.
4 Make it scan-able.
5 Design for speed.

1 Focus on What’s Important

Smartphones naturally have much less screen real estate to work with then desktops. The average desktop view port is 1024×768 pixels or higher5, while a smartphone is closer to 360×640 pixels6. While a couple pixels here and there might not seem like a big deal, they are and the vertical nature of a smartphone only adds to the challenge.

This is why it very important to consider your customers’ needs when it comes to their shopping experience on a smartphone and prioritize your content and functionality accordingly.

Below are several ways you can optimize your the limited real estate available on a smartphone.

Condense the Header

Reduce the height of the site header a much as possible. You can do this by using an alternative logo treatment, implementing a hamburger menu, and labeled icons.

Header before and after

Before / After

Expose the Search Box

“Shoppers who use internal site search converted at a 216% higher rate than those who do not.”7

This is HUGE. Exposing the search field at all times helps bring it to top-of-mind. If exposing the field on all pages isn’t practical for your site, consider doing it for just the homepage and be sure to display a search icon in the header.

Mobile UX search field


Highlight Location Specific Information

Is your brand available at brick and mortar stores? If so, prioritize your location information so that it is easily found on a smartphone.

You can do this by featuring a store locator on the homepage or within the header. Also, provide your customers with useful location content such as the store address, hours or operation, one-click link to directions, and if possible wait-times. Both Atheleta and T-Mobile do a good job of this.

Examples of mobile UX - location information


Support Navigation in Spite of the Hamburger

The hamburger menu has become the go to solution for mobile navigation because it is a fantastic space saver. However, it has its share of shortcomings.

“On mobile, people were 15% slower when the navigation was hidden.”8

There are several reasons for this, but for the most part customers have to do extra work to figure out what your brand is selling and it’s not a common UX pattern that a typical desktop user is familiar with.

The good news is that you can counter the negative effects of a hamburger menu by including additional navigational links. Old Navy and Sephora do this well by featuring top selling categories either as links of buttons on the homepage.


Examples of alternative mobile navigation


Optimizing a smartphone user’s experience by focusing on what is important to your customers can help reduce the time they spend looking, ease friction and frustration and in turn improve their path to conversion.




1. Source: Adobe 2016 Mobile Retail Report  2. Source: Responsive Web Design  3. Source: Comscore 2016 US Mobile App Report  4. Source: Conversionxl Ecommerce UX  5. Source: W3 Schools Browsers Display  6. Source: Device Atlas Mobile Viewport Size Statistics 2017  7. Source: WebLinc – Boost Conversion and AOV with Site Search  8. Source: NNGroup.com Hamburger Menus

Transactional Emails

Brand and Deliver: Unpacking the benefits of custom transactional emails

Imagine you’re shopping at Bloomingdale’s, and instead of stepping out onto 5th Avenue with their iconic ‘Brown Bag’ in hand, you’re toting a thousand-dollar watch in a plastic sack with ‘Thank You” printed in garish red letters. Bloomingdale’s would never let this happen; they’re proud of their proprietary branding and managing how they’re perceived at all stages of the consumer lifecycle. Even if your online store isn’t quite at their scale, would you risk sending your customers home with a lack-luster takeaway? It feels cheap, and they’ll notice it, too. That’s a lot like sending generic transnational emails.

The online shopping story doesn’t end when a customer taps the ‘Place Order’ button or scans their thumbprint to buy with ApplePay. As a retailer, if you’re tracking completing checkout as your primary conversion, you’re missing the big picture. Refocus on the follow-through: What are you doing between checkout and fulfillment to keep customers coming back?

Don’t’ be basic!

Instead, close the loop: A quality post-purchase exchange creates the illusion of seamlessness between ordering and fulfillment.

Before you hit send, brand your transactional emails.

Plan for multiple touch points

Bridge the virtual experience of shopping via touch-screen with the actual experience of physically touching an object (in to 2-3 business days, anyway). The steps that come between — transactional emails like order confirmations, shipment and tracking details, arrival notifications, and satisfaction surveys — have the potential to excite and engage your customers. But only if you treat these emails like extensions of the storefront.

Reassure and inform your customers, while also rewarding them with VIP treatment.

Build suspense

While they anxiously await shredding open the box and popping the bubble wrap when their package arrives, remind your customers that they can order almost anything they want…in their pajamas; it’s practically magic! Branding your transactional emails makes their experience memorable from start to finish — and back again. Of course, that means incorporating your site’s User Interface (UI) elements, like logos, colors, buttons, and link styles. But it also means stripping out any scripted language and replacing it with your brand’s unique tone-of-voice.

Look for patterns

Although for ecommerce, amazon.com may not be renowned for visually-stunning page designs, the company is THE customer service trailblazer. And branded transactional emails are a cornerstone of their digital strategy. Within each email, Amazon sets customer expectations by identifying milestones in linear steps, linking to the order details on the site, providing terms and conditions, and even offering related products. Essentially, they teach us the three main reasons you should be branding your emails, too. Branded transactional emails:

1. Show your customers that they can trust you.

2. Increase customer loyalty by reinforcing your brand voice and mission.

3. Give your customers not just the information they need, but also the information they didn’t even know they needed.

…But always be yourself

Unless you’re uncharacteristically ambitious, you didn’t plan for your ecommerce site to compete with the likes of Amazon. Your brand has an online presence first and foremost to generate awareness. Even though Amazon’s transactional emails boast cool features like the ability to dynamically pull in recently-viewed products, they are designed to appeal to every demographic, everywhere. So, while these emails are effective and have a broad reach, they lack flavor.

However, because you likely have a narrower audience, it’s easier to determine their personas and use language and features that really speak to them. No one wants to feel like they’re the average customer. So why be the average retailer?

Stand out by doing what big marketplaces can’t do: Curate transactional emails for your specific customers.

To show how implementing custom branded transactional emails leads to satisfied return customers, let’s look at examples by brands that are bringing their A-game.

Show you are trustworthy

Something Digital recently launched an ecommerce site for Riley Home, a startup luxury lifestyle brand that specializes in high-quality, affordable sheets, duvets, comforters, pillows, towels, robes, and gifts. Recognizing the challenge for new brands to generate buzz and build credibility, our digital marketing strategy included customizing transactional email templates.

Riley’s emails go with the flow.

They share the same UI characteristics as the website, incorporating the color palette, icons, and web-safe versions of the headline and body fonts, so text renders virtually the same across email clients. The emails also scale responsively and can be easily accessed from smartphones, tablets, and laptops alike. This seamlessness gives customers confidence that they’ve made a good investment.

Riley Email Example

Riley delivers a guarantee that customer’s personal information is safe because they look, feel, and read like the ecommerce site. Instead of relying on generic subject lines and filler copy, Riley adds their personal touch. Remember that default language doesn’t represent you. Messages that do what they promise to do, in a familiar tone of voice, are more likely to be delivered to your inbox and less likely to be mistaken for marketing ploys or phishing scams.

Riley also makes the fulfillment process transparent, notifying customers when their orders are placed, invoiced, and shipped and what they can expect when the package arrives. Setting expectations at regular intervals leads to fewer customer service calls, headaches, and follow-ups.

Riley shows accountability by getting it right the first time.

Reinforce your brand voice.

If you wanted transactions to be cut and dry, you wouldn’t have made the effort to design a beautiful ecommerce store. Transactional emails supplement that rich experience. Thank customers for their purchase on the site, while drawing them back to shop again through the words you use in your communications.

Take Native, for example. Native is website dedicated to a single product — natural deodorant — in a variety of scent and strength options. The company’s success is up against two big limitations: a uniform inventory and demand. Do customers buy deodorant in a pinch or are they able to wait for an online order to ship? Are they willing to buy their personal hygiene products from different stores? Are they likely to buy more than one bar at a time? How likely are customers to send personal hygiene products as gifts?

Judging by Native’s transactional emails, they have master-minded a strategy to keep customers coming back for more, even if their medicine cabinets are fully stocked with sweet-scented, non-toxic freshness.

Native Email Example

From a design perspective, Native’s order and shipping confirmation emails are clean and understated, much like the ecommerce site. But the enthusiastic subject lines and bold, personalized headlines are loud and proud. The marketing copy empowers the customer and gives positive reinforcement. Plus, light-hearted, colorful, if fictional, narratives describe how your order was warmly received by the customer service team and how they carefully handled the order to fulfillment.

You might think, “Five paragraphs before the order review table? TL;DR”, but it’s so charming that you get hooked after just one sentence. Personalization brings a kind of intimacy to the buyer-seller relationship. Customers feel cared for and important.

By controlling the content of the email, you can choose what matters to your customers, rather than making concessions for the average consumer. Customers value real interactions, not automations; They want to feel seen. The proof that authenticity works is in Native’s site reviews. Nearly 5,000 customers have rated the shopping experience with 5-stars and they even campaign for the brand on social media.

Engage your customers.

Transactional emails are the gateway drug for marketing engagement. An order confirmation email isn’t just a receipt if it also links to a referral program, cross-sells, or provides coupons for future use.

Third Love, a body-positive lingerie brand, uses inclusivity to its advantage. Their transactional emails welcome customers into a community and offer incentives to return to the site. Essentially, Third Love closes the loop, and from there on out, they invest in maintaining meaningful customer relationships. They appeal to their customers’ needs, reducing subscription fallout.

Third Love Email Example

Within its post-purchase emails, Third Love encourages customers to refer friends for mutual savings, take a quiz to discover their fit for their body, and shop for complimentary products recommended based on their personal tastes. Third Love even reminds customers to show their appreciation by leaving product reviews, which are overwhelmingly stellar.

If your products tell a story, gear up your customers by linking to related blog or social media posts in the order confirmation email. Anticipate that they might not know how to care for or use your products, so include a mini FAQ or demo video in the shipment confirmation email. Keep in mind that not everyone is home to receive their packages, so send a shipment arrival notification to allay delivery fears.

Although not everyone uses gmail, if most of your customers do, consider giving Google’s amp feature a test run. Adding cross-sells and up-sells to transactional emails is a no-brainer, but with amp, they dynamically update to show products that your gmail recipients recently viewed on your site.

And, as always, monitor and A/B test your special-sauce over time to see what resonates with your loyal fan base.

Ship it!

Loyalty is long-game. Regardless if you’re starting up or just getting rebooted, branding your transactional emails can build trust, reward customers, and drive repeat conversions. It is one of the least-expensive customer retention methods with the greatest potential for return on investment. The upfront cost is worth it, because if your customers feel both safe, special, and satisfied, their loyalty lasts a lifetime.

Are your transactional emails missing the mark? If so, we can help! Give us a holla ›

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.

Every Little Thing: Attention to Detail 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.

E-commerce team

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?

Designing 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.

Writing effective headlines

Using your Words Carefully: Part 2 – Headlines

Last week, we talked about the value of serving your customers the content they deserve. We also outlined that smart copywriting, which include the following tips:

– 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 we have already listed. Lastly, we will look at some real world examples and how they apply in a business setting. 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)

Although headline 1 is informative, the text is lengthy and doesn’t speak to anyone. Headline 2 is less wordy and includes a less passive verb, but still leaves out the customer. Therefore, 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 headline’s text 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?

Your want to 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

Invision.com HomepageInvision’s Homepage headline is active and inclusive.

Handy.com Welcome MessageHandy’s welcome headline reassures customers above all else.

AirBnB.com HomepageAirbnb engages customers to interact and incentivizes it.

Copy writing expert Dane Maxwell suggests combining these three key elements for writing 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 possible (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.

Capser.com Homepage Casper pairs three benefits with icons for extra punch.

AllBirds.com Homepage Allbirds backs up a personal story with three related product features.

WealthFront.com 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. However, 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’).

Casper.com 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.

WildFang.com Homepage Wildfang’s Calls to Action matches 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 and compiling sample copy. In fact, 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:

Apple.com Example Apple prioritizes headlines, distinguishes supporting features in a digestible way, and highlights CTAs using a single color.

CuratedKravet.com Product Page Curated Kravet’s Product Detail page buy form has a strong type and color hierarchy and is aligned for fastest completion.

MaddieStyle.com Mobile ExampleMaddieStyle.com Mobile Example Maddie, like all SD ecommerce sites, was designed mobile first.

Test Your Copy

At this point, 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. As a result, you will 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. So, if you follow our tips and write smart, both you and your customers win big.