Aims and Objectives

The original Action for Children website had  grown over a number of years with micro sites and outdated content and an IA that was 12 levels deep in parts. The complex IA and poor user journeys was making it hard for visitors to find relevant content and visually the site looked tired and outdated. It was in dire need of a complete overhaul.

 

My Role

I was the lead UX designer on this project working with senior stakeholders at Action for Children alongside agencies Brilliant Noise who were responsible for the visual design and content strategy and Screenmedia who were responsible for building the new site.

Method

Previous research

Action for Children had already started the redesign process before I joined the project and had commissioned a large research project which involved interviewing a large number of stakeholders, service users, fund raisers and volunteers. This research had been used to develop a set of personas which I used as the foundation for the following work

Analytics

Using the Personas I was able to map user goals and journeys to site traffic in Google Analytics allowing me to accurately pin point where the problems in the site navigation were. I also used the analytics to help with the content audit in order for the stakeholders to identify pages and sections which were not performing well

User Journeys

With the analytic research in place I developed user journeys for the site working with the existing content and also identifying areas which new content would be needed. I also used this opportunity to introduce some future thinking into the organisation, painting a picture of what the site could look like with further development.

Action for Children User Journeys

Action for Children User Journeys

IA and Domain Modelling

The content strategy team from Brilliant Noise worked with Action for Children on the 100’s of pages in the content audit. Once that had been completed and we had an idea of what content was available I was able to map out the new IA for the site. I tried to keep the levels  of the IA as shallow as possible reusing the principles of the hub and spoke domain modelling principle I had been working with on the RIBA website to surface relevant information pages throughout the users journey. Content hubs based around themes like Adoption and Fostering used tags to dynamically draw together pages of content and links to other related pages on the site ensuring the that user could always keep exploring and would never end up in a dead end as had previously been the case.

Action For Children IA

Action For Children IA

Design Principles

Because there were so many people involved with the project I felt it was important to establish some design principles to help guide the development of the project. The principles were formed in conjunction with the client through a series of workshop activities. The agreed principles chosen were:

  1. Every page is a destination in its own right.
  2. No dead ends. Always provide options always provide a natural next step.
  3. Be welcoming and inclusive to all.
  4. Design for clarity. Be obvious not ambiguous.
  5. Design for the 80%.
  6. Don’t reinvent the wheel. Reuse where possible.
  7. One primary action per screen.
  8. Be consistent.

These principles could also be used in the future by content editors in conjunction with the personas to help guide the creation of new pages and areas of the site.

Pattern library

When the IA and user journeys had been agreed I was able to start work on the interaction design for the site. Because a lot of the site was dynamic I developed a pattern library of age components for the developers to produce and the for the content editors to use when building new pages. The first stage of this work was to put together a component audit of all the existing patterns on the site. Then, using the user journeys, work out where the gaps were and add additional new patterns. These patterns were used to build page wireframes for the key user journeys on the site before they were broken apart to there core components and compiled into a pattern library document.

Action for Children Wireframe

Example Action for Children wireframe (Desktop and Mobile)

Outcomes

The new site launched in the Spring of 2015 and has had a significant impact already. The analytics are showing that more people are searching for and finding the information they need and content editors are able to produce pages much more proactively throughout the site.

Action for Children, a UK children's charity | Action for Children