Work - NFER

National Foundation for Educational Research

NFER-Logo.png
 
 
 

NFER required a new website that was fresh, contemporary, engaging and that would encourage users to spend more time on the site

 
NFER-mobile-mockup-600px.png
 

ROLE: INFORMATION ARCHITECTURE, user & COMPETITOR RESEARCH, WIRE FRAMING & VISUAL DESIGN, PROTOTYPING, TESTING

01. Understanding the Opportunity
02. Discovery: user & competitor research
03. Defining the user need: personas & user flows
04. Developing the product: ideation, testing & iteration
05. Delivery & next steps

01. Understanding the opportunity

NFER is registered charity that provides research and related services that improve education. As the UK’s leading independent provider of education research, they felt their current website was out of date in terms of usability, device compatibility and design. They required something fresh, contemporary and engaging, that would encourage users to spend more time on the site, visit more regularly and allow users to purchase educational resources directly from the website. The key goals of the site were to raise the organisational profile online as being modern & digitally savvy and increase the engagement of education stakeholders.

02. Discovery

User Research
To kick this off we got in a room with NFER employees, some of their users and our design team. Together we identified the pain points on the existing NFER website. These included:

  • The navigation is disjointed, unintuitive and not user-friendly. The website’s content is not grouped or categorised intuitively to suit common user journeys.

  • Website is not fully responsive - and 25% of all website traffic is on mobiles and tablet devices.

  • Poor visual appeal because the brand imagery is poor & inconsistent. The logo has not changed in 70 years and imagery and colours used on site are also dated.

  • Tone of voice is old-fashioned and doesn’t “connect” strongly enough with our target audience. This doesn’t reflect desired brand values (Independent, Influential, Expert & Insightful).

  • No client testimonials, social media links, newsletter subscription or trust signals.

Competitor Research
Alongside our own research, NFER created an internal employee survey where employees submitted a number of websites that they felt should be considered when redesigning NFER’s website. We went through and analysed the designs in terms of the following areas: Layout, Navigation/UI, Data Entry, Help & Validation, Visual Design & Accessibility.

03. Defining the user need

User Audience
The new website needed to account for the complex range of users’ expectations. We had a full day workshop with NFER to define their key user groups and came up with two key groups.

User flows & site mapping

The format and content of the new website did not have to follow the existing structure. We begun mapping out user flows with postit notes on the wall, then gradually got into some more heavy site mapping, as demonstrated below.

Part of NFER site map.

Part of NFER site map.

 

04. Developing the product

Ideation, prototyping and testing
During this stage we were started on paper, using rapid ideation sessions such as crazy eights to come up with creative solutions that could meet the users needs identified. Once satisfied we created our first black and white prototype in Axure to make sure we had a solid structure and content in the right place. We then took this prototype into lab testing and went through several rounds of iterations with the client to constantly improve the design based on user testing.

Along side the prototype, I created three visual styles to test and pitch back to the client. Each with it’s own unique flavour and theme whilst adhering to the brand guidelines.

Desktop black/white prototype for multiple pages.

Desktop black/white prototype for multiple pages.

 
I designed a home page and content page for each of the three visual styles to present back to the client.

I designed a home page and content page for each of the three visual styles to present back to the client.

NFER Colour Palette and fonts.

NFER Colour Palette and fonts.

Concept 1 - FRESH GEOMETRICS  Playing it safe, on brand. Bold, authoritative, confident, minimalist, high contrasting, overlays and geometric.

Concept 1 - FRESH GEOMETRICS
Playing it safe, on brand. Bold, authoritative, confident, minimalist, high contrasting, overlays and geometric.

Concept 2 - FEELIN’ LIVELY  Using the brighter accent of the secondary colour palette. Modern, playful, lively, and something a little bit out of the square.

Concept 2 - FEELIN’ LIVELY
Using the brighter accent of the secondary colour palette. Modern, playful, lively, and something a little bit out of the square.

Concept 3 - NEW KID ON THE BLOCK  Highly photographic with big blocks of colour. Forward thinking and making a statement. Some use of the secondary lime green for emphasis.

Concept 3 - NEW KID ON THE BLOCK
Highly photographic with big blocks of colour. Forward thinking and making a statement. Some use of the secondary lime green for emphasis.

 

05 Delivery and next steps

Concept 3 was the desired visual route chosen by the users and the client. The general feel was that it was modern, easy to use, forward thinking and most on brand. We completed a fully responsive website that adhered to the NFER Brand Guidelines, as well as two prototypes (high fi and low fi) used for testing and proof of concept. Take a look through some of the final key screens in the carousel below, the site is now live here

 
Finished Mobile screens for Home, a content page, and an example of the sign up form.

Finished Mobile screens for Home, a content page, and an example of the sign up form.

 

Results
Unfortunately I don’t have any key metrics on the success of the new NFER website as I have since changed jobs. However, I did know NFER and the agency would’ve monitored the success of the website via a number of online services.