Planning a Website Redesign? See How These Industry Giants Got It Right!

0
43

Redesigning your website is risky business.

You spend money, time, and resources redesigning, hoping to hit a home run.

3.29_Quotebox1The truth is, you’re just as likely to strike out.

I’ve evaluated thousands of websites in my career and I’m pretty darn good at sniffing out the good ones and I’m equally good at sniffing out the posers. In this post, we’ll be evaluating 14 industry giants that got it right.

Lately, I’ve been getting a lot of design inspiration from Crayon.co; a design search engine that’s been super useful for coming up with new ideas for DigitalMarketer’s “blow it up” style test strategy—a strategy you’ll hear all about when I have plenty of results to share.

One of the best features Crayon offers is notifications when sites redesign their pages, and the ability to look back at the design before the update for comparison.

Light bulb.

I thought it would be fun to break down these design changes using the same criteria in my 15-point audit to see how they stack up to the previous versions of the site!

These guys are some of the best in the bizznazz, let’s quickly break down the criteria I’m using to evaluate these pages…

DigitalMarketer’s 5 Elements of Optimization

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 is to:

  • make sure you can properly articulate your offer…
  • make your offer attractive…
  • 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

You need to stay consistent and make content easy to consume. If your text can’t be read, then your message will get lost. 3.29_Quotebox2

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 using 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.

OptimizationElements

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.

(RELATED: The 15-Point Landing Page Audit)

Let’s take a look at the pages.

Click on the month below to be taken to that set of redesign evaluations!

1. Versace’s Category Page

I love seeing how ecommerce sites try to stand out with design.

I was super excited when I got a notification that there was a massive change to Versace’s category page. Check out the video below to see how things stack up.

Final Score

Previous Version: 0

Updated Version: 3

This was clearly a case of “Give The People What They Want Expect.” The winning variant met the standard ecommerce user’s expectations and felt more like an online shop than an advertisement.

Oh, if you want to read my detailed synopsis and see another review of a B2B software company you can check it out in this installment of my weekly column.

2. Iron Mountain’s Product Page

There is nothing more difficult than coming up with a well-designed B2B page.

The specters of “old design trends” still plague industry giants and due to their poor agility they haven’t been able to make template changes during a time when design entails trust.

(RELATED: [Checklist] 5 Image Elements Worth Testing On Your Landing Page)

Iron Mountain tackled this project with a new service product page. So let’s take a look.

Final Score

Previous Version: 0

Updated Version: 3

So, Iron Mountain really stepped up their game and got out of the dreaded B2B design void. There are still some clarity and usability issues on the page, but that’s nothing some iterative testing can’t fix!

(RELATED: [Checklist] The Comprehensive Guide to Running A Split Test)

3. Freshdesk’s Blog Page

Blog page designs are absolutely crucial.

If you have a page that is tough to digest, people simply won’t read your copy.

A lot of organizations (including DM) are taking a simplistic single column approach to the blog to ensure the content gets all of the attention. However, for media companies, this makes it more difficult to promote new products or indoctrinate readers.

Let’s see how Freshdesk hoped to improve the blog experience while maintaining the two-column structure.

Final Score

Previous Version: 1

Updated Version: 4

Overall the redesigned page is a more focused version that users will appreciate.

I am super curious about that Live Chat feature and if anyone from Freshdesk is reading, I’d love to hear if that’s helped with content consumption (or helped move other metrics).

Both this critique and the Iron Mountain Critique can be found here (with one more design breakdown of a video deliverability provider).

4. Best Buy’s Cable & Internet Service Page

Whenever big companies make changes to content while maintaining the universal header and footer there is a chance that they create the dreaded Frankenpage.

Let’s see if Best Buy creates the most feared design monster with this redesign

Final Score

Previous Version: 0

Updated Version: 4

Despite the limitations, Best Buy was able to dramatically improve the design of their site. Sure, there are some “Frankenpage” features (the cross-sells and “Ultimate Viewing Experience”), but overall they have the right idea and should be able to iterate out an even better page.

(RELATED: Test This, Not That! Swap This Split Testing Bad Practice for 6 Results-Driven Practices)

5. Buffer’s Product Page Redesign

Promoting a product line complete with different branding and naming can be pretty difficult.

How much of your current brand equity do you borrow and how much do you want to make the product stand on its own?

Let’s see how Buffer handles this in this redesign!

Final Score

Previous Version: 2

Updated Version: 3

Wow, I got a little ranty” in that one.

I guess that’s what happens when you get such a close call! The team at Buffer is definitely on the right track and dramatically improved their page. I think the most important change came from updating the copy.

They are actually talking to a specific group, telling them what they offer, and why it is good for them. All the other changes were gravy; the clarity change was the big one!

You can read the full write-up to these redesigns plus see how Cisco attempts to improve their DevNet community page here

So if you made it this far you probably noticed one interesting trend:

All of the updated versions seemingly had the edge!

I wonder how much longer that trend will last… I mean what’s new isn’t always what’s better.

(NOTE: Want DigitalMarketer’s proven 8-Step Optimization Process for turning existing traffic into more leads and more sales? Get our Optimization & Testing Specialist training and certification. Learn more now.)

optimization2

October 2016

6. Uber’s Product Page Redesign

Uber decided to make some sizable content changes to their driver recruitment page. What I was excited to see was a big company making interesting updates without having to deviate too much from the template (this makes it easier to change things and get things rolled out when your dev team is working on things that are “more important”).

Do these image and content changes improve with the latest update or push me to drive for Lyft? Find out in my 9-minute review.

Final Score

Previous Version: 1

Updated Version: 2

So this really could have gone either way, but the updated version had the [very] slight edge. Had they improved some of their clarity and focused more on the driver rather than the app, then this would have been a landslide. However, it just squeaked by as two major factors were a “no contest” because the design scheme remained the same.

7. Kissmetric’s Homepage Redesign

As a fan of Kissmetrics and being a part of their target audience, I was super hyped to get an alert about this recent redesign. Find out if my excitement continues when I see the new redesign or fizzles out into disappointment in this 11-minute review.

Final Score

Previous Version: 4

Updated Version: 0

IT FINALLY HAPPENED! I’ve been doing these redesign reviews for quite a while and this is the first time the previous version won out. Here’s why:

  • There was a lack of clarity by removing key feature sections.
  • The new layout made it harder to read the page (white text on light blue background… yuck).

The one thing I was happy to see is they got rid of the awkward choice to request a demo or start a trial in the header. Unfortunately, it was still a choice to make in the last content section, which made me have to pull some of that praise back.

8. Mixpanel’s Pricing Page

Ah the pricing page, my most recent obsession based on my work here at DM. When I saw this update I jumped for joy and you’ll find out exactly why in this 8-minute review.

Final Score

Previous Version: 0

Updated Version: 4

This is the second near sweep and had there not been a “no contest” in one of the categories, then it would have been a full sweep. Simply put, this new page is WAY better than the sad table they had before. Awesome work, Mixpanel!

9. Cisco’s Solutions Page

One of my favorite type of redesigns is when you get an “old web” page versus a page that both looks and functions like something that was made for the present. However, does Cisco’s new polish improve the functionality, or is it just lipstick on a pig?

Find out in my 9-minute review.

Final Score

Previous Version: 0
Updated Version: 5

It’s a clean sweep; take that old school three column text-heavy layouts. In all seriousness, this update isn’t perfect but is miles ahead of its predecessor. There is one spot in particular that is a genius improvement but completely lacks in execution.

10. Lyft’s Sign Up Page

This might be my most surprising review today! There are two drastically different pages: one the ugly interstitial form vs. the pretty landing page. Find out if what is pretty should perform better in Lyft’s 7-minute review.

Final Score

Previous Version: 4

Updated Version: 1

Well, that was a surprise! The moral of this story is to avoid extraneous elements and keep the visitor focused on the task at hand. Furthermore, make it as easy as possible for them to sign up, e.g., Sign Up with Facebook.

This review is reliant on the assumption that this is between two “Sign Up Pages.” Whenever you include an inline form on a page you have to do they heavy lifting of educating and persuading your office, in addition to optimizing the form itself!

The previous version had to do less work, was clear, and had better functionality.

Wow! This batch surprised me. There was only one case where the reviews were close and TWO cases where the previous version definitely had the edge. If you liked these reviews, give us a like on YouTube and please comment there to share your thoughts (no trolls please).

(NOTE: Want DigitalMarketer’s proven 8-Step Optimization Process for turning existing traffic into more leads and more sales? Get our Optimization & Testing Specialist training and certification. Learn more now.)

optimization2

April 2017

11. Spotify’s Sign Up Page

Two of my favorite things: form pages and Spotify… this one is going to be fun.

Let’s see how Spotify tackles their redesign in the 9-minute video below:

Final Results

Previous Version: 2

Updated Version: 2

So, I feel a little lame leaving this at a draw, but I think this is more of an opportunity for Spotify than a cop-out for me!

Both of these pages are solid.

What they need to focus on is serving this page to the correct audience.

The updated variant feels more like a bare bones landing page relying on brand whereas the other is a traditional sign up page. If people are coming to the website directly, show the new variant and if they are coming from an internal link show the old variant!

Oh – also kill that CAPTCHA with fire. You are incredibly good with data and must have a better way to catch spam.

12. Draftkings’ Mobile Homepage

Draftkings is constantly updating their site, but it’s generally their above the fold offer that gets the treatment while the rest of the content remains the same.

This lead me to look for any “major” updates, and I started digging into their mobile experience.

They made some slight changes. But overall, were these changes enough to make a difference or did their sleeper pick stay asleep? Watch the 11-minute video below to find out:

Final Results

Previous Version: 0

Updated Version: 3

Draftkings made some minor changes that could have amounted to some big wins, but it’s my guess they didn’t see much of a difference between the two versions. Both variations have a sub-par user experience and the Updated Variation won out because it tightened the messaging above the fold.

Ideally, I’d like to see this go back to the drawing board and for Draftkings to try something brand new.

13. Cisco’s About us Page

I was super excited to see that Cisco had done another massive update to their site! Last time they launched a redesign, I gave it a perfect 5 score against its predecessor.

Can they get this again? Watch this critique to find out!

Final Results

Previous Version: 0

Updated Version: 5

Hot dang they did it again! Whoever is designing these pages at Cicso… well, give them a raise.

The new page gets out of the dated Enterprise software template and brings them into the modern design age.

This isn’t all a facelift! Cisco…

  • Builds a page that tells a better story
  • Use visuals to prime the visitor
  • Gives better direction surrounding what to do next

Great work and I can’t wait to see what you do next!

14. Ghostery’s Homepage

As a long time Ghostery user, I was curious to see how they’ve updated their homepage. It looks like they went from a longer form “You’re Here” style homepage to a more specific squeeze page.

Did that work? Find out my thoughts in my video critique:

Final Results

Previous Version: 2

Updated Version: 3

This one was CLOSE.

Really the only reason the updated version won was because of the unified message. They really fell flat in terms of design and the lack of content really hurt the page. Maybe they can merge the two designs to come up with a “compromise” page that increases both brand awareness and conversions.

Oh! If you want to get these redesign alerts to see what other organizations are up to, signup for the Blink newsletter.

(NOTE: Want DigitalMarketer’s proven 8-Step Optimization Process for turning existing traffic into more leads and more sales? Get our Optimization & Testing Specialist training and certification. Learn more now.)

optimization2