Using WebGL to tell personal stories of remembrance

Queensland Remembers WebGL poppies.

Personal stories worth remembering

In honour of Remembrance Day this year, we launched a website with the Queensland Government. The idea was to create a digital reflection pool filled with floating poppies dedicated to those who served.

But what makes the site special is the personal stories it inspires. Every poppy that floats by has been created by someone with a personal story about Remembrance Day – stories that we invite you to share as you explore the site.

Before you read on, take a look at the site. You’ll be able to discover some of these stories, interact with the reflection pool itself (thanks to some neat work from our web team, but more on that soon), and even dedicate your own poppy to the flow. And once you’ve done that, we’ll take you through what went into actually bringing the site to life.

Queensland remembers final website.

Writing messages, folding poppies

What you’ll probably notice first when you visit the site are the poppies. Each of those poppies represents a submission made by another user somewhere in Australia. Click on one and you’ll reveal the message they’ve left within. Click again and the poppy will float gently back down to join the rest.

In designing the actual look of these poppies, we went through a few iterations. At first, we started out with the idea of recreating an origami poppy. We loved the idea of writing a message on the paper and then folding it into a poppy for someone else to unfold. Plus, the interaction of folding digital poppies created the perfect atmosphere of reflective contemplation.

Origami concept for poppies on the Queensland Remembers site.

An extension of the real world

As you might have noticed, the final design does not feature origami poppies. The reason why relates to the real-world campaign that the website itself links to. In the lead up to remembrance day, as part of the Queensland Remembers campaign, people all around Queensland held “Poppy Parties” where they created real world poppies with messages inside. Then, these poppies were transformed into a huge public art installation in honour of the 100th anniversary of the Armistice.

Queensland Remembers public art installation.

It made sense that, since our website was meant to be a digital extension of this real-world installation, our poppies should look more like the physical ones. The resulting curved poppy design aligns more closely with the offline Remembrance Day activities, while the numerous layered petals give a sense of depth and tangibility.

Two poppy concepts for Queensland Remembers website.

While this change meant we lost the ability to fold the poppies from paper, we were able to keep the idea of revealing the messages inside the poppy through the animated separation, circling and reformation of the petals.

To prefill or not to prefill

If you decide to dedicate your own poppy, you’ll notice that there are two options: select a pre-filled dedication, or personalise your own message. This very deliberate (and much iterated) choice deals with one of the site’s fundamental design problems: the paralysis of customisation.

Poppy dedication page from Queensland Remembers website.

In an ideal world, all poppies contributed to the site would contain a personalised dedication. These kinds of unique, diverse messages create a much more meaningful experience. But forcing customisation risks users becoming paralysed by the need to write a message of their own and backing out of the creation process entirely. Pre-filled messages help alleviate this paralysis. By having these two options, we encourage simple, easy contributions while still allowing for personal Remembrance Day stories.

Dedication form from Queensland Remembers website.

Not all poppies are made equal

While pre-filled poppies aid in the creation process, these generic responses are somewhat of a hindrance to the other main mode of the website: exploration. Customised, personal stories are much more interesting than generic, pre-filled messages. So while we wanted to give people the option to create a pre-filled poppy, we also wanted to prioritise customised messages to make the site more enjoyable to explore. The solution? A poppy ranking algorithm.

Queensland Remembers website background.

According to this system, pre-filled poppies are representative of the volume of people who have interacted with the site. But, as the site matures over time, these poppies are replaced with personalised messages that bring variety and depth to the overall stream.

Queensland Remembers user-generated dedications.

One free (physics) interaction

It’s also worth spending some time on the stream beneath the poppies. The flowing water mechanic, which is largely responsible for the site’s contemplative feel, arose out of distinct functional needs. Firstly, it allowed for a curated collection of messages while masking the above ranking algorithm. Secondly, it gave us an elegant way to work within the technical limitations of web browsers to maximise the quality of the animations.

You might have noticed that there’s another interaction hidden in the reflection pool. When you drag the poppies, or even just move your cursor/finger across the pool, you influence the water itself. This interactivity stems from the idea of “one free interaction” – an action that has no real consequences other than to provide a moment of surprising fun.

An interactive act of remembrance

During the month-long campaign leading up to Remembrance Day this year, over 1,300 poppies were created and submitted to the Queensland Remembers site. This included two VIP submissions from both the Premier of Queensland and the Governor of Queensland. The project was also featured on Channel 7 News in the lead up to Remembrance Day.

As we mentioned, the site is still live, so feel free to head on over and explore the poppies for yourself – or play around with the interactive reflection pool. We’ve also got another awesome WebGL project launching very soon, so subscribe below and stay tuned for more!

Read more articles

Explore our featured articles.

Stay in the loop

Subscribe to our newsletter to receive more insights, how-to’s and updates from S1T2 and the S1T2 team.

Welcome to the party