RESPONSIVE WEBSITE

Nacro

Digital innovation
for a leading social justice charity

Digital innovation for a leading social justice charity

N-hero
AGENCY
Moove Agency
CLIENT
BGI
SECTOR
Charity
YEAR
2016

Nacro is an established charity with over 50 years' experience as a champion of social justice. Nacro houses and supports vulnerable people.

Nacro offers education and skills for young people outside of mainstream schooling and helps people in custody and the community to reintegrate into society, helping with housingmental health and substance misuse issues. Nacro also supports people to overcome barriers presented by their criminal records and to move on from previous mistakes. 

5
Housing service landing page
OVERVIEW

Nacro sought a partner to rebuild their nacro.org.uk website to create improved functionality and user experience.

Nacro's needed a bold sector-leading online visibility to show their skill and expertise in helping vulnerable people.

Their online presence was weak and limited compared to the high level of expertise and skills of their work on the field. The new website will help to build strong relationships with new partners (organisations from the public, private and chairty sector) and reach a larger audience of people looking for help (young people and adults). There was a need to greet users with a modern and uncomplicated experience across devices and screen sizes which, in turn, would offer higher engagement, interest, and ultimately more satisfaction for their target audiences.

THE PROBLEM

Poor mobile experience, chaotic information architecture and old fashion visual design.

The website was not mobile optimised, causing a poor user experience on mobile devices. The discoverability of Nacro services pages was very weak. The old services finder tool was difficult to use due to a limited set of features. Also, the services results page was able to show results only in a small map (not in a list view) which was not so user-friendly.

old-na
Old website design - NOT RESPONSIVE

The IA was not very organised and not updated, reducing user engagement and discoverability of relevant content. Video and images bring more empathy with users, but the use of media content (especially video) was inadequate compared to the competitor's website.

Moreover, the visual design of the website was dated compared to the more modern UI trends and not very appealing and pleasant for users.

PRIMARY WEBSITE GOALS
  1. Organise the content around the three Personas
  2. Simplify the services discoveribility in the site
  3. Make the website responsive
  4. Create a bold website visual design language 
APPROACH AND SOLUTION

How can Nacro get ahead in the charity competitive sector and meet users needs and business goals?

MOBILE DESIGN
The ux research  points out that 50% of Nacro's users come from mobile devices. So a mobile-first approach was the starting point to ensure a seamless and more engaging users experience across all devices. 

INFORMATION ARCHITECTURE
After mapping all the website content through a content inventory and  a sitemap analysis, I have worked on the new IA and menu navigation to re-organise the large amount of content.
I introduced a sidebar into the new page layout with two primary purposes:
- Have a room for a secondary menu which help users to browse easier the site and have always a sense of where they are on the site and where they can go from a page/section
- Have a place to display relating content (videos, reports, publications, case studies, news, events) to keep the users engaged while browsing the site.

information
IA Docs, Axure wireframe , sitemaps

SERVICES FINDER 
I have re-designed from scratch the Services Finder tool to improve the services discoverability. The users have the option to switch between a list view and a map view and see all relevant info at hand. The users can search through services themes and location ( by postcode, town or area). The tool gives instant results and gives you the option to filter your search by sub thems to narrow down the results.  I have proposed few solutions sketching some wireframes and through user testing, we selected the most usable UI.

Service Finder: Axure Wireframe - High-Fidelity Mockup

QUICK GUIDE
I have also created the new (predictive) tool "Quick Guide" to give the users quick answers to the most common questions and direct them to the appropriate section of the site. The questions and answers were mapped through users interviews, surveys and listening Nacro employees who have direct contact with the users. The users can choose the starting point of their search and the tool will guide them thorugh a few questions to re-direct them to the varoius desctins of the website such as:  Housing: Policy and research,  Education,  Justice, Health, Resettlement Advice, Jobs.

Quick Guide Tool: Axure Wireframe - High-Fidelity Mockup

VISUAL DESIGN
To create more empathy with the target audience, I proposed the use of imagery of real Nacro people and removed istokimages. We introduced iconography as well to reinforce the copy messages. Ultimately I developed a web style guide to keep the visual design consistent and easy to implement when launching new pages.

nc-bottom
CLIENT TESTIMONIAL

Roberto is a design expert who is able to turn a specification into a visually appealing, user-friendly website. I commissioned Roberto as part of Moove Agency to design a corporate website which was intended to be the best in its sector. A team worker by nature, Roberto worked tirelessly with a small number of developers to produce exactly what was required. He's personable and friendly, presents a convincing pitch and gains a thorough understanding of the brief from the earliest days of the project. He's been able to work through his original concept on a very practical level with our team to implement every detail correctly.
Despite the complexity of the challenge, the final product is simple to use and very successful. 

Roberto is a design expert who is able to turn a specification into a visually appealing, user-friendly website. I commissioned Roberto as part of Moove Agency to design a corporate website which was intended to be the best in its sector. A team worker by nature, Roberto worked tirelessly with a small number of developers to produce exactly what was required.

nt
MINUCHE MAZUMDAR FARRARM
Digital Communication and Brand Lead

I am available for freelance work

I am available
for freelance work

If you want to talk about a new project feel free to drop me a line!

If you want to talk about a new project or just want to say hello, feel free to drop me a line!

© 2019 Roberto Marzocchetti. All rights reserved.