NFER required a new website that was fresh, contemporary, engaging and that would encourage users to spend more time on the site
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.
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.
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
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.
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.
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
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.