The Developer’s Guide to Conversion-Centered Design

When you’re building websites and marketing campaigns, the question always is: “How do we get people to click on this link/button/submission form?” Of course, you’re looking to optimize for conversion. And this is true for nonprofits, enterprises, and startups—you’re looking to gain traction and adoption. But designing for this purpose requires technique and thoughtfulness. This is where conversion-centered design comes into play.

Rather than relying on guesswork, intuition, and A/B testing, there’s a methodology for a website UX/UI design that propels conversion. And that’s exactly what we’re here to discuss.

So, let’s dive in.

What is Conversion-Centered Design?

Conversion-centered design (CCD) is a methodology for creating high-converting marketing campaigns and landing pages. This framework uses persuasive design techniques and psychological triggers to get visitors to complete desired tasks.

And, it can result in incredible lead generation with landing pages and websites. For example—sign-ups, form submissions, newsletter subscriptions, pdf downloads, and purchases.

The Principles of Conversion-Centered Design

1. Eliminate Distractions and Instill Focus

One of the essential concepts in conversion-centered design is guiding the visitor to focus on the tasks you’d like them to complete. Ergo, you want to design such that your visitor’s eyes and motivation will be drawn to your CTAs. And there are a few things behind doing this:

The first is the 1:1 conversion ratio.

—Meaning one link to one conversion goal. For instance, if you’re aiming to compel the user to sign up for a newsletter, include only one link and only one link in the element that offers them that option and includes the CTA.

The second is only having one campaign goal.

—Meaning, what is the primary action you want your visitors to do on the page? By narrowing the page down to hone in on one goal, you’re eliminating distractions that could detract from its conversion rate.

The third is using the information hierarchy and landing page flow to guide users towards your goal.

—Meaning organizing the information on the page in a way that’s orienting to your user. For a (very standard) example, present the background, challenge, and solution for a case study page, in that order. This flow of information presentation makes sense—giving context, the problem, and how it was solved.

You’re looking to use the information you provide to your users in a way that keeps them intrigued and motivated. And nothing is more frustrating or tedious than not understanding what you’re being told.

So, in the same vein, you need to design your landing page flow according to an information hierarchy that makes sense. Guide the users’ eyes and help scannability with the F-Pattern or Z-Pattern—the two most common ways our eyes travel across a screen.

The fourth is visual elements.

—Meaning, aspects such as colors, typography, images, and CTA button design to compel and relate to users and keep things scannable.

With colors, you can use contrasting colors and color theory to highlight key actions or pieces of information and convey to your users what they mean.

Additionally, you can use “negative space” (or “white space”) to emphasize items. If there’s lots of negative space and then a massive red button in the middle of it—well, I’d be curious what happens if I click it. 

Basically, tons of images, videos, graphics, colors, and text can overwhelm the visitor’s eyes—and detract from the CTA or button. So, by giving it some space, you’re emphasizing it.

And about buttons—you can make them stand out and make them more compelling in various ways. For example, sizing, effects, copy (“donate now” vs. “save a tiger cub today”), and placement (above the fold and at the bottom of the page.)

2. Build Trust

Basically, building visitor or user trust is everything for good conversion, adoption, retention—you name it. And there are a few conversion-centered design strategies to make sure you do it.

First—stay consistent. That means establishing a style guide and brand guidelines and giving your user a consistent brand experience across all customer-facing materials.

And second is making use of social proof. So, throw those testimonials up, front and center, emphasizing the important soundbites and clear, well-framed headshots. With those testimonials, include any awards, ratings, social shares, and press feature logos. And, if you use some sort of payment portal, make sure that the secure payment portal badge is in your footer as well as wherever else it’s relevant (ex: the check out page.)

3. Make Things Seamless

We don’t have a very high threshold for tech frustration these days. We’re way past the point of DSL and patience.

So, you must reduce friction with your website, landing pages, and calls to action—which is partially what conversion-centered design is all about.

This concept comes in mobile-friendly websites, concise copy, beautiful and effective above-the-fold design, and quick page load speeds.

Moreover, if your CTAs have any forms involved, it’s essential to keep them simple and easy to use. So, for example—eliminate optional fields (if they’re optional, you don’t need that information) and know how much requested information is too much requested information.

Use dropdowns, fill-ins, and buttons to make life easier to input information. Clearly label the fields—and make sure that their description doesn’t disappear when the user clicks into it (which unnecessarily taxes the visitor’s memory load.)

Additionally, include field-specific error messages and merge fields that can be merged (first name and last name vs. full name). And lastly, break up the form into multiple steps—rather than asking the user to fill in one very long (i.e., overwhelming) one.

4. Demonstrate Benefits

Your value proposition is a critical feature of your landing page and website—and so is its very explicit, convincing presentation.

Therefore, you can demonstrate it with beautifully crafted headline copy, hero images, videos, and illustrations. And guide users to your CTAs by embedding a button in your image.

Your visual elements need to demonstrate the benefits your product, service, or organization brings to them. So you need to choose visual elements that relate to them. Something to try is using images with real-life people. And, especially, consider visual elements that mirror the negative emotions that might resonate with your user’s pain points as they’re seeking out a solution like yours.

5. Make Use of Psychological Triggers

Last but definitely not least on our list is using common psychological triggers. These motivate all of us to do and trust things. And they include:

• Urgency – your offer is limited in time
• Scarcity – your product is in limited supply
• Authority – you know what you’re doing, an expert in the field
• Credibility – proof of the value of your offering with hard, verified data
• Social Proof – proof of the value of your offering through other sources (press, customers)
• Security – you’re trustworthy when it comes to sensitive information (Norton or TRUSTe badges, and HTTPS)
  
  

Well, this was a lot. We know.

Coincidentally, hi, we’re Goji Labs—a product and software development consultancy with experience in designing, “rescuing,” and deploying hundreds of products.

Looking to develop a new app or revamp an existing one? Need some product strategy or mobile app and software development help?

Have any general questions about who we are and our authority on the subject?

Reach us at GojiLabs.com or drop us a line.

– Goji Labs