Normally, I dig into massive amounts of data, but today, I think we should talk about something that’s a little bit more subjective & open to interpretation – design.
Specifically, your design’s first impression, how long it takes to make that impression, and whether or not that impression is communicating the right things (or anything for that matter) about your brand.
Are You Engineering Your First Impression?
I know you’ve heard me say it before, but it only takes .05 seconds for a website to make a first impression.
But just how much thought are you putting into that first impression?
Are you chic, silly, sexy, savvy, smart or classic or what? How are you different from the competition? Do you purposefully try to communicate that through typography, images, and design as quickly as possible when a visitor lands on your website?
As an informal observation, it’s not uncommon to see different companies in the same vertical adopt a “me-too” approach in their design aesthetic. Sometimes, competitive sites are so similar, that if you removed the logo from the site’s header, it’d be nearly impossible to distinguish one site from another.
From what I’ve noticed, this is for 2 main reasons:
- The internal conversation about design aesthetic devolves into one about features, rather than developing a distinct visual identity.
- As a result, the features and aesthetics that “look like they’re working” for the competition are adopted.
Of course, when the new site launches, everyone’s too busy giving each other high fives and patting themselves on the back, that nobody notices that the new design is a near carbon copy of a major competitor & that we completely neglected to ask existing customers why they liked shopping with us in the first place.
If you’ve been wanting to add more distinction to your visual communication, but haven’t known where to start, check out the Zaltman Metaphor Elicitation Technique and apply it to your qualitative surveys. This can help you design a first impression that speaks more to your brand’s core values.
ZMET Technique In Marketing Research from Taylan Demirkaya
Filmmaker Morgan Spurlock talks about the “branding” problem & how he was rejected by 100’s of companies to help finance a film because he didn’t understand his brand’s core values enough to properly present his “value proposition” to the people who would give him money.
It was only after discovering his own personal brand using the ZMET technique (above) that he secured 17 brand partners with similar brand attributes, leading to over a million dollars in funding.
Though you’re probably not a filmmaker, this talk has many universal lessons that can be easily applied to making your own eCommerce design more distinct & memorable.
This isn’t a new problem, and “Brand Identity” isn’t just some squishy thing to be shuffled off. Cheskin Research & Studio Archetype found as far back as 1999 that the 6 most important factors in building trust with an eCommerce company are:
- Brand
- Navigation
- Fufillment
- Presentation
- Up-to-Date Technology
- & Security Logos
Now, think about that for a second. If the first impression is that your site is virtually indistinguishable from other websites just like it, the next question is, why would I even bother diving deeper into the product pages, let alone choose you over the competition?
To make sure I wasn’t being some overly-opinionated internet marketing asshole, I Googled the term “leather jacket” to see if visual distinction and overall first impression would be an issue on any random search.
These were the first three results:
Let’s look past the fact that all of these results are for women; something that might be easily fixed by creating category page specifically for the term “Leather Jackets” that asks users to select Men or Women, giving Google a non-gendered page to index – and let’s look at the overall design of these sites.
Is there anything that makes these pages to stand apart from each other…? No. Not really.
It’s too bad, because Polyvore actually has a pretty unique business model. Meanwhile, a closer look at the “Men’s Coats” page on both the Zara & Nordstorm websites reveal that these two companies may actually go after very different target markets.
But let’s be real, research shows that most people aren’t going to bother digging deeper if you haven’t made a good first impression.
Continuing my search, while I wasn’t terribly impressed that Burberry.com didn’t have a page specifically for “Leather Jacket”, there is no denying this page is distinct from it’s competitors.
Unlike the other sites, this page on Burberry quickly lets you know that this brand is about elegance, high fashion, and that Burberry is a more “exclusive” brand. These are very important things to communicate right away when you sell $6,500 sheepskin jackets.
When it comes to the conversation about trust in web design, you tend to hear a lot about “trust symbols,” “testimonials” & things of that nature, but I believe there’s something to be said about a design itself having it’s own kind of emotional honesty where you can tell right away whether the products sold there are for you or not.
American Apparel, whether you love them or hate them, has a design that is honest about the brand & who it is for.
Getting back to my search for a leather jacket, the most distinct site I found during my search though came from the Schott NYC homepage.
Though I could do away with the image slider, soda cap navigation, and many of the fake textures, there was (to me anyways) a sort of charm about this design that made a strong first impression. I especially appreciate the focus that this is an old brand.
There’s no guessing, you can easily feel the character and emotion of this brand and get some sense of whether they’re trust-worthy or not – and that is what this whole first impression is all about.
Shopify has created a list of 30 Beautiful eCommerce designs that feature companies that make very distinct first impressions.
Going back to the first three websites from earlier, if all things like price & shipping were equal (and I were a woman, I suppose) I’d probably just end up buying my leather jacket from Nordstorm, because it’s a brand name I recognize, and none of the other websites gave me the impression there was anything special about buying from them.
That’s a really important thing to consider, especially if you’re trying to stand out in a crowded market.
ALSO (and this is just my opinion) as a male trying to find a leather jacket, I was not impressed that many of these sites did not have gender neutral category pages for non-gendered key phrases.
It’s really not that hard… see:
Two (Relatively) Easy Ways To Make A Better First Impression
All that being said, user experience is everything from the pages that the search engine directs me to, to the category pages, site search results, & how it looks on the device I’m using.
Everything plays a role into whether I’ll even bother navigating to a product page to continue along a purchase path. So what are some relatively easy ways we can make a better first impression once that brand personality is nailed down?
1. Direct People To The Appropriate Pages
If you sell gender specific products, use Google Webmaster Tools to find which gender specific pages are showing up for non-gendered search phrases (i.e I search for “leather jackets”, but end up on a “leather jackets for women” page).
Next, check the landing pages report in Google Analytics…
And look to see if the gender specific pages ranking for non-gendered search phrases have a higher than average bounce rate than the gender specific pages that only rank in Google for gender specific terms.
Next, segment your view by switching to the “bounced sessions” segment:
then use the secondary dimension to see the gender breakdown of the people who land on that page.
If it turns out that a high portion of the of the wrong gender is entering this gender specific page through a gender neutral keyword (pictured above) it might be worth testing something simple like an exit-intent popup that directs visitors to a more gender specific results page (like my mockup below).
2. Focus Heavily On Your Navigation Design
Numerous heatmap studies have shown that navigation is typically among the first & most frequently viewed areas of a website. But the question is, outside of the typical categories, what do you include?
According to this recent study by Business Insider on why people abandon shopping carts, 25% of the people in the survey stated common reasons why people don’t buy is because the “website is too complicated” (read: navigation is difficult to use) and close to 60% stated “hidden costs” (typically code for shipping costs) as being the primary reason that shoppers leave without paying.
In a different study by eConsultancy, asking visitors what the most important aspects were of buying from an unfamiliar brand, among the top answers were “professional design” “the site contains well known brands” & “having contact info visible.”
If done well, the site’s navigation can include some or all of the things that discourage visitors from buying.
Just look at how much is communicated in the navigation of one of my favorite sites, ThinkGeek, without ever getting into the content of the site.
Without having to hunt too much, it’s easy to find:
- Time sensitive promotions
- Multiple ways to navigate deeper into the site (categories, interests, search)
- New, Top & Exclusive products, as well as a hint of the products they carry (gifts, t-shirts, electronics, gift certificates)
- A rewards program
- Products that are on sale
- Their “Free Shipping” threshold
- Customer support availability (via live chat & “help” buttons on the top right)
If the target market and personality of this site isn’t made apparent by the color scheme, microcopy (use code TIBERIUS for discount) logo & typography, they make it known by having Timmy the mascot, wearing his “meh” shirt clearly visible. Meanwhile, he’s also drawing your eye to the site search & free shipping offer.
If you actually use the navigation, you’ll see a few pleasing surprises that display the brand’s personality, in addition to there being a great deal of attention to the information architecture. These little things add up to make a user experience that is as pleasing as it is functional.
Now compare that to one of the extreme examples from earlier, Zara, and hopefully you’ll see why this is important.
Case Study – Alight Increases Site Searches 16% & Purchases By 25%
Knowing their site felt a little… dated, plus size women’s retailer alight decided to update their site-wide navigation to be a little more modern.
To refresh the design, they increased the size of their search bar, removed the trust symbol the navigation, incorporated “sale” & “new” categories into the pink navigation area, clarified their value proposition, along with a handful of other minor updates.
The result was an increase in site searches by 16% and an increase in overall purchases by 25%, all by making the navigation feel more trust-worthy by adopting more modern eCommerce design aesthetics.
How Fast Are You Making That First Impression
A good first impression isn’t just about design, but also how fast that design loads.
We’ve written about website speed before, and found that sites that take 3 seconds to load have experienced 22% fewer page views, and that one guy got an 8.47% conversion rate improvement by moving his landing page onto a faster host.
But really, just how important are those moments between when a link is clicked & when the first visual elements appear on the screen?
Well, according to the engineers at Google & Microsoft, a loading delay of 250 milliseconds can influence whether a visitor chooses you over a close competitor.
“Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the Web”
– Harry Shum, Computer Scientist & Speed Specialist – Microsoft
It’s also been discovered that 47% of eCommerce customers expect page load times of less than 2 seconds before they consider leaving and that 40% of users will abandon a site when waiting 3 seconds.
“Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the Web”Problem is, Radware, an application delivery & security company, said in their 2014 eCommerce Page Speed & Web Performance State of The Union that the median “Time To Interaction” was 5.4 seconds, 10% longer than when the same study was conducted 9 months earlier.
They also say in the report that Page Speed “affects every conceivable business metric” and can influence everything from customer satisfaction to customer retention.
This is why we’ve published articles about Tag Management and migrating over to Google Tag Manager recently, as optimizing your site performance is a HUGE deal.
Just to reiterate, this graph from Uptrends shows the relationship between page load time & conversion rates.
Radware reveals that a site that takes 5 seconds to load experiences 35% fewer pageviews & a 105% higher bounce rate, with a -38% impact on conversions.
They’ve also found that the top 12 sites in terms of page speed have a Time To Interact (TTI) speed that’s anywhere between 1.3 -2.9 seconds.
It’s important to highlight that Time To Interact is not total load time, but rather the amount of time where enough page elements load where the user can have a meaningful interaction with the page.
Kinsta, a wordpress hosting solution, has published a phenomenal guide to optimizing page speed that I recommend you check out if you want to start serving your page faster.
To see which of your pages could benefit the most from page speed optimization, check out the “Page Timing” report in Google Analytics to get a quick view of the pages that are performing below the site average.
Once you have that, here are a few tips you can use to help minimize page speed.
This is no means a comprehensive list, as performance optimization is a field all on it’s own, however, these ti
1. Use Image Compression To Reduce Image File Size w/o Losing Quality
This article on Smashing Magazine shares an image optimization workflow that uses a handful of tools to quickly batch optimize photos on a site without sacrificing quality.
As a demonstration, the author shares how using this process to remove 986kb of data from the image heavy Myspace homepage, while preserving 99.93% image quality. (no audio, but facinating to watch)
2. Use A Tag Manager To Manage Your Javascript
Georgene Nunn wrote very recently about how using a Tag Manager can improve site performance.
One of the major benefits for your page loading times is that your visitor’s browser isn’t making requests to every single service you’re hooked up to. (it adds up quick when you’re using heatmaps, ad retargeting, analytics, A/B testing, etc)
Instead, the browser makes one request to the tag manager, which then calls each service to load when as soon as they’re ready. Making it so other page elements are able to load unimpeded.
One study by Tag Man found that increasing page speed by even 1 second increased conversions by 7%.
3. Take Advantage Of Browser Caching
Your site has a plenty of files that don’t change very often, like CSS, images, & Javascript. By instructing the visitors browser to cache these files and store them locally on their hard drive, you can minimize the load time as the visitor navigates between pages & also on repeat visits.
Mnot.net has created a very comprehensive guide to browser and other forms of web caching that should help you with better performance.
Bonus Case Study – Krasimir Tsonev’s Front End Performance Case Study
Talking about performance optimization & watching someone go through a whole performance optimization workflow are two very different things.
In this article, veteran developer Krasimir Tsonev walks us through various improvements he made to the front end performance of his site to significantly reduce his load times.
Some techniques used were:
- Avoiding header redirects
- Eliminating render blocking Javascript & CSS in above the fold content
- Leveraging browser caching
- Optimizing images
- Rewriting CSS where necessary
Conclusion
I don’t need to tell you that there’s a lot that goes into a buying decision, and what actually gets people to buy is a cumulative experience, rather than any single element.
However given the amount of competition out there, and “me-too” design aesthetics, don’t you think it’s important to design a distinct first impression that quickly lets your visitor know that you’re a brand worth shopping with?