Before & After: 5 Famous Websites Get Fictional Makeovers

    by Ginny Soskey

    Date

    June 23, 2014 at 7:00 AM

    famous_websites_reimaginedThe one time in my life I got a professional makeover, I was surprised at how much the little details mattered. Going into the makeover, I expected to walk out of it with crazy eye shadow colors, fake eyelashes, and bright red lipstick. I'm from New Jersey, so this was entirely possible. ;)

    But when they first spun my chair around, I felt like I looked exactly like myself, only way better. My hair was the same cut and color, but had some nice volume to it. My makeup was subtle, yet accented all of my features in the right ways.

    If you took a picture of me at that moment, you wouldn't have realized that the makeup artists had a very careful strategy in place to make me look like I normally would ... just more refined. 

    That's really what the best makeovers are about: Making you look like you, only better. 

    The same concept goes for website redesigns. People expect them to be these overt, crazy changes that make you go WOW. Change that yellow to blue, use parallax scrolling, add in some fancy product shots, and boom: Redesign's done. But some of the best redesigns are more subtle and strategic, focusing on features with relatively low "wow factor" that also make a big improvement in visitors' experiences with a website.

    But those website makeovers are hard to find in the wild -- often the changes feel so natural and subtle that you overlook them. To give you an idea of how website makeovers can really work, I picked five famous brands, teamed up with one of our incredibly talented in-house designers, Matt Plays, and reworked them to be an even better version of themselves. Check 'em out below and see if you can spot the differences! If you're feeling stuck, we'll explain what we've changed, too.

    (And HubSpot customers, if you want to try to implement any of these strategies on your own website, you're good to go -- these are all COS-friendly.)

    Apple

    Before

    original_applehome

    After

    apple-1

    Apple's one of those brands that can rarely do wrong when it comes to design. Their current site looks great, but there are a few improvements they could help better cultivate that Apple-fandom they're so well known for.

    The "after" aims to do just that. This is the page people will see right after they've purchased a MacBook. Instead of featuring hand-picked, non-interactive case studies, this screen uses smart content to serve up only the content customers care about, and allows them to become promoters by actively participating in the campaign on social media.

    Notice the call-to-action to tweet about their MacBook using the hashtag #MyVerse and the accompanying social proof at the bottom from other promoters. These subtle cues give customers who are probably in their most excited state (waiting to get something they've been pumped to purchase) more motivation to promote Apple. And of course, in this fictional makeover, Apple would have a more robust social media presence and the tools to respond to customers who are using #MyVerse.

    Volkswagen

    Before

    original_vw

    After

    vw

    Like Apple, Volkswagen has a gorgeous-looking website -- right now, I'd give it an A. But there are a few things that could take this website up to an A+.

    When anyone goes to vw.com, they see the same thing: a Golf GTI. Seems like a cool car -- but what if you were a mom of a large (5+ people) family? The Golf GTI isn't really a great fit for you. Wouldn't it be nice for VW to show you a car that better fits your needs? That's exactly what the reimagined site does. Using smart content, it gives you (the theoretical parent) a much more personalized experience. 

    Also, VW's mobile site offers a pretty different experience than its desktop version because it's not responsive. (Learn more about responsive design here.) So, we decided to make the experience much more similar -- regardless of the device. For the mobile site, we also include a specific "Find a Dealer" call-to-action to pull up dealers nearby while you're on-the-go. So, overall, the redesign may not look much different than VW's current site, but it's a much better experience for visitors. 

    Citrix

    Before

    original_citrix

    After

    citrix

    Now on to a brand that many of us use for virtually interacting with our peers: Citrix. Like Apple and VW, Citrix has a pretty slick website, but we thought we could use smart content to offer an even more impressive experience to current customers. 

    When customers come to the homepage, chances are, they're looking for two things: 1) a way to easily log in to the software, and 2) resources to better use Citrix tools. So that's what we gave 'em -- a front-and-center way to log in and some tailored resources to help the customer have an awesome webinar experience. With the makeover, customers have all the information they need without having to hunt around on Citrix's website. 

    Deloitte  

    Before

    original_deloitte

    After

    deloitte

    Deloitte's website has some traditional elements that could use an update to align with a modern audience. It's fairly text-heavy, and uses a slideshow to feature different parts of the website. It's not bad, but it could definitely use a little glitz, glam, and a dose of strategy to make it feel more modern and accessible. 

    In the "after" version, we pretended that a visitor interested in consulting services arrived on the page. With smart content, we could get rid of that slider in favor of one big header image and call-to-action focused on consulting. Then, below that main call-to-action, there's a feed of consulting-related blog posts in case the visitor isn't ready to learn about Deloitte products just yet. Your homepage is a destination for both strangers and repeat visitors -- modern homepages are equipped to respond to both audiences with relevant content.

    IBM

    Before

    original_ibm

    After

    ibm

    Like many of these other companies, IBM has a bajillion products. With the current homepage, it's hard to figure out where to go without navigating through a maze of dropdowns. 

    Wouldn't it be better for IBM to surface content they know you'd like? That's what the "after" version addressed -- assuming that you've shown interest in big data, the homepage morphs using (you guessed it) smart content. Like Deloitte's reimagined homepage, there's a central image and call-to-action instead of a slider. Also, because big data can be a difficult concept to grasp, we featured a much more accessible big data example from IBM's website: Watson's time on Jeopardy.

    Volia! IBM has a more tailored homepage without changing too many of the design components.

    None of these reimagined websites underwent drastic aesthetic changes -- because to make your website perform better, that's not always required. To optimize your homepage, consider whether you really need that expensive redesign. You might just need to make some adjustments that improve personalization, device compatibility, and user experience. There's no need to break the bank to get more value from your website.

    Which of these reimagined redesigns was your favorite? Let us know in the comments. 

    SUBSCRIBE TO HUBSPOT'S MARKETING BLOG

    Join 300,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

    Written by Ginny Soskey

    Ginny Soskey is the Section Editor for HubSpot's Marketing Blog, which means she spends most of her days editing and writing, and helping others do the same. Say hey to her on Twitter @gsosk.

    | Website

    Search Inbound Hub

    Subscribe to Marketing Articles by Email

    Subscribe by RSS

    Follow HubSpot

    Call Us: 1-888-HUBSPOT