May 12 2017

A new look website for Natural Resources Wales

Natural Resources Wales

S8080 recently had the pleasure of working with Natural Resources Wales (NRW) on a comprehensive and ambitious user experience design project focused on improving and enhancing their public facing website.

The challenge

Although the website was packed with informative content, feedback suggested users were having trouble finding content and information and were having to resort to contacting NRW through traditional channels. Four key elements of our user experience design brief was to:

  • Improve information architecture (IA) and search visibility
  • Improve layout and template structure
  • Improve NRW’s link with recreation in Wales
  • Improve delivery of content on mobile devices

How we approached the project

Improving the site structure

In the initial stages, we went back to basics which generally involves printouts, sticky tape, a blank wall and a huge pile of Post-it notes – it’s all very analogue.

We took the existing IA, adding each key section to a stack of Post-it notes and recreated the sitemap of the website on the wall. Over time we organised, re-organised and chunked information together, rethinking ambiguous terminology and section headings and tested, iterated and simplified the user journeys.

Our final IA decisions were influenced by NRW personas (based on real users and analytical data) which gave us ‘top task’ journeys to simulate when testing the final IA structure. The new IA was shared with the digital team and stakeholders at NRW and following collaborative feedback and improvements, we developed a revised version which we validated by performing an on-line Tree Tests (Tree Testing is a technique used to evaluate the findability of content within the information architecture).

For a typical Tree Test, participants are given a task and are asked to navigate through a tree menu structure to identify where they believe they would find an item or piece of information. The Tree Test study gave us positive results and invaluable, unbiased feedback on areas for improvements such as cross linking or simple labelling changes.

Sketch to prototype

With the new IA tested and iterated, we could move onto the visual phase, rapidly creating wireframe templates using industry standard prototyping software, balsamiq mockups.

The key to success in this phase is to temporarily ignore colour palettes, imagery and graphic design and concentrate on the usability of the layout – the visual hierarchy of elements on the page and the terminology used, to assist the user.

The NRW website holds a vast amount of information and although we needed a suite of templates to suit different types, we were conscious that to many would reduce the benefit of introducing memorable design patterns across the website. To befit the wide-ranging audience with varying online capability, we created 3 key template types: Homepage, Service and Recreation.

The Services template type would be used for sections that had a specific end goal or transaction, such as a payment, licence or permit renewal, or informational content, such as what to do in response to flooding. The Services template group has minimal graphic embellishments and typically wouldn’t require photography or promotional areas.

The Recreation template type would, in contrast to the services template, have more visual appeal, allowing more use of imagery and encourage the user to explore and interactive with section content. This template group would be used for campaign pages and sections such as ‘Days out’: A section that showcases places to visit in Wales, including NRW’s visitor centres and attractions.

The Homepage combines elements from both the Service and Recreation templates and displays an oversized search box, flood warning data and a ‘most popular’ listing, dynamically generated based on user’s top-tasks.

Natural Resources Wales templates

High fidelity graphics

With the IA and wireframes finalised, we started the visual design to develop a single creative approach that has two distinct roles: 1. Simple service design with minimal visual clutter 2. A visually rich campaign template with imagery and interaction.

So these template types could exist together in one website, we created a masthead full-width strip that would appear across all templates. The masthead strip contains the page heading and intro paragraph. Attributes such as background colour and the branded graphics can be toggled on or off within the CMS giving the administrator control of the level of creative detail. This flexibility allows the services template to be simplified while retaining the consistent global masthead.

A strong brand and compelling photography of Wales allowed our design team to create dramatic campaign and centre pages for the ‘Days out’ section, aligning NRW’s recreation pitch with any modern tourism site online.

The inclusion of custom web fonts means the online presence can faithfully replicate the offline collateral, building stronger brand recognition and the use of custom SVG icon sets allow the NRW team to add high quality iconography as the content develops.

A fully responsive design has been rolled out for the new website with much of our design time focusing on mobile users, ensuring a truly inclusive experience across devices.
Natural Resources Wales mobile

Agile and smooth running

With any large project, careful management helps keep things on track. The project management team at S8080 worked closely with NRW during the planning stages to ensure all risks where highlighted and mitigated before any work started.

With many stakeholders and users feeding into the process and NRW’s existing development team, Method4 working on the build, collaborative working and meticulous progress tracking was critical to the success of the project.

Together with NRW, our project management team developed an agile approach to the management of the project. In the first instance, a product roadmap and a series of sprints (work phases) split into daily and weekly tasks were planned. These sprints would be reviewed internally daily, reviewed with NRW weekly and a stakeholder ‘show and tell’ meeting would be held every 2 weeks.  When possible, the meetings would be video or Skype conference calls with screen-share walk-thoughts as the UX design progressed.

Our design team also use online collaboration apps such as InVision to prototype designs and collect group feedback at key review stages of the project.

The S8080 team are extremely proud of the part we played in delivering this new user focused website, working closely with the digital team at NRW and the technical team at Method4 to deliver our ambitious, original vision in a very tight timescale.

naturalresources.wales

“This was a big team effort, with lots of input from colleagues from different teams and feedback from over 100 external customers that took part in our online survey. We’ve been lucky to work with two fantastic local digital agencies – the brilliant team of designers at S8080 in Swansea and the excellent developers at Method4 in Cardiff.”

Heledd Evans Digital Manager

Jun 6 2016

Haringey Council. Tottenham Regeneration website

tottenham-mockup-1

Haringey Council has ambitious regeneration plans for Tottenham, with schemes underway to address local people’s priorities for more job opportunities, better housing and improved transport links.

As the programme’s momentum grew, a separate website was needed, away from the main Haringey.gov.uk council site, with distinct sections of content for investors and developers, residents and local business audience groups.

The Haringey Council digital communications team had done a lot of thinking around the shape of the IA and the types of content they needed to fulfil their aims and provide a user centred experience. They had decided on the open-source Drupal CMS (with demanding security requirements) and had a well-considered creative brief prepared for our alignment sessions. A perfect start to the project!

Here’s how we designed and developed the council website

  • Evolved their initial Information Architecture (IA) and key user journeys
  • Developed a wireframe paper prototype
  • Created design routes – homepage and lower level pages with rapid prototyping to arrive at the final designs
  • Built accessible and adaptive page templates
  • Set up and configured the core Drupal CMS and implemented the site structure, glueing in the templates and developing the workflow for their publishing team
  • A news system was integrated and XML feeds to display events were set up
  • MailChimp newsletter functionality was embedded
  • Content was loaded and checked and our QA team tested the site ready for soft launch
  • One of our project managers and a Drupal developer spent a day with the Haringey team, training them to use their new Drupal website
  • The site was made live and the Haringey team have a 12-month support contract to help them with Drupal upgrades and site improvements

You can see Haringey Council’s Tottenham Regeneration website at http://tottenham.london/

tottenham-mockup-5

What makes Open Source systems such good value for local government websites?

  • Free – no licence costs for the CMS software
  • Agile and moveable – you are not tied into your web development agency
  • Vast (and fast moving) open-source development communities
  • Modular systems – thousands of 3rd party extensions to further keep costs down
  • Regular security updates by a highly active community
  • Proven functionality – tried and tested by the likes of No.10, The Whitehouse, Heinz…
  • Fully featured – whatever functionality you want on your site, the chances are that there’s already an extension for it

If you’d are considering an open source CMS for your organisation, take a look at our information on Drupal and Umbraco, or contact us for a friendly chat or email info@s8080.com.

tottenham-mockup-2

tottenham-mockup-3

May 24 2016

S8080 help Nottingham City Council with new Umbraco website

Nottingham city council Umbraco website homepage
When Nottingham City Council appointed us via G-Cloud, we were delighted to learn that they had chosen Umbraco, the open-source CMS, to develop their new online self-service platform.

As an agency, our public sector clients tend to request either Drupal or Umbraco. The Council had spent time during their discovery phase investigating the suitable platforms for a large, busy local government website and Umbraco matched their requirements exactly.

Channel shift is becoming increasingly important for local government as digital transformation strategies are being realised in order to improve customer access to council services. Umbraco (and Drupal) are both powerful and flexible enough for the most demanding council and open source means they don’t pay a single penny for the software. This frees up budgets for the important stuff: user experience (UX), engaging designing and robust, secure functionality.

Nottingham city council Umbraco website mobile

As well as the obvious cost benefits of digital self-service, modern local authority content management systems allow a mobile first approach. This means users can undertake online transactions like arranging waste collections or making planning applications using their phones or tablets as well as their laptops and computers, making life easier for users and the Council. From the outset, our brief was to create a “great looking”, user-friendly, customer centred experience that could stand up against the very best local government websites in the UK. Here’s how we designed and developed the Council website:

  • We co-designed a clear top-task focused homepage
  • We broke down the content into compartmentalised areas to simplify the information
  • The Council’s brand colours were used consistently for content hierarchy
  • We developed a user-friendly column based dropdown navigation
  • The site was designed to be extremely accessible and fast to use
  • The CMS platform was specifically designed to enable the Council to add their own micro-sites
  • The mobile first templates we developed and tested across multiple devices
  • Our Umbraco technical developers Implemented Nottingham City Council’s preferred search solution provided by Funnelback
  • We created a suite of content blocks in which to build the content pages
  • We made it super easy for the Council’s in-house team to further develop the site by componentising and templating the functionality so it can be updated separately
  • We set up the server architecture and deployed the website which  is hosted on Microsoft Azures’ scalable cloud hosting platform
  • We will be providing ongoing maintenance and support, but typically 3rd level technical Umbraco expertise, so the day to day support on the website will be handled by Nottingham City Councils IT team

To find out how your organisation can use an open-source content management system for customer centred digital transformation, take a look at Umbraco and Drupal – two extremely capable and extensible CMS’s.

 

Nottingham city council Umbraco website screens

 

nottscc-mockup-large-4

 

May 22 2013

Information architecture – content audits and inventories – why we bother and some quick tips

This post is about content audits and inventories, tools we use as a key step in the reshaping of the information architecture and content strategy on any web design project. It has to be said they are an essential but often daunting first step of a big old redesign, restructure or migration…IMAGE of information architecture work shop

Why bother with content analysis, content audit’s and content inventories?

When we redesign or restructure websites the aim is to provide users with better information, user experience and to hit key organisation metrics. To do this we need to know what content there is on the current website, then with some user research we can provide recommendations for gaps, where content may need to be reworked and where we think content can be removed to de-clutter.

It has to be said it is not the task any UX professional looks forward to – but as we work through the site and create a content audit or inventory (typically hundreds or thousands of rows in a spread sheet), we get really under the skin of the website and the content – a crucial step in the UX design process.

The content audit – a sample of the website content not a full inventory

We use the content audit when sampling an existing site in order to inform the UX phase.

The content audit gives a really good feel and flavour for the content of the site, it doesn’t guarantee to have every piece of content logged in a spread sheet – that’s what a full content inventory is for. The content Audit does allow us to understand what is in the existing site so we can reorganise it along with user feedback and the organisation’s objectives.

All of the results are logged in a spread sheet along with annotated images – we typically start on the home page and follow the key links on the page – the key sections of the site. Then for sub sections of the website’s IA we do the same – follow the key links, and then we look at high traffic areas of the web site too.

When we are auditing the content we will be looking at qualitative attributes, like readability, relevance to audience, things that are going to require human or editorial input. We also give a description of the content and we categorise the content – allocating it to themes or genres.

The content inventory – a monster spread sheet

We create a content inventory when we are performing a migration and have to account for every item, the output is a huge spread sheet. The content inventory is a detailed page by page log of all the pages in the site, it helps us to keep track of all of the content and map it to a revised IA, and of course helps us to estimate the amount of effort needed for the migration.

The content inventory is more quantitative than the audit and includes: page title, current URL, H1 tag etc. The content inventory will then evolve into a core part of the web editorial calendar and on-going content strategy by manually adding the content owner, person responsible for migrating and updating the page, review period, when it was published, date it was last edited, ROT status and new Location that we are migrating it to.

For inventories we’ll use crawlers alongside a manual inspection and audit of key pages.

What about content analysis on really large sites – 5,000 pages plus?

We are regularly asked to help on big websites with between 5,000 to 20,000 pages, sometimes XXL websites that exceed 50,000 pages in multiple languages. When we work on larger sites we will typically do an inventory including every page on the site using automatic tools and then layer on top a human audit of the top 2 or 3 levels, plus exceptions, and of course we look in detail at high traffic areas of the site.

Ok that stage of the UX phase was painful… but key

Now we really know what is on the website when layered into the user research (user surveys and card sorting) we can really provide solid recommendations to shape the information architecture – and work through the really fun parts of the user experience process!

If you would like to chat about how S8080 could help improve your web design and user experience, call 01792 485566 and ask for me, Matt Howard, or email, info@s8080.com.

Jan 22 2013

Web design for CAMHS

Surrey Camhs website design by S8080

 

Over the past couple of years, we’ve worked on several web design projects for CAMHS organisations (child and adolescent mental health services). CAMHS websites bring there own special set of challenges due to the young audience and the sensitive nature of the subject matter.

Our first was the Surrey CAMHS website, which was seen as groundbreaking and showed what could be done when a user centred design approach was adopted. We then designed and built two websites for Coventry and Warwickshire NHS – the Moodleton site for younger children and a mobile app based web development for young adults.

Just before Christmas, we started work on another CAMHS web development for a third NHS Partnership trust (more information soon), with a series of alignment meetings with the comms team and the practitioners.

These meetings help us shape the personas, information architecture and web site wireframes and are a valuable forum for brainstorming ideas for engaging the young audiences from the actual people who work with them to overcome their problems.

Content management systems

All of the web sites use a content management system (Drupal, Umbraco, WordPress, even SharePoint in Coventry and Warwickshire’s case) to enable the comms teams to update the website without having to ask a web design agency.

Having a CMS website also means the practitioners can offer up to date advice and information to parents, carers and professionals as well as the young people quickly and efficiently.

The use of open source CMS software means that available budget can be used to develop interactive elements and even mobile website design rather than hefty software license fees.

camhs moodleton website design by S8080

Branding

As you can imagine, each NHS Partnership Trust has very strict brand guidelines, but it’s often the case that their brand agency aren’t digital experts, so it falls to us to extend their brand identity to work well online and for the young target audiences.

During our stakeholder meetings and requirements gathering, we often hear “we don’t want it to look like an NHS website – it puts the young people off”. This is where creative design, carefully balanced with adherence to the brand guidelines comes into play. You can see above how the NHS brand is placed, but the focus is on the creative, characters and the sub brand.

Coming to CAMHS

coming to camhs website design by S8080

Being referred to CAMHS is a difficult time for young people, their carers and families, and a little consideration of how they are actually feeling (and this is where the practitioner’s input into the web site design is so valuable) can help them understand why they feel the way they do, how they can be helped and who will help them.

If you would like to chat about how S8080 could help you design your CAMHS website, call 01792 485566 and ask for me, Chris Cowell, or email info@s8080.com.

Sep 28 2012

Royal College of Anaesthetists – Drupal site goes live

The Royal College of Anaesthetists Drupal website design S8080

 

S8080 recently launched a brand new website for the Royal College of Anaesthetists, using the open source Drupal platform.

This is one of several larger Drupal sites we’ve rolled out this year as our clients are seeing the benefits of building on an open source platform – including WordPress for the smaller websites and Umbraco when we need to develop bespoke functionality using the Microsoft .NET framework.

The RCoA team had a very well defined set of requirements and an enthusiasm for the open source ethos. We worked with them to refine the project scope before deciding on the final CMS – and Drupal came out on top.

drupal logo S8080

The website uses some of Drupal’s more advanced features and modules and functionality includes a searchable document store with filters, forums with secure areas and a calendar and events system.

It’s always a pleasure to receive positive feedback at the end of a major project and after launch we had the following email from Bob Williams, The RCoA Professional Standards Manager…

”We have received many compliments about the new website from College staff, College officials, clinicians, other medical colleges and outside agencies. There is no doubt without the superb working relationship we had between our teams; we would not be where we are today. Please pass our thanks on to all your team members”.

Sep 24 2012

Engaging with audiences

redseal-engaging

We are currently working on several very large website design and build projects for NGO and public sector clients. Our User Experience (UX) team have been travelling the length and breadth of Britain undertaking stakeholder engagement workshops, focus groups and in-depth interview sessions.

These engagement exercises enable us to gather complex requirements to ensure the new websites are designed with the user experience at their heart.
During the design phase, lab based usability testing plays a very important role and allows us to hone the wireframes and creative treatment.

The unique and robust UX processes we have developed have been vital in offering publicly funded organisations real value for money – saving egg-on-face and costly re-dev’s due to websites not performing as well as they could.

And for smaller organisations…

We are now adapting our methods and tools, scaling them to enable us to offer this level of UX service to organisations and businesses of all sizes, so if you would like to take a user centered design approach on your next website project, please get in touch with Matt or myself.

Nov 10 2011

A new website for the National Assembly for Wales

Late last week, after many months of hard work, we launched the brand new website for the National Assembly for Wales.

Well, I say ‘new’…

Earlier this year, we won the contract to redesign and redevelop the NAfW website www.assemblywales.org, but instead of implementing a new content management system, we would be working into their legacy CMS system. This would give significant cost savings.

Usability

One of our tasks was to improve the usability of the website. We used many sophisticated techniques to ensure it would be easy to navigate. We started with a content audit of the existing site to help us determine the depth and breadth of the site and categorise the types of information that the Assembly needed to present (and the stuff they didn’t!)

Then we developed a suite of personas – based on real people who use the website – and scenarios of use and user journeys for each of these. This ensures that everything going forward is based firmly on a User Centred Design approach. We interviewed many types of users, including AMs, journalists, and members of the public to find our exactly what they needed and how they wanted to use the site.

Information architecture

Once these two stages were complete, we could then use the findings to redevelop the information architecture (site map) and create a set of wireframes that explain each key page in detail and the way the users will interact and travel through the site – making their journey as easy as possible. Wireframes really do help save time and money on all web projects as amendments can be made quickly and cheaply, before the ‘look and feel’ or coding is developed. It’s a very agile and cost effective approach.

Getting creative

Then we moved into the design phase. After consultation, we presented three distinct creative routes. The Assembly project team gathered thoughts and feedback and the final creative direction was decided upon. This design was then implemented into the CMS, and the resulting templates were accessibility tested to ensure everyone would be able to use and enjoy the content on the new site.

Then came the mighty task of applying the design to the content – thousands of pages of information.

After one more round of accessibility testing, the new site was launched without a hitch thanks to the hard work of many people from S8080, The National Assembly for Wales, and our project partners Method4. Thank you everyone, it was an immense task.

You can see the new website at www.assemblywales.org

We’re very grateful to S8080 for the hard work they’ve put into this project, and we’re immensely pleased with the final product. From the outset, they stood out head and shoulders above their competitors, with their down to earth attitude and excellent project management skills. They took the time to understand our needs as an organisation, and now the result is a clean and crisp design and a new site architecture that is helping visitors to our site find what they are looking for and enjoy the site experience.”

Iwan Williams, Media, Brand and e-Democracy Manager

National Assembly for Wales

Nov 24 2010

Our work, Judiciary of England and Wales

e were  really lucky to work on the UX and web site design of the Judiciary of England and Wales web site recently, and here’s the result:

Judiciary of England and Wales web site design and UX

Aug 24 2010

Compare products interface from apple

Apple's new product comparison interface
Apple have added a really nice new ‘compare products‘ section to their online store. In typical Apple style, it’s well designed and easy to use. You can select up to three products to compare, chosen from a Javascript overlay, which are then displayed in columns so you can quickly compare their features.

My favourite part of the design is the way the table changes as you scroll down the page: the product names and images always stay at the top so you can easily remember what you’re comparing, and the table’s various headings ‘collapse’ as you scroll past them. It’s a bit hard to explain, so go and add a few products and take a look for yourself.