Our website: a design journey

I’m delighted to be able to share with you today the first pages of the new look for our website.

Beta homepage

Beta homepage

We’re releasing them as ‘beta’. That means they’re available for you to try out, but haven’t yet replaced our live pages. This will happen at the end of September.

The most striking change is the new visual design, but there’s a lot more we’ve been doing, and plan to do, over the next year or so to make it work much better for you. Over the coming months, the team will be sharing more about this. But first, a quick tour through the changes, and why we’re doing this.

Why and how

Fundamental to this has been our desire to design a website around the needs and behaviours of you, our users. Speaking with our users is one of the most rewarding parts of my job. Over the past few years, we’ve carried out surveys, web analytics, focus groups, one-to-one interviews, user testing, diary studies and home visits. We’ve had some very consistent messages about what works and what doesn’t work, which has helped give us clear starting points – more of this below.

We used this research to start experimenting with ideas, which we refined with help from both colleagues and users alike, and we’ve tested via workshops, face to face interviews and user testing.

Here are just a few of the main changes…

New mega-menu

New mega-menu

New mega-menu

We’d had a lot of feedback that it was difficult to get into deeper parts of the site and that the amount of content was initially overwhelming, so we’ve created a ‘mega menu’ that we feel helps with both problems. Clicking or tapping on the simple red button lowers and raises the menu. It shows at a glance the contents of different sections so you can jump straight in. Once the new pages are out of beta, this will be available across all our web pages. This is really important as 90% of you don’t start from our website homepage.

New visual design

We’re making the most of some of the visually striking records in our collection to add context, colour and interest to our pages. The National Archives works for the record, for good, so this feels like a fitting way to show the gems of our collection. The size, scale and diversity of our collection never fails to amaze me and our new image library has been an invaluable research tool. The web team know a lot more about our records than we did six months ago, and this part of the project has been a joy! Users have responded really well to this use of imagery too. Colour-wise, we’re using warm, rich colours that support these images and are easy on the eye.

Simpler, clearer layout

On each page, we’re improving the layout to better reflect what you want to do. Our testing so far shows that you find it clearer and less cluttered. For example on our homepage, research showed overwhelmingly that you wanted quick access to our records, whether it was advice on how to get started, or to dive straight in to Discovery, our catalogue, so we’ve made access to records the central element on the page.

Improved experience on mobile devices

Almost a fifth of you use our website on a smartphone or tablet. With the exception of a couple of pages, our current site doesn’t cater well for you. In a typical month more than 80 different mobile devices will access our site. We certainly can’t guarantee to test with all of them, but we can test on the most heavily used. At the other end of the scale, we also need to cater for large screen sizes up to smart TV. We’re using an approach called ‘responsive web design’ to improve this (apologies for the jargon). This means that we design our website on a simple grid system, and this grid rearranges itself depending on the size of the device being used. My colleagues will be blogging more about these challenges over the coming months so watch this space. It doesn’t just have technical considerations though – it means that our content strategy has to be pretty ruthless, and we can’t shy away from setting priorities.

Improved typography

In our research, many of you told us that our text was too small to read comfortably, so we’ve increased the font size and spacing between the lines. We’re using free open source web fonts – Open Sans for body text and Bitter for headings. We hope the slab serif heading font makes sections clearer and more distinct. You’ll feel the benefit of the typography changes more when we redesign some of the other pages (such as research guides and news stories) over the coming months.

What’s next?

Please let us know what you think – either in the comments below, or on the feedback tab on each of the beta pages.

I’d like to take the opportunity to say thank you to those of you who have helped with our research and/or testing so far. If you’d like to get involved there’s plenty of opportunity to help us develop the rest of the website, so do get in touch or sign up. We can’t do this without your involvement.

At the end of September, these pages will become fully live, and we begin working on the rest of the website – watch this space!

Beta pages

Homepage

About us

Education

Records

Information management

Archives sector

20 comments

  1. David Matthew says:

    The new pages are a revelation, it is really good and much better than before and is much easier to find what you need quickly. I especially like the map with closing/opening hours and information on planning your visit before you arrive. Thanks to everyone who had made this new version possible.

    1. Emma Allen says:

      David,

      Many thanks for your kind comment – glad you like it.

  2. Dr Bex Lewis says:

    I am liking the look of this website hugely, looking forward to it coming into play. When I think back to my first visits to PRO, with the card indexes, and the early catalogues, what a long way. Hoping the contribution I made to the site (http://www.nationalarchives.gov.uk/theartofwar/) will still have a place!

    1. Emma Allen says:

      Bex,

      Yes, we certainly have come a long way! Art of War still very relevant. Many thanks for taking the time to comment.

  3. Justin says:

    I would suggest the need for more feedback from online users before you finish the Beta design phase.

    The new design tries to fit too much onto the front page and is visually busy/cluttered.

    1. Emma Allen says:

      Justin,

      Many thanks for your comment. More feedback is what we’re hoping to get by releasing the pages as beta.

  4. Margaret Frood says:

    My first reaction was a double blink, probably of surprise at the tropical banner, but on reflection I could see no reason not to have a mood-lifting splash of colour. Why be drab and dour when you have something to flaunt? It rather echoes the way the lakeside feel of the approach to Kew, draws up one in – and out.

    My initial feel was also that the Home Page is far too busy, and requires too much scrolling down, but it makes sense for a new design to cater for mobile devices. The day can’t be far distant when we’ll all swipe and it seems churlish to object especially when the zippy menu button offers an inspired alternative..

    It’s an option that just might make me switch to being one of the 10% who start from the Home Page. (Not sure about the red though. Sends a forbidding message. Shouldn’t it be bright green?)

    1. Emma Allen says:

      Margaret,

      Thanks for taking the time to give us feedback. Glad you like the imagery. Interesting reaction to the red!

  5. Amy Howell says:

    Brilliant, a much needed improvement! Well done.

    1. Emma Allen says:

      Amy,

      Thanks!

  6. Gordon Soutar says:

    I think it is a vast improvement on the current site although I would tend to agree with some of the earlier comments that there is a little too much going on with the homepage. So long as the main information being displayed on the homepage is what people are actually searching for then it could work well (if streamlined), making sure the key areas are kept ‘above the fold’.

    The ‘mega-menu’ is a great way to get everything in one spot especially as it only appears when people actually request it, a great use of space (and design).

    I personally believe that the social media icons would benefit from being in the header through-out the site, this creates a feeling of continuity and saves the icons being ‘plonked’ in various spots on each page.

    Most of the beta-pages look great, huge improvement, however the ‘Education’ page is all over the place, different size boxes leaving gaps and the ‘Time Period’ section is really not working for me. This section (Time Period) could possibly benefit from a scrolling marquee that displays all the periods in succession; this would eliminate the need for so much scrolling and also make it easier to follow.

    Other than those points, I think it is great! The new font is an excellent choice, clear and easy to read – perfect!

    Look forward to seeing the finished site

    1. Emma Allen says:

      Gordon,

      Thanks so much for your detailed feedback.

      You’re right about Education – our grid layout wasn’t working well, and we’re releasing a fix in about 20 minutes. Out of interest, which browser(s) were you using? Or were you using a tablet?

      Homepage content very much driven by user priorities. Social media links are in footer, consistently, although not with icons.

      Very good to hear from you again! Hope you are well.

  7. Gordon Soutar says:

    Hi Emma,
    I viewed the webpages on most major browsers (Explorer, Firefox, Chrome, and Safari), the display was better on Chrome and Safari (4 tiles x 2 tiles) but on Explorer and Firefox it was all over the place, (3 x 1 x 3 x 1).

    I think you guys are definitely on the right path!

    1. Emma Allen says:

      Ok, try Education in FF and IE now – should be better? (4 x 2) We’re also having a few bullet issues in IE7 & IE8…

  8. Gordon Soutar says:

    Much better! It still takes up a lot of space but I could live with that. The joys of developing a new site, fix one error and find another ten! Good luck!

  9. […] We’re planning to redevelop Archives Media Player as part of our website improvement. […]

  10. […] launch with this and iterate. We have already adopted this model at The National Archives with our website re-design, focusing on updating top-level pages, launching them first Beta and making changes according to […]

  11. […] I blogged about the redesign of nationalarchives.gov.uk back in September, I explained that one of the reasons for taking a new approach was that almost a […]

  12. […] you may have already noticed, The National Archives web team is currently redesigning the website.  We’re really starting to get to the meat and bones of the redesign and we’ve […]

  13. aruny says:

    very nice web design on web site and nice picture the first page of the new look for our website. post

Comments are closed.

We will not be able to respond to personal family history research questions on this platform.
See our moderation policy for more details.