Percy goes Meta

Inspiration

For HTB VIII, we worked on the M&S BEAM academy challenge. With customers using the mobile app more and more for their shopping, there are huge opportunities to improve the digital experience. Ultimately, our aim was to make the M&S app more engaging, to drive customers from coming back frequently.

What it does

We designed MetaPercy, your own digital version of Percy the Pig. MetaPercy has to be fed every so often, before he starts losing health. We believe this can drive users to come back regularly. Another major feature is the ability to spend points (earned by shopping at M&S) on Percy, to restore health, buy swag, etc. The possibilities are endless!

How we built it

We used Flask for the back-end, hosting a small server with a file-based database to store information like points, swag etc. for each customer. On the front-end, we used React to create an interactive web app, mainly targetting mobile devices.

Accomplishments that we're proud of

We think a future iteration of MetaPercy can be a valuable addition to the M&S shopping experience. Having customers care for their very own digital Percy can have the following benefits:

raise brand awareness and loyalty: users want to shop at M&S to care for MetaPercy
children encourage their parents to go to M&S: they want to have the coolest swag for Percy, to show off to their friends
creates competition between customers to obtain the rarest swag
huge opportunities for AR: in the future, MetaPercy can be your virtual companion when you shop in-store, further integrating digital and traditional shopping experiences.

What we learned

Building a mobile-first web-app, and iterating quickly to build a proof-of-concept
Working with 3D models to build an AR experience
Animating components to make everything more engaging
Learning to think deeply about what customers want, and how this can increase revenue for M&S