Combined Shape
A collection of screens from the app

Web App

Procell Virtual World

2021

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.

Creative Approach

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.

A brief preview of the styling for the app
Some intro screens for the web app
A glimpse of the mobile versions of the app

Styling

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.

The stylesheet with the visual design
The first image showing the atrium environment

Atrium

It was important that a central hub was created for the journey of the user; this provided an opportunity to utilise the 360 degree rotational mechanic that would be used throughout the app. The atrium was created by the 3D team at Koffeecup and allowed the user to rotate their view around the lobby.

Once ready, the user can face the desk and travel to one of the four sectors; Hotel, Factory, Lecture Hall & Hospital by interacting with their respective sign post - the client wanted the design of these to be reflective of a sign found in a corporate building.

Room Onboarding

The client wanted the onboarding to be extremely explicit leaving room for minimal error or misinterpretation. With this in mind, this led us to sign post every step for the first section of their first sector.

From the moment the user enters the room, they’re greeted with an onboarding message and encouraged to look around using the mouse or touch interaction. By default, they’re facing one of the product zones which is quickly highlighted with a stylised vignette, indicating there there is a group of product hotspots to investigate. Once users interact with the icon, four hotspots appear for them to interact with.

When users have completed this step, they are then given a tip on what each of the tools do, taking them through each tool process in a linear fashion.

A collection of the onboarding screens for the web app
The four areas of the hotel sector

Rooms

Each sector has different areas within that sector that house various products that would be found in these industries and in the real-world. As an example, the hotel room consists of four main areas - the reception, the lounge, the bedroom and the bathroom.

The CGI renders themselves were created by Koffeecup and also contained elements of the Procell branding such as the colours and patterns which you can see on the wall art, throws on the bed and sofa and the towel in the bathroom.

Hotspots

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.

the living room area of the hotel room
The product information modal showing the product and related information

Product Modal

When a user visits a hotspot they are shown a modal containing product information. This information shows a 3D render of the product itself, the product name, the compatible battery image and name, a description and a button that triggers a video.

The client also wanted some sort of navigation here to allow users to travel between the hotspots rather than move backward to the cluster of hotspots then have to select another one.

The gamification modals that indicate how much of the information has been explored

Gamification

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.

A snapshot of the tools used in the web app

Tools

In each room it was important to show the core tools which house all the data in the experience in one place; these tools meant that the data was accessible at all times at the user’s discretion, meaning they didn’t need to search to find the relevant information.

The toolbar consists of three main tools; the video gallery, the savings calculator and the device list. The video gallery houses all the demonstration videos from all the hotspots in the room. The savings calculator allows users to toggle on and off the different battery and product types that applies to their business needs in order to create a dynamic cost bespoke to them. Finally, the device list presents a floorplan of the room displayed all the available hotspots. It’s worth noting that the design for the latter two tools were pulled from elsewhere and not designed / implemented into the experience itself.

The hamburger menu expanded

Navigation

To cater to accessibility, the hamburger menu allows the user to navigate between the product hotspots available in the current sector. To allow them to visit other sectors users have to navigate back to the lobby area; this was to avoid the user using the navigation to explore the experience rather than via the intended journey.

Although the floor plan from the device list tool behaves in a similar way, the device list is more of an overview and contains no links to the each device.

Designing Responsively

One of the biggest challenges with this project was ensuring that it worked on smaller devices particularly mobile given the large amounts of information and data that needed to be displayed. Similarly, there needed to be enough real estate on the screen to allow the user to navigate through the experience, so some of the information had to be truncated or contained within scrollable containers to ensure all the information remained intact.

One other thing I had to accommodate for was ensuring the user had their device in the correct orientation, therefore a warning message appears on the screen when the user is in portrait. This message actually prevents the experience from continuing until the device is reoriented to the correct position.

A collection of mobile screens
That's All Folks!

Thanks for reading! Where would you like to go from here?