Carols by Candlelight

The challenge

A long-standing Christmas Eve tradition, Vision Australia's Carols by Candlelight presented by AAMI at Melbourne’s Sidney Myer Music Bowl is the largest annual fundraiser for Vision Australia's children's services – supporting children who are blind or have low vision, and their families, to live the life they choose. Donations help to provide critical specialist services that assist with early learning and development, lifelong literacy, confidence and employability.

Historically, the main focus of the fundraiser has been campaigns driving traffic to traditional donation portals and building awareness towards the physical event during the December holiday period. In 2021, with the uncertainty of Covid restrictions and a shift in donor strategy, Vision Australia wanted to create an experience that allowed donors to better connect with the campaign virtually.

What we did

Working closely with Vision Australia's marketing agency ntegrity, we developed a concept of community and togetherness by utilising the flame from the brand mark of Carols by Candlelight. Our concept was built around the idea of making the candle burn brighter and bigger as additional donations were made. 

One of the key challenges of the project was to create an immersive experience that was WCAG Level AA compliant. Typically, 3D animated digital experiences are not easy for people with vision loss or other cognitive differences to access. However, as Vision Australia exists to help individuals and families that need support dealing with vision difficulties, it simply could not launch an experience that was not designed to be accessed by as many people as possible. 

With the limited timeframe we had to work on this project, fast and open communication was critical. To facilitate this, we had internal standup meetings daily, and met with the client at least three times a week to showcase our work in progress. The site was ‘soft launched’ on 15 November, featuring a 3D animated candle made up of floating stars. Each star represents either a story or a donation. The stories detail the experiences of Vision Australia’s young clients, while the donations list the names of donors and their messages of support.

Accessibility compliance

We approached the need to achieve WCAG Level AA compliance in a very collaborative and iterative manner, working closely with the Vision Australia accessibility team. We were able to provide alternative solutions for some of the more immersive aspects of the concept that needed to be built into the experience. 

List vs candle view

The primary way for users to access donation information is to interact with the candle, spinning it around or clicking/tapping on individual stars within the flame. This is not always achievable for users with various limitations, so we designed an alternative ‘list view’ which is easier for screen readers to access and intuitive to tab through using a keyboard.

Building it right

The concept of the candle flame getting brighter and bigger as more donations are made was a challenging principle for the development of the experience. As one of the most popular fundraising campaigns in the calendar, it potentially could crash at times of high traffic and not be able to support the intense load of data processing of each donation, especially when thinking about the execution of the animated flame design. 

In addition, we had to keep accessibility front-of-mind and make sure that whatever was built worked for non-visual users as well – a tricky proposition for something as visual as an animated flame. With that in mind, we focussed on the content first, building as much as possible with plain-old HTML (extremely accessible), then layered CSS animations over the top to bring it to life, with a small sprinkling of JavaScript to create the 3D effect of a rotating flame. 

Overcoming complexities

There were a number of hurdles that needed to be overcome behind the scenes to enable the experience to operate seamlessly. 

Firstly, there was a limit to how many stars could be displayed on the candle at any given time. This meant that it was necessary to ‘randomise’ the stars on display. To complicate matters further, the user interaction with the stars was different depending on the device. The device’s break point determines how many stars the user sees – too many and the lag time would produce a sub-optimal experience. Even though not every star is visible at any one time, every donor receives a dedicated URL so they can share their donation on social media and come back to their star at any point.

Preparing for high traffic

Another challenge we faced was the need for infrastructure scalability. Although the site’s initial traffic was anticipated to be low, it was expected to spike significantly around the Carols by Candlelight event on Christmas Eve, which meant that we needed to work with the Charidy platform to make sure that integration point didn’t fall over, and that the campaign site could handle a large amount of traffic in a short period. We architected the experience to cater for the traffic and we utilised CloudFlare CDN with carefully configured caching rules. Then we did load testing using various tools to create hundreds of thousands of donations over a sustained period, at a rate of nearly 1000 per second, while simultaneously loading the candle experience for those donations in separate browsers, all with a success rate of 100 percent and very low response times.

The result

In the end, the State Government of Victoria allowed an audience to attend the event. However, the digital campaign site was highly successful in generating donations, and allowed Vision Australia to be prepared for all potential outcomes – including an entirely virtual audience.

The digital campaign finished in early January 2022. The final on-site donation figures were $815,349 raised by 8021 donors. The most significant portion of these donations was made during the event on 24th December 2021. Throughout the event, the site did not experience outages or downtime primarily due to the decision to use CSS animations instead of a heavier animation codebase.

The balance between an immersive creative experience and accessible functionality meant the site reached AA compliance. The site also achieved a score of 98 out of 100 in Lighthouse, an open-source tool that rates accessibility. The added advantage of collaborating with the Vision Australia accessibility team allowed Luminary and ntegrity to find that balance without compromising the overall campaign experience.