Conversion Centred Design: Not a trend, but an Evolution of UX.
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.
WTF is this all? 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? 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:
- Make yourself an exclusive dish — by focusing on what your customer needs and loves, convince your inner self that you deserve it.
- Plan your steps to make it efficient and not give up ordering pizza.
- Do the job.
- Burn a candle and enjoy food that is prepared for you individually.
Seem neat, huh?
The principles
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
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.
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.
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.
This way we can decrease the number of elements needed to communicate information, reducing complexity and making designs more engaging. Closure can help us minimise visual noise and convey a message, reinforcing a concept within a pretty small space.
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)
Landing page — is a type of website, where a product or service is presented.
The ultimate goal: ‘to land’ a visitor at a webpage and convert into a buyer (signup or purchase CtA’s).
Typical landing page structure
- Hero screen, must grab visitor’s attention (within 10s)
- About the product/services; what makes it special
- What you’ll get/features/offers
- Testimonials and reviews
Main things to keep eye on while creating a landing page
- Hierarchy and Focal point — make sure the content is easy readable/scannable, user shouldn’t think
- Super easy signup process, navigation and interactions
- As much as possible CCD principles
- A/B tests are good option to test and optimise sales
Content first — is an approach of creating a website, when the design is created based of information the website has and is going to use, not vice versa.
Overview of content-first concepts and highlights
- Proto-content — is a part of content first approach, and actually stands for a specific type of content that is relevant for the business.
- Possible types of proto-content: existing content, competitor content, new content (define during design process), draft content, commissioned sample content
- Involves a lot of testing and thinking, makes the product perfect
Mobile first — is a principle of starting design project work within a mobile version of website, instead of desktop web design creation.
Overview of mobile first and mandatory rules to create a good design within the principle.
- A tappable area should be no less than 44pt. Icons, inline text etc. — can be smaller, but the tappable area still 44pt.
- Minimal font-size 16px for all input fields. Doing font size smaller than 16px will make user experience bad, auto zooming webpage to input.
- Usability and accessibility are a must, not an option.
That’s it! But hey,
- Hope you’ve enjoyed reading the article and learnt something new.
- Would love to hear your feedback and suggestions in the comments ❤
- This article is intended for use as a handbook/cheatsheet, if you have any suggestions on making it even more useful — we’d love to hear and credit your participation.
- For collaboration and other enquires reach us at hello@goodevs.com, let’s create great things together!
- This article is going to be updated from time to time to keep notes on great combination of user experience and marketing principles, so you may want to bookmark it & come-back from time to time.
Credits
Sergey Golovashkin, author of the article
Olga Borodulina, co-edited, created illustrations
[ Can be You ], send us a message to participate and get recognised 🤓
Change log
December 11, 2021
- Updated copy, added illustrations
- Next edits planned: Illustrations for landing pages and mobile first sections
