← Work

03 · SHELL CATALYSTS & TECHNOLOGIES · 2020 · ROLE: SOLE UX/UI DESIGNER

A product showcase that could not happen in person, turned into an AR/VR experience.

Situation
Nobody could travel during the pandemic. Shell still had to show customers a machine the size of a building.
Clarity
I turned a very technical story into something you walk through. The help sits inside it, so you learn as you go.
Shipped
An AR and VR showcase for Shell Catalysts and Technologies. You watch the unit work, then see what comes out of it.
Built forARVR

01 · The mess

Shell needed to sell a highly technical product at a moment when nobody could stand in a room together.

That meant explaining industrial chemistry with no salesperson beside the customer to read the room and adjust. It also had to work in both AR and VR, where most people have no habits to fall back on.

So the real problem wasn't the explanation. It was making a stranger feel confident enough to explore it alone.

  1. 01No physical product demonstrations during the pandemic
  2. 02A technical catalysis story needed to become visual and interactive
  3. 03Users had to understand unfamiliar AR/VR controls quickly
  4. 04The same product story needed to work across AR and VR modes
  5. 05The experience had to help Shell market the product globally

02 · The work

Research

AR and VR were new enough on this contract that there was no established practice to borrow from. The research was studying what already existed, closely.

  • Online video, how AR and VR interfaces were being handled elsewhere
  • Existing AR/VR software, pulled apart for how its UI was actually implemented on each

Collaboration

Two companies deep, and a hard line through the middle of the build: the 3D was the team's, the interface and the interaction were mine.

How the work reached me

Shell

The client. Contracted the work and reviewed every build.

XR Labs

Held the contract. Hired me onto it.

Me

Design, inside their team.

Who built what

3D assets and the VR scene

XR Labs' in-house team

The VR experience UI

Mine

The AR UI and interaction model

Mine

Shell reviewed each build and fed comments back through XR Labs, the loop the design actually moved on.

03 · The big calls

PEOPLELens

Nobody reads a manual before trying something new. So all the help is inside the app itself. A small tip shows up when you need it. You try it once, and it goes away.

PRODUCTLens

Shell's product is hard to explain with words alone. So instead of a brochure, I made a tour. You walk through it step by step and watch the product do its job. By the end, you see why it matters.

TECHNOLOGYLens

AR and VR come with their own rules. You need a real table to place the machine on. You walk around it, you don't scroll. I designed everything around those rules.

04 · The build

FIG 03.1
AR view of Shell's Hydrocracker Unit placed on a table, with a Reactor label and on-screen controls
FIG 03.1 · AS IT RANThe unit on a meeting-room table, in AR.
FIG 03.2

AR interaction model

Scan surface

detect a flat plane

Place object

drop the unit in space

Rotate · resize

drag & pinch

Re-anchor

move to a new surface

Explore scenes

step through the story

Always in reachAudioMenuPause / playScene navExit
FIG 03.2 · DIAGRAM · DRAWN FOR THIS PAGEHow you handle the unit in AR.
FIG 03.3
AR tutorial overlay explaining the mute/unmute audio and open-menu controls
FIG 03.3 · AS IT RANTips appear as you go. No manual.
FIG 03.4
AR placement flow showing surface detection with rotate and resize gesture instructions
FIG 03.4 · AS IT RANFinding a surface, then placing the unit.
FIG 03.5
AR scene of Zeolite before Shell Catalysis Technology, with less porosity and incoming hydrocarbon molecules
Before Shell Catalysis
AR scene of Zeolite with Shell Zeolite Catalysis Technology, showing expanded pores and long hydrocarbon chains
With Shell Zeolite Catalysis
FIG 03.5 · AS IT RANThe same material, before and after treatment.
FIG 03.6

Scene by scene

ARVR

Same product story, four guided steps, in both formats.

1

Hydrocracker Unit

the plant, placed in your space

2

Transforming Zeolite

before / after the catalysis

3

Zeolite Extrudates

the catalyst, up close

4

End Product & Benefits

why it matters

FIG 03.6 · DIAGRAM · DRAWN FOR THIS PAGEOne story, told in both AR and VR.
FIG 03.7
VR section selector disks for Hydrocracker Unit, Transforming Zeolite, Zeolite Extrudates, and End Product and Benefits
FIG 03.7 · AS IT RANChoosing which part to visit, in VR.
FIG 03.8
VR component labelling where a beacon expands into a Reactor label as narration explains the part
FIG 03.8 · AS IT RANLabels open as the narration reaches them.
FIG 03.9
VR transition into molecular scale, preparing the user to enter molecular size
FIG 03.9 · AS IT RANGoing from the whole plant to molecules.

Problem → part

  • Pandemic restrictionsRemote AR/VR product showcase
  • Physical product demonstrationInteractive 3D Hydrocracker Unit
  • Technical catalysis explanationA tour you walk through, step by step
  • Unfamiliar AR/VR interactionA tip when you need it, gone once you try
  • Sales-led explanationSelf-guided marketing experience

05 · The facts

★ Ryan Soni

Case 03 · SHELL CATALYSTS & TECHNOLOGIES · 2020

AR + VR

Two formats

4

Product scenes

Global

Marketing use

Timeline
3 months in 2020
Client relationship
Hired on a retainer/contract basis by XR Labs for their client, Shell
Role
The only designer on it. I did the story, how you move through it, and every screen you see
Team
The XR Labs team. Their 3D developers built the thing from my design direction
Platform
One version in AR on a phone, one in VR, for Shell Catalysts and Technologies
What it covers
The Hydrocracker Unit, the zeolite that changes inside it, and what finally comes out

· Outcome ·

Shell used it worldwide for marketing. I never saw formal numbers, but I heard it went down very well

The real AR and VR screens can be shown

06 · The takeaway

Some products cannot be explained on a flat screen. This is what I do when the thing is too big, too technical, or too far away to show in person.

← All workNext · Design Holidays →