How a Branded UI Can Improve Conversion

An ecommerce site first and foremost needs to be useable. 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.

Written by: Lindsay Stork, Interactive Designer

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