Design & UX
Article

Forget UX. How to Focus on Conversion Centered Design

By Richa Jain
Michael Coghlan:  Fringe Box Office

Photo: Michael Coghlan

When you start a design project – what do you aim for? What principles do you go by? I’m quite curious to know what goes on in your head.

Over the last few weeks, I’ve seen dozens of new business owners launch their website. This was in an online business course that I was part of. Some of these sites were done by the owners themselves, and a larger number done by professionals who charged a bomb.

However, what stood out was the common thread running through those sites. These businesses were all focused on, or at least trying to focus on, their end user. They wanted to please, to provide value, and ultimately seduce potential customers. They put in the research and came up with visually appealing websites, which they thought would provide a great user experience.

Then they waited with bated breath for the subscribers, and the sales.

And kept waiting.

While their marketing efforts kept the traffic coming in, viewers were just not signing up, or buying. It was heart breaking.

No matter how beautiful your design, or how great your user experience, if visitors don’t sign up, or buy, you might as well not have a website at all. A site that dies with happy users but no revenue, still dies.

Of course, if you’re lavishly funded by VCs and not required to turn a profit in the short term, you can afford to focus entirely on UX and leave revenue to work itself out later (shout out to Twitter).

But the reality is that most of us don’t have that luxury.

What if, instead of relying on a digital marketer to come in later and fix this situation, we started weaving in the elements of conversions into our designs? Along with the visual appeal and user experience, perhaps it’s time designers shifted focus – or at least became conscious of – Conversion Centric Design (CCD).

With Conversion Centric Design the focus is on creating experiences that drive visitors towards a specific business goal. Persuasive design and psychology principles are used to actively drive visitors into the sales funnel – rather than just creating a pretty site and hoping people sign up.

Conversion Centric Design has so far, been the domain of internet marketers, looking to increase conversions on landing pages and sales pages. But there’s no reason the same principles can’t be used while designing the entire website.

Let me walk you through some of the design elements of conversion centric design that you can easily incorporate in your designs. And while we’re at it, let’s take a look at some examples as well.

Design Elements

1. Encapsulation

Encapsulation is a technique where you create a frame around a feature or focus area, to ‘hijack’ your visitors gaze. By doing this, you can subtly ensure that certain pieces of information are highlighted and get the attention they deserve. Encapsulation can be done using images, graphics, or just simple frames around the element you want to highlight.

It works particularly well with Call-To-Actions of all types, as well as testimonials, or data points that you want to share on your site.

For example, take a look at Forgotify’s home page. The simple play of light in the background frames their CTA in an almost mesmerizing manner.

Forgotify

CharityWater also uses encapsulation in a more subtle way. The slightly paler background color on their CTA versus the rest of the page, helps frame the CTA clearly and draw visitors to it.

CharityWater: http://charitywater.com

2. Contrast and Color

Color and contrast have long been used in design aesthetics to evoke certain emotions. This is about using color contrast to subtly nudge and persuade viewers into taking a desired action.

That action could be anything – signing up, buying, or even just clicking through to the next page. Notice how Forgotify’s simple “Start Listening” in green pops out against the dark background. You just have to click it.

As another example, take a look at the IWT page – there’s no chance visitors can miss that bright yellow CTA.

IWT: http://iwillteachyoutoberich.com

In contrast, take Threadless. They just got the color contrast part all wrong! Multiple blue images and graphics completely drown out the small blue “Shop Now” button. Can you find it in the image? Instead, the colorful planets and the red half of the capsule jostle for the viewers attention.

Threadless: https://www.threadless.com/

A smart move is using buttons or contrasts that also generate the desired psychological impact.

3. Directional Cues

Directional Cues are visual indicators, subtle or otherwise, that you use to draw attention to your focal point. Subtle inclusions include using a scenery that has a salient pointer or picture of a person looking at the desired focal point. Using arrows, is a clear, unambiguous way to draw attention. In the screenshot below, follow Gabrielle Bernstein's line of sight – it leads directly to the optin on her homepage. It’s the perfect header image – leading directly to sign ups for her newsletter.

Gabby: http://gabbyb.tv/

4. White Spaces

Remember the trend when everyone tried to use up every possible pixel of the page’s real estate? Google’s simple home page was considered revolutionary in those days. They wanted their home page to do just one thing – help people search the internet.

Just one box. Nothing else on the page. No menu. No About page. Nothing else. That simple text box right in the middle of a blank page has helped Google make billions. Do I need to say any more about the power of white spaces in conversion design?

Google

Psychology Elements

5. Urgency and Scarcity

Decision Theory shows people are more averse to losing something or missing out on it, as compared to acquiring something. It’s called Loss Aversion and has been widely used to prompt visitors to signing up or purchasing something from the website. Amazon uses this technique extensively creating a sense of urgency with their “Want it tomorrow? Order within X hours, Y minutes”.

Amazon

Back on the IWT website, Ramit Sethi doesn't use a definite timeline. Instead he creates that sense of urgency by saying "get it now before I change my mind and take this down". Great example of how simple copy writing can be used to create scarcity.

6. Try before you buy

Another widely used conversion technique is the “Try Before You Buy”. Street vendors and shops have been using this technique for centuries, but it’s only now catching up in the online world.

As humans, we hate uncertainty – it's in our DNA. Especially the uncertainty that comes from impersonal online interactions. When buying a book, or shoes, or clothes or software online, the customer can’t pick it up, try it out, feel it, smell it. Offering visitors a free sampling of your software, preview of your book, or a free consultation session serves to give them a taste of what to expect.

Basecamp has one of the most generous trial offers – for a whole two months. Take a look back at the screenshot of the IWT page – Ramit Sethi offers a free download of the best content from his bestselling book. This gives visitors a safe, risk-free, way to experience the product/book with ample time to make a decision to buy the product.

BaseCamp: https://basecamp.com/

7. Social Proof

People like to belong. They like to be part of a group and will often conform to group decisions and choices, even if they there is an element of doubt.

Social proof can be in many forms – endorsements, case studies, reviews, user generated content and even just numbers (of how many people like/use/shared) your content. That’s why many websites today display testimonials and shares up front. Mashable for example, goes a step further to display the ‘velocity’ of their shares – the rate at which people around the globe are sharing their content.

Mashable: http://mashable.com/

Of course, make sure you’re using it right. Highlighting that you have 0 shares, or using the wrong kind of testimonials, can actually backfire.

Summary

I hope this short walk through the design and psychology elements of conversion centric design helped pique your interest. You can get a better understanding of conversion centric design with this free eBook from Unbounce. It all comes down to focusing your design efforts toward specific business results,instead of just putting together a visually appealing site.

Would love to hear your take on this. Do you incorporate conversion principles into their design process? Or do you believe marketing is best left to the internet marketers?

Share your thoughts with us in the comments below.

More:
  • Vincent PORRO

    hi,
    it’s interesting but what you are calling CCD is at least a subset of UX. A good UX is the gathering of Customer view, Market view and Company view. If one of the aspects is not taken into account then you only get a bad UX. The concept that you described is still relevant as a part of the global context of finding a good UX that takes every aspects of a well shaped UX project into account. So, imho, what you are describing is not a new concept, but indeed it is a good start :).

    • Alex Walker

      I agree, @vincentporro:disqus. During editing Richa and talked about where the idea of CCD sit in terms of UX, and they’re certainly not opposing forces. The ‘Forget UX’ part was probably being a little bit cheeky – I don’t think we’re truly advocating that – but I think it’s a useful framing device for the concepts Richa is discussing.

    • http://richa.strikingly.com Richa Jain

      @vincentporro:disqus Yep, conversion centric design isn’t a new concept, and ideally should be part of UX. But sadly, many designers still don’t bother about it. The Threadless site is just one example. There are many more on the web.

      “Conversions” crop up only later, in marketing / analytics discussions.

      The “Forget UX” part in the headline, like Alex said, was more to highlight how we get so caught up in the other aspects of UX at the cost of conversions.

  • http://jitendravyas.com/ Jitendra Vyas

    A new term of UX? When UX was not conversion centric?

  • Chris Stielper

    I find it interesting that on the Gabrielle Bernstein site, the directional cue that you mention is totally eliminated in the mobile view.

  • http://viii.in/ Vinay Raghu

    I like to start building screens with 2 things in mind. User goals and business goals. Business goals inform the metrics we can measure to declare a screen a success or not. While I am all for conversion, I think it’s not that difficult to find the balance. In every organization I worked for, I tend to strive for the user while making sure business goals remain prioritized.

    A common use case I find is that of popups. UX has unanimously declared them to be bad. No one likes a popup preventing users from consuming content. Yet it increases conversions for email opt ins. What would you do in such situations? I’ve always found it difficult to say no to the business end. If the data says the screen works and people signup where as qualitatively we know that people feel annoyed, where do you draw the line?

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.