Webinar: Getting Cozy with Home and Bedding Brands: 3 Strategies for Success

In 2020, the average consumer has spent more time at home than anywhere else, at any other point in the past 50 years! Because of this, brands in the home, bath, and bedding categories have seen surges in online sales.

In this webinar, we will discover the three strategies to connecting with potential customers to Inspire, to Immerse, and to Involve shoppers in the experience of your home and bedding brand. The result? Higher conversion rate, and increased customer lifetime value.

Get the on-demand webinar here.

5 Tips for Designing Your Store’s Information Architecture

Perhaps recently you’ve walked into a grocery store thinking you’ll quickly find that one obscure ingredient in your latest quarantine recipe, only to discover you’ve wasted ten minutes walking up and down the aisles (side-eyeing anyone that gets too close). You finally find it in an aisle that makes no sense to you but seems obvious to the store manager who led you there. You’ve just experienced the result of bad information architecture in the real world.

Information architecture (IA) is the organization of web content to better suit usability and findability without wasted effort on part of the user. We all rely on our internal cognitive compartmentalization to make sense of the world, and ecommerce stores are no exception. When the category structure of an ecommerce site doesn’t match your customers’ internal expectations, friction can occur. As a UX designer, friction is the last thing I want for your customers. You could have the coolest new site on the block, but if customers can’t findwhat they are looking for, then they can’t buy from your store. Your category taxonomy is at the core of your site, and it needs to be structured logically.

Now that you’re convinced IA matters, here are 5 tips when designing your IA for your online store.

1.  Avoid Overcategorization – Especially in B2C, when customers are browsing your store, oftentimes they don’t know precisely what they want. They are there to compare your products, virtually “trying them on.” If you have very narrowing subcategories for attributes of products you sell, they may find themselves siloed onto one page drawing the incorrect conclusion that you don’t offer the product they desire.

For example, Best Buy narrows its ‘Appliances’ category down to slightly ambiguous subcategories of ‘Major’, ‘Small’, and ‘luxury’ kitchen appliances, not allowing customers to view all available kitchen appliances. Perhaps a customer wants to compare a luxury dishwasher to a more economic version. It’s important to allow customers to see the full category with narrowing filters rather than siloing them too soon.

This overcategorization also often occurs when sites that sell a variety of brands categorize by brand. Instead, allowing filtering by brand or providing a separate ‘Shop by Brand’ page will better guide customers.

Best Buy uses product attributes as defining categories. A better experience would be including ‘Luxury’ as a filter on a ‘Kitchen Appliances’ product listing page.

 

Chewy provides customers with a separate experience when shopping by brand rather than displaying brands within the main navigation.  

 

2. Look at your current search data – If customers can’t find what they want, they often resort to search. Search data can give you valuable insight into what your customers expect your categories to be named, and what types of product categories they expect to see high-level within the main navigation.

SD conducted an IA audit for one of our clients, Robert Graham. We were surprised at how many customers were searching for ‘Men’s Shoes’ both on the site and through branded organic searches. At the time of the audit, ‘Shoes’ was hidden as a tertiary category under an ambiguous ‘Accessories’ subcategory. Surfacing that category higher within the navigation helps guide customers through the shopping funnel more efficiently.

For Robert Graham’s new site, ‘Accessories’ was renamed to ‘Shoes & Accessories’ and ‘Shoes’ was placed highest under that subcategory. 

 

3. Keep common naming conventions – Innovation is fantastic, but when a customer wants to quickly find and purchase a product, naming a category something obscure can be confusing. Chances are, if they’re shopping on your store they’ve already price compared with some of your competitors. Competitor research can be telling as to what customers expect your category taxonomy to be.

SD worked with Industry West, a home furnishing brand, to redefine their IA. We were debating separating out the categories by area of the home (living room, kitchen, etc.) vs. product type. Thorough research of competitors suggested sticking with their breakdown by product type. More than half of the direct competitors of the brand were already breaking out their main navigation in this way. Changing the way your audience is used to shopping can cause delays, so always keep in mind current conventions that work. Using thematic categories can be confusing, especially to new customers who expect the navigation to be broken out by product type.

For Industry West, SD decided to mostly maintain a breakout of product types vs. thematic room types based on competitor analysis. 

 

4. Avoid redundant subcategories EXCEPT when logical – Your product catalog may be large and complex with subcategories relevant to multiple parent categories. In general, it’s best to avoid duplicate categories. But if there is an instance where customers expect to see a category in multiple places, you don’t want to hinder their progression through the buy funnel. For instance, a customer might expect to find ‘socks’ under both ‘Footwear’ and ‘Accessories.’

The two ways to do this properly are:

1. Drive customers to the same category page regardless of where they are coming from. There can be some usability issues in relation to breadcrumbs with this approach

2. Duplicate the category. Canonical setup is required for this approach to avoid SEO issues. There also could be complexity within search category recommendations.

Because of technical complexity, the rule of thumb is to only implement redundant categories when it is completely necessary and logical. This will help guide customers through their browsing experience rather than forcing them through an unexpected avenue.

ASOS Features ‘Activewear both under Clothing and under Women to help customers easily find this category. 

 

5. Make Parent Categories clickable – A recent study by Baymard Institute found that 14% of ecommerce sites today group subcategories under a text label rather than a clickable parent category. Most customers expect the ability to browse top-level categories before siloing themselves within a narrowed category. To support the exploratory nature of customer browsing, provide these pages for an easier experience.

Customers on West Elm are unable to tap the parent category ‘Ceiling Lighting’ etc. 

 

Keeping in mind these 5 tips, the design of your navigation should take the IA and defined category taxonomy into account. Deciding whether your site will need a mega menu, for instance, or if search needs to take high priority, are all informed by IA. You want a menu that can grow with your business needs, which is why IA is a crucial initial step to a navigation redesign.

Within the past year SD redesigned the mega menu and mobile menu for SWIMS. This, along with some other UX improvements, increased their order volume YOY by 130% in 2020. If you’re inspired to redesign your Information Architecture, our award winning UX and Digital Strategy team is here to help! Get in touch to chat about your goals today.

Picture Perfect Ecommerce

Elevate your product imagery with these 6 best practices

What is the first thing customers are drawn to when they land on a product listing page or product detail page (PDP)? The images of the products of course! Humans are visual creatures, with decades of practice sizing up what we like, dislike, and just plain LOVE. We’re good at it, and without the ability to touch and feel products in real life, customers rely on imagery for information gathering. Merchants, you can make customers fall in love with your products and increase your conversion rates with sophisticated product imagery.

At Something Digital we can’t stress enough how product imagery can make or break a sale. SD recently created an ecommerce photography guide for one of our clients in the fashion industry, and we found that a few learnings from the guide can be applied to any ecommerce store. These 6 best practices help to elevate product imagery and the overall user experience, thereby increasing your customers likelihood to convert.

1. Maintain a consistent look and feel

Products should look like they are derived from the same place and brand. When consistency is achieved, customers are able to focus on the differences between products, rather than noticing inconsistencies within the photography styles or layout. The simplest way to incorporate consistency is to apply the same background color to all product images. Not only does this unify the product assortment, but it also creates a visual separation between the image and the page background.

Everlane uses a cool gray background color across all their product imagery.

 

When shooting accessories, consistency can also be achieved with the angle and composition of the products. Ensure the baseline is the same for every image of a particular category. That way, on the product listing pages customers’ eyes will be able to scan the various products more quickly.

Warby Parker keeps the baseline placement of their glasses the same for easy-to-scan product listing pages.

 

2. Incorporate movement when appropriate

When using models to showcase products, show them as the customer would expect to see them—as real living and breathing beings that move. To achieve this, incorporate different poses and angles, and ask your models to walk around in the products. Movement is captivating and adds to emotional feeling to the product. A breezy dress looks more enticing if the skirt is moving as the model walks.

Reformation incorporates movement in their apparel images giving customers a better sense of how the clothes will react in real life.

 

If using models in your photography isn’t appropriate for your product set, another way to incorporate movement is on the PDP. Video is immensely helpful in customer decision making. When selling apparel and fashion accessories, show the clothes on a real person moving around. If you’re selling more technical products like electronics, have an informational video explaining the specs. Customers will most often look to the image gallery for product videos, so ensure this optimal placement.

ASOS incorporates video into their PDP image galleries—helping customers decide if a product is right for them.

 

3. Show at least 4 angles

If only the front of a jacket is shown, chances are customers will be less likely to purchase it. Customers first gravitate toward the image gallery when attempting to learn more about a product, so incorporating 4 or more shots is paramount to their visual evaluation. At a minimum show the front, back, side, and a feature shot. A feature shot informs customers of texture and/or intricate details. Images are replacing in-store experiences, this feature shot can be used to call out important features that otherwise would be hidden to the customer.

Nike incorporates multiple angles for a well-rounded view of their products.

 

At least one image should show a product to scale. 42% of customers will look to the image gallery to assess the scale of a product. Showing a lifestyle shot within the gallery will allow customers to see the scale as well as see how the product could fit into their daily lives.

Burrow shows a person interacting with the product to give customers a better sense of scale.

 

Joybird incorporates lifestyle shots to help customers imagine the product in their own home.

 

4. Show all included products for kits

When selling kits or bundles be sure to show an image of all accessories that are included with the purchase. Keep images simple, and don’t show products that aren’t included with the product, as that can cause confusion to the customer. If a lifestyle shot is used on a PDP, be sure to state which accessories are not included to provide better clarity to the customer. There can be quite a lot of information to take in on a bundled product image, so including the individual product shots alongside allows customers zoom in on a particular part of the kit.

Hims clearly indicates what products are included in a kit with simple yet branded photography.

 

5. Consider a single product variation image

When customers are quickly scanning your site, it can be difficult to find variations of a product such as color or size. A way to incorporate variations more prominently is within the product photography. In addition to the multiple angle shots, a product variation image on the PDP lets customers easily compare without having to tab through the color or size swatches. It’s best to keep these shots very simple with minimal clutter in the background.

Apple clearly indicates what colors are available with simple yet branded photography.

 

6. Use large, retouched images

Customers zoom in on product images to see zippers, materials, ingredients, and much more before deciding to purchase. To ensure the best experience, your images should be crisp and professionally retouched. Retouching can fix any color imperfections, remove stray threads, perfect unevenness, and ensure a consistent tone that is in line with the visual brand. In cases where products are metallic, multiple shots may need to be provided to the retoucher so they can composite the images together to get the correct tone and prevent hot spots.

Allbirds features large, retouched product imagery, and allows the customer to zoom into the image.

 

Retouching is one of the most important steps in the photography. You want your products to look the best they can be, and retouching is the only way to achieve that perfect look. However, there is the risk of over-retouching, and some brands, such as ASOS, are taking control over the amount of retouching done on models. Remember to focus only on the retouching of the product itself, rather than the people interacting with the product. Depending on your brand, an overly retouched person may seem too unattainable or simply too unreal. Retouching is a delicate balance, and an art director can guide retouchers in the appropriate direction.

ASOS doesn’t focus on retouching their models, but rather retouches the products themselves.

 

After your brand has been established, it’s beneficial to create a photography guideline that documents lighting equipment placement, cropping, product angles, tone, and the process of exporting images. This provides new photographers or art directors a reference and helps to ensure consistency when using multiple vendors.

Premium product photography takes time and effort but done correctly it can differentiate your brand from the competition. Many brands today get it wrong.

Follow these six best practices and your customers will be more likely to convert.

If you need help with your photography or ecommerce website, let us know!

Connected Commerce

A Joyous Occasion: A Summary of SD’s talk at Connected Commerce

Given that public speaking is fear number one for me, whenever I am approached to speak in front of large groups of professionals my first fantasy is that the talk will be cancelled. ‘Surely a hurricane will come through the same day as the event! The date is also dangerously close to flu season – I’m most definitely going to get the flu!’ That internal dialogue began when my creative director here at SD, Mickey Winter, first mentioned the two of us giving a talk at Connected Commerce 2018, a conference in New York City. She might as well have asked me to climb Mt. Everest. But after the panic subsided and reality set in, I realized that planning ahead, one step at a time, eventually makes that mountain look more like a hill.

And that’s just what we did. We prepped and rehearsed and came up with relatable content not only for merchants, but for every person interested in the attainment of joy. We were inspired by Ingrid Fetel Lee’s 2018 TedTalk “Where joy hides and how to find it”.  We researched what brings us joy, how we can manifest these ideas into a web store’s UX/UI, and some of our own work at SD that represents these ideas.

After arriving at the conference, Mickey and I were resolute in executing this presentation with confidence. The conference itself is a one-day summit that brings together brands, retailers, and solution providers for a day of talks and networking, hosted by our good friends at Logicbroker. Those dreaded butterflies fluttered for the hours leading up to our talk, and lingered backstage as the two of us waited for our turn. But after shooing them off with some silent aerobic exercises just before we walked into the spotlight, we finally presented.

And here you have it, a brief summary of our talk:

5 UX/UI Principals that Evoke Joy

What is joy and how can we use it?

First, there is distinction that needs to be made between the feeling of joy and the feeling of happiness. Both are emotions almost every human experience in a lifetime. Happiness is how good we feel measured over time whereas joy is what you feel in the moment. Right now. Psychologists describe the word joy as is an intense, momentary experience of positive emotion.

What about the images below give off a feeling joy? If you analyze closely you’ll find that there are 5 common UX/UI patterns seen in all of these images that can help evoke joy within an ecommerce experience.

#1 Roundness or Curves

From an evolutionary perspective, humans prefer rounded shapes compared to shapes with sharp angles. Sharp angles often signify danger, while curves elicit a feeling of ease. Incorporating this into a UI could be as simple as designing buttons with rounded corners or placing imagery within rounded containers.

RileyHome utilizes round shapes throughout the homepage and navigation elements.

 

#2 Pops of Color

Who doesn’t love a beautiful rainbow? Color gives of a feeling of energy and signals to us life itself. People in colorful spaces often feel more alert, confident, and friendlier. When it comes to UI elements, color is easy to manifest in calls to action, promotional banners, and even the product photography itself.

Industry West utilizes color in their photography and UI to elicit a feeling of joy.

 

#3 Floating or Lightness

If you’ve ever swung high on a swing set, you know the feeling of being completely weightless for the brief second before gravity kicks in. The feeling of floating or lightness can be seen and felt when adequate white space is used throughout a page. Customers find content easier to digest when a page is less cluttered.

Malin & Goetz utilizes a white space around its products and within the packaging design itself, giving a feeling of lightness. 

 

#4 Abundance or Multiples

From a primal perspective, scarcity is a dangerous feeling. An abundance of food means survival. Showing products in groups or in a way that it looks like they are abundant will make Customers feel more at ease.

Baked By Melissa showcases multiple cupcakes in almost every product shot.

 

#5 Symmetrical Shapes

Symmetry is beautiful. People generally prefer symmetrical faces to non-symmetrical ones. We are hardwired to look for patterns and balance, and when we see it, it just feels right. Symmetry in UI can be done using equally sized images or similar content on both sides of the page.

Lib-Tech’s homepage is design to be completely symmetrical.

 

These 5 principles designers and merchants alike can follow when creating customer experiences:

1. Roundness or Curves
2. Pops of Color
3. Floating or Lightness
4. Abundance or Multiples
5. Symmetrical Shapes

If these principals are incorporated tactfully into a web store’s UX/UI, customers will leave the store feeling wonderful about their purchases, and likely to return for more.

As Mickey and I walked off the stage a warm sense of relief and excitement flooded over me. For both of us, it was our first time presenting to a crowd of this size, and the feeling of personal accomplishment was immensely fulfilling. The best part of the whole experience was meeting with professionals after the talk who truly wanted to discuss ideas further with us. We both agreed, the experience was a joyous first!

errors

The ways of our errors: Error recovery UX best practices

Although field validation is perhaps the least thrilling UX topic, it is arguably one of the more important. Without proper guidance to correct customer’s mistakes, the simple task of checking out on an ecommerce site can turn into a long, painful ordeal. If an error goes unresolved, it results in a 100% abandonment rate. This is not an ideal statistic to say the least. As a UX designer (and tester) there are validation issues and solutions we keep an eye out for at SD.

But first, the basics.

What is an input field? When we talk about input fields, text, dropdowns, checkboxes, and radio buttons, we simply mean the area the customer is selecting or typing into. This includes fields within checkout, registration, and account creation specifically within the ecommerce spectrum. Errors are the messages customers receive when attempting to progress through a form without entering a valid entry for required fields. The backend can put limitations such as the number of characters and the type of characters (letters, numbers, symbols etc.) on each input.

If error messages are styled, worded, and placed properly, they will successfully draw the customer’s attention, inform the customer something went wrong, and provide an easy path to error recovery.

Words matter

Clarity is key when coming up with the correct error message. A vague message such as “We are unable to process your request” leaves the customer guessing and wasting time trying different solutions. If they can never fix it, they will never buy your product.

A popular inline error message is “invalid input”, which is very ambiguous. The good thing is, the backend knows exactly what is wrong. A better way to pinpoint the error is to customize messages per input. You can use 4-10 adaptive messages to provide this clarity. If a zip code is entered without the correct number of digits, instead of displaying “You have entered an invalid number” customize the message to “5 digits are required” or something similar.

On Home Depot’s shipping address form, the error messages are tailored to the user’s current entry.

 

The right place

Say you have all your error messages tailored to each field. Great! But what if the customer is on a mobile device, and the error message(s) appears out of the customer’s view? Many customers in this situation believe the page has completely frozen. The abandonment route will likely be taken.

An easy fix is to scroll the customer directly to the offending field. If there are multiple errors on one page, however, we have to handle it a bit differently. The customer in this case should be scrolled to the top of the page to view an error message outlining the specific incorrect fields. This informs the customer how many fields to look out for as they scroll back down the form.
Also, make sure you retain the customer’s original input. That way they can assess where they mistyped.

Draw the customer’s attention to each incorrect field by highlighting the field in red and placing the error message next to the field. Red has been the most common color used for warning signals for centuries. Think about stop signs, traffic lights etc. Because red is largely associated with error messaging, it’s best practice to limit the color across websites.

Luhn Validation

There is one field that calls for special attention: the credit card number input. The bad news is this field is the most error prone due to the length. The good news is all correct credit card numbers follow what is called a Luhn/Modulus 10 checksum validation. Because of this, the credit card number can be validated on the front end, giving you the ability to inform the customer of errors as they are typing. Customers wantto pre-empt error messages, so an easy front-end validation can go a long way.

On Home Depot’s checkout as he user enters a credit card number the number is validated on the front end.

 

The customer is right

Nobody wants to be told they are wrong when they are certain they are right.

A common validation bug is not removing the red error message and un-highlighting the field once the customer has made their correction. Ensure all outdated error messages are removed once the requirements are met. Live update the error message on a keystroke level.

In this example the user has corrected the field, yet the error message persists.

 

Another issue is presenting the customer with an error before she even has a chance to attempt the field. This is less than encouraging. Make sure no error messages display before the customer has a chance to interact with the form.

Key takeaways

Optimized error recovery is the difference between a site that works with you and a site that works against you. Be mindful of the following:

  • Provide alternative error messages for each field for specificity
  • Always retain the customer’s input data
  • Optimize the mobile error experience
  • Use red only for error messaging
  • Use Luhn Validation on the credit card field
  • Keep errors messages updated and accurate

 

Although the frequency of errors may be low, the resulting severity is high. Take care of your errors as you would any other important UI element on your site, and you’ll be likely to keep every intended sale.

 

LTV

How a Branded UI Can Improve Conversion

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

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

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

You’re being judged

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

A hue difference

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

Just the right type

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

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

 

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

Please click here

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

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

 

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

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

 

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

The subtle power of animation

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

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

 

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

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

 

Consistency is crucial

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

Brand recall

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

Think through everything

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

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

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

1. Whitenton, K  (2016, February) Website Logo Placement for Maximum Brand Recall. Retreived from
https://www.nngroup.com/articles/logo-placement-brand-recall/