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 ›

Written by: Gina Angelotti, Interactive Designer

Every Little Thing, Part II

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

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

Think Compassionately

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

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

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

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

 

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

Usability

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

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

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

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

Readability

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

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

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

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

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

Accessibility

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

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

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

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

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

Think Strategically

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

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

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

 

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

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

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

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

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

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

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

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

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

3. The color isn’t just for kicks.

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

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

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

The Takeaway

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

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

Written by: Gina Angelotti, Interactive Designer

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.

Written by: Gina Angelotti, Interactive Designer

2xist Models in Athletic Apparel

2(X)ist

2(X)ist a men’s premium underwear is a leader in design and innovation with a superior fit without sacrificing style. Around for over 20 years the brand has continued to expand into active, swim, accessories and women’s. 2(X)ist continues to speak to those who want both comfort and style for their active lifestyle.

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?

Mobile Content Block Visual

In the case study example, we see:

1. A Headline, which provides context.

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

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

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

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

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

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

check minus iconCheck minus.

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

In the case study example, we see:

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

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

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

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

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

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

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

check minus iconCheck minus.

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

 

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

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

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

1. Is it intuitive?

2. Is it memorable?

3. Does it integrate with the overall experience?

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

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

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

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

Written by: Gina Angelotti, Interactive Designer

Riley Home

Riley Home

Riley, a new ecommerce brand is slated to change how consumers purchase luxury bedding. This brand is the perfect choice for consumers looking for curated experiences and customized, quality bedding. Once you try Riley you won’t want to go to bed with anyone else.

Kravet Furniture

Kravet Inc.

Kravet.com, Leejofa.com, and Brunschwig.com, are three brands from Kravet Inc.,  that offer collections of unique, high-quality home products. The collections feature customized designs and handpicked pieces from around the globe for today’s design professional. All three brands are serving the interior design trade at the highest level through commitment to quality, attention to detail and superb craftsmanship.

Danskin Athletic Apparel

Danskin

From the beginning Danskin has been known for its femininity, innovation, superior quality and comfort. Starting as a small family owned business that worked with New York City’s dancers selling everything from leotards to tutus, Danksin has transformed into a staple among today’s dancers. It continues to be a premier brand among women in fitness, sports, dance, and gymnastics.

Vanguard Promo

Vanguard Promo is a promotional product distributor that provides product expertise and concierge level service with graphic design capabilities, packaging, kitting, fulfillment, and distribution to brands in need of a consistent look and feel. The family-owned enterprise, with four offices along the East Coast, helps brands promote themselves with high-quality exclusive products at competitive prices and unparalleled service.

 

Baked by Melissa Cupcakes

Baked by Melissa

Founded in 2008 by Melissa Ben-Ishay, Baked By Melissa has become one of the most notorious cupcake creators in New York City. Ranging from signature mini cupcakes to macarons, their bite-sized treats delight customers on many special occasions. Baked By Melissa continues to cultivate sweeter moments with new flavors and plenty of purchasing options, including an ecommerce store.