RESPONSIVE WEBSITE
Nacro
Digital innovation for a leading social justice charity
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 housing, mental health and substance misuse issues. Nacro also supports people to overcome barriers presented by their criminal records and to move on from previous mistakes.
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
- 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 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
- Organise the content around the three Personas
- Simplify the services discoveribility in the site
- Make the website responsive
- Create a bold website visual design language
APPROACH AND SOLUTION
How can the new website 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.
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":
- The users get 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
- I proposed the use of imagery of real Nacro people and removed istokimages to create more empathy with the target audience,
- 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.
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.
MINUCHE MAZUMDAR FARRARM
Digital Communication and Brand Lead
â‹®