Conversion Centered Design: The Evolution of UX and 1001+ unknown words.

Conversion Centered Design Article Cover

A Handbook To Actually use in Web UI/UX and Mobile-First Designs.

Conversion-centered design (CCD) — in short, is a design principle where conversion is a primary goal.

In other words

What are we going to cover?

A walk through the CCD principles (with illustrations and examples) and other excellent marketing practices in design that help businesses and users to live a better life.

How Conversion Centered Design is beneficial for business and user?

The answer is simple: solving business challenges and helping users by structuring and implementing CCD/other principles into the products we design.

Resulting the outcomes to be:

  • Easy to scan/read and make decisions
  • An increase in revenue and other benchmarks
  • Produce value instead of đź’©

As the subtitle states, this is a handbook, not Shakespeare’s poetry: let’s dive into the topic and focus on cases and practical tips.

CCD — is typically implemented within landing page-type websites.

  • Commonly practice with quiz websites, skill tests, freebies sign-ups, ebooks, PDFs.
  • Less to see in non-profits, free and open-source projects (which is why some of them rarely last long), individual or company «about» websites, and blogs.
  • Great to use: Everywhere. Even if you are going to cook dinner.

The food that is cooked with «love» — CCD case:

  1. Make yourself an exclusive dish — by focusing on what your customer needs and loves, convince your inner self that you deserve it.
  2. Plan your steps to make it efficient and not give up ordering pizza.
  3. Do the job.
  4. Burn a candle and enjoy food that is prepared for you individually.
    Seem neat, huh?

The principles

Encapsulation principle sample illustration

Encapsulation Principle

The encapsulation principle in CCD design makes visitors’ eyes contact and creates a tunnel vision effect.

Great for: Onboarding, off-boarding, presentations, overview, reels

Contrast and Color difference sample

Contrast and Color

Colors can be used to attract emotional response from the visitors and force them to interact with Click to Actions (CtA’s).

Accent, Functional, System state, Brand— colors

Directional Cues

Focal point — oriented elements, like arrows or even photos of people watching pointing somewhere.

Attention-driven websites, success stories

Gestalt principles

—Representations of views or experiences that trigger our brains into thinking we need to follow them, by displaying something familiar we could see in the past.

Make users predict the outcome

Proximity

Objects tend to be grouped together if they are close to each other.

Effective use of white-space with proximity ensures content is readable and entertaining.

Example of using proximity

Continuation

When there is an intersection between two or more objects, people tend to perceive each objects as single uninterrupted object.

Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly or in a harsh line.

Example of using continuation

Closure

Human eye tends to complete the missing part in a design.

Visual connection/continuity between sets of elements which do not actually touch each other in a composition.

As the Closure principle states, when presented with the right amount of information, our brain will jump to conclusions by filling in the gaps and creating a unified whole.

White Space

— Whitespace allows you to direct attention to your CtA’s by giving your visitors eye only one thing to focus on.

Limit content to only key features, less distractions

Urgency and Scarcity

— Counters, one-time offers; drive people to action by limiting their decision making time.

Limited time offers, sign up counters, event or flash sales

Scarcity and urgency are similar psychological conditions you can use to compel your users to take action.

If you use them intelligently, you can change your users’ and customers’ behaviour to make them act right away on what’s important (urgency) to obtain what’s limited (scarcity).

Though, make sure that you’re not using dark patterns.

Try Before You Buy

— Freebies, PDF and other free resources to build trust and upsell in the future.

Small amount of good content for free, up-sales

Try before you buy is a principle of conversion-centred design that brands use to offer free content (e.g., apps) for limited-time or limited-feature use. It is a measurable strategy to foster brand loyalty. When users sample an item fully or partly, they can see if they should invest their money or information in it.

Immediately let users explore an item at their leisure— though with a limited feature set — or enjoy the full version for a trial period.

Social Proof

— Build trust by having sharing real information: feedbacks and testimonials

Real people involved, personal brand

Create recognition amongst all effective channels: customers, experts, circle of friends, masses, celebrities/influencers and get certified (if your niche has such opportunity)

This article is going to be updated from time to time to keep notes on great combination of user experience and marketing principles.

Hope you’ve enjoyed reading the article and learnt something new.

Read also

By the way. Have you seen the Typography overview post?

https://medium.com/nyc-design/typography-the-basics-and-beyond-in-ui-ux-design-52f946c43d65