The Web Designer’s Little-Known Trick to Improving Conversion Rates – the Moment Your Site Goes Live

by 1 06/30/2014

“Impossible!” I can hear you say… “You can’t improve conversion rates the minute a site gets published! You don’t even have the groundwork necessary to know what your conversion rate is!”

But there is a little-known way to make sure that your site’s conversion rate starts out as strong as it can be—without the need to stumble through questionable tests that don’t provide you with the clear picture that you need to start making meaningful adjustments.

It’s a practice known as wireframing, and it’s used by web designers and developers alike in the prototyping process when a website is just a vision—before a single pixel touches the screen.

With wireframing, you click and drag different common website elements—including image placeholders, navigation bars, drop down menus, video placeholders and other “pieces”—into a basic layout.

From here, you can easily see how all of the elements on a page work together visually.

CNN-intl-wireframe

An example of a wireframe from CNN International

Planning Before You Build

Just like any great creative project, you’ll want to plan things out before you build. Organizing your content, images, videos and other elements before wireframing will help you better decide what goes where—and make it easy for both people and search engines to discover your content quickly and easily.

Slickplan is one such option that lets you drag and drop pages into an attractive, professional sitemap in minutes. The pro version, starting at $6.99/month will even show you the sitemap for your existing site, so you can reorganize it without the hassle of using a graphic design program or old-fashioned pencil and paper.

slickplan

Slickplan makes it easy to create and organize any site — new or existing

Drag-and-Drop Simplicity

Thankfully, you don’t need to rely on your Web designer to create a wireframe mockup for you, although it’s a good idea to have them work with you collaboratively on refining the project, so that there’s plenty of white space and proper organization of all the assets that make up your site.

With that being said, there are a variety of user-friendly tools that make creating such mockups easy and addictively fun. Even if you have zero graphic design skills of your own, you can click, drag and drop your way to a professional-looking wireframe layout in minutes, thanks to these sites:

Balsamiq

balsamiq

Developed by a former Adobe senior engineer, Balsamiq lets you drag and drop individual element “placeholders” onto a page and collaborate with your team while keeping previous versions of the layout in case you’d like to go back and further refine an original idea.

Going beyond websites, Balsamiq also lets you prototype mobile apps. A web-based version and desktop software are available, as well as a plugin for developers who want to create specific types of wireframes.

Mockflow

mockflowMockflow incorporates a variety of tools to plan, build and collaborate on your wireframing project

Mockups meet cloud computing with the Mockflow service. Not only can you collaborate and annotate wireframes with notes, but you can also go beyond websites and apps to include banners and brochures—which means your graphic design team and print publishers can both use the same tool to brainstorm layout ideas and work together on possible solutions.

Wirify

wirify

Wirify is a bit different than your typical wire framing app or service. With it, you drag a simple bookmarklet to your browser bar and can turn any website into a wireframe with it. A pro version lets you edit and export these wireframes, so you can gather ideas for potential layouts.

Exported wireframes can be used in other wire framing programs like Balsamiq, among others. Each export costs 1 credit, and credits can be bought for as low as $6 each. Before you begin exporting wireframes, it’s a good idea to make a list of the sites whose layouts you like best, to determine the best possible usage of your Wirify credits.

So How Does Wireframing Improve Conversion Rates?

Imagine if you could duplicate the layout of a high converting landing page and make adjustments to it without disturbing the existing design? Or test a potential layout with a few dedicated customers before unrolling the whole thing at launch? Wireframing makes that possible.

It also gives your designer a great starting point to conceptualize new testing ideas quickly, without the need to spend a lot of time on prototypes that simply don’t get traction from the group.

With the collaborative nature of wireframing, everyone has a say in the design process—saving hours of time and needless back-and-forth that normally accompanies such projects.

By duplicating what’s working, you’ll be able to launch right out of the gate, secure in the knowledge that you’re following the best possible practices in your industry, while gearing up for new tests seamlessly in the background.

When your entire team is on board and moving forward with purpose and feedback, there’s no limit to how high your conversion rate can go.

Read other Crazy Egg articles by Sherice Jacob.

About 

Sherice Jacob helps website owners improve conversion rates with custom design, copywriting and website reviews.  Get your free conversion checklist and web copy tune-up by visiting iElectrify.com.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

1 COMMENT


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>