Malin + Goetz is a New York based, family owned business focused on simplified skincare solutions for all skin types. Formulated with natural ingredients and proven advanced technologies, every product is gentle and effective without sacrificing luxury.
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.
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.
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.
Tens.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.
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?”
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:
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.
Written by: Gina Angelotti, Interactive Designer
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
When 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.
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.
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.
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.
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.
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
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.
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 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.
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.
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.
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
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.
“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).
Top: The site header and article hero image; Center: Related articles; Bottom: An image with a descriptive caption
Left: The site header and article hero on mobile; Center: White space around advertising; Right: The submission form
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.
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.
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.
“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.
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.
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
“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.
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
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.
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.
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:
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:
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.
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.
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?
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.
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.
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, 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.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.