New Year, New Site? Here’s Your Checklist for a Website Redesign in 2014

It’s a new year – time for a fresh new start. For many people, that means it’s finally time to give that tired, old, difficult-to-update website a facelift. But where do you start?

The first step is to analyze your conversion goals. Oftentimes, they’re not as good as they could be, simply because the site itself is too cumbersome or confusing for visitors to use. With a conversion-focused redesign in mind, here’s what to look at:

“Flat” User Interface

flat user interface

Desk.com is an example of a flat design – simple, large and easy to interact with

Flat design has been popularized by Windows 8 and its touch-screen capabilities and is praised by designers for its ability to create an intuitive, easy-to-navigate experience for users. Large, crystal-clear “hero shots” of your product or service, coupled with an attention-getting, direct headline and easy to spot call-to-action buttons make taking action on a page straightforward and simple.

If you’re looking for a little inspiration to get started, there are plenty of free and low-cost interface kits for designers that come in a variety of colors and styles.

Responsive Design

Responsive Design

Outdure’s responsive design modifies itself depending on the device you’re browsing with

It has been shouted from the rooftops since 2012 –responsive design is the way to go. Not only do Google and your mobile device users love it, but it will save you money on development costs in the long run, since developers only have to create one framework for multiple devices. That makes your design virtually future-proof as handheld tablets and smartphones become increasingly intertwined in our daily lives.

Create a “Scrolling Story”

Create a Scrolling Story

Treehouse, a site designed to teach technology, tells a story as you scroll

Content-wise, there’s an ongoing push to compact and simplify. Forget the grandiose descriptions and whack-a-mole portfolios, content in the new year is all about putting your benefits and features on the table, and letting the user decide. As they scroll, you share new tidbits that keep them with their finger on the pulse of the scroll-wheel.

Every sentence, and every word has a job to do. Cut out any excess fluff that doesn’t somehow lend itself to your original paragraph thought – your readers won’t believe it anyway.

Parallax Scrolling

Parallax Scrolling

Sweez, a Brazilian bake shop, employs parallax scrolling to great effect on their site

Parallax scrolling is one of those things you either love or hate – love it, because of the unique 3D effect it can create by superimposing two images to create a sense of depth. Hate it, because if used purely for the “shiny object” factor, it can feel gimmicky and useless.

But is it user friendly? At this point, designers are still having to convince users to continue scrolling for maximum effect via little mouse icons and arrows. I believe if it’s not completely intuitive – it’s just eye candy. In the words of the immortal Steve Krug, “don’t make me think.”

Social Validation

Social Validation

2014 is moving beyond pure “social proof” and into “social validation”. What’s the difference? Social proof is assuming the actions of the group in order to mimic what’s believed as the “correct behavior”. Social validation takes this a step further and gives users a visual “guidepost” – that if 1,000 people shared this article, it must be good.

These days, social sharing has gone beyond “like our post”. People know what likes are, and how to give them – now, the real measure of an article’s worth is in the numbers.

There are plenty of plugins available to help you add this functionality – such as AddThis and ShareThis. A simple social sharing plugin is also available for WordPress.

Simple Landing Pages

Simple Landing Pages

PictoPro’s landing page displays a handful of its beautiful vector icons along with three buy buttons.

Landing pages aren’t meant to be an extension of your home page. Simpler pages always win out over their more cluttered counterparts and no example proves that more than PictoPro. Their landing page states just the facts that visitors want to know (how many icons are there? What formats are they in?) presents a selection of buy now options and a showcase of its icons. That’s it. The end.

All landing pages should strive to be this simple – tell the user what you have to offer, what it costs and how they can get it. Expect landing pages to continue on this path of simplicity and straightforward action well into 2014 and beyond.

Pick Yourself Up By Your Bootstraps

Twitter’s Bootstrap framework

Twitter’s Bootstrap framework has grown to become an easy and fast way to launch responsive websites

Although Twitter’s Bootstrap framework was made open source in 2012, it has continued to surge in popularity and ease-of-use. Because it focuses on “mobile-first” design standards, there’s never any question if a site built with it is fully optimized to take advantage of the smartphone and tablet landscape. Pixel-perfect optimization is built in to every line of code.

Many Bootstrap themes also take advantage of parallax scrolling – so you get the best of both worlds!

Your 2014 Website Redesign Checklist

Ready to get started with a modern new look? Let’s go over the key points:

  • Keep layouts simple – Clean, crisp pictures and vivid call-to-action buttons with a headline that succinctly states exactly what you’re offering. Flat designs work exceptionally well together with responsive frameworks – a win-win for designers and marketers. Download one of many interface kits and get creative!
  • Content should tell a story – Lead visitors along as they scroll to share the benefits of your product or service in a way that’s meaningful to them. Show them what kind of results they can expect and how it works. There are several parallax themes and templates you can use as a springboard for your own ideas.
  • Leverage trends intelligently – Only use new features like parallax scrolling where and when it makes sense when paired with your overall conversion goals. Resist the urge to embrace a trend purely for the shiny-objectness of it.
  • Maximize social validation – Encourage users to like, tweet and become engaged with your content by making it one-click simple to share. The more shares you get, the more likely people will continue to share it based on simple numbers alone.
  • Create efficient, simple designs – In 2014 and beyond, you can expect designs to maximize the use of space, typography and mobile optimization right out of the box. Simple landing pages designed to minimize scrolling and user-friendly frameworks will continue to amaze us with their potential. You can find many customizable Bootstrap-influenced designs at WrapBootstrap.

What’s Your Website Resolution for 2014?

Higher conversion rates? Greater user interaction? A more intuitive, easy-to-update design? Share your website goals for this year below in the comments!

About the Author: Sherice Jacob helps business owners improve website design and increase conversion rates through compelling copywriting, user-friendly design and smart analytics analysis. Learn more at iElectrify.com and download your free web copy tune-up and conversion checklist today!

  1. If conversions are (and should be) at the center of a 2014 refresh, I’d suggest knocking flat design, parallax off the list. In fact, I’d certainly argue that parallax jeopardizes conversion.

    • Agreed. At full screen on a desktop I feel a little sick to my stomach – really bad for the Sweez site in the example. Maybe it would be a great solution for a company that sells sea sickness remedies.

  2. Great use of examples. The desk.com image with the content popping out of the laptop stood out for sure.

  3. Hey Sherice,
    Nice collections for the layout and design for the website. I have been noticing a change in the design these days. Most of the companies keeps a big image on the home page that fits in the layout and then writes a little content on the rest of the page.

    Is this an effective way of designing?

    Thanks
    Susan

  4. hmm redesigning is needed at a particular stage of time. Better to use a simple design for your blog. Your information and design is also looks good. Your information is really helpful, thanks for sharing. Nice blog :)

  5. My web resolution is to redesign my web to bring more leads and conversion rates. Also the Outdure’s example is a good idea because a lot of people now connect internet from mobile device.

  6. I must say first aspect Mobile-friendly website –mobile is taking over and on average 40% of your customers will view your website from a mobile device. Your visitors should be given the best experience possible regardless of what device they are using. Second will be Social Signals should have to be found easily – be sure to include social sharing buttons on all of your content. These buttons should be clearly displayed on every page of your website, your email signature, blog posts, etc.

  7. I just launched my new eccomerce site and still in the process of adding features like a sign up pop up, volume pricing, and more products.

    Just put up my first 3 blogs this evening and planning on my upcoming ones. So far im off to a great start in 2014! Wish me luck and feel free to comment on my site!!

    -Eric
    http://www.PrintemAll.com

  8. Does anyone know of an email pop up capture that integrates with MailChimp and works with HTML?

  9. I do not agree with parallax and flat design. As a matter of fact, I think parallax design actually affects conversion. In User Experience there’s an de-facto rule that states: “your design should not be the experience”.

    The center of your website should be conversions (especially if you own a transactional site) not parallax or flat design.

    Social proof helps, but when people throw the word “social” they automatically think about likes, follow me and +1 buttons. That’s only one part of the picture. Social proof can also be a testimonials page, or “as seen on” section with big brand logos. As a matter of fact, in my split tests the landing pages featuring real social proof performed 700% better than the sites just showing “like me” buttons and other social network sites.

    Furthermore, with the new changes to Facebook algorithm, the “share this” button has way less influence than it used to have. I’ve seen that the best way to get people to share your content is to share it yourself in targeted communities inside of your social network of preference, provided that your article is relevant.

    On the other hand I completely agree that your website should tell a story. Stories increase conversions at least 50%

    • Excellent share of your first hand experience, demonstrating that one size never fits all! We all work in a fast moving space which makes it important to plan and design carefully. I found the article helpful as an overview of what’s been happening but the bottom line really is that you need to design for the audience you’re aiming to reach.

  10. First thing on your list should be ‘hire a interaction designer’! It raised our conversion rate from 0,7% to 3%! Money well spend.

  11. Thank you very much., You are a good writer.
    In addition to art that will give you good
    I congratulate you
    Let me start by saying nice post. Im not sure if it has been talked about, but when using Chrome I can never get the entire site to load without refreshing many times. Could just be my computer. Thanks.

  12. Really, This is an informative article post, I like it.

24 comments

Please use your real name when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →
Buffer