A digital playground to support children through painful medical procedures
The Request
Convert TLC for Kids’ Distraction Boxes—one of the widest-reaching and most successful charity programs in Australia—into a digital form to test its effectiveness in real-world medical service environments.
The Result
A custom HTML5 app prototype that allows TLC for Kids to trial the Digital Distraction App concept at a fraction of the cost of a native application without compromising design or functionality.
Following the successful testing and feedback of the MVP prototype, we designed & developed a native mobile application for iOS and Android. This version of the app best utilises technology and user experience advantages afforded by native applications.
The TLC for Kids Distraction Boxes Program has supported sick children across Australia since 1998.
Designed to provide children between the ages of 3 and 12 psychosocial support through painful or invasive medical procedures, Distraction Boxes redirect children’s attention to a neutral stimulus. Because the activities included inside the box have been shown to reduce distress, anxiety, pain, and the need for sedatives, the program is one of the country’s most successful and beloved charitable initiatives.
Until recently, the program was exclusively carried out in analog, with boxes shipped out to various healthcare and medical facilities and distributed as needed. Several recent developments ranging from supply chain pressures to shifts in Australia’s healthcare system highlighted the need for the digitally equivalent distraction activities.
From physical to digital
Through discussions with TLC for Kids, we agreed the best path forward for testing a digital version of the charity’s signature program was an HTML5 app prototype complete with custom designs and full functionality. Although prototypes are sometimes thought to be rough and tumble, we made sure to provide a robust, premium solution that mimicked the experience of a full-on native app.
We chose this route not only for its cost-effectiveness, but because it allowed us to apply real-world learnings in an agile, iterative, and interactive way. HTML5 development technologies are known for delivering amazing graphics, high-definition videos, and crisp multimedia. Better still, HTML5 is free, works across all devices, and is supported by all modern browsers. With ease of access a key consideration for our client and their end users, we got straight to work making it happen.
Designing for distraction
Painful, invasive medical procedures are often traumatising for patients, especially children. Offering a digital solution to help ease this pain holds tremendous benefits not only for the patients themselves, but also their families and medical team members.
For our part, we took special care to design an effective user experience for this primarily non-adult audience. To do this we followed these five rules:
Everything, from looks to functionality, has to be fun.
Users must be able to dive in straight away (without the need for a login or other delay).
Everything needs to be completely intuitive. Instructional manuals? No thank you.
Creating an engaging, immersiveexperience is the best way to capture and keep attention.
Incorporate visual and audio cues to increase and optimise usability (regardless of age).
What’s inside the (digital) box?
The end result is something pretty special, if we do say so ourselves. Across design and development, we strategically wove in touch points that help ease patient anxiety and support the organisation’s mandate:
Playful, memorable visuals. Splidge and Splodge are two of TLC for Kids’ beloved brand characters. We wanted them to sing on screen with plenty of colour and other fun branded visual elements.
Digital check-ins. At the beginning and end of each session, users are invited to share how they’re feeling. We chose colourful emoji-style icons to help children self-identify; in doing so, TLC for Kids and medical professionals both receive invaluable emotional information.
Feedback screensaver. In the spirit of accessibility, we added a simple “screensaver” animation to keep children distracted without requiring direct interaction. In some cases, children may be unwilling or unable to play, or they’ve completed a game before their procedure has ended.
Six digital distraction games. Some games (like the windmill) are digital adaptations of tools children would find inside a physical Distraction Box, while others (like the bubble wrap) are new to the program but perfectly suit the digital medium and distraction criteria. Each distraction activity is built into repeatable 30-second blocks to align with medical procedure timelines.
Always learning, always growing
Part of TLC for Kids’ success comes from the value the organisation places on understanding and responding to its audiences’ needs. An approach that prioritised feedback from doctors, nurses, parents, and even sick children themselves was an essential element of our work.
We engineered the HTML5 functional prototype so that backend analytics and user feedback could together paint a data-driven picture for future revisions, additions, or re-imaginations. As new waves of data are collected, the organisation is able to deepen their understanding of how, when, and why the prototype is used.
It’s been a privilege to work with TLC for Kids to continue to expand their world-class program. To learn more about the organisation and how you, too, can be part of its expansion and evolution, visit the TLC for Kids website.
Thank you to the team at The Avenue for their amazing skills and dedication to bringing our Digital Distraction App to life. The opportunity to create a digital version of our TLC Distraction Boxes presents numerous benefits to our medical professionals, our TLC Kids undergoing treatments and their families.