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

Apr 20 2017

Sparking innovation

Be the Spark Wales

The Welsh Government needed a web site for a campaign that would bring together people with great ideas and facilitate a movement of entrepreneurship and innovation across Wales.

Nine of Wales’s most prominent business leaders are working with the Welsh Government as part of their ‘Be the Spark’ campaign, to bring together forward thinking people throughout various sectors.

The website needed to meet the expectations of the Welsh Government whilst achieving the goals of the nine panel members. As the web design and digital agency for the project, we worked closely with a leading marketing agency who were tasked with implementing the campaign as a whole.

Whilst the initial phase of the project set out the objectives of the movement, it needed to be implemented with the long-term vision for the project in mind. Ultimately the goal is that the project will organically grow a community and culture of innovation across Wales.

Be the Spark Wales

The initial impact of the site had to engage and inform the audience. A prominently displayed video background combined with a video explainer was used to immediately engage the user and introduce the Be the Spark concept. As one of the first sites to implement the new Wales brand, the new website had to adhere to the brand guidelines whilst at the same time finding its own identity. The overall result is a modern, impactful and engaging site that is in line with the expectations of this user group.

With the longer-term goals of the project in mind, engagement with the site was a critical factor in creating traction for the movement going forward. With a diverse range of user groups from business to academia, it was critical to serve content that was pertinent to each type of user. The strategy of the information architecture was to create a clear user journey for each distinct user group, allowing for relevant information to be served and resulting in increased engagement.

The site was built using Drupal 7 which gave the content editors a stable, scalable and easy to use content management system. The site is fully responsive and CSS3/HTML5 compliant. Using CSS3/HTML5 enabled smooth scaling, colour changing image transitions. Flexible and fast loading carousels contributed to the modern, fluid experience.

S8080 are very proud of how the site came together in such a short time and to such a high standard. We look forward to working on future phases of the project and helping to drive innovation and entrepreneurial culture across Wales.

Apr 18 2017

Open for business – Trade and Invest Wales

Trade and Invest Wales

Working with Welsh Government, S8080 were tasked with building a website that showcased the best in business across Wales. Trade and Invest Wales needed to be designed for a global audience to demonstrate Wales as a place of innovation and opportunity.

After producing wireframes for the various sections of the site, S8080 worked closely with the branding agency to advise on the initial designs, before creating a suite of templates based on a user centred design approach.

Trade and Invest Wales

To present a consistent user journey and help audiences prioritise the content, the templates utilise a combination of a grid system of content blocks and a bespoke article view. This gives the user a clear navigation system and sense of place within the site.

The main purpose of the site is to engage the user with the Welsh business success stories. To increase engagement a variety of content types are used throughout the site. The grid system was effective in housing multiple content types including statistics, editorial and video content.

Trade and Invest Wales mobile

With the content primarily B2B, the new Wales brand has been used in a way that’s more appropriate for a business audience. The minimal colour palette, uppercase headings and high quality photography all contribute to the professional, confident appearance. By presenting all the images as double density (Apple Retina display resolution), the quality and impact of the photography is maximised on supported devices.

To give a targeted, personalised experience, the contact section utilises html 5 geolocation technology to customise the user’s experience. With Welsh Government offices around the world, the user is presented with the details for the closest office to their location when making an enquiry.

By engaging the user with great content and offering ways to connect, whether directly or through an event in their area, the site showcases Wales as a great place to do business.

At a time when a global outlook is more important than ever, S8080 are proud to be part of such a critical project for the future of Wales.

Mar 23 2017

S8080 launch revamped Wales.com Drupal website

Wales.com

With the recent launch of the exciting new Wales brand, Welsh Government’s Wales.com team wanted to align their website with the clean, confident and outward looking appearance of this new identity.

As well as giving the site a fresh new look, the team wanted to look at other UX and Drupal improvements that would help enhance the user’s experience and re-focus the site.

Wales.com

Although the content on the existing site was sensibly grouped making it easy to navigate, an incredible range and number of articles were hidden away as 3rd level content. A major consideration of the redesign was to surface some of this valuable content at a higher level so it was more immediately visible. This allowed us to present engaging images and articles on the homepage, but meant that we needed to structure the content in a way that still accommodated for the specific audience groups.

Being one of the first sites to utilise the new Wales branding system made it a straightforward task to give the site its clean, fresh appearance. By grouping the content using the brand’s new colour palette, colour based segmentation was used homepage and throughout the site to help the distinct audience groups.

Wales.com

From a technical point of view, the major task was dealing with the amount of content on the existing site. Over 500 pages of content needed to be migrated into the new Drupal structure and styled, without the need for major changes to the mark-up. Our Drupal development team also built a bespoke full browser width multi-tile carousel which works across a range of browsers and devices. This means the site can be enjoyed in its entirety on everything from a desktop PC to an iPhone.

Take a look at the new Wales.com Drupal site here.