May 21, 2015

Make a New Home Page: Part 1

If your website looks outdated, unloved, or just plain ugly, you generally know it. You might make noises from time to time about getting a redesign, but you’re leaving it for when you do ‘the whole thing’ – upgraded ecommerce, a responsive website, or new company-wide branding. So in the meantime, you just hope customers or potential partners will overlook the deficiencies.

Unfortunately, they won’t. Your website is representative of your company, in the same way that a store front is. You wouldn’t expect optimal results from a shop where the POS material is from 1980, the cash register doesn’t work, and nothing’s laid out logically.

So until you decide to do ‘the whole thing’, we’ve put together a plan that can tide you over and get your home page looking up to scratch, and give you something to be proud of.

Research – Your Content

The first step is to look at your analytics, and see what’s most popular on your site. You need to have an understanding of what your customers are looking for, as well as what you want them to do on your site. Aligning the customer’s goals and your business’s goals is the purpose of your website.  For example, the data might show that your customers are spending a lot of time looking at t-shirts. You’ve put a lot of focus on your site into jeans, but it’s important to pay attention to what the customer is after. So in this case, refocus your home page to t-shirts, and once the customer is on a product page, you can upsell with the jeans. This is how you merge the goals.

Once you’ve decided on the focus of your home page, you can move on to the navigation. Arrange all the pages of your site into defined groups. If you’re too close to the project, ask some friends (not colleagues) to do it for you. By doing this, you can work out how people expect each of the categories to be presented to them on the website. If you’re unsure, a good place to start is to arrange your content into user categories.

These categories will become your navigation (menu). This is an element that will flow through the rest of the site, so it needs to be very clear, with search-friendly terms and obvious ways of thinking.

Now that you have your home page goal and your navigation, you can start to look at what’s currently on your site. Make a list of what stays, what needs updating, and what can go. There may be elements on your page that aren’t used at all – use your analytics to check on this. If you’re using Google Analytics, look at In-Page Analytics, which can show you how often particular elements are used.

For a more sophisticated method, use a recording plugin like SessionCam. This makes replays of user visits, displays heatmaps showing clicks or mouse movement, and can give you a real understanding of how people are using your website.

What you’re looking to do is eliminate friction between your website and your user goals – it needs to be as clear as possible what you want the user to do.

Research – Your Design

This is where the fun starts. You need to decide on a new look and feel for your home page – colours, textures, backgrounds, layout, fonts – there’s a lot to consider.

Browse through sites like Best Designed Websites, and make notes of the elements that you love, and that you think would suit your website. You might discover that you like a very clean, minimalist look. Perhaps a black textured background is appropriate to your business. A large, centred header with a white navigation bar. A full-width background image. Deciding what you like, and what works best with your product or service, will narrow your focus. (HINT: To determine which font is used on a website, right click on the text and choose ‘Inspect Element’ from the drop-down menu. In the Rules panel that appears, you’ll see font-family information).

Design Concept

Now you need to combine the content of your site with the looks that you’ve chosen. The first step is considering the ‘user experience’ – that is, how the user will behave on your site. Unless you’re a designer, or into experimental web practices, it’s best to stick with convention. This means that your logo should be top-left or top-centred; your menu should be at the top of the page, or on the left; main content is in the middle. Remember your hierarchy – the more important the information (like your #1 business goal), the bigger or bolder it should be. Smaller items on the page will come across as less important.

Once you have the basic layout mapped out, label or include some sort of legend for colours, fonts, radius of edges, heading sizes, shadows. If you are at all handy in Photoshop, you can produce a mockup of how you would like it to look. However, when you show this draft to stakeholders, it’s best if it’s in as rough a form as possible so that people don’t feel pressured into agreeing to a particular look – you’re looking for honesty in collaboration to get the best result.

Now you’ve got the beginnings of a redesigned home page. You’ve drafted the information architecture; made decisions on style and design; and mocked-up a concept for feedback. In the next blog post, we’ll look at what you should do with your draft; and how to get it from black and white markings to the front page of your website.


Read on to Make a New Home Page: Part Two

Hayley is bwired's Marketing Manager, and handles the Services division. She splits her time between marketing campaigns, delving into clients' data, making stats presentable, and trying to compile pithy sentences. Read her Services blog, Digital Marketing blog, or Google Analytics blog.

Leave a comment