6 Steps To A Conversion Focused Web Design Why Visual Design Should Come LastSummary: People go to your website because they have a task to accomplish. Make it effortless for web users to complete their tasks by creating a conversion-focused web design. 

Everyone has a visual opinion because 90% of the information coming to our brain is visual, and 50% of our brain hardware is designed to process visual information.

So, everybody feels that they’re qualified to opine about the design of your webpage or your website. Remember, though, that prioritizing visual design is similar to deciding what color to paint your bathrooms first when you’re remodeling your house.

You should, instead, focus first on framing up the page and building it to be functional and structural based on what it’s supposed to do.

Here are six steps you should follow to ensure you come up with a conversion-focused web design:

1. Understand the Business Goals and History

Your first order of business is …

  • to understand your company goals and your place in the ecosystem, and
  • to diagnose the current state of the website from the user’s perspective

During a comprehensive kick-off meeting, go through an extensive list of questions. Your questionnaire should be designed to ensure that you understand the business background to the level that you need for a successful project.

Ask questions about the following:

  • marketing
  • the external environment
  • the technology platform you’re on
  • the internal organization
  • your goal
  • key performance indicators (KPIs)

In addition, you need to have a good grasp of the brand guidelines. You also need data from your company’s web analytics platform(s).

2. Develop User Scenarios and Grade the Customer Experience

The only perspective that matters is that of your visitors. So, your next task is to identify the problem by creating scenarios that represent common tasks performed by important classes of website visitors. You can use a customer journey map to create narrative user experiences and score using grades.

Instead of designing from the company outward to the audience, consider your audiences’ baggage and misconceptions, lack of attention, and apathy about what you do. Consider the following questions:

  • What are visitors looking for from their site experience?
  • Were they able to accomplish their goals?
  • How easy or frustrating was it?

Not sure how to begin creating user scenarios and customer journey maps?

Learn how SiteTuners can help. Speak with a conversion expert.

3. Create Wireframes and Information Architecture

Present the proposed new information architecture or page flow, along with wireframes for important pages.

It’s best to start with the homepage wireframe because that establishes your high-level navigation. Consider the following:

  • layout of the page
  • functional elements
  • important labels
  • text
  • navigation
  • page titles

Lay these elements out functionally, so you can take the visual design part out of the process.

This is crucial because if you can’t agree on the purpose of your page, then talking about how you’re going to decorate the page isn’t going to get you any further along. So, you first need to decide if something is appropriate use of real estate and if you have the right kind of controls on the page.
conversion-focused web design quote graphic with text that says prioritizing visual design is like deciding what color to paint your bathrooms first when you're remodeling your house

4. Create Rough Visual Designs

Based on the developed wireframes, create rough visual designs.

The main purpose is to indicate the appropriate visual emphasis and relative importance of page elements in order to support the conversion goals.

Your rough visual designs are not necessarily polished art – it’s guidance on visual priorities on the page. Identify what the most important page elements are and what elements you should intentionally make boring. You ultimately want visitors to look in the periphery of the page (the left navigation or the top navigation) if they don’t get what they want from the body of the page, but the body of the page is the one that matters.

5. Hand Over Mockup Designs

Deliver concepts in a file format the web developers can use.

From the wireframe, make sure you have some way to indicate which elements have stronger visual emphasis than others.

You need to talk about relative visual prioritization and use that as the starting point. Talking about whether there are some branding elements on the page or the RGB value is fine, as long as you don’t undermine the functional purpose of the page.

6. Keep a Short Leash During Development

Frequently touch base during development to ensure that the design is properly interpreted and to address any questions that arise during implementation. Do not allow significant deviations from original plans. Be a bit of a purist, and put your foot down to avoid having distortions and minor hijacking by the web development team.

Make sure designers and developers understand that embellishments that do not support the intended CTA shouldn’t be on the page.

Create Conversion-Focused Web Design: Put Visual Design Last

When designing your website or doing major redesigns, have a formal process for improving conversion. Spend more time on the things that you can’t see, and focus on constructing the psychology of the visitor experience. Remember, conversion and visitors are at the heart of this. Don’t get stuck, especially too early, on the visual layer. And don’t let designers run the show, unless they have a strong emphasis on the user experience to begin with.