UI, UX, Design, Development
Verity Studios' indoor drone shows bring the spectacular to live events and exciting new experiences to audiences – combining cutting edge technology with creative imagination.
What Verity create is truly ground-breaking and to do that justice, the new website needed to be a true digital expression of the company and the services they offer.
To live up to the vision, and capture the ‘wow factor’, we had to make sure the user experience was as immersive, rich and as dynamic as possible – using immersive techniques, subtle animations, thought provoking imagery and emotive, yet authoritative, narrative.
During workshop sessions, we identified that our target audiences would be prominently within creative industries such as show directors, creative directors, events managers etc. To resonate with these groups, we wanted to bring to life the idea of a ‘magic moment’ and show how Verity could bring that magic to any event. To do this, we mirrored Verity’s own blend of art and technology to immerse the visitor in the experience. However, we were also conscious that the website had to work as Verity’s main commercial and recruitment platform. So the interactive features and rich media that gave the site its identity had to offer seamless UX performance.
Very early in the design process we knew we had to show the drones in action to help people fully appreciate the technology and spectacle – which meant we had to incorporate video into the design. For our overall design language, we took visual inspiration from the atmosphere of the events themselves.
Along with the videos from the events we wanted to communicate the story through an interactive design feature. We used Three.js particle simulations to recreate the drone choreographies on the homepage, while integrating simpler particle systems into the site’s other page headers to give a complete visual language. One of the main challenges with trying to render light using Three.js is how taxing it is on performance (creating a single light is fine, but trying to create twenty on a single page presented some real challenges). In the end, we used layered PNG images which all had their own behaviours to emulate the flickering and rotating lights. To add further depth to the homepage, and to make it look like an integrated design, we also added light effects to the image of the girl and smoke effects. Along with the WebGL elements we implemented more subtle interactions, page transitions and animations along with parallax scrolling functionality throughout the site.
As we’ve mentioned, one of the most challenging aspects to the project was trying to get the balance between a website that was both feature-rich and robust enough to support the commercial needs of the business in the future. To make sure the site was resilient enough for this future growth, we used a content-focused CMS called Prismic for the back-end as we felt this system would meet the short- and long-term needs of the business AND fully support the front-end design.