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.
In this week’s post we’re taking a look at 3 new redesigns on Buffer’s product page, Best Buy’s cable & Internet service provider page, and Cisco’s update to their DevNet community signup page.
All three of these pages saw some really radical changes, and some of those may not have been for the best. In last week’s post all 3 updated variations had the edge, let’s see if that will be the case today!
***Read this if this is your first time reading The Extended Blink***
Here is a list of the criteria I use to evaluate these redesigns (if you want an in depth explanation then click here to give it a read).
• Clarity
• Readability
• Appearance
• On-site Experience
• Navigation
I’ll break down each variation by category and score a point to the version that has the edge. Now let’s take a look at this week’s redesigns. Remember, the older version is on the right and the updated version is on the left.
Buffer’s Product Page Redesign (Social Media Publication Tool)
Clarity:
So this is the first of the three pages today to drastically increase the amount of content on the page. It seems like they are going for the ‘more is more’ approach, or trying to increase page size to include more keyword dense text for better SEO and more information for the skeptical visitor.
In terms of clarity, the headline of the updated version is miles ahead of the previous variation.
There is zero chance for me to misunderstand what this technology is used for. However, with the previous version’s ‘Never Miss a Tweet Again’ they aren’t outright speaking to their desired audience.
The messaging throughout the updated version continues to speak to this particular avatar and why they should be using this solution. However, the previous version relies on feature dense copy that speaks to a general audience and doesn’t necessarily speak to the desired end result
As a side note, the change of the CTA is interesting. If they are truly scheduling a demo, then this is a MUCH better CTA. However, there is generally a drop in clickthrough rate when people have to give up their time vs. consuming content.
This is a drastic shift from ‘Get Started for Free Today’ but likely increases lead quality.
The updated variation (on the left) is the winner for clarity .
Readability:
The updated variation has multiple font sizes, justification, and font weights. The previous version kept it very simple and used headers and smaller descriptive text.
In terms of pure readability, the previous version makes it easy for me to know where to read and what I should be reading. However, ease of readability is very important it is also important to make sure you don’t turn your readers into pure scanners. I’ll cover this more in appearance.
The previous version wins for readability.
Appearance:
The updated version has a much cleaner look than the previous version. Everything just stands out more!
Most notably the CTA button is the center-piece of the page on the updated version whereas it blends in on the previous version.
Other than using ghost buttons for CTAs the second cardinal sin of button design is having it blend in!
Another major pro for the updated version is the variation in display. Each section has a different style that makes it more difficult for the user to get into pure scan mode (and completely ignore the content).
They break up the standard columns with new images, text justifications, reiterated CTAs, and bright coloration. Though this makes the page less ‘Readable’ in the traditional sense, it does make the page difficult to ignore without it being too over the top.
The updated version wins for appearance.
On-site Experience:
I have to make something perfectly clear:
An improved appearance doesn’t necessitate an improved on-site experience.
No one likes demos. No one likes scheduling time out of their day for applications they’d rather try on their own…I’m looking at you EVERY SaaS company.
Giving people the option to navigate your site, make a decision, and immediately reach that desired end result is infinitely better than adding the demo ‘speed bump’.
Despite nearly every aspect of this page being better, this change will ultimately hurt quantity of conversions (but it might improve quality).
The previous version wins for on-site experience.
Navigation:
Like everything else on the page, the page navigation got a facelift. The updated variation updated the branding, gave the navigation more weight using a darker font color, and accentuated their main conversion goal ‘Schedule a Demo’.
Overall the updated version has a much better-looking navigation. Remember, you can use your navigation as a tool to improve the user experience. Highlighting an important section is a great way to draw attention to your ideal pages.
The updated version wins for navigation.
Final score
Updated Variation (on the left) 3
Previous Variation (on the right) 2
Even though this score is close, I do feel like Buffer is going in the right direction for the general page aesthetic. I am worried about the change of their acquisition process from a ‘Try for free’ to a ‘Request a Demo’.
Overall they developed an amazing looking page that might suffer from an overall offer problem.
Best Buy’s Cable & Internet Service Provider Page (Big Box Retail)
Clarity:
Normally when people add more content to the site it can obscure the point. In this case, Best Buy’s updated version with more content actually helped with clarity!
First let’s talk above the fold. The updated version gets right to the point:
They want you to find a service provider before you do anything else. Whenever you’re working with multimedia companies, there is a chance a particular company or plan isn’t in your service area. This is a great way to qualify the visitor.
From a user experience perspective, this is a much better play. It is also an improvement from a clarity perspective. Best Buy went really cutesy and they focused too much on who Best Buy is rather than what Best Buy can do for the customer.
The updated variation (on the left) wins for clarity.
Readability:
This will be short and sweet: the updated version is WAY easier to read and browse. The below the fold content on the previous version is a bit of a content maze…
You go from a featured offer that uses icon and is two columns to a section with three columns filled with boxes, boxes, boxes.
The updated variation wins for readability
Appearance:
The header and footer in both versions remain consistent to the Best Buy site template. It’s the body content that changes significantly.
I touched upon this in readability, but the previous version didn’t have any semblance of visual hierarchy. Things were just placed on the page with no real focus on any specific offering.
The updated variation included different coloration for individual plans, promoted accessories for when you buy, included instructions for activation, and added Live Chat for people who get a little confused.
Overall the new page has a much better appearance and wins out over the previous version.
The updated version wins for appearance
On-site Experience:
The previous page had a lackluster layout, no visual hierarchy, and hyper focused on a ‘Featured Deal’. This doesn’t really lend itself to a great user experience.
The updated version included some great features that will ultimately improve the user experience. Some of these features include:
• Live Chat
• Store Locator
• Pickup Information
• Shipping Information
• Direct Links to Specific Deals
• Provider By Location Link Above the Fold
Overall this page helps answer any questions the visitor might have and provides them with the information they need to make an informed purchase decision.
The updated variation wins for on-site experience.
Navigation:
Both versions used the same site header and footer. So there was no change here.
I was somewhat inclined to give the edge to the updated version with their links to the service provider deals in the body content, but that isn’t true ‘Navigation’.
Neither variation wins for navigation.
Final score
Updated Variation (on the left) 4
Previous Variation (on the right) 0
Best Buy drastically improved this page with a much better design, better information, and better features. Great work.
Remember a great webpage comes down to meeting the user’s needs and expectations. This updated version did both of these things.
Cisco’s Community Signup Page (Multi-national Corporate Technology Company)
Clarity:
Well if you want an exercise in how to destroy clarity, take a look at the updated version’s headline:
Sure it’s cute, but for people not familiar with the ‘Spark Chat Room’ it is utterly meaningless. Don’t rely on your subheadline to clarify the headline. Say what you need to say, clearly and concisely!
To be fair the previous version’s copy isn’t all that great, but at least it is a bit clearer.
In both cases the CTA isn’t ideal. In the updated version the CTA often blends in and is on a 3-slide carousel. The previous version uses a single hero image, but has two competing CTAs ‘Check it out’ and ‘Join DevNet’. If the goal is to get people to join the community, then the ‘Check it out’ button isn’t helping the cause.
The previous variation (on the right) wins for clarity.
Readability:
The updated version is much easier to read. It takes a stacked approach that likely looks a lot better on mobile than the previous version.
It also has clearly defined headers that are broken up into sections. This makes it easier for the visitor to browse and find the content they are looking for.
The previous version breaks into multiple columns below the fold and each section hold about the same weight.
Despite the improvement in readability, the updated version still suffers from some clarity issues with headlines like ‘Hack it, Hack it Real Good’
The updated variation wins for readability.
Appearance:
The updated version has a much sleeker appearance than the previous version.
The updated DevNet community icons, the course descriptions and contents section, and the coloration used to break up each content area is done very well.
However, the previous version tried to do too much in each section. I’m a major proponent of keeping things simple. I tend to think: one section, one goal, one message. The previous version was unable to do this from their header all the way down to their main community body content.
The updated version wins for appearance
On-site Experience:
The updated version maintained the features that worked from the previous version and added in some other key elements to improve the overall experience.
Long form pages with a lot of varying content might stir up some confusion. Adding in a ‘Click to Chat’ is a great way to address any concerns and just let people know that ‘you’re there’.
This is especially important when it comes to convincing people to join a community. You need solid community management, and showing you’re investing in answering questions prior to them joining the community is a good first impression.
The updated variation wins for on-site experience.
Navigation:
To be frank: the previous version’s navigation was a hot mess.
There are multiple levels of links, colors, and vague categorization. When you want people to navigate your site you have to use the terms they know. Similar to my criticism of the ‘Spark Us Now’ headline, using a term like ‘Sandbox’ in your navigation might not be the proper vernacular.
The updated version takes a much simpler approach.
There is some vague language with ‘Discover’ but it is miles ahead of something like ‘Sandbox’.
The updated variation wins for navigation.
Final score
Updated Variation (on the left) 4
Previous Variation (on the right) 1
So despite some clarity issues that came from Cisco wanting to be a little cute with their copy, the updated version is a slam-dunk.
So that’s a wrap for this week’s redesign evaluation. Looks like all three redesigns are going in the right direction. So far we’ve done an in depth analysis of 8 redesigns and all of them are an improvement. Come back next week to see 3 more designs and if we have an example where the updated version is more of a downgrade.