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 content types, we were conscious that too 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.
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.
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 were 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
