Conversion Wireframing: A Revenue Oriented Design Process

by Babar Suleman

Last updated on May 25th, 2018

Even though there is growing wisdom around the best product teams involving design, business and engineering heads from the very start, there is, quite often, still a divide between the design process and business needs.

As someone who has both a Business and Design background, I have found it useful in client work to draw from both areas from the very start.

Here are a few ways you can design web experiences that are not only user-centric but also conversion-centric.

But first:

What is wire framing?

For the non-design heads, wireframes are essentially a schematic or blueprint that define the information architecture and skeletal layout for a website or app.

Simply put, they can just be rough sketches or simple diagrams that show what will go where in your design.

sample wireframe

Sample wireframe

Whether you are a designer looking to incorporate business thinking in your design process or a business owner who wants to be more involved with the design process, here are four tips for nailing the process:

Design the CTA First

What is the primary action you want your user or visitor to take?

What is the main user need that your service fulfills?

The CTA (Call-to-Action) is ideally an action that both satisfies the user need and brings revenue to the business.

For a food delivery website, for instance, the landing page may need to have a “Find a Restaurant” button that shows users listings for restaurants servicing their area.

Web 1920 1

Figure 1: Wireframing the CTA first can help organize all other elements on the page

Making the CTA the first element you situate in your layout can ensure that the rest of the website supports this function and it isn’t buried anywhere less than ideal or designed as an afterthought.

Note how the wireframe above does not even include the company’s name or logo. Even that is secondary to the CTA button!

By making the CTA the most important thing in your information architecture, you can easily carry over the same strategy to the rest of the design process.

The graphics you choose, the colour palette you end up using and even the rest of the copy can be based on the CTA and its placement.

While you will and can, of course, have other links and potential actions on the page, the CTA is what you want your user to pay the most attention to.

Shopify POS

Shopify POS, a solution for in-store checkouts, includes the CTA button twice on their landing page- and in a distinctive eye-catching color- to ensure its prominence within the layout.

Use Actual Copy- not Lorem Ipsum!

It’s a common practice- and increasingly a common mistake- for designers to use placeholder text (often the popular “Lorem Ipsum” text) while wireframing and designing mockups.

Traditionally, designers have been known to be visual (sometimes to a fault!) where they care about how text looks but not what it says- especially the entirety of it!

However, your content is your single most important asset today and great design lets it shine easily without trying to distract from or upstage it.

If you already have the copy down (and I would strongly suggest you do before starting the design process), you should include it in your wireframing process from the very start.

The actual message of your content will and should influence and shape the design work.

Web 1920 2

Figure 2: Sample wireframe with actual copy. The placement of images and interactive elements can be shown through placeholders but you should use your real textual content wherever possible.  

One Week Website

Since the only image on the landing page of the One Week Website is a picture of another website, it is the copy that does the heavy lifting by telling the user that they can get their own website created in just one week.

Think Through Potential Conversions Every Step of the User Journey

The CTA isn’t restricted to your landing page. You can encourage business-friendly prompts every step of the user journey.

Note that this doesn’t mean you overdo pop-ups or put “buy me” buttons on every page of your website.

User-friendly and business-friendly aren’t mutually exclusive.

For instance, a user may have added a product of yours to a cart but they may not have had a chance to look at other product categories.

You can feature relevant and complementary products on the checkout page and your visitor will appreciate the ease of ordering from right within the cart!

Web 1920 3

Figure 3: Your e-store can suggest products to the user even on the checkout page.

Godaddy

GoDaddy always prompts customers to add privacy or email to their domain purchases

Always Err on the Side of User-Centric

If you are unsure about the most lucrative way to design your website or app experience, remember that every time you prioritize the user need, you are also prioritizing your business needs.

For every page you design and include in your website, ask yourself “what does the user want and what are they getting from this page to fulfill that want?”

This helps the user choose their journey through your website from that point on and saves you the trouble of guessing what your visitor is thinking about doing on that particular day or in a particular moment.

Web 1920 4

Figure 4: To ensure that your conversion rates remain high, you can ask the user to decide what they would like to see or do on your website.

Freelancer

The freelancer.com website lets users choose whether they are visiting to hire or to work- instead of bombarding them with content and options for both.

What are the design choices that have helped you raise your conversion rate? Let us know in the comments. And do share if you try any of our tips in your next design project!

No Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Babar Suleman

Babar Suleman (MFA, Parsons School of Design; Fulbright Scholar) is a visual storyteller and an experience designer. He is interested in the interplay of words and visuals in the communication process and uses his diverse experience as a writer and designer to create meaningful user experiences and effective branding strategies. You can contact Babar at his official website.

NO COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Show Me My Heatmap

@AndreaFine @CrazyEgg I love using it. That's when my clients really get it. More than any @Google analytics data.

Dagmar Gatell

@DagmarGatell

What makes people leave your website?