Everywhere you turn, people are talking about design. It’s been hailed as the core ingredient to the success of everything from ad campaigns, to products, to entire companies. In this post we’ll look at how to design for the success of your website or Web app. From Jack Dorsey calling every employee at Square a designer, or Airbnb fixing an inefficient market through design, it’s clear that design makes a difference.
We can thank Steve Jobs (among many others) for this design-focused renaissance. He trained consumers to expect things that not only look great, but are designed to “make sense,” and create experiences that are, in his words, “magical”. Great design makes products more useful, allowing the user to be more effective, leading to greater satisfaction and, frankly, happiness.
This market expectation means that design is no longer optional; it is required for success. Take a look at Airbnb and compare it to VRBO. In today’s design-minded culture your product can be easily disrupted or ignored without thoughtful design.
When it comes to designing for the Web, there are core actions you want users to take. You may want them to sign up, download something, buy something, subscribe or share with their friends. Each can be optimized through design that meets the user’s needs. Here’s how:
1. Get More Clicks
If you’re trying to convert visitors to customers, you’re exceptionally interested in maximizing the clicks on primary calls to action that turn that visitor into a subscriber, fan, or purchaser. More clicks in the right spot means more potential customers.
Here are techniques that have proven to generate greater clickthrough rates (CTRs) on all kinds of sites.
- Lead with your benefits – ScoreBig does a great job with this on their sign-up page. Their headline is “Members save up to 60% on sports, concert, and theater tickets.” It’s clear and compelling.
- Clear call to action – Make your call to action clear, prominent and enticing. Use tempting buttons with visual styles, such as arrows, that signify forward movement, compelling users to keep going.
- Visual hierarchy – What is the information priority on the page? What do you want people to see and absorb? Use typography, font sizes and emphasis and visual cues like in line iconography to draw the user through the page.
- Remember AIDA – Awareness, interest, decision, action. Conquer the first three and you get the click, the action. Create awareness and interest, then provide information to allow for a decision.
An Example – Retargeter
We worked with ReTargeter to redesign the banners they use to drive customer acquisition. Their original ads had clickthrough rates on par with display advertising benchmarks, but they weren’t satisfied. The goal was to use enhanced design and messaging to really move the needle. Below are the before and after for the banners. You can see there was intentional emphasis on messaging, clear call to action, and smart design that stood out and communicated the benefits of ReTargeter to the viewer.
The result? The new banners performed nearly five times better than the original ads, significantly lowering their customer acquisition cost.
2. Get More Sign Ups
If you’re launching a new web application or a service, you likely don’t have a huge marketing budget. Therefore, the performance of your friend referral program is critical. It’s imperative that companies design viral loops to leverage new customer referrals from their existing customer base.
Here are some techniques to drive the viral loop:
- Optimize landing pages – Ask only for information that is absolutely necessary. The fewer form fields, the higher the conversion to sign ups.
- Use Facebook Connect – Not only does it making signing up that much easier, it allows you to employ some sophisticated referral techniques, as well as provide social credibility that drives sign ups. RockMelt used Facebook to show users which Facebook friends were waiting for an invite, driving invitations and user sign ups.
- Create Exclusivity – The more scarce the invite the more valuable it becomes. Create exclusivity through messaging and design, and keep invites to a level that makes them worth something, while still giving your loop room to grow. Google+ used limited invites to drive excitement and value, creating a frenzy of people clamoring to get in.
- Reward Existing Users – Can you reward your existing users for facilitating the viral loop? Dropbox gives customers extra storage, Groupon gives users Groupon Bucks for each friend who buys, and Appsumo rewards members who help promote their deals.
An Example – Hello Bar
We designed a viral loop to launch Hello Bar, our notification bar plugin for websites and Web apps. The entire user experience, from the first invite, to the activation email, to the refer-a-friend loop was designed to drive referred users. Thoughtful design and optimization can make your referral program go like wildfire, or fizzle out before it even gets started.
The Hello Bar launch site was invite only, creating a sense of exclusivity. This created anticipation and value for the invite. Once Hello Bar users were invited in, they had a limited number of invites to send to friends. This keeps perceived value high and ensures that invites are sent to people who will likely enjoy the service. This creates a stronger feedback loop than just letting people blast their entire address book. Once those people were in, design kept the viral loop going, by providing the new user with limited invites and encouraging the referral behavior through the messaging and user experience.
3. Get More Likes and Follows
Social proof is an important part of building customer trust and confidence. Not only do Likes and follows build first-time visitor confidence, they also help extend your reach to the social web and help energize word-of-mouth. Like everything else, you can design your use of social badges like the Facebook Like button and the Twitter Tweet This button to maximize your conversion and exposure on the web.
There are a handful of best practice techniques to consider when implementing social sharing on your site.
- Add popular sharing buttons to your site – More than 700 million people are on Facebook, what other sites do your customers use regularly?
- Pick buttons that work for your site – Ensure that they don’t take away from the key purpose of the page. ModCloth has Facebook Like buttons on product pages, but they are custom-designed so they don’t distract the user from the clear call to action to buy.
- Less is more – You don’t need every button for every service on your site. Pick the ones that a) drive the most traffic, b) are relevant to your audience, and c) that you yourself are active on and can support. Two is a good rule of thumb.
- Design the share – Too often people add Facebook Like or Tweet This buttons and don’t customize the message being shared. Make sure every element is crafted to drive new visitors back to your site.
- Integrate shares where users are most likely to leverage them – What are the points in your user flows where you can maximize this social activity?
- Fix a spot in the design – Buttons shouldn’t just be randomly affixed to the site. They should live in a consistent location.
- Communicate the benefits – Why should someone Like or follow you? What’s in it for them?
- Add social destinations to your contact page – Have a Facebook Page, Twitter account or Foursquare Page? Put them on your contact page so people can find you easily on the social web.
An Example – ModCloth
ModCloth does a great job of integrating Facebook Like buttons right into the product pages. Their benefit here is three-fold:
- They act as social bookmarks, publishing the user’s like of the product to their Facebook wall.
- They drive new visitors directly to the product page.
- They act as social proof, an item with a lot of Likes is popular and increases conversion by validating the user’s purchase.
An Example – Tiny Prints
Tiny Prints integrates the Facebook Like Box on to the order confirmation page. It’s a smart choice. Moments after you’ve just completed a successful purchase you’re asked to Like Tiny Prints on Facebook. Your successful shopping experience combined with overwhelming social proof makes you more likely to click “Like”.
This is a viral loop in it’s own right and has two main benefits to Tiny Prints:
- They easily acquire new fans on Facebook that allow them to stay top of mind and market to customers.
- They get more viral spread across Facebook as the Like shows up in the friends’ feeds of the user who just liked Tiny Prints.
4. Get More Sales
Designing for sales means two things: clarity and reduced friction. Use design to make it easy for people to understand what you’re selling and the benefits of what you’re selling, and then get out of their way. Let’s come back to Airbnb and how they’ve used design to make their product the market front-runner over the much older VRBO.
Lets look at the techniques they used to get more sales with design:
- Let users experience the product – As much as possible let users experience what they’re buying before they buy it. Use a content slider to house a product tour. It let’s people see and interact with the product and its features without bouncing between pages in order to learn more.
- Lead with the benefits, not the features – Customers don’t buy features, they buy benefits… it doesn’t matter what the product does, they need to know why they should care. Start with the benefits and drive the sales process through those key benefits.
An Example – Airbnb
- Prominent and simple search – Compare Airbnb’s homepage to VRBO’s homepage. One is clean, easy to understand with one core call to action. The other is cluttered, confusing with multiple calls to action with little perceptible hierarchy.
- Minimizing clicks – You can get to booking a place on Airbnb in two or three clicks. On VRBO it can take five. Reduce friction. Drive more sales.
An Example: Zappos
Zappos does a great job with designing for sales by providing loads of customer confidence. They’ve has also spent a lot of time designing the VIP experience, even so far as creating a whole new instance of the site, vip zappos.com to make VIP shoppers feel even more special.
- Create customer confidence – Zappos’ legendary customer service, free shipping, no-hassle returns and highly publicized corporate values give customers tons of confidence in buying.
- Make customers feel special – By providing VIPs with a special site it makes them feel like they’re part of an exclusive club, driving loyalty, repeat purchases and increasing their likelihood to refer other customers.
An Example: Crazy Egg
By using the techniques above Crazy Egg was able to increase its conversions 21.6%. Crazy Egg used a custom SlideDeck to create a product tour that explained the benefits of their service to website owners, while explaining it in a clear and concise manner.
5. Get More Leads
Converting a website visitor into a new subscriber, member or account holder is one of the most important conversions there is. In fact, a whole field of analytics, conversion rate optimization (CRO), is solely focused on improving sign up conversions through improved landing page design. Let’s look at a few examples of the sign up process, and how design makes a difference in maximizing conversion.
- Tell a story – Show how your product or service solves your customer’s problem, to the point where the only logical step is for them to sign up.
- Use clear hierarchy – Walk users through from beginning to end and make it easy for them to grasp the main benefits and identify the calls to action.
- Be concise – Don’t clutter up your pages with lots of extraneous information. Be ruthless about what makes it into your story.
- Choose compelling imagery – Your story isn’t communicated through words alone. Make sure your images are communicating just as well as your text.
- Limit the amount of information required – Keep the information you ask from a potential customer to the absolute minimum that you need.
- Provide limited time discounts – Can you provide a discount or other incentives to make signing up worth it on the first visit?
An Example – Monsoon Company
Monsoon Company’s service required a high amount of contact and exchange; therefore, they needed a method of driving sign ups in order to start an initial conversation. Right off the bat, they have a clear message paired with straight-to-the-point imagery. Following that, they have brief supporting copy to tell a little more about what they do. Their main desired point of contact, a phone number, is then listed right below, with a prominent lead form (for users less inclined to contacting by phone).
Putting it All Together
Being conscientious about design and user experience can create exceptional returns for your business. Be thoughtful, test your assumptions and designs, measure which ones perform better and then constantly iterate to improve all aspects of your website, product and service. When an experience is well-designed it is the only thing your user sees. The design just works and is at the heart of the product.
By being design-oriented in your thinking you’ll achieve a greater level of success not only in sales, but in customer satisfaction. And by driving toward even better results for you and your customer you’ll create an experience that really does make a difference.
About the author: Chuck Longanecker is the CEO and co-founder of digital-telepathy, a user-experience design company passionate about creating products, like SlideDeck, Hello Bar and Impress, that make the Web more intuitive and compelling.
This amazing course will teach you, step by step, how to double if not triple your traffic over the next 30 days.
Awesome post, I agree mostly with the social proof, due to first time users wanting an authoritative site that a lot of people visit and talk about. It’s like being the cool kid in school for example, you have lots of friends, everyone wants to be your friend.
Thanks.
I like the analogy you used, that is pretty much how it works. Glad you enjoyed the post.
Great analogy indeed. By having a site with much authority makes people come to you but you have to offer them a lot of useful information.
Yep, you need to be able to give your readers something they want or can learn from.
As a supplement, I suggest people look at the principles of design (http://en.wikipedia.org/wiki/Design_elements_and_principles). If you know all the major tools in the toolkit, it’s easier to create teh right kind of emphasis and harmony for your content.
Cool, thanks for sharing this with everyone.
Yep, I put a lot of emphasis on the design on my website.
Awesome, glad to hear it.
This one of my favourite topics Neil. Implementing call to action using clever design elements is a great way to get your prospects engaged.
Definitely, you want to make sure you do all you can to engage your readers.
Thanks for the comments guys. Glad you liked the post.
I am curious, how has design made a difference for you? Do you have any personal examples of how improving your design has lead to greater results?
Thanks for writing the post Chuck! I really appreciate it.
Hi Chuck,
Great post. Design is definitely core to success. Heck! the world’s most valuable company in 2012 is a design company, Apple.
Definitely in the process of a complete redesign of my customer experience.
Thanks.
Apple is definitely the best example of the power of design.
Best of luck with your redesign!
Probably the best write-up I’ve seen related to conversion-centered design. Only hole I saw is that you should have the cursor prepopulated in information boxes when the page loads – another great conversion booster.
Thanks for the suggestion.
Totally agree with your philosophy Chuck, excellent insight and two great products in HelloBar and SlideDeck, I’m a huge fan of both.
Thanks for your thoughts, again, killer post.
Great, glad you liked it.
Thanks Gregory. That means a lot.
This is a great post Chuck. I clearly agree that design makes a very important impact. A poor design might lead to poor sales. So a design has to be made giving thorough considerations. Apple has really revolutionized the concept of design the best example being iPhone. Thumbs up!
Absolutely. We like to think that design gives products a bit of soul, personality and pizzaz. Why buy or use something boring if you can use something great!
Yaa this is absolutely right but I wonder sometimes how much time and investment it takes to bring a great design.
I feel it takes a continuous amount of time and effort because design is never really complete. Once you have something that works you have to consistently update and tweak it as the years go on.
Great Post Neil, Like always you bring together best examples and advice succinctly, i can see u have embraced Pinterest, hoping a post soon on your Pinterest Experience
BTW can u shoot me an invite for Pinterest ???
If you leave your email in a comment below, I will send you one.
I guess the keyword here is user experience. The days of broadsheet designs are long gone. Today, when we say site architecture, it means architecture in a very real sense. So, building a site has become a lot like building an apartment.
The same way that the main door does not open into the bedroom; you move the sofa out of the way and into a corner if the room is small; the switches are on the right hand side when you enter a room… you will see that a lot of these can be seen as analogies for site design, Just that design now means architecture too.
Good point. Every aspect of the process must be thought through. If a button is round, there should be a reason for that, same goes with color, typography, flow and more. The last thing you want is a toilet in the middle of your living room!
Yep, experience is just what is needed in order to make something work. I like your comparison of a site to a building/apartment. Thanks for your insight.
Brilliant post. If anybody needs convincing of the impact good design can have on a business then they need to be referred here.
Thanks Sam.
Neil and I collaborate on 2 other blogs about design: http://blog.crazyegg.com/ and http://www.dtelepathy.com/blog.
Thanks for sharing this. I would love to go through these websites in detail.
You should check them out. They could be useful to you.
Neil, truth be told, this is not my first time of reading your blog, but the fact remains every post you write, either here or on other blogs remains informative. Churning out new ideas, and inspiring, that’s what you do. 3 words: i love you. Believe it Neil. Thanks for this awesome dissection.
every drop of paragraph as something to contribute. You’re among the few people I’ve never had a cause to regret dropping my email to. Thanks.
I appreciate the kind words Victor. Thank you for your support!
To do online marketing for something like any product, service, business etc., designing is very needy because now a day, designing is becoming very needy in the market because of the large use of the Internet around the world.
Design certainly sets your marketing apart from others.
Great post emphasizing on Design. Thanks a lot Chuck Longanecker
Thanks Vivek! It’s great to have growing support for design in the web community.
Design drives visitors attentions. Your design gives the power to call the attentions of your visitors too.
Yep, you have got it.
Im sure that design is what really make the diference on every website on inet, it keep your competitors away.
It is definitely a large factor.
Hi Chuck,
I’m in my mid-twenties and am interested in making the jump from higher education to web analytics and online campaign work/consulting. I’d love to transition to a company that provides similar services to yours.
Any advice on people in the industry who would be interested in spending 15 minutes helping me determine how to get my foot in the door.
Btw, excellent post. Thank you Neil and Chuck.
Pura Vida,
Ricardo
Hey Ricardo,
Congrats on the pending transition. I recommend going to events and connecting with your local community. Also, spend time on sites like Linkedin, Dribbble…etc to connect with peers or blogs like KISSmetrics, Smashing Mag and start being active in the comments.
Lastly, our friend Dan Martell has a new startup that allows you to connect with mentors. Try it out: http://clarity.fm/getnotified
hello guys,
design is definitely important to please the eyes but equal focus on the quality is too importan, apple is a great example leader in design and quality.
I agree, it is important to have a balance.
Design is not only the virtual appearance, but also with marketing in mind.
Great tips!
Definitely, that is a good point.
Neil !
This is exactly i was thinking for last few days.The visitor will watch that piece twice hence increasing the possibility of conversion.
Anyways great post.
-Bobby
Thanks Bobby,
Glad you found what you were looking for here.
Apple does not market, it just designs so well it gets the attention anyway.
Apple’s design is attention grabbing, but marketing is done by everyone. Especially a big company like Apple.
Design which bring the attention of every readers so its should catchy so that makes sense in all criteria
Yep, you make a good point. It should definitely flow and make sense overall.
Couldn’t agree more! Running an interior design blog is all about design (and inspiration!)
Love, M
Cool, glad you agree.
Good info… Design indeed helps create the first impression that can be so critical if you don’t get the second… For me design says that you pay attention to detail. Not being a designer but having been around them their attention to detail second to none.
Thanks Mike,
You make very good points. First impressions are everything and having attention to detail is key to a successful one.
This one of my favourite topics Neil. Implementing call to action using clever design elements is a great way to get your prospects engaged.
Cool, glad you enjoyed it.
Awesome post! I think A/B testing is clear proof that good design works and really boosts conversions.
Thanks Tom,
Definitely, when in doubt A/B test.
Eschewing all the ideas about ‘conversion’ and ‘increasing subscribers’ et al, even if you just look at it from a consumer’s POV (which is what we all should be doing), they just want someone that looks good.
As readers, most of us don’t care about how many sign-ups the blogger is getting, first and foremost, we just want something that doesn’t make us want to rip our irises out in frustration.
You have got it Jasmine. You have to put yourself in your readers/customers shoes and figure out what is best for them. Make it easy and quick and you can’t go wrong.
I could not agree more. The users’ impressions of your offering and the site’s usability should also be paramount when making design decisions.
Apple is a great company and design is always paramount, but I have to say the iTunes is not intuitive and aspects of it are simply not user friendly. That kills any advantage that design brings to the table, at least for me. I want to it to be intuitive and easy to use before I care about it being well designed.
Definitely, thanks for sharing your thoughts on the matter.
Oh, and a word of advice, if anyone’s interested – in terms of design – marketing (and vice versa, I suppose) – looking at what your competitors are doing is a real help, as before you’ve even thought about how you can make your site look snazzy, you will have already identified not only what works, but what your demographic doesn’t like and what they are bored of.
That’s the sort of stuff that will put you above the rest.
Thanks for the added suggestions. I appreciate you sharing and trying to help everyone else out.
Great post on How important the design to make conversion. When we add more things on site design like slider the page loading time gets increased a bit. If I used More images in my design it makes even slower.
Because of the slower page loading we will loss some of the leads. My thought site the design should be clean rather than compressed.
Yep, you want to make sure you keep the images to a minimum so that is doesn’t affect the speed of your page load.
Custom design is important to bring branding to a blog. Great post Neil, thank you.
Definitely, design helps with associating a brand and product.
Neil,
One of the best post i have ready in my life,hope i can implement some of them and we need more posts like this.
Awesome readers ,please forward if you have more posts like these .
Cheers,
Vikram
Thanks Vikram, glad you enjoyed it.
Fantastic read, loved it! Also love this site, I love the attention to detail, the opt-in bar on the side is great, love what you are visually communicating and the content backs it up. Thanks!
Thank you Jayson, I appreciate the support. Glad to hear you like the design of the site.
As always, this is one the most important point, well written Neil, people across the world is doing so many different things these days to innovate and explore new designing ideas.
Following the designing leaders will make you leader one day, provided you follow them in most perfect manner.
Thanks Ritesh,
It is definitely a good idea to follow and keep up with new and leading designers. This way you can take inspiration from them and apply it to your work.
I strongly agree, custom design is very much improtant on blogs. Thanks for all the great information shared with us!
Awesome Maria, glad you agree.
You nailed it Neil;) For many of our customers, our website is their initial point of contact and as we heard many times, first impressions last. Excellent designs can create the first right impression.
Thank you Judy,
First impressions indeed last. Having the right design can either help or hurt your business.
In the end, you have to take a wholistic approach. Implementing all of these +1 solutions will not end up a +10.
A good example is this very website. The hello bar is fixed to the top, this recommended thing is popping out on the bottom, and this sharing thing is bouncing around the side. It’s all very cheesy and just seems a bit lazy to me.
I am sorry you feel that way. A lot of time has been spent on testing the different aspect of this sites design. This layout is the result of what tested best.
Design rules a consumer’s mind be it a website or a car. A well designed product always has more takers. It is human nature to be attracted by a good design.
Yep, you have got it. Design, is what attracts people. Substance is what keeps them.
I’ve been studying how to design a site well. I have the skills to make one but the idea none. But definitely design attracts a lot of readers. It is common to check the how the page looks before reading the content. I sometimes stumble upon bad web designs and I tend not to read the articles because the impression is very important. Only those who are really interested in articles disregard the appearance but commonly they don’t.
True, if the content is good then often readers can get past a bad design. However the poor design still hinders your site and can turn away new readers that have not yet learned to appreciate the value your content provides.
We are completely redoing our site and we are focusing on creating CTA’s that stand out. It’s so important to have colors that don’t blend in with the rest of the color in your site.
Definitely, you want to make sure the important parts stand out. However make sure to keep the colors cohesive.
Best of luck.
This is very nice topic and nicely elaborated. I have never expected that designing could be so powerful but with your article I am highly impressed. Thanks.
Thank you,
Design is an important aspect, definitely worth spending time on.
Hello Neil,
It was nice that you have share information regarding the HelloBar. I often have used into my blog and its really helpful. I have suggested to my client regarding these post and hope these would helpful to them.
Thanks
Thanks Mitul,
It is quite a useful tool, I am glad you have also found it helpful.
Indeed – design is marketing. Didn’t they also say “a picture is worth a thousand words”? Absolutely right on it! We all love what is appealing to the eyes and this helps us make our decision, whether a little bit or a lot.
Thanks for sharing, Neil.
That is correct, you have to make it look good as well as sound good if you want to become successful.
I agree with you that design can really mean marketing. Remember after Steve Jobs died and a young chap designed a new apple logo for him and the logo went off so viral that made him so popular? Is the creativity that make the difference.
Creativity definitely makes all the difference. No matter how small you think it is, even a simple change could alter the whole perspective.
This correlates to a post I wrote a while back. Website design should be included in your SEO program. If your website or blog is optimized in the code, don’t forget to give the design of your page a boost as well. If your site is not user-friendly and people can’t navigate well, they will leave.
I agree, if your site isn’t user-friendly then people will get frustrated and leave.
It think design plays a HUGE role in marketing and even conversions. I mean no one really wants to enter their information on a boo boo designed site… Im book marking this post!
Definitely, image is everything.
Wow Neil,
Thank you for leading the way with practicing what you preach with high quality articles and information. As an seo guy i often get asked to work on websites that really need a re-design before I can do any real beneficial work. Thas article is perfect and too the point for anyone looking to make a quality site.
No problem Joe, happy to help.
I agree, that’s something lot of people know but small part of them applies.
Hopefully know, more people know and will apply.
hmmmm, the hello bar seems pretty interesting
Yep, it is. You should check it out.
Hi Neil,
Excellent article. This is true that Design in marketing. If you have a good design then you can earn a lot of customers.
Thank you
Thank you glad you liked it.
Hi,
This is really awesome article. if we will make design marketing more pretty then we can get good money and our costmer will be more and it will increase our money.
Thanks for the posting.
Yep, you have got it.
hey neil,
great thinking. and really design matters much. good design can lead towards the success.
Thanks.
Matt
Hello! Neil ,,another great post Neil, I really really like the idea, impressive job Neil!,,
Email 4,200 Safelists with the All NEW Galaxy Submitter.
Totalling Over 3.2 BILLION Prospects. All Interested in your service or product.
Featuring One-Click Submit Technology. Account Creation Is Automated and Done on Our Servers So There
is Nothing to Join Or Validate. You Simply Type In Your Offer, CLICK-SUBMIT Then Sit Back and Relax.
Purchase Today For Only *$19.95 To Receive A Global-Marketing Membership and
Your Own Silver Submitter.
thank you
Glad I could help