Planning a Conversion-Minded Site Layout

Images, showcases and buttons are all important elements for your website design, but they are all secondary considerations. See your vision come to life from begging to end by starting with a customized site layout. We’ll show you how.


SiteLayout_BlogGraphic

Always start with a plan

Creating a new design for your online store may sound like just choosing the photos, fonts and colors you want. While those elements are incredibly important to establish your brand and set you apart from the competition, the very first step you should take in thinking about your site is making a plan for the layout.

The layout of your site is like the frame of a house. Before getting into things like bricks, trim style and paint colors, builders frame out windows, doors and the floor plan of a new house. Web designers do the same thing on a new website.

The picture below shows a site design at the very beginning. We call it a wireframe, and it marks out where information, photos and navigation menus will go.

wireframe

In order to come up with a good plan that will serve your business and increase conversions, you need to do a little research and ask a few questions, like

  • “How will people navigate my store?”
  • “What is most important to my customers?”
  • “What kind of photography do we have?”
  • “What needs to be visible from every page?”

The answers to these questions can help you decide what type of navigation menu to use, what to put in the most visual places (like the top of the homepage), how large your photo areas will be and what to make sure appears in your template (header and footer) of your site so it’s always accessible.

Let’s take a look at two very unrelated businesses to see how their layouts differ based on their needs.

SideBySide1

The site on the left, Stens Parts Warehouse, sells lawn mower and power equipment parts. On the right is Delaware Valley Grown Farm Share, who works with farmers to provide fresh, local food for their customers. These merchants differ in everything from business model to target customer, so it’s no surprise that their websites would have totally different layouts.

Here are some quick wireframes of these sites without any styling or photos.

Stens Parts Warehouse

StensWire

Stens’ target customer is someone who will likely know what part they need when going to the site, so easily moving from the homepage to product page is important. Here are some things in their layout that work for them:

  • They have a lot of top level product categories, so it makes sense that their plan includes a left navigation menu that can hold them.
  • Stens offers flat rate shipping, which is important to customers who may be ordering heavy parts. They make that benefit very visible by having it in the header of the site and as a graphic on the homepage.
  • There is a section of featured products on the homepage where popular and top selling parts can be easily accessed.
  • Contact information and a live chat tab are in the header and footer so they are available from every page for customers who have questions about the parts.

Delaware Valley Grown Farm Share

DelawareWire

For Delaware Valley, the target customer will probably want to learn some things from the homepage rather than jumping straight to a purchase. Informing potential customers on how farm sharing works and the benefits of buying local foods is essential to Delaware Valley’s business model, so their layout reflects that.

  • They don’t have too many top level categories, and large beautiful photography is more important here, so they opted for a top navigation menu to save space and show off that large image.
  • The homepage is long and broken into sections of content in order present their information in an appealing and easy to digest way.
  • They give a lot of space to photography to enforce a feeling of fresh farm produce.
  • They push social media by having it in both a dedicated homepage section and in the footer. Customer engagement through Facebook, Twitter and Instagram helps spread the word about Delaware Valley.

Keeping your target customer’s needs in mind when coming up with your site layout can help increase conversions and make your store a leader in your industry. Do the research and ask yourself those questions, and you will be on the right track to making a great plan. Need a little more help? Check out The Ultimate Field Guide to Ecommerce Conversions for more great tips on taking your store to the next level.

– Camri Hinkie, Senior Web Designer

2 Responses to “Planning a Conversion-Minded Site Layout”

  1. Josh

    What’d you use to make those wireframes?

    Reply
    • Volusion

      Hello Josh,

      I spoke with Camri, and she used Photoshop to produce these, but she also added, “For this type of page structure wire framing though, you really don’t need software at all! I find one of the best tools is simply a pencil and some grid paper to sketch out quick layout ideas. The idea is that whatever tool you use to do it, you need to get your structure down first when connecting your site design.”

      Reply

Leave a Reply