Case Study

Barnardos - Fees Calculator

This is very much at the heart of what we love to do and what we’re good at: Turning something complex into an easy and pleasant-to-use interface.

Our solution does not only remove a key friction-point, but it also massively reduces the burden on Barnardos support staff.

Barnardos Early Learning provides teaching and care for children under 6 years of age through their purpose-built early childhood centres and network of home-based care throughout New Zealand.

As a large, national network of centres, Barnardos Early Learning has many different care options, with a wide range of fees which have been traditionally provided by consultation with individual centres, or through their phone and online support.

Breaking a complex rate-system, normally only navigated by experts, into a system easy enough for everyone to use was a challenge.


Easy as A-B-C


We designed the calculator to follow the user's mental model and not the way actual calculation.

The challenge with designing this solution is that the fees structure Barnardos employ can be difficult to explain, and it was important to create a mental model for users which abstracted away how the fees were actually calculated and instead represented their own requirements.

Users can arrive at this step with very different levels of understanding and very different needs. These costs are calculated differently depending on (for example) the age of the child, the time which they attend, the number of children and the amount of government subsidies available, depending on families income.

Requesting all this information in one go could be overwhelming, and doesn’t naturally fit the user’s mental model of how they’d enrol their children.

By focusing on the needs of parents and carers, we could provide a UX model which corresponds to how they think.

A parent might know they want to enrol their child on a Monday for 4 hours, a Wednesday for 8 hours and a Thursday for 6 hours, or they might instead just know they’d like to enrol their child for 6 hours for 3 days a week. By providing an interface that can accept either kind of input, we can feed this data to the calculator and give them an accurate cost estimate without expecting the user to adapt to how the calculation works.

Before jumping into the design stage we went through numerous iterations using wireframes only.


All interactive states


Simple frontend
Complex backend

We created the calculator front-end using Vue.js, which also powered the rest of the website.


We also wrote a bespoke JavaScript module which could take a wide variety of different inputs to accurately calculate the resulting fee. Allowing us to create a simple front-end on top of a quite complex calculation.

We also provided an easy mechanism for support staff to update their fees via Airtable.

The site was built in addition to the work by Wunderman Thompson NZ who created the initial version of the Barnardos Early Learning website.

Visit a centre page on
and experience it yourself

Our next selected project

Evolve Lighting

View Project

We’re ready, let’s talk.

We answer every message to [email protected]
within 24 hours. Try it.