Posted August 11th, 2016. This is a post by our friend Justin Rondeau, Director of Optimization at DigitalMarketer, part of an ongoing partnership between Crayon and DigitalMarketer analyzing the latest marketing redesigns, trends and best practices.
Coming up with new and innovative page designs that meet your design wants, customer’s expectations, and boost conversions is tough. It’s even more difficult to make heads or tails of the changes made on pages you visit everyday.
I wanted to try to make this process a little easier with a weekly column that breaks down design changes from popular sites. It’s easy to see when something changes, but it’s more difficult to understand why and how it will improve (or potentially hurt) the brand.
Each week I’ll be digging into some of the redesigns published in Crayon’s Blink newsletter. I’ll break down each redesign into x categories and give detailed analysis surrounding the new design. Finally I’ll rank how the new design holds up. Here’s how I’ll break them down each new design:
Clarity – If your visitor doesn’t know what the page is about and what’s in it for them in the first few seconds you’re sunk. The goal here it to make sure you can properly articulate your offer, make it attractive, and ensure they know how to take the next step.
Readability – This is a huge factor that is often overlooked on ‘non-blog’ pages. All too often companies go a little crazy with typefaces, characters per line, page breaks, bolding, colors, etc…
You need to stay consistent and make content easy to consume. If your text can’t be read, then your message will get lost.
Appearance – A professional site design will build trust with new visitors. Authentic imagery, coloration, and a solid visual hierarchy are all crucial factors for your site. You need some sections to stand out more than other and capitalize where it counts. A site that does this well can subtly accent the most important content while giving the visitor a sense of autonomy.
On-site experience – You need to articulate the purpose, have solid usability for visitors of all skill levels and devices, and fast load times. If anyone of these things are missing, your user will have a hard time navigating through your site and won’t convert.
Navigation – If we’re looking at a landing page you want minimal navigation, but for all other pages it needs to be intuitive.
I’ll break down each variation and share which one has the edge in each category. When it’s all tallied up, we’ll see if the page is going in the right direction or if it still needs some work.
All right let’s get started! Remember, the older version is on the right and the latest version is on the left.
Basho Home Page (Enterprise Software Company)
The updated content above the fold definitely provides a little more clarity about their product offering. However, it will lose some points when it comes to readability and on-site experience.
Your content above the fold, especially your content, needs to answer two very important questions:
• What is it?
• What’s in it for me?
The left hand version definitely articulates this better than the right hand version.
Generally we have to consider more than the above the fold content, but since the bulk of the content is identical, we really only have a few things to differentiate between.
The updated variation (on the left) wins for clarity.
Despite the above the fold content being more cluttered, it is much easier to parse through the content. Having your headline be located on the right side of the page and center justified is just a little awkward.
The new variation does a better job of using consistent font sizes and colors, whereas the older variation goes a little wild with font sizes and that red font hue.
The updated variation wins for readability
Not much of the page changes appearance wise, and quite frankly they both suffer above the fold. Both variants share similar sections, but they just shuffle them to different locations on the page.
Though the old version has an awkward above the fold layout, it is much simpler. Simple design and copy changes could have really given this page the edge.
The previous version wins for appearance
It’s a really smart move to reiterate your call to action and both versions do this wonderfully.
That said, there are a lot of options on the page and some of them likely don’t need to take up the valuable real estate.
The new variation has a more logical flow, e.g., they say what the product is then immediately go for social proof to show who uses it.
The new variation also uses standard layout best practices to meet the user’s expectations, which is absolutely crucial. The old variant’s mid page navigation is awkward and just doesn’t work. Remember, you don’t want to reinvent the wheel here, use what’s familiar and your vistors will thank you for it.
The updated variation wins for on-site experience.
Since this is a homepage, navigation is not only encouraged but is absolutely necessary. I touched upon this briefly when I talked about on-site experience, but the previous variation just had an awkward navigation layout that isn’t intuitive to the user.
The updated variation wins for navigation.
Updated Variation (on the left) 4
Previous Variation (on the right) 1
Clearly Basho is going in the right direction, but they do need to tighten up their above the fold content if they really want to improve the user experience (and in turn conversions).
Versace Category Page (High End Retail Site)
When it comes to ecommerce, especially apparel pictures provide the best clarity. At the category page level, in this case women’s clothing, the updated version really capitalized on this basic understanding.
The previous variation took a catalog approach whereas the updated variation went traditional ecommerce. Both variants use great imagery, but there is a disconnect between the expectation of a digital shopper when they get a large splash image and then are being sold the products in the image.
The updated variation wins for Clarity
Similar to clarity, an apparel site needs to rely on imagery so there shouldn’t be major readability issues.
Since there isn’t much to discuss in terms of readability, this category is a no contest.
There is a fundamental difference between these two versions. The updated variation has a traditional ecommerce look and feel whereas the previous variation had a catalog theme.
Though the catalog theme may provide a more ‘upscale’ feel, it doesn’t meet the visitor’s expectations from a design perspective. A standard visitor wants to see the products rather than just see a set of them at a time.
Sure the updated version lacks the same elegance, but a boutique themes website will never convert as well as a site that looks familiar to the visitor.
The updated variation wins for Appearance
On top of the stark change in appearance, functionality is also radically different. The updated variation allows visitors to filter, provides a clear[er] ‘add to cart’ button, and turns the page into a store rather than a brochure.
The face lift and the updated functionality show a fundamental shift on how Versace expects their online consumers to shop.
The updated variation wins for On-site Experience
The navigation between the two variants remained identical.
Updated Variation (on the left) 3
Previous Variation (on the right) 0
Versace made a complete 180 with this new category page, and overall it’s for the better. There are some functionality and clarity issues that are definitely derived by a ‘designer’ first mentality.
However, when a site that focused heavily on brochure elements, it makes sense that they’d use elegant design themes over solid conversion elements, e.g., such as saying ‘Add to bag/cart’.
That’s it for this week. Let me know what you think of these design changes in the comments and subscribe to Blink to see the latest design changes. If you see a change you want featured let me know!