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.

Experience yourself
View Project

UX Concept

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.


All interactive states


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.

Work index