Shell Recharge
January 2022
Description
An AR app to help educate users on the benefits of the Shell Recharge platform.
Context
The brief for bringing Shell's customers into the 'metaverse', was to create a wholly digital experience that could be physically explored in the real world, whilst informing users about the 'Shell Recharge' infrastructure and the benefits.
To do this, we created an Augmented Reality (AR), fully interactive, explorable, life-size virtual 3D environment, where users can see and walk around with iPads in the real world.
To do this, we created an Augmented Reality (AR), fully interactive, explorable, life-size virtual 3D environment, where users can see and walk around with iPads in the real world.
Users would be able to walk around stations where they are introduced to different parts of the Shell Recharge brand in AR.
The experience would be gamified to help drive the experience in a non-linear way to help retain users attention whilst ensuring the full message gets across.
Challenge
The main challenge to consider when creating this sort of experience was to strike a balance of entertainment and gamification to grow the brand, whilst also delivering sufficient information about the brand to grow the business.
Outcome
Unfortunately, the project is still ongoing so I cannot share any outcomes from the project.
However, I thoroughly enjoyed this experience of a true end-to-end process with a client of Shell's calibre.
Watch this space though as I will update when the design is finalised.
The process
Approaching Shell and inviting them into the 'metaverse', we needed to make sure that we truly understood the capabilities of AR and the possibilities we could create for their 'Shell Recharge' brand.
This led to research from us of best practices for AR apps, into how interactions differ in the virtual world, how to encourage exploration and how long experiences should last.
The following are small parts of the journey we went on to create the app
User journeys
We ideated eight different scenarios for the AR experience. These scenarios were made to be non-linear so they could be swapped in and out depending on where the client wanted to deploy the experience.
The eight scenarios were:
VA: Virtual assistant meet, greet, orientation, instruct
1: NETWORK SCALE - interactive spinnable / zoomable globe showing recharge network and all charge points, present and future
2: CHARGE AT HOME - House builds up with charger on wall - show how electricity flows into car, money flows into owners bank account
3: CHARGE AT WORK - Huge office block appears - we are in the parking lot, car pulls up and starts charging - shows staff convenience
4: DESTINATION CHARGING -Football stadium builds/ appears - fans arrive in minivan and plug in - shows leisure convenience
5: FLEET CHARGING - loads of trucks appear in driving formation - we show transition from carbon fuels to electric - helping your business transition to new energy future.
6: BUSINESS HUB - Chargers appear and connect to laptop - which transmits to mobile phone - we see one charger have a fault - it shows on the laptop, user presses a button and the charger gets fixed - helping you manage your charging network
7: INSTALLATION SERVICE - a truck pulls in loaded with chargers - we show them all being installed all over the space - shows Recharge has end to end service
Storyboarding
We felt it was important to storyboard the user journeys as it was a new kind of experience we were creating. We really had to think about how users would move around in the space, how we could encourage them to explore and which parts should be static heads-up-display (HUD) and which should be integrated into AR.
Sketching helped envision scale for us and how it maybe affected depending on the experience size. It showed that some animations and interactions are perfect at life-size but become a lot more difficult scaled down.
Wireframes
After getting feedback, I began to ideate some ways that the UI would sit on the screen. This needed careful consideration due to the nature of being an AR app.
AR apps need to use clean, simple user interfaces so that users can continue to be immersed in what is happening in the virtual world without breaking concentration. We began by thinking what is the most important parts of the interface that will be needed to be static on screen.
After some ideating and practice, we settled on;
• Menu icon
• Interaction buttons
• Skipping through scenarios
• Cross hairs to help aid users aim
• Rewards (Stars/medals)
• Text boxes
We decided on these due to constraints with the virtual world. For example, a text box in AR, depending on the size of the user and their positioning may take over the rest of the world, which is an unpleasant and surprising experience; and someone who is tall may need to adjust or bend down to be able to read text which is again, unpleasant.
This led us deeper to create guidelines about where items should be on screen, their behaviour and visibility. So for example, text boxes should be translucent to allow users to see through them whilst making text readable and accessible. Any interactions should happen near the corners of the screen too for maximum reachability and the experience should be ideally less than 10 minutes long for maximum engagement — any longer and users will tire holding the iPad in the air.
Crosshair opportunities
I wanted to be able to give users feedback on what was happening when the explored the virtual world and the best way to do this was to give users an instrument that could aid their aim and give contextual meaning to when items were interactive.
The crosshairs needed three varying states to give users a sense of if they were doing the right thing;
• A wandering state, for when they were freely moving around the experience.
• An aiming state to let them know that what they were looking at on the iPad was interactable.
• And finally a loading state to feedback that something is occurring based on their actions.
These were important states and careful consideration had to be taken to aid users without blocking their view of the virtual world.
Takeaways & Reflections
I thoroughly enjoyed this experience of a true end-to-end process with a client of Shell's calibre. Collaboration was a huge part of this project for me, it really helped push the project to new heights with amazing possibilities, working across multiple teams from creative to engineering and the interactive team.
I'm extremely excited to carry on working with clients and help people create meaningful experiences with technology in new, undiscovered ways.