Designed a digital experience for a charity to help children & families access information, support, education & donate

Client:

MY ROLE:

Senior UX/UI Designer & Illustrator

WORKING WITH:

Developers, Lead UX Designer, Account Manager & Client Stakeholders. 

SECTOR:

Not For Profit / Early Learning

Date:

May ‘21

The Process:

Discovery Stage

THE BRIEF

We were tasked with redesigning the Kids First website, streamlining the user experience through a refreshed interface, redesigned information architecture, and the development of a visual design that purposely left out sad, grey imagery in favour of fun and bright illustrations to appeal to users whose lives may be anything but.

framing the challenge

How can we make the site welcoming for both a parent looking for a school to send their child and someone in urgent need of a support service?

RESEARCH

Co-Creation Workshop

Informed by a comprehensive customer and stakeholder research period, it was essential that the rebuilt site would make accessing Kids First’s programs quick and easy.

RESEARCH

Creating User Personas

After finding out as much as we could from the client as to who the real people who benefit from their services are, we then distilled this knowledge into generalised personas.

RESEARCH

Aligning to the sector standards

To see what’s best practise in the sector, we spoke through the web experiences of the peer organisations in the NFP Industry. We conducted a round of voting, then discussing elements, features or information we were inspired by.

information architecture

Crafting a logical IA

With the different service areas that the NFP covered, both Education and Support Services, we needed a clear menu structure that could help our varying users very easily work out what they do and then where they could find the information they’d need.

CONTENT REVIEW

Considering user types and content categories

When planning what users to recruit and the personas, we began to see an opportunity to consider working these into the site through content categories and the filtering system.

Thinking about this early meant we could test, but also create content to match this system.

A person could self identify and filter through to more relevant content.

We branded the ‘Early Years Education’ and ‘Child & Family Services’ sections, by creating a custom icon and colour scheme for each

Definition Stage

WIREFRAMING

Creating wireframe designs to test

After we had agreed on the site map and what should go on each page, we began to wireframe the key pages, starting with each template type first.

user testing

Testing with real users

Kids First were kind enough to line up over 10 interviews with both internal and external people who have used the wide range of services.

We spoke to a few people who had Family Violence or other family based issues and used the counselling and group program options available, some who had found a kinder for their children, some who were industry experts or studying in the field looking for research studies and some who had been referred by court systems.

PROTOTYPES

Visual Designs

Testing with the real future users showed us how to tighten up our language and how much information we should show and when.

The overall feedback was positive and all users understood the different parts to the NFP’s services once seeing the homepage with branded nav and cards sitting just below the top header.

PROTOTYPES

Finalisation of designs

We then bought the updated wireframes to life by adding Kids First’s visual style.

The client said they would like “nothing from the old site” and gave us “full creative control” to evolve the brand and create custom illustrations.

It is a tragic reality that many people seeking assistance from Kids First are doing so in a potentially unsafe environment, be it due to domestic violence, addiction, housing insecurity or another position of duress.

To help protect those looking for urgent help, or those researching these support services at work, at shared computers or in other highly visible locations, the primary navigation features a clearly marked ‘Quick exit to Google’ link, as well as the option to hide sensitive or triggering page titles.

The majority of the site’s content sits in the centre of the screen to avoid being seen over the shoulder by others, and a ‘Need urgent help’ call-to-action quickly provides links and phone numbers for child protection services, suicide helplines and LGBTIAQ+ support.

We worked in conjunction with Kids First’s qualified counsellors to ensure those seeking help would find the site’s interface, design and language comforting and easy to navigate.

We created a resource section, called the ‘Information Hub’ to make it easy for helpful information to be accessed by practitioners or those seeking help.

Deliver Stage

ADDITIONAL PAGES

Creating new reusable components

We first looked at the content to work out the best ways to showcase. Then we made sure the next pages we made were headed by the templates already created and just designed the new components that were needed.

We bought the illustrations to life by creating custom gifs and using Lotti software to embed in the site

HANDOVER

Creating a shopping list of elements

We made a catalogue of all the components we created to make it easy for our team of developers to build them and place in Story Book, so we could QA each component early on in the process.

This also allowed the client to have a set list of components for when they would build new pages, which future proofed the designs and made it easier for content creators.

DESIGN TO DEVELOPMENT

Handover to the Development team

We were developing in house so got the developers involved half way through the design stage to talk through how to tackle some of the complex integrations needed.

We were designing in Figma and had a shared design system to cover the basic design tokens.

DESIGN TO DEVELOPMENT

Quality Assurance Testing

We ran several QA rounds to insure the final product reflected what was proposed in the design stage. A process that worked well for us were annotated screen shots, so it was clear and in context.

overview

Experts in the family violence, counselling and early education spaces, reinterpreting Kids First’s web presence to better support their services was a challenging but highly rewarding experience for everybody involved in the project.

Creating a streamlined but intuitive interface was fundamental in our approach to completing this complete redesign of Kids First’s public-facing web presence, enabling the not-for-profit organisation to continue providing their outreach to vulnerable people.

Bounce Rate

53.61%

Old Website

Exit Rate

37.22%

Old Website

REVIEW

Limitations and dependencies

We were integrating with a Careers, Contact Form and Donation external platforms through plugins so lost some control over page and components styling, which was also not the ideal user experience. We worked around these issues the best we could and we reached out directly to their support teams to suggest updates.

final word

Conclusion

This was an amazing project to be a part of and to help showcase the great work that Kids First do for communities. I’m very grateful to have been able to design for such an important service and thank Clare and Alex and the rest of the team at Kids First for their support through out the project.

Designed at Our Very Own Studio

View live site Kids First Australia

Award Details DrivenxDesign