Jun 17, 2015

Make a New Home Page: Part 2

This is part two in our series on completing a DIY home page redesign. If you missed part one, check it out here.

USER TESTING

Now that you have your sketched-out draft, it’s time to look at things again from an end user’s perspective. Testing is one of the most vital components of a web build, and as the home page is usually the customer’s first experience of your site, you really have to get it right.

While you’ve only got a physical piece of paper to work with, you can still test if the goals are aligned with the experience. Using people who are not direct stakeholders, ask questions like:

1. What would you click on first?

2. If you needed to get in touch with this business, what would you click (if anything)?

3. What do you think you’d do to complete the user journey? (You’ll need to adjust that to your requirements – whether that be signing up for a newsletter; going through with a sale; booking a room)

From these questions, you can gauge if you’ve got your hierarchy right; if the contact information is easy to find (vital for local businesses); and if the user journey is optimised. If, at any stage, there appears to be disruption or anything that complicates the process, this needs to be looked at. In the end, these testers are representative of your users, so it’s how they do things that is important - not how you think they should be done.

Ensure that you document your testing for posterity.

INTERNAL STAKEHOLDERS

When your draft is optimised post-testing, you need to show it to your internal stakeholders – your team, management, or the board. It’s important to keep in mind that the site doesn’t belong solely to you (even if you understand it more than anyone else) – the website belongs to the company as a whole, and there may well be direction that doesn’t align with the data-driven decisions you’ve applied to the redesign. In this instance, all you can do is share your insights and show why you’ve made the suggestions (e.g. “35% of our customers are performing a search to find jeans; we could be missing out on sales by not making it easier to find, which is why we should include it as a navigation item.”) You may still need to make some changes to your draft, but it’s easier to do it when it’s on paper than when it’s live on the site.

FINALISE DESIGN

Once you’ve received approval, put together a branding document that will firm up the look of your new home page. In it, include examples of the fonts you’ll be using (including sizes and weights for headings); the colours, as hexadecimals; any images (with products, these are likely to change fairly regularly, but you may have an icon set that you want to use, or images that are more about branding or telling a story than representing a product per se); and even a persona (download a design persona template here) that describe your business and site.

With this branding document, you can make decisions much more easily, as it narrows your focus in terms of what you can put on the site. You don’t have to decide between 16 million colours for the nav bar – it’s going to be one of the three that you’ve already decided on.

Send this out to your internal stakeholders, and make sure you get the tick of approval before going through with the next step.

LAYOUT DRAFT

It’s time to take your sketched out draft and design elements and make them come to life online. If you know how to use Photoshop or a similar image editing program, you can draft up an image of your page through that. If not, you’ll need to send your mock-up to a designer who can produce a PSD file, which you can use for testing (and package up for a developer later on).

TEST

Using three new people, who aren’t overly familiar with your site (try family and friends), ask the same three questions that you asked in your first phase of user testing. We’re looking for any points of friction that confuse the user or stop them from doing what they need to do. Make sure that they realise that there is no right or wrong answer here – if they do something unexpected, you need to look at the likelihood of it being a design issue rather than a user issue.

Make whatever changes are necessary, and again, document your findings. You can use this information to back up your reasoning should the need arise.

DESIGN AND CUT

If you are using a content management system like Wordpress, you’ll need to work within your theme to make changes. Depending on the theme you’re using, you’ll be able to change many of the elements yourself, like the header image, any calls-to-action, background colour or image, fonts, etc. If you need support, check in with the theme developer – any of them worth their salt will be able to advise you on making these sorts of changes. Your menu items should be able to be edited within the CMS as well.

If your site doesn’t use a CMS, or you use a developer, send them through your branding document, assets (images, logos, etc), revised navigation structure, and mock-up (or PSD). With your Photoshop draft, make adjustments to the layout so it matches your actual site layout (or send the changes through to the designer). This way, a developer can use the Photoshop file itself to cut (divide it up so they can code into HTML) the design.

GO LIVE

Well, nearly. Your changes should only be visible in testing mode (in a CMS) or on a ‘secret page’ (ie one that can only be accessed via URL) so that you can re-test, and get it approved internally. Once these boxes have been ticked, you are clear to launch your redesign. Ask for feedback; use your Analytics to see if there is any friction; and optimise if need be. And of course, give yourself a pat on the back – job done!


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