Designing information architecture and wireframes for optimizing conversion

Wireframes, or more broadly user experience design, aimed at business development isn’t really much different from user experience (UX) design for general purposes, but there are a few concepts or approaches to consider that will improve your chances of getting desirable results.

We’re going to look at three approaches to design that have come into popularity and how to use those to ensure your information architecture, content hierarchy, and user experience are working together to meet your business’s goals. Those three approaches are:

  • Conversion Focused Design. Design that is focused primarily of converting site visitors to customers. This is often the approach used for marketing campaigns and landing pages, and often goes hand-in-hand with inbound marketing and lead generation efforts. On some level all websites should be trying to convert someone; whether it’s a blog that converts a visitor to a returning reader, or a visitor to a lead to a customer.
  • User Centred Design. Design that focuses on the needs and requirements of the user; further to that, user centred design should ideally involve real world testing with users in order to properly test assumptions and iterate solutions.
  • Mobile First Design. Pretty self-explanatory, this is a design approach that means first designing for mobile devices, followed by larger devices/screens. As mobile devices become more common-place and web traffic increasingly comes from these sources it is only natural that we design for that experience first.

Compartmentalizing Design

In my experience the best results for UX design come when the UX design comes before the visual design, sometimes referred to as User Interface (UI) design. More broadly, I define visual define as the style of the website, including colour choices, typography, images, illustrations, etc.

Compartmentalizing the look and feel away from the structure of the content keeps the team focused—time can easily be wasted debating over shades of a colour for a button, which font family evokes the proper tone, and what combination of demographics are best represented in a photograph. It’s far more important to put in effort up front ensuring users will be able to find and use information effectively.

I know for me it can be difficult to keep the visual design separate at this stage, but I feel it is vitally important. Staying focused on the content, how that content is organized, and how the user flows through the content is priority number one. Any designer worth one’s salt should be able to massage that structure into something beautiful once it has been established. That being said, my process remains pretty fluid and iterative as well. It’s just the nature of the work, but sometimes ideas come up in the visual phase that may require reworking the structure of a page, or as you apply the styling to a portion of functionality you realize that another solution may be better. I just try to keep that primary goal always in at the front of my mind and measure my decisions against that.

Depending on the structure of your team this may be easier for some. In my case, I’m responsible for both the UX and UI, so often ideas are percolating while developing the UX. In teams where there is a separate UX designer it should be easier to keep the visual element separate. If this is the case then I actually suggest the UI designer be involved in reviewing the UX designs for the very reason that they may have ideas and insights about the execution of the design that could impact the UX.

Conversion Focused Design

The point of Conversion Focused Design (CFD) is quite simply what it says, to design websites or pages for the primary goal of conversion. Start with defining the primary goal for the website, in most cases converting a visitor to a customer. That is a pretty broad goal and generally there are multiple steps in that conversion process, or funnel such as:

  • Converting a visitor to a lead
  • The lead to a qualified lead
  • And, hopefully the qualified lead to a customer

Sections or pages of your website may have their own sub-goals, narrowing in on portions of the conversion funnel. For example, a service page may aim at converting visitors to leads while a detailed and specific case study or ebook may be focusing on the final portion of the funnel, converting an already qualified lead to a customer.

With the goal(s) defined then proceed with your wireframes as normal—structuring content, information architecture, navigation, and user flow through the site. However, the key difference here is every decision made along the way needs to support the primary goal(s). For example, if you’ve defined the final conversion point for your website to be “request a consultation” then every piece of content and decision you make should support that; all roads should end there. All content should prime the visitor to get there, and the content hierarchy on the page should naturally guide the visitor. This is where the line may begin to blur with visual design; often page layout becomes well defined during the wireframe process since so much thought has been given to guiding the user.

Depending on the people involved in the process you may have a lot of input of what should be included in the site. I can’t count how many times I’ve had requests for a “carousel” of images on a homepage because each department of a business feels they need to be represented front and centre.

My advice? be ruthless in not distracting users from your goal.

This means avoiding, or removing, superfluous content that does not directly aid in reaching the goal. Does a new, unqualified visitor to your site really need to know the inner workings of your every department, or would it be better to guide them to a higher level description of your offering, and nudge them to request a consultation?

Another example could be including prominent links to social media channels. If your goal is to have more requests for consultations then why encourage visitors to actually leave your site to look at your Facebook page or Twitter profile? Those are tools best used to bring visitors to your site; your site isn’t meant to grow your social media audiences (unless you’ve defined it as such).

User Centred Design

The core of User Centred Design (USD) is clearly identifying the people who will use your site, what they will use your site for, and under what conditions. In my opinion, this approach should always be used, if you don’t know who you’re creating a website for and how they will use it, then you’re basically conducting business blind.

USD is mostly an extension of the Design Process, loosely defined as an iterative process that begins with defining the problem, creating a solution, testing the solution, and iterating the process again until the solution gets the desired results. USD simply puts an emphasis on the person interacting with the product, or site.

Considering the primary goals previously defined, how do you best design the flow through your site, the hierarchy of the content, and name the navigation elements for your target users? Considering the conditions under which they’ll visit your site, how do you best grab their attention and offer value?

For example, you may sell a very technical service, but does the person visiting your site, perhaps a project manager, have a deep understanding of the technical jargon inside your industry? Consider speaking to them in terms they are likely to understand; just as you would when interacting face-to-face.

Mobile First Design

The Mobile First Design (MFD) approach has become popular with the increasing number of smaller devices people use to access the internet. Not confined to just smart phones, MFD is a useful approach to ensure you’re presenting the most relevant content to visitors regardless of the technical conditions they are viewing your site.

MFD can be a powerful tool to measure your site content and hierarchy against your goal(s), and to identify areas that may have a a bit of fat that could be trimmed. By restricting ourselves to a small display, like that of a smart phone, you’re forced to be more critical of what to include on the screen and where to place it.

Now that you imagine your homepage as a narrow, long, scrolling page do you still think it’s a good idea to put that slideshow of images front and centre, or perhaps it may be better to speak clearly about the service you offer and give the visitor a direct means of taking action?

The key here is trying to ensure the goal is easy to reach for the visitor, especially on simple/small displays. Once that has been accomplished it is easy to expand that for larger screens; just fight the urge to add more to the page when you get to larger displays.

Conclusion

Designing for any goal starts with proper planning; however, when your focus is on converting visitors to eventual customers is even more important that you don’t loose sight of your goal while designing, you understand who will be using your website, and that they can easily reach your goal with as little friction as possible.

I hope you’ve found this useful; if so please consider sharing it with anyone that may benefit and if you have any questions or comments please post them below.