Beta.govt.nz design update

We recently talked about some of what we found in our last round of user testing. As well as our user research sessions, we’ve been collecting feedback from people looking at the beta site — there have been a few common patterns that have influenced our priorities in a big way.

The changes we just released

We’ve been making our way through the reports, prioritising design work for the biggest problems and diving into some quick fixes. Today we released:

  1. an updated homepage
  2. font size and colour adjustments
  3. a change to make contact details easier to find.

Screenshots of the old beta.govt.nz homepage (left) and new one (right) with updates to font, colour, and access to contact details.

The original version of the beta.govt.nz homepage didn’t work for a lot of users. People could generally find what they needed, but the distinction between service information and contact details in the government directory wasn’t quite so clear. So we’ve made some changes — and they might look familiar.

If you’re following the work the UK’s Government Digital Service are doing on GOV.UK, you’ll see that our new homepage continues to follow their lead.

Why adapt the design of the UK page? We've got a few reasons:

  • it’s a solved problem. The most recent version of their homepage came about because people couldn’t find their way around the page — we were seeing exactly the same kinds of issues
  • the UK design is open source, so adapting it saves us a huge amount of time and money — it also means we can iterate quickly and do more research with users
  • we’re focusing our effort on getting our content right, and working with agencies to make sure the content is fact-checked.

Recently the GDS team published data showing that less than 10% of users visiting GOV.UK viewed the homepage — we already have similar evidence. Google drives users into content pages deep in the site, so it makes sense to focus our effort and resources there instead.

We’ll test the updated homepage again. If users still have problems with the layout, we’ll commit the time and resources to coming up with something unique for Govt.nz. If it works… well, why reinvent the wheel?

BIG fonts aren't so big anymore

Screenshots of the same content page showing older, larger heading font size (left) versus newer, smaller heading font size (right).

Lots of people told us the font sizes for some of our headings, especially page titles, were too big — so we’ve fixed that. This doesn’t mean we’re reverting to the 12-pixel font sizes you see on many other government websites. Readability of content is still a major consideration for us.

You’ll also see that some of the colours on the site have changed — but just a little bit.

We haven’t chosen the flat UI approach because we think it’s cool. Rather, it keeps the design simple. We’re using colour to draw users’ attention to certain parts of the design and brighten the site up a bit, but the new colours still don’t get in the way of the content.

Easy to find contact details

Our biggest area of focus at the moment is the government directory — now called “Contact government” on the site.

Users struggled to find it, and when they did they rarely realised that it was a whole different area of the site. Finding one agency’s contact details didn’t mean they felt confident finding another’s.

We identified two main problems here:

  1. It wasn’t obvious how to find contact details on content pages.
  2. The main directory page has a filtering feature. It works, but users didn't always understand the results they were shown.

We’re still working on some updates to the filtering feature, but the updated content page layout was ready, so we’ve released it now.

Linking to contact details from information pages

Screenshots comparing previous and new positioning and labelling of responsible agencies on information pages.

On the bottom of all our information pages, we used to show links to the departments and agencies responsible for the content. (While we’re in “thin” content, we’ve often got multiple agencies represented on a single page. As our content fills out, we expect this to happen less and less.)

This section of the page was originally labelled “Responsible agencies”, but that didn’t really help users work out what they’d get if they clicked a link. We tried the label “Information provided by”, thinking it would make the content look more authoritative, but it wasn’t enough. So now, it’s back to basics. These links are all about providing contact details, so that’s what we’re calling the section now: “Contact”.

Take another look and tell us what you think

All the changes we’re making to beta.govt.nz are the result of the testing we’ve done and the feedback we’ve received. As we add more content to the site and try out design changes, we know we’re going to find other things that don’t quite work — which is part of the fun. There are more changes to come.

Like the most recent changes? Leave a comment below or send us feedback on the beta.govt.nz site.

8 comments

  1. Comment #1. Charlotte:

    I can see that the location of the info pages’ contact area has the potential to improve task completion and info-seeking. It seems sensible to me to have moved it as you have done. I’ll be interested to know the stats and results of future user testing to see whether it achieved this or not.

    Thanks for keeping us updated. Useful to share this stuff and spread the knowledge. Be interested to know the stats for these blog posts! I’m sure you have quite a few loiterers.

  2. Comment #2. Nathan Wall

    Hi Charlotte

    I’m thinking the same as you, this change has good potential to fix one of the problems we saw in the most recent tests. When we were observing people using the site, having the contact link at the bottom just didn’t get their attention, now it’s at the top, it will always be in the same place, this is a good thing for learning how a site is put together.

    The other benefit of moving this block of links, when a user clicks on one of the contact links they get taken to that organisation’s details in the government directory and the main contact details, email addresses etc for that organisation are in the same place on the screen.

    We’ve got more user research sessions planned for the new year, we will share the outcomes of that too.

    I think we do have a few loiterers on the blog – and that’s OK – but it’s great when people get some conversation going, so thanks for your comment.

    Cheers

    Nathan

  3. Comment #3. Sue Boland:

    Hi guys – this is looking really nice. I just had a quick dive in to look at DOC huts, so this is a content comment for their stuff, but might relate to other areas of content too. DOC uses nice little icons to tell you what facilities each hut has – but the icons are tiny on screen, they don’t enlarge or show any metadata or scripting when you hover over them, and I can’t find a key to the icons anywhere. So as far as my eyesight tells me, the Manganuku hut has a box (mmm, useful), a stick blender – or maybe that’s an upright vacuum cleaner? and an interesting oblong thing – maybe a pillow. I wonder whether there are any other problems with icons in content areas?

  4. Comment #4. Nathan Wall

    Hi Sue

    The problems you’re describing with icons are very common. It would be possible to update the HTML on the page you mentioned to explain what the icons mean, but even that might not help everyone understand them.

    Personally I think a stick blender in a hut could be really useful, but then I also assume it means they have power. That’s one of the problems with icons, everyone will put a different interpretation on them.

    Some icons only work well in certain cultural contexts.

    As time passes icons can go out of date (how many times do you see a save button as a floppy disk?).

    Too many icons used at one time can be hard to scan quickly, and often you see the workaround to this is including descriptive text. There’s a good argument that descriptive text, if written properly, can be just as meaningful, and certainly it’s usually more accessible to a wider range of users.

    There are however times when icons work really well. Take the back button. It works because it’s always in the same position, always looks the same and does exactly the same function on every website – because it’s part of the user browser and not the sites they are visiting.

    On the beta site, we’re using images and icons only where they add value to the content – the page about choosing a safe gas appliance is an example – https://beta.govt.nz/browse/consumer-rights/product-safety-recalls-and-alerts/choosing-a-safe-gas-appliance/ – the flame icon was added to the page as it shows exactly what consumers should be looking for when making a decision about what to buy.

    Thanks for the compliment about the beta site – the feedback we’re getting on the updated design is so far really positive. I’ll also make sure your feedback about the DOC huts information is passed on.

  5. Comment #5. Mary.D:

    Looks great guys, and some really good functionality changes listed too which definitely makes the site easier to navigate and use. Thanks for the update and happy new years!

  6. Comment #6. Nathan Wall

    Happy new year to you Mary, thanks for the comment.

    The Govt.nz team is back on deck after a well-earned Christmas break. We’ve been working hard on the next design release, including some new content types. We’re gearing up for the next round of user research too, can’t wait to find out if the changes we’ve been working on have actually made things better.

    As we always do, the results will be published as soon as we have the research findings ready. Stay tuned, there’s exciting things coming in 2014.

  7. Comment #7. Lloyd D:

    I Like it. Looking a lot better and a big improvement moving the contact links to the top right. The whole design looks cleaner and easier to navigate which should greatly improve user experience.

  8. Comment #8. Nathan Wall

    Thanks Lloyd. There’s more design updates coming in the next few months. We’re working on a few of these now and there will be a few more changes coming out of the next round of user testing we do.

    Starting small, iterating through changes and gradually adding things into the design seems to be working well for us.

Navigate Posts