| Nottinghamshire County Council - Notts Outdoors

NottsOutdoors | Outdoor & Environmental Education website

Visit Notts Outdoors

Introduction

A few years ago, the Outdoor & Environmental Education service maintained a small online presence under Nottinghamshire County Councils website.

Their text heavy pages were being visited infrequently, also their content and positioning were confusing as it remained unclear who the pages were aimed at. I was involved in a redesign and rebrand of their identity, their content and the services they provided to end users.

About the project

Looking at the existing pages, the goal was to provide a new identity and website called NottsOutdoors for a targeted audience , promoting the service and the offers available.

The service provides outdoor learning opportunities for young people in Nottinghamshire by working with schools, colleges, youth groups and employers to enhance the lives of young people.

The old website design

Text heavy | dull layout with minimal visual impact

A text heavy, dull layout with minimal visual impact

Centre pages | contains useful tabbed information

Centre pages containing useful tabbed information

Text heavy | information about centres but no images

Information pages for centres are too text heavy and have no imagery

Centre pages | broken down in tabs but very text heavy

The use of tabs on Centre pages is good but again, very text heavy

It was clear a rebrand of their identity was required . The existing site consisted of large sections of text heavy pages within the Council website, difficult to find or promote.

The service needed to better promote their offering to the public through a more visually responsive website, showcasing the host of activities available and the possibility to book trips targeted at their users.

Users and audience

| One of the existing problems to overcome was how the site was being promoted alongside how easy content would be to find for a user

Discussions with stakeholders and potential users took place to identify key factors:

Luckily there already was an existing user base for the site.

They were clearly identified as people looking at activities with the intention to book day trips or longer trips. Primarily we were looking at teachers in schools who already use the existing site to book activities for their classes. Other users consisted of parents who would have the ability to book activity days out as a family.

My role

After speaking with potential users and shareholders as a team, analysing research gathered and looking at content, I was responsible for designing a new, visually impactful website.

This took on the form of multiple discussions with the service, initial wireframes and presenting design routes. After discussions with teachers and parents, we determined different user flows and possible user journies that could be taken.

Using Adobe Illustrator/ XD, multiple wireframes illustrating user flow were designed, alongside Adobe Photoshop visuals and HTML responsive web build.

Brainstorm | Early whiteboard sketches | Wireframe userflow

01 | First homepage wireframes looked to move away from text heavy pages and adopt a more visually led layout

First homepage wireframes looked to move away from text heavy pages and adopt more of a visually led layout

02 | Feature layout continued the visual theme providing variation of content with photo and video

Early sketches of possible Feature page layouts

03 | The Activities page designs gave many iterations of layout and design including hero images and search filters for different activities

Different variations of Activities layout with side panels

01 | Variation on the homepage design with a subtle navigation but still retaining a more visual theme

Alternative sketches of possible Homepage layouts

02 | Layout for one of the sections showcasing the different elements that could be included (photos and video)

Alternative sketches of possible Feature page layouts

03 | Homepage design went through a few iterations based on the feedback received from user research

Alternative sketches of possible Homepage layouts

01 | Training page user flow leading through to a chosen course

Final sketches of Homepage layouts were built in Illustrator

02 | Users are provided with options of courses to pick from

Final sketches of the Training layouts were built in Illustrator

03 | In this journey, Health and Safety offers multiple choices of courses to pick from

Training courses layout were built in Illustrator

Colours | branding

Testing colour schemes | After exploring many colour schemes and discussing what the site represents, an Earthy colours scheme was created

Many variations for a colour pallette came together. AN Earthy tone was designed

Testing colour schemes | Working from the first theme, I tried a few earthy palettes to use on different page layouts

Different schemes were tried and tested on multiple devices to see how the colours worked

Design | Homepage and training course userflow

01 | It was always the intention to use a bold striking photograph on the homepage to make a big impact

Final Homepage layout

02 | Content pages worked very well through the fantastic photography we were provided alongside the complimentary colour schemes

Generic content pages were given set templates to start creating

03 | The Training homepage works well through the use of photography again, but also through clear content providing ease of use for the user

The Training homepage offered users to pick areas of interest

04 | Once an area is chosen, the user is led to a courses page providing details on every course available with the option to make a booking

Each Training area would contain a series of courses a user could select

Responsive | Family Adventure Breaks layout

Responsive layouts for Adventure breaks

Responsive | Families and Individuals layout

Responsive layouts for Families and Individuals

Responsive | Duke of Edinburgh Award layout

Responsive layout for the Duke of Edinburgh award

Launch | Impact

I unfortunately had left the business before the launch of the new design and my involvement on the project had come to an end. Fortunately, the ongoing team continued to fine tune/ iterate parts of the design and user flow. There were also ongoing functional/ aesthetic amends to be made to a new booking system handled by a third party.

Although I was not part of this process, I was proud of the UX and design work I put in place and it is great to see a working end product that is live and surpasses the old design in terms of usability and functionality.

Ξ Work