Accessibility Ebook

5 Accessibility Features Built into Something Digital’s SDK Accelerator

More and more the activities of daily living occur online. We shop, bank, request a ride, check in with friends and schedule appointments via the web. The convenience of the digital ecosystem is compelling, especially at times when we feel harried, or inclement weather makes us want to stay inside. More than that, web-enablement is so wide spread that for many brands, it’s the only way to interact with them.

But what happens if your eyesight is poor, or your muscles lack the dexterity needed to operate a mouse? Such conditions can bar you from engaging in the activities of daily living the majority of us take for granted.

Recognizing the role of the web in today’s society, unfettered access to web-based services is now the law of the land. Specifically, Title III of the Americans with Disabilities Act (ADA) requires that businesses help disabled people access the same services as able-bodied people, including those services offered via a website. And with 51.2 million Americans with disabilities, allowing all people to buy from your website makes good economic sense.

No doubt, designing an ecommerce site so that it is accessible to the widest possible audience can be complex. To eliminate that complexity, Something Digital created an SDK accelerator that offers five functionalities — all absent in baseline Magento —  that make ecommerce sites accessible to consumers with disabilities.

These functionalities include:

Keyboard Navigation

For a variety of reasons, many people find it difficult or impossible to navigate a website using a mouse, and must rely on their keyboards to accomplish all website functions, including selecting menu options, accessing desired content, and moving between elements on a page. For this reason, SD’s Accelerator provides functionality that allows users to navigate your website via their keyboards.

Convenience & Assistive Cues

Most people don’t need instructions on how to navigate a website or access the content we want. Decades of going online have taught us a common vocabulary. We instinctively know how to accomplish the tasks we want to accomplish, even if we are first time visitors to a site.

For instance, most website content is placed approximately in the middle of the browser to provide space for site navigation, logos, assistive links, advertising, and so on. People with good eyesight, by habit, skip over these elements and go straight to the good stuff. But if your eyesight isn’t strong, or you rely on a keyboard, you need a way to go straight-to-content or back to the top of the page.

Our Accelerator includes assistive cues that allow people with disabilities to take advantage of these conveniences.

Voice Over Support

People with disabilities often rely on assistive technology when going online to shop or access other services. These devices may be screen readers (i.e. programs that read text aloud for the user), text enlargement software, or software that allows users to control their computers via voice commands.

Screen readers literally read the contents of the screen to the user, which offers obvious benefits, as well as some surprising challenges. For instance, a screen reader must read the menu options and navigation options for the user, which means it will read all of the text contained ARIA-rolls, alt-tag, title tags and so on. As a result, the same text can be repeated over and over, causing confusion and creating a poor brand experience for the visitor.

SD’s Accelerator identifies when text is redundant, and instructs the screen reader to skip it.

Focus Management

Focus management is a big deal in creating accessible websites, and it took up the bulk of our efforts when developing SD’s SDK Accelerator. Focus, as it applies to web page accessibility, is the outline that highlights an item or element that is selected by a person who doesn’t use a mouse.

Focus management addresses challenges people with disabilities encounter as they navigate sequentially through content. Here’s a prime example: Let’s say you’re on an ecommerce site and you place an item in a shopping cart. Many sites will have an overlay or pop-up image of the mini-cart, which now becomes the center of focus. You can either interact with that mini-cart, or you can go back to page content by simply clicking outside of that mini-cart, which automatically dismisses it. Or let’s say you continue to browse products after you’ve placed an item in your cart. At any point, you can access the mini-cart pop-up by clicking on the shopping cart icon, typically located in the top navigation bar. Once clicked, the mini-cart becomes the focus of your screen, but you can easily dismiss it by clicking on the surrounding page.

Such conveniences are difficult and confusing to people who use a keyboard or screen reader. If using a keyboard, there’s no way to click on the surrounding content to close the overlay. If using a screen reader, the content is out of the expected sequence, andthere is no way to click on the original content.

The challenge, therefore, is to allow disabled people to close the overlay easily. To accomplish this, our Accelerator inserts an X for closing the overlay, and it puts the focus (i.e. outlines) on that X. (The X is a universal cue for closing a page or document.)

We also capture the focus so that the overlay is truly captive, meaning that users are prevented from accidently tabbing through the navigation, which can result in them closing the overlay without realizing it, and getting lost in the page.

Images Embedded in Text

Magento 2 has a new default theme named “Luma,” which is a clean and elegant theme that that features better usability practices than its predecessor, the “Madison Island” theme.

The Luma theme encourages website designers to embed text within hero, masthead and other images. Such text often conveys important information to visitors, but because it is part of an image, it can’t be selected. Assistive devices, such as braille displays and screen readers can only read text that’s selectable. Therefore, a person relying on an assistive device is unable to access any text that’s embedded in an image.

To overcome this challenge, the Accelerator includes numerous CMS content widgets for the drag-and-drop editor in Magento’s visual page builder tool. Essentially, the approach is to allow website designers to create images with text that is overlaid onto the image, not embedded into it. The text can match your brand typography so that the overall impact of the text and image is equally beautiful as if it had been created it in the Luma theme.

And there are additional benefits to this approach. Because the text is actionable, search engines can read it as easily as assistive devices, which means it has SEO value. It also means that the text will load on the page faster than the entire image, which means allvisitors will be able to see the message sooner.

Seamless Accessibility

All of the functionality described here are seamless to your website visitors. If they don’t rely on a keyboard or assistive device to navigate websites, they’ll never know you’ve built accessibility into your ecommerce store. Creating a website that allows more people to use it doesn’t require you to make design sacrifices at all.

Written by: Phillip Jackson, Ecommerce Evangelist

EYEO Festival Takeaways Banner

Something Inspiring: EYEO Festival Takeaways

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

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

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

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

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

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

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

Humanize Data

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

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

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

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

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

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

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

Data, after all, is people.

Get Empowered

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

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

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

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

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

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

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

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

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

1. Building accessible sites.

2. Prioritizing data security.

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

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

This leads me to:

4. Ask questions. A lot of them.

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

Go Forth and Do Better

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

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

Written by: Gina Angelotti, Interactive Designer

Website Personalization: UX Design for Smartphone Conversions

5 UX Optimizations to Improve Smartphone Conversions

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

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

adobe analytics conversion trend by device

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

Well, yes and no.

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

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

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

app vs web usage

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

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

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

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

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

1 Focus on What’s Important

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

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

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

Condense the Header

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

Header before and after

Before / After

Expose the Search Box

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

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

Mobile UX search field

 

Highlight Location Specific Information

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

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

Examples of mobile UX - location information

 

Support Navigation in Spite of the Hamburger

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

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

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

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

 

Examples of alternative mobile navigation

 

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

 

 


 

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

Mobile Touch Graphic

How to Increase Conversions from Mobile Traffic

In Q4 2017, 24% of all ecommerce sales stemmed from mobile devices, but that percentage is likely to grow. Why? According to a report from ​Verto Analytics, 35% of online shoppers now prefer to shop only on smartphones or tablets. Moreover, they use their mobiles to shop all day long.

Now more than ever it’s critical to ensure your ecommerce site is optimized to take advantage of the consumer’s enthusiasm for mobile shopping. Broadly speaking, there are two barriers that get in the way of mobile conversions: data entry burdens and product discovery challenges.

We’ve worked with numerous ecommerce sites spanning a range of consumer segments to to overcome these challenges. In our experience, these six tactics will go a long way towards helping you increase your mobile conversions. Each of tactics will deliver results, but when taken together, will make more of a significant impact.

#1: Make mobile payment options available

Consumers don’t like entering their payment information on their mobile devices, especially when they’re out and about in public places. Mobile payment options, such as PayPal One Touch, Apple Pay, and Amazon Pay are moving the dial for ecommerce sites by allowing the consumers to complete a purchase with the touch of a button straight from the product details page. All of these services offer an “always logged-in” experience, for maximum convenience to the consumer. In fact, it’s fair to say PayPal One Touch and Apple Pay are now table stakes.

Implementing a mobile payment option on your site is relatively straightforward. PayPal One Touch is supported by both Magento and Shopify.

Amazon Pay, in addition to offering a true, always-logged-in experience, offers a more robust ecosystem for sellers.

#2: Support social sign-on

Data entry requirements in the mobile checkout process can be quite onerous for consumers. Mobile payment options mentioned above eliminate some of this burden, but can introduce new complications.

Specifically, placing turnkey payment options on product details pages means the consumer is immediately taken to the checkout process, preventing further browsing or product discovery and resulting in lower average order values (AOVs). Some ecommerce managers opt to conceal these mobile payment options until the consumer arrives at the payment section of the checkout process, but that can lead to avoidable cart abandonments.

If product discovery is a goal, supporting social sign-ons is a good strategy. Social sign-ons inform the customer upfront that they will be spared the burden of entering a lot of address and payment details, yet still promotes browsing and product discovery.

Social sign ons allow consumers to access websites using their existing social account IDs – such as Facebook, Twitter, Google+ and LinkedIn. In our experience, ones in highest demand at the moment are Google (gmail), followed by Facebook.

#3: Deploy auto-fill technology

There are plenty of consumers who choose not to use social sign on, or a mobile payment option. Fortunately you still have the ability to convert by helping them to prefill some information. Google and other third-party services, such as Addressy, provide address auto-completion in all countries in which a sizeable number of consumers shop online.

Here’s how it works: when consumers begin to enter their address, these services use the first few keystrokes and device location data to suggest relevant addresses near the consumer, which can help them complete address information.

Or you can deploy a one-page checkout that supports the Google Maps API, which has auto-completion built into the app. There is Google Maps plug-in for Magento; Shopify links to Google Maps by default.

#4: Support social engagement

Mobile shoppers who visit a site are typically motivated to purchase a product. They’ve seen something that’s captured their attention, and are on a mission to buy it. This is an important and interesting trend we see more and more: Customers who are willing to make purchases upon first visit to a site because they’ve been inspired through some other channel, almost always social.

We work with a lot of brands, particularly in fashion and footwear, that report a lot of high-converting traffic from Instagram. For all intents and purposes, these customers appear as first-time visitors, but in truth, they’ve been engaged with the brands on social for a long time.

For this reason we’ve found it quite beneficial to invest in social channels, such as subscribing to Instagram for Business, as well as developing shoppable stories and posts that highlight specific products with direct links to the product detail page on your website.

If you deploy this strategy (and we think that you should), take care that your website reinforces the social experience. In other words, ensure that the images consumers see on your social posts appear on your website, either in a product gallery or carousel that’s featured on the product page. This tells the customers that they’ve found the same products or brands that caught their attention in a social channel.

There’s an interesting product to keep your eye on: it’s called Curalate. It offers a “shop the look” feature, and makes product recommendations that are very Instagram-like.

#5: Prioritize Search/Use Search to Enhance Your Product Descriptions

Many ecommerce sites opt to downplay search on their mobile sites in order to make more screen real estate available to highlight products. While understandable, it’s an approach that can frustrate consumers and lose sales. We’ve found that drawing additional attention to search — and making it easy to use — pays lots of dividends.

Here’s why: Onsite search is the only place where customers tell you in plain English what they’re looking for. Moreover, as noted earlier, consumers visit mobile sites because they are motivated to make a purchase, and are frustrated if a search feature isn’t available to help them find it. It’s hard to browse categories on an iPhone, so search is the first place consumers look. When we’ve drawn additional attention to a customer’s onsite search, we’ve seen as much as 20% improvement in conversions.

Google Search Console lets you see all of the search terms used on your site, and if you set up Google Analytics the right way, you can segregate the ones entered via mobile devices. It’s well worth your time to do so. Search terms entered into mobile devices are surprisingly lengthy and detailed, which is counterintuitive. But the truth is, natural language is used more on mobile devices more than any other platform. Why? People rely on voice typing, which makes it easy for consumers to search on, say “red long-sleeve tee shirt with elephant image on the front.”

This trend is so significant that we now recommend all ecommerce managers mine their search console for data to incorporate into their product descriptions.

#6: Develop an Amazon Strategy

The last tactic isn’t related to your mobile website, per se, but it is relevant to the way in which people now shop. The fact is, in 2017, 4% of all retail transactions — online and off — occured on Amazon. And the e-tailer accounted for 53% of all online sales. It’s hard to get around the fact that Amazon plays a role in all online shopping experiences.

In fact, Amazon, not Google, is the first step in the purchasing funnel. When a consumer wants to purchase a particular item, he or she begins on Amazon, and if your brand isn’t on that site, you no longer have a seat at the table. This is why it’s imperative that you develop an Amazon strategy that allows you to stay relevant with the consumer.

You don’t need to offer your entire catalog on Amazon; a select number will do to ensure your brand shows up when consumers searches for it on the Amazon mobile app.

Keep in mind that all consumers have been trained to understand what Amazon is. If they search for your brand on Amazon and come up empty handed, they’ll certainly see your competitor and you will likely lose the sale. Conversely, if they find your brand but see a very shallow product catalog, they’ll immediately conclude that your offering is bigger and will seek out your website or search for your products elsewhere on the web.

In conclusion, there are many ways to increase conversions from your mobile traffic but combine them and the impact can be significant. If you have questions about mobile traffic to your site be sure to reach out to SD.

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

Black Friday

2017 Black Friday – Cyber Monday Recap

GENERAL OBSERVATIONS

As many others have noted, Black Friday Cyber Monday (BFCM) was kind of insane (in a good way) this year. Adobe reports $2.87 billion on Thanksgiving Day, $5.03 billion on Black Friday, and a whopping $6.59 billion on Cyber Monday.

And this year, sales actually started as early as the Monday before Thanksgiving, turning BFCM into a true Cyber Week. Here are some quick stats that I found most compelling:

  • Digital Commerce 360 reports, “mobile devices accounted for more than 61% of traffic to retail sites Black Friday morning and more than 46% of sales.”
    • Next time a client tries to tell me that no one wants to shop on mobile, I’m going to remind them of this metric.
  • According to Adweek, retailers sent nearly three billion emails on Black Friday alone, along with 82 million SMS push notifications.
    • Shopify reports a 4.29% average conversion rate for email during BFCM, with the next best channel coming in at 3.04%.

  • Retention Science states, “48% of the entire U.S. online apparel retail market was discounted by an average of 45% off. This is compared to 44% of the market with an average of 36% off last year.
    • This year, I personally noticed better, deeper discounts offered by luxury brands. Matt Benson, MatchesFashion, The Outnet, and SAKS OFF 5th all offered up to 50% off over BFCM.

 

SD CLIENTS

Looking specifically at SD’s clients, I noticed some general trends worth noting. Here are a few of the biggest takeaways:

  • Thanksgiving was the biggest YoY growth day this year. Last year, many clients waited until Black Friday to kick off deals; this year, sales started as early as November 20 and ran as late as December 5. Only a small handful of our clients opted to wait until Black Friday to kick off sales in 2017.
  • This year, I saw more specific deals – i.e., discounts on designated Cyber Week categories and tiered promotions. Clients that offered a flat % off deal with no strings attached saw nearly 50% more YoY growth than clients that didn’t.
  • Triggered emails saw average conversion rates in the double digits over BFCM. Email in general (including transactional, marketing, and triggered emails) was the best performing channel for most clients.

 

COOLEST STRATEGIES

Digital campaigns didn’t wow me this year, but there were a few that stood out:

  • For the third year in a row, REI pushed customers to #optoutside (and give them great, user generated content) on the biggest shopping day of the year. They closed brick and mortar locations and encouraged customers to shop sales before and after BF.

 

  • Brands like Everlane and Catbird donated proceeds from sales to charity. Everlane had a stated donation goal for the day and their website included a countdown meter:

 

  • Sephora’s model is also genius. Every year, they mark many items down to $10 or $15 and release a preview of the sale beforehand to create hype. Free shipping at Sephora starts at $50, so they ensure users spend at least that much (and likely significantly more). This isn’t Sephora’s first time at the rodeo.

MISSED OPPORTUNITIES
  • Respond to customers on social media! If someone complains, reach out to them directly and on your social feed and do your best to rectify the situation. BFCM likely drives many new users to your site and it’s important to retain them instead of making an enemy for life. Over BFCM, I saw many brands that just couldn’t keep up with feedback on social. Consider hiring a community manager or freelancer to help with the workload over the holidays.
  • Offer additional incentives to top customers. If you have these customers segmented out in your email list, offer them an additional discount, free gift, or store gift card as a thank you (and an incentive to buy more). Several brands used to do this (I’m looking at you, Madewell) but didn’t this year.
  • Increase your email sign-up discount or offer additional promos (like free gifts or gift cards with purchase) during BFCM for users that opt-in to marketing emails for the first time. I can’t think of a single brand that offered this type of incentive and it feels like a real miss. As we previously stated, email had the highest average conversion rate over all channels for our clients and building that list throughout the year is absolutely crucial to long-term success.
  • Create more Instagram stories. If you’re still struggling with the algorithm change, this is the best way to increase engagement and ensure that your posts don’t get buried. If you have a verified account, utilize stories to tout specific deals with links. Oh, and please don’t just post static product images. Be creative! If your content sucks, it doesn’t matter how great the deal is… users aren’t going to click.

 

If BCFM wasn’t great for you this year and you’re looking to make some changes in 2018, get in touch with us. For more marketing ideas and ecommerce strategy tips, check out these previous blog posts:

A Checklist for Uncovering Ranking Issues in SERPs

Dark Social Webinar Recap

Magento BI and Why You Need It

The Case for Email Marketing

Written by: Lindsay Pugh, Digital Strategist

7 Must-Have Extensions for Your Magento eCommerce Site

Getting ready to launch a Magento store? Congratulations! With 2 billion online shoppers worldwide, online commerce is a great way to build or expand your business.

Succeeding in the online space requires more than building a nicely branded Magento store. You’ll need to map out the entire selling cycle, so that customers can find what they need or get new ideas, and you can create a positive experience for all involved.

That lifecycle includes:

  • Merchandising your store and populating your catalog with product descriptions and images
  • Building your pages and managing content
  • Integrating products and sales into your ERP system so they can be invoiced, tracked and delivered, and keeping tabs on your inventory so you don’t accidentally sell products you don’t actually have in stock.
  • Creating a robust search tool to help customers find relevant products
  • Nurturing your customers through email campaigns and sales promotions
    Paying your taxes

 

We like building sites in Magento Commerce Cloud because the company bundles a lot of features into it, which means you ultimately pay less than with a traditional web-hosting route. That said, there are seven extensions you’ll still need to support the full customer life cycle.

Merchandising: Unirgy uRapidflow Pro

This extension makes quick work of merchandising your store, especially if you have a large product catalog. It provides advanced cataloging and high-speed data import and export, so you can upload and manage product descriptions and product images on your site. We’ve been working with it for years, and can attest to its power.

Building Pages: BlueFoot

BlueFoot is a page builder tool, now owned by Magento, that offers a robust set of tools for creating and managing content on your Magento store. You can use it for your product descriptions as well as your blog. Featuring a drag-and-drop approach, it  makes it easy to design and create web pages according to your vision.

ERP Integration: Xtento Tracking Import

This extension makes it easy to import orders from a CSV or XML files into Magento and process it from end to end. It captures the payment (charges the credit card), notifies your customer when an order is received, ships the order, adds the tracking number, notifies the customer when his or her order has been shipped, as well as changes the order status after the order has been imported. All of this happens automatically.

ERP Integration: Xtento Order Export

This extension provides a fast and convenient way to export your orders, invoices, shipments, credit memos, customers to any third-party system. You can export all sales related data in any file format (Text/TXT, Tabbed, CSV, XML, ASCII/Fixed-Length-Files) and connect your Magento store to almost any ERP, CRM, warehouse, drop-shipping or shipping system.

Elastic Search

Magento Commerce Cloud offers elastic search capabilities, and makes it easy for you to adjust keyword priority and manage word exclusions. We highly recommend it, but it does require some infrastructure set-up and ongoing maintenance. It’s worth the effort, however, because a bad search is worse than no search at all.

Customer Communications: Email Service Provider

An email service provider (ESP) is essential for sending marketing emails and sales promotions, and to allow customers and prospects to sign up for your promotions directly from your website.

There are four we work with frequently and feel confident in recommending:

Enterprise Level

  • Listrak – Offers email and SMS capabilities on one platform. We like it because it allows you to send transactional messages, as well as newsletters.
  • Bronto – A fully fledged marketing automation suite, allowing you to manage email, as well as your Google Adwords campaigns and social media engagements. It’s more complex, which means it’s also more expensive.

 

Mid-Tier

  • Dotmailer – Dotmailer offers the best integration with Magento, which means you can access a lot of its features from within your Magento store. It offers a nice feature in which it can generate an email to a customer with product recommendations based on searches they’ve performed on your site.

 

Small Sites

  • MailChimp – MailChimp is extremely powerful, and is a ubiquitous product for marketing. It’s also free for users who have up to 2,000 subscribers. You can also manage a handful of Google Adwords and Facebook campaigns from within MailChimp.

 

Calculating Taxes

There are two extensions we recommend, based on the size of your ecommerce operations and tax liability:

TaxJar is well suited for SMB customers, and like MailChimp, offers a free tier for smaller users. It prepares your state taxes, and can autofile them for you if you choose.

Avalara is an enterprise tax solution, and can do the tax nexus calculation for your and your accountants. In fact, Avalara has a professional services team that help you determine all of the jurisdictions in which you have a tax liability. Like TaxJar, it will prepare and autofile state taxes.

Bringing it All Together: Something Digital Commerce Accelerator

If this sounds overwhelming, don’t worry. Something Digital’s Commerce Accelerator offering for Magento Commerce Cloud lets merchants to go live with an operational online store faster and at a lower cost to market. Our standard offering includes all of the integrations described in this post.

LTV

Customer LTV: What is it and Why Can’t Google Analytics Offer it?

Not all customers offer the same level of value to your business. Some may purchase once, never to return to your site again. Others will purchase intermittently, but only if prompted with an ad. Still others may be quite loyal, returning to your site regularly to purchase.

Now, you might be inclined to say, a sale is a sale, and in that respect, all sales deliver equal value. But it is rare for consumers to find your site and make purchases without any effort (read: expense) on your part. In all likelihood they arrive on your site as a result of a Google Adwords, Facebook, display or affiliate campaigns you run. Since it costs you real money to attract visitors to your site, it makes sense to hone in on customers who are most likely to return to your site regularly.

In other words, you’ll want to focus on customers who offer the highest lifetime value (LTV) to your business.

You can use your LTV to drive ROI in your marketing initiatives. Take Google Adwords as an example. Google offers a bidding option that lets you target by the cost of acquisition. If you know the amount of revenue a consumer will deliver over his or her lifetime, then you can calculate how much you can afford to pay for that consumer and still be profitable.

Calculating LTV

So what is lifetime value exactly? It is the projected revenue a particular customer will generate for your business over the course of their lifetime. Calculating LTV requires you to pull together a set of variables and constants — KPIs that are specific to your business.

Variables

  • Customer expenditures per visit
  • Number of visits per purchase cycle
  • Average customer value per week

 

Constants

  • Average customer lifespan
  • Customer retention rate
  • Profit margin
  • Rate of discount
  • Average gross margin per customer lifespan

 

+ Source: Kissmetrics How to Calculate Lifetime Value

Once you have those two datasets in hand, you can calculate your LTV in multiple ways, which Kissmetrics shows nicely in this Starbucks case study infographic.

Why it’s Difficult to Calculate LTV with Google Analytics

There are several challenges to calculating LTV with Google Analytics. The first is that Google Analytics doesn’t tie specific data to specific customers, which means you can’t create customer segments very easily. In other words, you can’t identify customers who come to your site X number of times during a purchase cycle, and tie those visits to purchase frequency and purchase value.

That means you will have little choice but to organize the data manually so that you can identify all of the constants and variables (see above) you’ll need to calculate your LTV. This is inherently a time-consuming and error-prone process. And it requires a lot of guesswork on your part.

These challenges are compounded in that LTV can be iterative, as new competitors enter or leave the market, making customers more (or less) loyal to your store.

LTV Made Easy

But there’s good news to merchants with a Magento store: Magento BI makes quick work of calculating your LTV, because all of the data and insight you need for variables and constants are already in the platform (which means it’s also error free). Getting your LTV is simply a matter of setting up your dashboard correctly.

Magento BI lets you see your LTV from many different viewpoints with minimal effort on your part:

Need more information? Check out Magento’s webinars on calculating LTV with its BI tool.