Tiles was inspired by the intersection of community, art and technology, as well as the small pockets of joy in everyday life. We wanted to allow members of the community to be involved in the creation of a shared and tangible part of the built environment whilst providing an opportunity to consistently engage the social sphere.

What it does

Tiles is an interactive digital canvas which allows users to claim a tile, make a sketch and submit it onto a shared display. A tile is temporal, it slowly fades over time and becomes available for another user to draw on top of . A user gains access to a set of tiles by scanning a QR code. From there, they can draw a message or sketch on their device and submit it to be displayed onto the shared, displayed canvas. Multiple users will have their images onto the shared canvas simultaneously. Alongside a message users can leave a signature. Periodically the canvas comes alive and animates all the sketches from that day.

Tiles is designed to be constantly evolving in the spaces which it inhabits. Our focus from the beginning was to provide a set of simple tools for users to express themselves on a digital canvas, and foster a sense of asynchronous socialisation and communal collaboration.

How we built it

Tiles is powered by the Firebase ecosystem of products, as well as being hosted on Vercel. The frontend is built with React bootstrapped with create-react-app, which interfaces directly with Firebase Firestore through document subscriptions to allow for real-time updates of the canvas. We also use firebase cloud functions to run background tasks, such as provisioning new QR codes and invalidating old ones.

Challenges we ran into and What we learned

We hadn’t worked with vector graphics before, so it was an interesting challenge to bring out the old maths notes and learn about all these new terms like tweening, rasterizing and path segments. The opportunity also opened our eyes to the amazing work being done by people at the intersection of art and technology, particularly works done by Refik Anadol and the team at Active Theory, who significantly influenced our project.

Accomplishments that we're proud of

We decided at the start to work with backend infrastructure that we were familiar with. This allowed us to spend significantly more time on UX and making sure the experience would be memorable to the user. We’re really proud of the user flow, and the subtle animations which occur when you make a submission.

Ultimately, we’re super proud that we’re able to deliver our MVP in a state that a user can scan a QR code, make a submission, and see it update live on the giant canvas. The simplicity of the action hides a huge amount of technical challenges we overcame and we’re glad that we can present the project in its current state today.

What's next for Tiles

An additional feature we were not able to implement during the time was a time machine feature to allow the playback of the canvas display. We’d also have to be able to allow viewers to react to sketches by other users.

A card which stayed on our backlog but which we would’ve loved to implement would have been a sound engine. Creating a soundscape around the installation would add to the experience and create intrigue around the product.

Built With

Share this project: