Trade shows have previously been a big part of Procell’s marketing mix, however, due to the events of Covid all work on physical assets were ceased and so an experience that could translated to a virtual event was required.
The experience was to become available to the public after a live broadcast of a presentation by Procell which would take their audience on a unique journey to demonstrate the cost-saving benefits of Procell batteries. With this in mind, the goal was to design a scaleable virtual experience to showcase the limitless portfolio of Procell Professional Batteries.
When the broadcast is over, guests can explore an interactive virtual experience utilising webGL. This was to be a virtual world comprising of specific CGI virtual rooms representing the various sectors that Procell caters too. Guests navigate through the various rooms which each give specific cost saving tips and usage cases. There will also be an opportunity to provide more curated, in-depth technical data around the products, as well as tips on how our solutions can make your business more cost-efficient.
The client wanted something that would be exciting and engaging to the user where the information about the product and the brand would be exploratory, meaning the discovery of this data would feel organic. Creating a journey from a central hub that had several pathways to various pieces of information was the most accessible approach, and from a design perspective, ensuring this could work across desktop and mobile was paramount.
The visual design needed to feel like an extension of the Procell brand and when paired with high quality CGI renders would amplify this experience to even more of a premium level. Each path contained a number of opportunities to move around each room to inspect products which would then provide information through demonstration videos on how they’re used in the real world.
For the visual design, I was given a campaign toolkit pack that contained some references of how the Procell brand is conveyed through their own adverts. This was fairly basic with imagery, colours & typography which meant there was a fair amount of creative autonomy to work from a UI point of view.
I noticed from the supplied toolkit that Procell utilise gradients, sheered edges & upper case typography to convey their brand - along with a unique geometric pattern that’s reflective of their versatility and dynamism as a company. I used these shapes and colours to create a visual design that felt intense & powerful, stepping away from the white that’s used on their company website.
With that in mind, I created a stylesheet for myself to reference throughout the design process and this proved especially useful for the development team to build it as close to the design as possible.
When users locate an area that contains hotspots, they’re shown all the hotspots in that area at the same time. These hotspots have two states; default and visited.
The default state has a red button and a dark label with a red accent and communicates that the hotspot has not been interacted with. The visited state turns these red accents to grey to communicate that the information has already been explored by the user.
This was important for users to know when they’ve explored all the information in this cluster of hotspots and confirms that they can move on to the next area.
In each room there are roughly 9-12 hotspots and so to make it clear for users to know when they’ve seen all the information in the room we decided to add a gamification feel to the experience. Once user have visited all the hotspots they’re presented with a modal that tells them they’ve collected everything and then directs them to move on to the next sector.
Similarly, if users decide to leave the current room we give them a modal to show how much of the room they’ve explored to clearly communicate that there is content yet to be discovered.