Dance arcade experience overview

This was a fun project. Working with Liquona, we designed and developed this engaging dancing game for Tearfund, which connects people across the UK with Ugandan communities through music and dance, designed to expand their audience at events and introduce people to Tearfund’s work through a free arcade experience.

The experience begins when the booth draws attention of passers-by with African drums, sound bites from MC Love, the charismatic master of ceremonies, and bright lights.

After agreeing to terms of use, players are then introduced to the project in a short video explaining the game, and how it connects to Tearfund’s work.

There is then a skippable dance tutorial where you learn the dance moves which will be used, and after that you are right in to dancing along with Wendy, the excellent dance instructor.

While you are dancing, the booth records you, and makes a stitch video of you dancing with the in-game dancers as well as with Ugandan communities.

Users can then scan a QR code which takes them to a web page where they can download and share their dance video. Also, once the video is ready, dancers are notified via email, and can follow a link to the same page.

This digital installation was an extension of last year’s Light up the world project with Tearfund. It integrates with our Light up the world installation, setting off celebrations in real time when users complete a dance.

This will be a part of Tearfund’s campaign this summer, so if you see them about go and dance with Uganda. Featuring famous Ugandan artist Levixone with the song Chikibombe, charismatic presenter MC Love, and excellent Ugandan dance instructor Wendy.

Technical implementation

This is a distributed system composed of multiple remote clients running in different physical locations, all communicating with a central backend over the internet.

The architecture supports real-time features such as instant feedback, and synchronized celebrations across installations. The system is designed to be robust against network interruptions, scalable for additional clients, and secure for handling user-generated content.

The combination of real-time interactivity, asynchronous media processing, and seamless user experience across distributed hardware makes this a technically complex and rewarding project.

Vue front end PWA

We used Vue to build an engaging video game style user interface with audio and visual interactions throughout the user journey. As this installation uses internet, a remotely hosted Vue web application is a great fit, as it allows for efficient development, and updates are distributed easily.

Intermittent internet connections are a common problem with this kind of portable installation. This web application is designed to handle this gracefully. It is a PWA, using service workers to pre-cache static assets ahead of time so that there is no perceived loading time on videos etc. It has built-in retry and reconnection logic for when there are outages, as well as offline notifications to warn users ahead of time if there may be a hold up. On top of this, it times requests strategically so that users are not interrupted with unnecessary loading screens.

The user experience is designed around the touch screen unit, used outdoors in daylight. Large, high contrast buttons, audio and visual cues throughout, and controls positioned higher up the screen, so users don’t have to bend down to reach them. Although accessibility is limited by the fixed touchscreen interface, Tearfund staff will be on hand to help if needed so that everyone can have a go.

Kiosk hardware

The front end runs on a microcomputer (Raspberry Pi 5) installed within the freestanding screen unit. Power, audio out, and ethernet are connected via retro fitted surface mounted ports. All they have to do is plug it in, and it’s ready to go.

The touch screen unit is purpose-built, and is sturdy and portable, with a durable flight case.

The microcomputer is working as a kiosk client. It runs the dance web application on startup, and supports per-unit configuration for scaling to additional booths. The low cost per unit, decent performance, and small form factor make the Pi 5 a great fit for this kind of project.

Phoenix framework back end

The dance booth integrates with last year’s LUTW project via the phoenix framework back end.

The purpose-built LiveView admin area allows insight into dance booth usage, as well as access to dance videos and securely stored user data.

It uses a series of background workers (Oban) and ffmpeg to process video uploads asynchronously with minimal perceived loading time for end users. Elixir, with its reliable concurrency, is a perfect fit for this kind of work.

The public share pages are also Phoenix LiveView. It automatically updates in real time once your video has been processed.

Thoughts and feelings

This has been a great project to work on. I am proud to have been invited back to build upon last year’s work. This digital installation has been an interesting challenge calling on experience gained over many projects as well as presenting some new problems to solve and learn from.

In addition to this I much prefer working on projects like this one that support a good cause and could help to bring positive change to the world.

I am pleased to have created such an engaging user experience, this app has been very fun to work on and test. I look forward to seeing it in use.