A 3D training world for 60,000 employees, on any device.
Porsche · 2020 · innovation.rocks · Red Dot + iFPorsche· 2020· innovation.rocks· Red Dot + iF
Onboarding 60,000 employees, on any device.Onboarding 60,000 employees, on any device.
WebAR onboarding for new employees worldwide: a diegetic 3D world, a simple 2D interface, no app to install.WebAR onboarding for new employees worldwide: a diegetic 3D world, a simple 2D interface, no app to install.
// project.porsche_brand_academy// project.porsche_brand_academy
clientclient= "Porsche"= "Porsche"
rolerole= "Head of Design"= "Head of Design"
disciplinediscipline= "Training platform UX · WebAR"= "Training platform UX· WebAR"
scopescope= "Sketch → rollout"= "Sketch→ rollout"
marketmarket= "B2B · internal training"= "B2B· internal training"
..::--=+==---::::...............................................................................:=:........:.:...............
..::--=+==---::::........:=+++++===============++++++=........................................:-:@#-:-:...=:-=...............
.::--=++=----:::.......+@*=--:=@@@@@@@@@@@@@@@@---=+##=.......................................#-*@%*#=.:+#*#-...............
...:--=++=----:::......-#= . :=============-. . .. %%.......................................=#+@##%*.-#@#-................
...::--++=----::::.....=#: . ... ..... . ..... *%:.......................................+%@@###:+@@=:::::::::::::::::
..:::--++=----::::.....=#- .......................... *%:........................................==+*%#+*#=-:::::::::::::::::
.::---=+==---::::.....-#=..........:::::::::::.......%%:........................................::-+*##%*--------:::::::::::
...:---=++=---:::::....=#=..........=+++++============#%-.::::::::::..............................:+*#@##+:--------==:.......
...::--=++=----::::....-#=..........-++-.....==-.::::=#%:.....::::::::::::::......:::::::::::::::::+%####=::------*#*........
...::---++=----:::::...-#=..........-+=-.:.:.-=:.....-#%:.....::::::::::::::.......::.......::::::.:+#@#*-:-=---==*%%%%%%%#%%
.:::---++==----::::...=#=..........:+=-.....--:.....-%%:.....:.::::.......:................::::::::=#@@%-::----==%..:...:=:.
...::--+++=----::::::.=#=..........:==-.....::......:%%:.....::::::........................::::::.-**@@#*%#####%*+-.-++*##%%
...:::--+++===---:::::.-#=...........==-.....::......:%%:.....:...::..........................:::::**%#@+****%%##%*++*%#%----
...::---+*++===---::::.=#=...........+=-.:...::......:%%:.....:::::::..........................:::=*=###*++===+*%#@@@@@@#+***
.....:---+**+====--:::::=#+.:.:.......=------::::::::::%%:..........::.........................::::+---:%%+*+++**%#@@@@@@@@%%#
...::--+%**+++===----:=#+...........+*++=-------::---%%-.::::::::::::::::....................:--=*--::+***+++*=*#@@@@@@@**%#
...:---====---::::::::.=#+....:.. ...%##%****%%%*+++++#*-::::-------:::--:::::................:-==+=-----=**++*-+%@@@@@@@+%%#
.......................:.=#+:::.:... .-*******++++***+++#*-:::::::::----:::........::::::::::::::---=:...:.:**++*-+@@@@@@@@*-%@
..............:........=#*--:::. ..=%*++*+=-----===++=#%-:::::::----:::::::::.::::.:--::::----::---:...:..+*++**%#@@@@%=::-%#
.......................=#*::..:. .=-----:-------====++#*-:::::::::::.:::::::::::::.::::-------::::-:......=*++*%###@@#....:--
.......................=#+-::::..::::::..:::.::---+++=#*-:::::::::::::::::.....::::::...::::::::::-=:.....:***%##@@@@%=====++
.......................=#*===-:===---::--:::::::::=**+#*-:::.....::........:.::::::..........:::.:--.......:-==++*+++---::::-
.......................=#*+++==+==========+==+===+****#*-.........::::........:::::...........:::---..............:::....:=*%
.......................=#%+*+*======-----=**********+*#*-::::::::::::.......:----::::.........:-----.............=++=--=*%#%#
.......................=#*=%-*+-------------=++++++++*#*-:::::::::-:::::::::----:::::::......:----=-...........-+++++*##%%%%%
................:-::::::=#%%#+%#=-------=-:::::::----++#*-:::::::::--:-----:::::.............:-:-:-=:.........:=++-=+*****%%#%
................::::::::::=#%*++++=========*%%%%%%%****%*#*-:::::::::::--:::::...::::::::......:-:::-=:....... :+==::.......::::
..........................-#+.::::----===-=++%%%#####%%%*#*-:::::.................:::::::....:::----=-........ .................
..........................-#- ................::::---====#*-:::::::::::::.....................:::::--:........ .................
..........................-#=............................*%:........................::::::::::::::::::... ..:.. ...
..........................-#- ...........................*%:....................................::::::... =----. ...
..........................=#- . . .. .. .. *%:............................................. :=--:. ...
..........................=#= %%:............................................. ...
........::::::.......::...:*@*-::::::-==========:::::::=%#=.............................................. ............. .... ...
....::::::::::::::::::::::::-+********+++++++++*********=:......................................................................
...:::::::::::::::::::::::::..............................::::::........................................::............::........*>%10{%=1<=1*1>+0{0>>=0[-%=:>>]>>+#>[+}>*1*-:1}}001}/:*0#{[>={%:0#00{>1}>%=*]:#}#+:}*]=}0::1#}}<10>+:10*[>>{-{:-/{/]%#->%}%>0%]}
10+:0%#0:1}[{:{}0*+1/][*-1]]+*0*+=#><}->:{*<[%[-=[=]/<+/{1#/>*#10>10*><[%}:%{*/]:#1{<///:*1>--=+--]*>{%#+*:0]1/--[>%/0><{:=>%-{0
1=1-#%{][%00]--]0-=+</:*-=%%#]#<>-+[/*-:}-01/[%1++:>0+#0>=0#>*={1][%<]-[[%[=0{[<*1]+-}%:*>]]/]{=+/>}-0>0=>*]:%-]0{+={{}::/+*[:>{
>{<1+##==[:]**%1/#*%+1%++#0<]*:][>+%=]#][=*]>}{}][->#=1%%#{#}11><0>>/{#=//%:/{]]+{/*}1%-/:{*=+1>01*}*<[*{>=/1}{{/>/1-0}=}}=>]}#-
1/1{*}{--}=1%<>:<{[1+:=}:[{#1<}/[]+:{-+<=*#1+<*%<}{{#:<#*0{/<]*}/::11+{-]/0[]+==#%}[+0=#{/+*%}*1]>{%=+]*}>{/1::1:*]#[*]{1]<0/1=}
/<0*--}:1[/}]]*#[=/%{0-:-%/*-*:<=0>0<%*=/-#10>+:}/::+0}1}1*={=<#>#}*0#:1}1:}{+=}]/={/%]/<}##{{+>{%-*}1{-1{{1[[##/{>>*[>]}%-%<**+
}%*1}-%<<>0{}*>#=::{:==-:]=[%=<]=0>:-<=]-/1]#%**]*[%><*/0<-[=}1]+0101:/}#%]11*>:/*<>%#:}/:<[0-**[/}+:#<<<**>+%}#/:*[*#>*<}/%<-+[
}]+#=<:={[:-:}%<>%1>:/*<{-1#]0010{/++#/{>}}>=/:#[-*=<[[01]/#}<-/}[]+{}#:}<*:+-:<#=>+{#:%#:+*{{={{+>%*::>1*:[}{-*:=/#01<}-][<}=[-
*0*+>{%%<<><]1+**{}#/1[%[>1#</:#1]/0+1>{#0>/-+00%0#{<#+=%><{%*-<{}>=}}=0==0{[1+->1[[>#-[/=<*+}*%1*:[#]#>#}1]]00/%]-++*#0/--/>:+]
1>>>}}>}</=*:/0%+:]>0}*>#:0{/0]={1#1{//{-%]{[+[--/1*0:1%[<=%<>>[1+:::<<=-]*}%0=-/]/%//={>+/}:1-#+:-=:*%+/{*+0-}00<[*{#0=}-*->>**
0:[:+:1=-#:1>:1]=/+=>:]/0#<*0-1[*}/0+0%{<{%%{#---:]0]-+#}]#%=>=}[}/[]:#-:%+=/<-#+<+]]//]:]}:{-:}1+>[]%]:]}>[#1+]%01[]1-*>->>0:[%
:=1<%/*:1[>+-><[0*:#-1#{<[+}[{00]/=/]<#[]/=#*01+}*<%={}:-#0*>=*]]*%+#*]/:0*<:%]<#0#0[%=**/:#===#--+>]*}0>+}10]*0}[#=+*%={0+{:}0:
#<>#:{10+=:>{#/*::[0<%}=]>0#0#0:-:1+=<%/[#=/1}#/[=]/1>:%]1>[:=[{=*-}-{>-+:-+:[[][:>1+[+*]/>-{#{:<}-<{+<]>}[>=#<{++><:<*}<-=]}<1{
<:0:%*%1:#%*:+}}1[<10#{->%{1/}%++##<[#0*{>-[--/{]#:]*]-/[*%>/[*101=[=/0[-:%:]{}0}1>--<11>-*}[->+{1=#>[[>*>=%=1<}#{/+=]:]>%{*10{0
%01*]-:-=:%}0-}]-0+/#-#}/#*:[0:#/{}{-<1+{}:1>=}<[-/-<=>#-#*-:*{{[/]>>*//+<:+%[/*={}%:*%}1*]1:}+/[{*<%=>[1[>*[%+[->#%</><+>[*/<=-
=*>0]=]1<><+1//**=/:]::<<##*<{#:/}0]><%%%}-+/=:%</*#1:/%}+#0/=++[+-/1#1+0#+==:%/0:=-%:]++#/%#%%0<#%>#[-*+/=/[>-:<<-0]#]>/:]0+::%
<[{=[0#1<%<->-#]+**#{{*{}<{/=<://{%}++=}1=1{{[[->%*<+<:>[:=%11=/}*[[[/]0+{]=%#=}0}%<-+[{:-=*{{+%>1]+*/}=}11#[#>1-{=]0>=<//-1]#0+
#]</0:-%1/-<]#0[#}]#<={[0%>+0[0+%*/%*}-}%=}]=0}:/{0<>:+}/1{]}>{+%=-[}}<{0:*+>#>=1%<[]/0>+0/=]/][>*+-+>}1--{:-==>{1[1+<#=[0-1}/]-
*{*1>>:<[*#{:1[:<]>000%-[0#}{>010[-}0:1[:0]10=[+{+=>1}>+*1{=100-/0]//}0<:{{*:0]}]*}{{*0%###%*-1->>}%+[1#+%>}]-*%1::#-00<%#><:[/[
[-/]+=={<-==-:/*#*-:#%]*<:[00:=1[0:1:#<+}1-0===%%:>%#-%>><+::#0#}1*{10*{+<{*{[{==]/%:{%*%}=[=]*+{]1#:{#0=+++-]={-1+<{{-<*{0=#[[:
*1-[{]%]>:#1+-[#[11*:}-[+11>1[/#+<<#/0/0]}[0%:]<}%]:]{#*>/}%>//0=+:/==}####00{+}01:>/+[}#>}--<=--==-#/<{-[[}+0:0*{{]1][%<-1*1[/=
[+1[<0]0>#]}}-<}[%{#:1#}-}=}-}%{/:0:%/>:*}/:=*=]/>+[%-/>*}>-{*+%*+/<*+0*}<#>*>0={1{*#0[{01/+0]#{*>010{::/]0=>1>#0**#>*]=:=#[+:+/
>%-[<%}%<*{=*#/#<}%##:+/#<=+10*->={+*:<>/=1<{##-#<>]*->=*#%+>[>-[>*#->%/=<]/}**%]+#*<]/=:<#}[%[+:}<]=[:#=>:[}0{*%{++/*[0}:#>#00*
/<0}><]}*:*/-[{[{*#%0->#%%/1}10{[%{=-=%}{=+]1:1==%{{}0-01+%%:<%=[>-+##>1{<:={]+*}#<>*+[+[:/>#%}>:%#}/=>00]{/=}1{]#1<[[}*-%}0+*%]
#{[=1:<<%0>*-%:-+[%0+/]100*<:#<#00/<%}1/=+/]>>0:+=/+[>[/]/++{{[%#}0{:1[%1%01*<-]*%1{{={<}/-}#=*%#]</<++-%/#]</##{{]-}1<={>#>}0:%
%}-{+--%#*]*+]%+#++}>+[%--{*[--=-%<-{#*<*+><%%%:-#[0*/:*>}{+<0%{<1++}<=>{#>+->*}<*>]==+{:/{<->>+*%%[>#01#%#>01+[]1{+-[++>[-::-##
/1>*[-]*%][0[<=*>{#}1[[<}[[-{*-]#::/*:/+1+[[}*>-=+-//+0}:{=1-><=]01:[{11[+::+]>[]{%#]]={]+]+*>#-1]>:}0=*1][##%}[{*::[%:</=#:{0=<
+1*+{1-%+*{-01[]1{#]/+10:*:-0}/{%==[<0{{}>-00++%]]<:+:}/[0%1}+*[/01#+-]-=:}:*]>}/[+*]}-#:+0+{}[=]}[{>[++#0%0<{{[]=<0}%=%1-%#[<[]
*[<01]+--}#+-+#*/+*0/0+*:=*{+]}*1[0+<#//+111#0>>:%+[/0<%+#<[>{*1+={/<<%-<:/:[001{>#1=*:{}0]*}-<{[++##1->#-{]-+1-1+=/}1*]]1*:%%*%
>]1==[/{}]/{[+{>+[:1[>]=<-{]{%1::>+}{}+<+%><:[%*10*}1+*/%/]/%%{<]#<[-0]-:[>:>>*{+}}111:[[[1[{<==/#1][%*{0*-=</+}+>{##1+1/]/[<=<}
0{%>>{{}1{{0+:>{[{+]#0{]-=*1]1:[*0/1=}=]:{=]+%1/:=*-*-{=*/#>%[{*]]>#>]1</%}]+<]#][:-{=]}:[}[**+[#[0>#*=:-/>%%+{*++#]10-{1]0}%%:<
++%{0+*%<+1+->1{++1:+][/*{+*<</][1%+]*={->[-%0-*=/=<*-]#-/0}:*-%#*1*0*[**{}-#>:=%+:-<:=[=<//>*=]=>}+#-1{/[}1]-[%}1<+<*}%:0-{*::0
>{{#>+{*-{%1]-:-[=</*:::01]%/}#*/]]<%}<%[-<+<0=->:[]+1}[>=1//0*%0[:*:]/-]1%#]+0-{}-1%0>**{0}+{/==]/%1{/+-}=<{>[#:#0#===%>]>*#::>
1/[[]:]:+/>%0=]=0:1<#:/*}=:::>0>[0/}>0/][1{>>0}<0+]-*10#%**-+#]*10*}[%}/-:#:*1>+{*{011}+=/{*=}]0+*]%+%]]{[<=#:*}<>#*>0+/#/*>}{-{
#}/{:%=/0=#{#/+{0{<>{}}}:]11[{</0%1+[:*1<=}*%[-/%[{#/[:/#1<0*=]:++]/>[/<{0}/]00*#0#+>/[*}}{-{/01[=*0%=+]</]=<-}*>[#11+#/#0%1+:#>
->=-++[]#[=/>#/1%{%}*/]<*%=#>+<=]-*[*}]+=/1:[{{-0:::001{>+<>=<1<=11+}/:+/#1{-:*#:/}]/-1%#{+-{/<-0{%<<**%0-:*}/:*>[[</-{>:[}0+//+1-/{+%+/11/::=+-<1{%<:%/<1%%>=>%%:]+]]#=>1-=->%1<#<{{/1]=#{+]%/{}[[]}]:1}}}<+0+<1*>[[+[:=:##1:<+=}[*}#+%/={/-/>+1:]%+{*/+>=>0<{<
-/%=/*%=[]{{/}%>>]=*<1+]{-%=[*]#}0{[+<1[-+-#]%{[%={/}]{-*%-1>}/{%01<*+}-->]%}}{{>0=/1>#-{}=0]:=/]>#-+:=:=%<*}=]<->>{0}*/{[*}1#+%
[]--%-={<<*}++0]:*=/*%}{-0]>:>+#<#][%}%/#/%#-10%]/=++[%{+0%#}0}{1>1+0{]<*{*%/>}%-*-}+=]-+%=<#*#/<#+1<<<+*/:%[<>/*:+}-+0{[{0{>:+#
}0=}}*[*<:[1]0*]+/{0=>{0[}/#:+}]*<%1#/1#+#1+=%#{*<*-]=1}}1>-1]][+<{--/{#%/**[<+/%+=1%%/%1{-<<>}<%{#-<=:#<>%+][###/:%-00%%<1}[<1:
<}={><#-:0#]>{:-+>[*]1{:=1<>#=+-[:<1=+0-/+%{:0[>{*]/:#1}[0[++/10=#:*>*}:-{+++}]{+]-<}>1}0##/:=[]]</]]%0=:<=]{+[>%{+-/<%*%/{[>#*#
}}/}*{/=]{#*>-]*]*}[}#%*+#}=}*%0:-1}}#-:/>:*+/+0/{%*=-:{1:[<{%#0/-=-{={*]11]*0*{/0#]-:{=]=}{*0%-#<0->}1*:<<:*+[{/1}{{}>/>>>:#*<{
1:/=>}1==0>=+>>:%%]#0]=>1:/%1}]+++]%{/#]%:[//]}0%}]%=#>%#:/{+/0[-<%>-{*1/:%:=-#/%-<=>0{{%%=}{#1=<+=>0{/1}}1[+:+=/{++[#[:]]+===}-
0]>+:[:<:-#]0#-*>1=-++:1#<<%1%[1:=*}%*<1><][/{+]{=-[<{/=>%0/#[*}1>}+*0:%%=-#<0::}=<%%}]1:]0[:%=<*{%-{=}##{>:=/#%0/--*=:>:>>}]>/]
1%*+}]1<=>/}=-[=}{1<:/<=+</{/]{#-1[#11=#1<}+%}%+%:<+##0{}><]*#/==+/==#1>{/{+*000}/=:[##{00[=[[]1-}>:[1[>+0#=%:/{=:-=1}1:/>}#:1{=
0:/<{*>{{+-*}:+-+{+#*<*[1+*/*-++##+/}/>%%%}1>[1]00[*>=[:{<:=>}=/#+0:<}]/#/>]]{0*::+01}[:#}-[1%1[#}*1=<>+%*++[1:+/>1%=%/{0:+#[-+0
]>/01}<}+*]%:<=}#>#*<##}:=:%//>1*{*0=+/#*%>]>:>>0%#0[/#:/+>*#}>*<:[#=><}*=}*1+}{0}[[%==-10**{=>=1#01:{/[-0<=#:-%=[{#=#=>]}00/:<*
}]#<=[-[:-#/1*[/{0>%}*>=:%00{#*1]{=>=%+1#>>}==<{-==[*1#1*1=>/=>::0%>*[-[]1-[%{{%=]*%<{*]=}]>::{-#]=0+{=--</#>}#0%/*0]<}:{</+[<0*
>*:*>>[}[]->]<{+-*=}1%/1[]=:=*}{=%%][<<{-1{>=/%]/<*0::0+}{1>%-%+>*>=}--*#}>[1[0:=/>[[{/[#]-0#%/*%%#<]1#--#[1>/1:*>]>}%]-[=/=}=:[
/<<0#>:][{]<[#}=]:{>0=>]<]-01{[#=[=11+%</]-//>%}0+=:%<-}->+{+*0{-]<*{>[*%]+1-0[>=/[[1+=->{<%1[]-:{->[0{=%:<#{]}00+%%}}=</:}}+0*1
>{::]*>11/1{*%{}[+>]{>#-1-*::1{/{=[:[<=1=#*:}#}-[0::>1{-00%1%]-0=/*}%*]/-11[}%--}-<:%>+=:*-/%{:>#>*%*-=]1%[1/0>]:+0*00-]-]}-+--+
=0}*/1]1>[:#-%>=::]{*{%=<:}1+:+0]]%:/{0]}01*}>*>]+-{{0[][{]#1--%#-]}0}<#:%**%%1#{<:/}//}-]:{/<+/<0->=}%[[{=0#[%}#<[0*]0[><</%0[1
%//%]>{10]<0%*%=>-:/-[*]<#[=-/*]-[0#+0#-}=1[%{/>+/1<=:]0%*00{>=>*{>1}{]-[<:}<}-%{=>[<[1}[*>1=}#%[*=1[+:1{=*0//>]*-1[][<]1%//{*#0
+-%1[]+}**<<}=1<0==%%%}+=/-/:#%1--/++>]-0<[/}{%=%1*/1<:}*-{%*#=-1>%#-={:1/={:#]-11{]0*-}1>[0+0-1=}}/}[*0-#[{0{]/]*0:0>]-[<%<}/->
%</:+0{</+<%[*<1<]>/=+{%*%}*%{0=*{+]->>]=%][%//=#+-=>}<*+*<]]=%=:0{/+%-:{>*/*#<%*+01-/0%#<0>{%#=>-]:=*}-+=<>-/{*]+1>:0+>+#{>0+*:
/1-1**-#</%+#}+>}1=/<]<->-+#:%]1[#]%0%#1]1:+#%[*%<0/#*}{}##=00>:<]*%{:}}>0/0*<0[>+:/:1>*}}>/%#]{%{={[*/<}}>}%*]<#=0+**/-:[[{={]%
0}%+=%+/=*11<{/=]>>}-}=<]*=0+#]1+#=]0-:[<#+}*-[}**<#:<]+{10}{=:1>#[>*[][%:1]/0][=<-[[%0#<*>{]1-*0:>>%-[#=#+:=*[]{#:0[>*[+%<1:+/=
#[[-010<*=0>-#1{<*+-}->[###=<-[]]/>10<#<<=0]}=*0[+}}{:%0#}}-[=0#0->*[*/}%/++=0-%]->1%1}0=*0-=*%:{[{#%/[}%=%*-=}#*><%<0%[{]/>=+%*
]}=[0::*>#={[0+0*>>#>-[0{{1{>]]0[}/===<:1-1}--/>]1/]-]-[<}/{==//>=0]{%[>1=}>=-:>#+[/#{1-%[]/*#0+*=:>[]:{}[-*>*}>%+0-<*:-=}1+*}**
-}<%[0#=*=*}00>]#:{>*-10#1{{[-{<#[+#}#:/+>-}/[={*1{*11{/:*1[%}#--{/]%*#:+1-#:-+=0[{]0%*/111/-1+%==>0%*:=/00>1{1#+-:10[:1}{<1}}%[
1#*}*->[/+11}0<=+]]0+{1=]=+]<-]0+-*+:-=0-/]#]/*:->{00[:#-}:#*+<>}>*+[#*{-{-<]=%{+-#0=#%::-:]*>0]1>][{}-/:>0%/#*}{>>{<#<*-<={[-:]
0]<+%**[-/-*#{=:0]--[-[%:::+-#>/0-[%}0+}#}1++#[1[0>-+</+%=}1:/:0/-#>:0]:<0%}{/>%=0#>[{{/[#:<[<}*01%1%1<<>*=#%0[[[#1]<[}]>]1=##/}
}:<-]=]%</]0/0:+=+<]11{+<[[*0]=<[%[:-1[:/%#0+:*%{#}%>+/+<[+1-[0[}+}*%0*<<#1][#0++-}{/=]{0>/<*>>}}=%0<}>[:]0+//*><}-/=**%[[1==+/0
*}]/]-1{={[1<%%1>-0/%}%>}>#<-/1%[}10-%]<>]/:#%:#]<#1[*0{]:+11:{{{*0[1#:1[1-*><#*0+0{<=[>+%*]<>:*}0#}]=#++0/1:[{-]}1#]:>]#%%:/#]0
={*-:0>1--}0{{>-%}//0-+-1[:=1}1=<<{--]=+/{[>}=#[+01#:}[+%={=:#{1}]*-]=><-=>[]:]>:01}*/+#{]]0:[-/}}1=#[=]:*=<{1}-+#}]#]#{]/-%]/1[
#%==>/#]-<0=:#---=*}:+{][/={}=%-*}[%/1%#=-=[=>*]/1-#%/[:{/+=/#:/[1={}[}0+>#]}][/<1#:#==#*}#-1-%/1:[/=0*#[}0}}<]>}<>[-<>%#/]{-%+#
[+#:*-}}{=->{0}%0{{>>}*[=1>=%/:%/>>+1*0}-+%+[1#[[:/0==%-/>>*=1-<+-]1]{#]*/{>}0}+%>-}1*}:0[%*1%%0*->*#:%<#}0}+-1[%*1+<%/*/-/+<]:[
#}}>1]=+{#=}:0%<+>]<1]/[*0*+>]<*%{{}11[{-{*{<]}+=1{/=1%<*{/<=<]:%<%0%*:/#}100#=>>1}%}::0{1<]/</<{>=/-=#=]+-#*<->+[11*{{[#-[{>]<{
#-{=*0}-}1}%++<#==+[#<*{]=<]00<#+#:%1#]><1>%}0+<=>}1[}[0{{{-++-{]1{}{]-[{/]:%#%1{><<#0*0%++{>]1%:#}}#::=]==+%{<*-[:{*}}}#**[0##>
0>[:]#1:--{*/=00}-*}*==:11#0*--*{1}-00:[][1[-[:::+%:%<%*0:<#%-=}=#+:]<><1/<#}#0>%[//0<>*]0/]+*/]:0][=}+=#[+:/1]<%1/{/[1{%}[]:<*[
=%1#1=-=>[1}]{1/0>:/#0-#<}/:}>{=#]0></[{<{[0%%%:+/:={*}1+>[>[%:{:#{//]:0:#0>#=>%[+0->*=]-}1]/1:{0#=<<[0</{:]0[[[0=++/<-:>[-0-]:+
}>}-:01/0%#=}{/>]1}%1#[{<>}=]*=0+=0{+=}0>%%{/00}::#0[-/+**[+}->-000*=}#00[<]%{%+<]]0]{1%1:/*%%-++%}-/]+[[1>++{<1*:]1++/=+]>>0=[<01 / the brief01 / the brief
Onboarding 60,000 employees, on any device.Onboarding 60,000 employees, on any device.
Problem
ConstraintsConstraints
60k users, any device · no install · immersive yet simple · localised, on brand.60k users, any device· no install· immersive yet simple· localised, on brand.
My workMy work
WebAR UX · diegetic 3D interface · 2D wayfinding layer · UI.WebAR UX· diegetic 3D interface· 2D wayfinding layer· UI.
DecisionDecision
Diegetic controls in the 3D scene, a thin 2D layer for wayfinding.Diegetic controls in the 3D scene, a thin 2D layer for wayfinding.
02 / see it02 / see it
The work, in motion.The work, in motion.
03 / the key decision03 / the key decision
Immersive, and still easy to use.Immersive, and still easy to use.
.::--:::............. .................. ....... ...................
..:--:::............. :*==-+@@@@####@#=-=+=. ..... ..-*......:..........
..:-=:::............. *- :::::::::. *- . ...... =+#*%:.*%-..........
..:-=-::............. .*:..... ...... .....+- . ...... .*%##=-@+...........
..:-=-::.............. .+@@@@@##########@@@@#: . ...... .-=***+:...........
..::=-::.............. .+@@@@@@@@@@@@@@@@@@@@: . ..... ...=*%%::::::::.....
..::=-:::............. .+@@@@@@@@@@@@@@@@##%#- . ..... =%%*..:::-*+:::::
..::==:::............. .+@@@@@@@@@@@@@@%=+%@#: .. .*@*.:-::==:-:=+-
...:-=-:::............ .+@@@@@@@@@@@@@#=.=#@#: .. -*#%+*%%*+-.-++==
...:-=--::............. .+@@@@@@@@@#-##=--+*%#: .=*%+==-+*%%#@@+==
...:=+==--::.............. .+@@@@@@@@%+=*%**%%%%#: ..:.:-*===+*%#@@@%+%
..::---:::..................+@@@@@@@=..:=**######: ............::.::===+*%#@@@*+%
.......................... .+@@@@@@+.. .###@@@@#: .................-+=+*%##@*==#
....... .+@@@@@@-=%**#@@@@@@@#: ........... ......+=+*%##=..:=
... .+@@@@@@+-%@@@@@#@@@@#: ... .....-++*%%%--:::
... .+@@@@@@+-=%##########: ..........:....-=
. .+@@@@@@###@@@@@@@@@@#: . ........ .-=--+**%
.+@@@@@@@##%%##@@@@@@@: ........ .:=-=+**+**
.+@@@@@@@%%***%@@@@@@@: ....... :-.........
.+@@@@@@@@@@@@@@@@@@@@: ....... ...........
.*+-=================%- ...................
*= .................%- ..................
:*+====+++++++=====*=. ...................
.................. ...................<0]=#:%==}]=-1{#>}[10<*:#]#][[][{}{><{=[=>0}**<#:#{}=0]=}[=}*1]-/[=::]:1[}*}#+#{#0%+
}>:+-+1*]>>+}>#=[-]#*:*>#0/:{+/<0+<{#-=:<]/+>>>+*:*=#{/+/=-=]1]<>/<]-+*%>#]{<[[[1<{<
:-{{[<#*>}{{*<1<=[[**/]=%:+[[#]1[%<10{<]]>/1[0[<]0><*{]//[<:%:[#%:>*}=-%+>0*%:-]:1++
+{#1]1-%}+><[->11#>:+>>#-:-}#1}+{::<%}{:>[[}*=#=/0/:{11%{>:0/<}1:#]]+{][>#[]+[{{=}-{
#{1:0=[<%>[:{]0+%]1#=-*+</=+]*%+%{}={<]>>:%0%*<*%*{]=}%=-]-[##}<{<>[*#>{}=<:0#0-0:+=
00/>#/%<]{*-*]{>#01%<]<]<>#}[[//1+<10]+==>*0][/=]+-}*-{}01-{/[*{{==/%:-#0>+#%]/}0/01
-+<:11=}0{}1</-1}]+:}##:/}-*+0+*<:[/+10*#/:*<1}*>1+]+{{1>=-:[:1[+=[1[%{*[}==:=**}0]0
1/<=[#+<+0-+{]*<+-/1+[]%/-:]{*<1{{%*#][%}=#:1<][=1<<:=<%/:-{-}>%=*><-/+=>><1}}{<}++[
-[**<{#1*+[>]*/>/1*1]0]0>]/{]1-}0%[]%0*%0]-/01]==-<{>>-:<]#0=:%/<-<1-{%}{[://%+0{-}1
[<0+<</1:#}=+>1{0#:+*>[<]1+[>%++-/%0#>1-}]{]-]=--1%*{1{}}[0-:0[=<:/:*11<%[%[-1#}>=:1
%=*#[=/][+:/[]>>%{/+<<<{:#*={*+>]/%][/]0+:>=11*:+{>]%+*}#-/%+%[*:{{>=<=<-</{%1[=>{/[
-=%1[]*>]%+}:]<*}/]0-++>}0=%>+]]/]>#*{*{<{/]#/++*-{}]>>0*=}[:*}-*}}=#-==*[}{<]1%/{11
[+##1#{>11>[{:<1%<::+>//>[>[%/=:<=>#%<:=<#+-*/[[+0[>{{[+]1={]-%<0={{[0>==]/[::}{#<>+
%]]>[]:][#]*#0#-1<<:1}01>[=1==1<1{+]}#]{+-:<={}-*01#%1:/:#{:/:[]0/-+%/[+*=<1<}*<+]]=
<[*+*[:[0%{=]=:[}=/*={<#*#>1/1=#%/*1%=}0=11=-+0]1-0#}]{1[/-=%*<+]1/#=#/}[1>{}:-01**:
*%%{{}0///1->/=-1#<*-}<#[}1{>[{/1=%}[:*[{#*}]0%%=<#+01+-0=<1}1<+0:[+}01-<+/>>+>=*:/]
1{/[[1{{*=+*%-0</]/*%>{#:%:=+*-[<<1}%[:[%=##%/>*>-+{>=/<#1/%<:>:==1*[:/0*>]11<%<+]:>
=%:=**[[<*+-}<<:0=<%1>=<<*{%[01*>=1]#[=*-:>]*=10:::1:*1:%}{/=#0<:0%-->}>{[+->>>-[[[+
101=/1}0=[1[#=/++-+]=<]%]1%-[/{<[:>-1{#]>0*>>]=-0#/=%+=0]#%%:>%>]%][+}]%0>#/=]]>{}>%
][==]>=<*><[0*-*<]{0=}%{/1**%01=:=[/{1%%-+-[:{+>{/-<[0[%<>}*[{%>0-/#[+:%#-=]=+-1]+[]
>--:%*+1-:>{]/#<*{/+:<0}>+/00<:-:%-/#:*<=0+#1%=10/++{%%*01*{1=-:-}}-}]=[}{*}:0{[<#%}
--]]}-*/<:=##>%]{}}*}<>#]}:--*#-}#+1/#{0:=:#=:}1/{>{/{=[01%0#>}-*{=]-**<][]#%10%1{:0
:%+->]}1<%}*-]1]*1+<*=:]:0*0#=#]><=#[###]+/#%<]=}:>-}#+>/+>=]:=<-%%*1[[#::}%<:{%]:+]
1--}:[{%-0[<{#{-{1]*>0]=+*{={}1=+#1+<*<#%[{0]}<#+[=#>+%%#+]*:{0}[-<[=-[}%+/%%{:<-[}/[/#1:>1=}{{{0]{<1:]]/[##-*1<=/#]1=}[/{*={*1=>%1[-[><:>-01:+</>:#->*[}#<{0/={0}#][<{/
}+-*=*/:}:1}%/]==>[1=]*[<{{<=<+[0]{]->/}*-1/1#=-{-++*:#}*}=*-</[0{:>>1#[/]=>+0+0*-[>
}#0<1}--#-{10]]{0]{<<:{{:#/>[*}0<%-=>=:>]}+:[<%[0:-==:>=/-}11%}-%=[1}-<]]{[=:%*#1=+%
0*]*[]}:*++{>:=/%-::*[:{}>+*[*-%<[<}-<-=%1{0}:--0]%::[>:%/}0/]:#--[01+:-##]:*}+:>-{=
#-+1>1=:>-{1[>#[=-+/-1]**[0-%]->%><]>-1#]#0>/}[}>#]0[0##[<[=[:/:]+:#+{+/[-%[{<{}{]]*
:=//]]:<*:<<1+*1#*=-=:-[<-[/:-]{1#/=}0}1+]=%{/0}0[/{*>/%{%%{{:{{>1[]#1]#<:}>#=<}[0=1
=0=0::1*/-#:[<}<#%-}:}-{}-{+:>0>1><0>*%<>#]%]</*#::===}==%]:-<*[#1}:}#-1<1{%>-]=/11{
{}/#}=]1##+:[=1=/}{]>-=*%#>]+}-{=-[/+++++>10[/:{%#/*]1{*1*-<:0<}*/**]0*/]#+=/%+++}#=
0<>0=>-]=/%/-<[{:01=0>{}}[=}/:[]>%]]#>}]0+>[=%/+>[<<*+={0*1*</<>+//-0--[>-<<1}%+]}]:
[}0[</>%/={{/%=}>#{[:0[:=]+>-}0][%>/]<{#{:*:*>#*-:*/{0:}*:<:%=:0#1-}1%{1++:/]==<1#-#
>+*{>/+/0{:]{/-%1}%[:/%#+0+:1:]>]#{[{0#]*{+*{%#//0]%11==-0>[[0#=1[}1</[*//%-*1]:>#:[
/>><[{*#>0}#-1{-><=[>+}%>>/[[><+]-<*+]=}]//%+/#1]<}1<#%<:#*1%<*1-[#>[:/]-}%->1{#]#/%
->[%-}0[/><**>:/0//1:0{%-<%:>-<:[>=[{*[0::1-=01/1}-:]}{>**]>>=00#{=-{0=>[00[:+>>}#[:
/#{[:-%<{:-}-+]/%+=<<:%}{##}-#%/[<}%+:[}0:++*{{[0+[%><*<]<{-*]<=]+*{[*]-:=]-0=[+>#[}
=#*+*/1=}}*1+-*=+/-0%+]#=0/%#}-:%{#*=[=01:=+}0=1[1}1-**+}%>#1/*[%}11-<{0]-%=[*+>/=#<
1[}+]<}%1:1=+**+1{:}[=/-->%[}1->}<%[<:00==]{*]{%+*10**0--=>:=:*<%=>]#1]<>=+#<=%]10/:
1<+}{-:/[%=>#+*0>{1/={1*]]-:<>=}[:%[:#]*=+]=-]{01</]<*>1{={]}-#]%#[-*%:}+{}=0}==#<-:
*+%+/01}:+><1#{>0}%<}[0-/-{<]:=>-+:1=:=<{{*{]-%0[{0>>/[#+}[]#-<>-:{1:/]]>:#*{-]++//>
%*:]-[}#11</=/<[#->#[}[<=/#+%%>]01]0%:-/}-{-%[[%]11:{]}}{<{{>]1-=#}-/+>/{[:++:-{+}1%
{}{<<[]#-{0*{-]>*:/>*}10[={/{/=}]%=]]:#11]*{%{/10{[01>#:[:]#}+]<0{{]0:*{%/1</]->]>/1
<<1}=*+-%]+1%=--#>[=/#0:-[=1%:]#0-<==+]%*<}-*:}%#[</=#]-#[/#[>*/=-1}}=-==[[]][><:<#0
]-</]1/}]{:=>{]++#/]>%/=<]1*:+++=}0*{:}{]:=>#>%#}1[1{#%/-[>][%+{]}]%{0>/-%=#[}[:=0-0
=>1]:<+0{/[]/-1][--#}#1+*:{><*%<///{=#}1+*}0}:10=-0*10%1#[+{[%+--0>///+#/{#=*/#}></0
</]<#%}::1>##0#-0<-:{#=-0{0%][%%/>=1%>]#}[#-1{*>%>[[[/#[{]{**+%:/:00]:*00{--=%1+]>//
.:-=-:::............... ................... ................. ...................
.::==-::.............. -*==-%@@@@@@@@@#===*=..................-*.....::..........
.::-=-:::............ .%. .::-----::. ..%: .............. ++@%%:.%%=..........
.::-=-:::............ .%. . *: ................*#@@==@+...........
..:-=-:::............ .%. . ...............%: ................:-=*%*+::::...:.:::
..:-=-:::............ .%. .................%: ..................+%#%-:::::-:.....
.:::==-::..............%. ............... .%: ................. =##%::-:--%*:----
..::==-:::........... .%. ............... .%: ................. .%@*.:---==:=-=+=
..::==--::.............%. . ...... . .%: .. ............ =*@%*%##%*-.-++++
...::=+=--::.......... .%. ............... .%: . .+*#*===+%##@@@+=+
..::=*+==--:::.........%:--:::-:--=-.---...%:..................-::-%+==+*#@@@@#*%
...:-==---::...........:%-====--:=++==+*+::=%-..................::::-+++**#@@@@**%
......................:%*+%****+++++++*%+:+%-.......................-+++*#@@@%==@
....................:%+--===+===+=-====-=%-.......................:*+*%#@@+..-=
........ .......:%*+++===--==+---=---%:........................=+*%###=-::-
............ .%-:-==+*++++==-:.. .%: ........................:....-+
.......... .%. .::.:-=++++++++--%:... ................ .-===+*%%
......... .%..%*%. ...-%%#**%-........... ...........-=-=+*%**%
....... .%. :-:..... .-:.:%:........................ :-:........
.... .%. ... .... %: ...................................
.%. . ..*: .............................
.%. .%: . .......................
-*=----=======----=*= ....... ....................
................... ...........................-*{0*:<%>=1+{/+]*1=#{=>0+>0<<1[*/]/-/-*%%-{%1::/<}>=+-1/-]0-%}{+0*[1>]%-%%*]:}+##%:0
00-<>/<<#+>=:0%}/:>=+/==/[{<{%]%]<#1->=}/>:0#/0}=<-0+1%1+=+*#--/*[{1<#*[}</#{:=/0%}+
-<+{->{#]%+%%<>}%#1::0+>*->%%*}/=/][+[1<=<:]0#}:#}}{[-/:=<0]-}<%=*=*==:+/%->:1[:<}]-
{#]-}{]=%00<<=#=}+*/-=}*1[/+}-1<#}}-{-:*]}#}:/0=-:+00}-[:1{<+[1::+-/>+<1]*}*#>-0**]*
=*/-><>{{*]#*-1++%:][#::#]/={:<]:}=>=>*#-1-#%#}%0=>]#%[+:/%:<>]1/1]%{>+#0=/[>[%:%+:]
**}--=-<<+/1]][*1]:%*{=+/%:+]]{>0>:}}}=0}<0]/}[/<%*:#{=:[-1<]%0=+{{[[[1*-[}1/0<}+<+-
<]*#+/]>={}<*0+:}]#%<*#%][*:[<+1/1[+##01{:}<0-[+]+=}{1%}/:==>+#<1[/]{*1<=}-+00+<0+0/
1%0[*}]>/=--{=-0{}*1#=%+1-#*-[**-[}:<}+>*0}:%{:1}->1%><0>1+/0%[-*:{[#%<:}+::[}]/*%<=
=#+[1-0/->{//}>%[11}:=#=0+>0+1<>}+=0:1[1+#1#++:%11<[0}-{]/*>>/]0>{-1<<#1]{]*+-[::}[*
#1+/#[::{]+]*%]/1>-]+:#]*+=-{]1:%{*#->1<=-{=+1:[+{]%<**]]>:<>1-11%-</+0+]>->--1-/*{0
=*#+}/}#/%/>++{+}1*0:=/]:}>/#<##0[::>0%0]:+>1{}1<-]*-}:#/=%0>#}}=::%{}=}{1}=/<}#/:#{
-%#0*{%/{1]>/+0}}-%]%1]=<%[=}{]{*>}=*:0*[<[<-%<{%{</{{[]/[/#*1<1:=<1*]/>:>+}[<<<{#<}
:-<#[{*<%1#[%1{+-000::/0>{-/-]*]%[=0+/>]=[]1:10:0{:=1>#}1={0%11=*{/[}]<:%/##%000}+}-
]:#{-0>[1-/}%%>0<}[:#/%:}0[#[/#+#+]=-[%0<}*{]+/-<<*%[*{01/+/%{+]/%}0%:}*0+/>]=#>:%#<
}>*<+}0*00*%[-#>/-={%=}]/:/}[/:+:=#+:#[<=<[-#{+=#<>#{0/#<:#0:0<**#[%#0#>-}1}]}]{-*}]
1%]%+0=*<-1-]}-*>0}%:]}]-*==-:}>{%/-1=++=--#%[{>%/[]{*{#%}1=#+]<<<:[[>%-:]%+[<->}=%[
->:=0%%%%>-0<%/{*01}]<}}#][:[>*]>*0=:/]0<}1=11->]%=[<0##=:[>}1>=/:*1=]+}}#<{#-<*+%1}
1+]0%=>}:<#>]%*/-{}}*#[/::<]*:/%{+0>%0}1-=+*11=>>]0:#%1/:=0[*{%*/][[+#**=/>-%>-]}1>[
%}0=[1*00%}<%#[**<:/]#>}00+*]<1#-[>}</}:#}{]}:>=}:1+:]>[]/=#[{}}{]#%/[0=:%/0[<-]+}{}
>/}]:#}}%%1---*>%[:{{{:#%>>:{>/-/0]-##0{>0=>%:{*+]<:1}]%/+*[10}{]0%*#*+01]}#1=*[+{]#
==1#+0<[0#>]0[{>##1/%:-][>{:/:/]*%/*{}:1}%->}1::1[#]/%>+[1[-<=/=[0>%%101<0[{-<+:**=1
=<-=]==*>+/[>-}}/}[{/=<:/+<*#>}<[001:+]/->{1=<-=<]<+]--1#-}0*#=<}[0>0+%0[:]+:}{=%]+]
-<=*}#*]1*]0<>{#/[+1<#{*/:-**+/*/{*0[=+<{#}1>#}*0<0%/1<}0=]<%>#*+[+*/:>%>+*//==]0{#-
/#>{]/**/:%1/{<>+/}]*#]]1{<#{[%*<0/=][{#=%%}-<>**0<:<<+{11/[/]%%*%}%+<{}-/[=>]-%**#=/}*1%}-1{--{[{*{{*>=={+<{1={/[]:+%*/0[0%:+#--+[#+<*+:%1#*+{{]1%}%+0*#=#:>%>:{:]]</-}
]<#{#:0::}1-%=%>]<1%*-]#>}:+<]>+#:1:0%/]}*1*>]{0>#=0=>=/<=[+{#0<-}{01}%%0#-1/%:%*1+>
00]00-[]=[1<+[-0]#=*<1<-+=}//+<}{/+*=}1:#<>:/{//=+*{%#>0-*#+-]][=/0{%}##/<[/<*-}#0-+
-+[>]1}+[]}//0[+/:/-+*#*>%%{%#-<+/1[0#>0<*+/]#>-+{{}00:=>1]+*+{=%]#>-[=11{}%%-#--*#{
0/%+<>-1:=%{*}:0=/*%+*+11#{%+{=*#]]-<:]*=>>+}{=*}0{0##-*/-+]+0/*[]%=>/+<]0}{*%*<:[]{
10><-:0</}-%*>+-0=}+}::/>*{-:{=11:=%[/#-]0::[:0#>10%:[0/[0*>1{0-*:0:%[=[:-/-1#%*1>}#
[={=+[:}[10[1}>1<0>%}/-#:+#[#:}/%+#+*={{]}1:+%%[/}-=+>:+]={1:/#1[}1{*-=/<{#<0{/}%%}:
/<[1<}-1#+}0%-=-{]<#--}<}+#[-#0:*{{<<<[1[/<0*+{%/=#+:[>{/::0/:%]{/0>->%-#0]:]0<-*[*:
[%#:+:[{{--::-<0#/{*]:1=[0-*/+=1[{=>{}-</+-:-:=1+*#{+:0}/>-#-<:0}#{>}]1:]}[++[>*[-{%
#{=%}->==*}%<[1=1]:*/%}=}:]>-<<}-%/1/</:{*>*=-=<]+*#=</1<-<=>=#}%[#-+<#%==*[+[=:+1+0
0]+//[[:{-+}+#{%#<[1#0+[>*+#<:::1/[]#<=0%==<<#1::[%{/0#:}==%+:=]>[/>>%0}}<][/0*[/1[:
>=-}#1#1>>-+:=<=*<*[:1/<[1-+]%>+]]:#[1]/>%0-}1=#=:<<//-%:-#{=0{0-]}[:*%/#]={%=#{=+*+
:::[0<%00-==}#=:+%{}>:*<-#}1#0<<1[-[:0]+%}#{<1#=[+/}<[%/}0=#/#%}1<+1%/#=#{:#00]/1:%/
/1<}/{+}0/[-[1*>[:}=%[%%}>/+=}*#0%:*#=#//01/*}--0:/:+/+#:0]+]*=]}//%{=:=**[11*1/]/{<
+%:<[{+#}#%}#*<%#:[#[>1[0={<<}]11:01+[<<=:[[+1]>-*}%{#{=[=->#=*[]=%}00%]<[}10-%0:<+:
::*0<]0=<}%]/:+[]//+=}0-:+=[=1+[#-0[}}//[}]:%]]-%/]=+%<<[+*:{=[=+}/<#}%+#[>*:+}>[#0{
+:{-{==0<#:+<]1*}>%}>}<[>+[{=:</==+#[>**0/]*0++#{1%0/->11<{</*=%:]/*/<%<[%-+*][10=-0
#{/%=</-{%=1+1{=+*#=]+=[=+#{##*[10-]+*0:[-%1%-#*=*<**:01:*+**}:=>0[]:1}1:[<</*/{<}=0
/0/:+]/[+{/<}%[<]}][/{</]=<#=+0:]1--#:]*1<%={{:*=>-1{:-<++*-<-[%<#=%-*[[=%<]]:*1*[:#
---}:}#%{+*>*[>->#:-={+0-]=:#[[]]%]<[0<>#>0:>%[=**]0%{-}++1/=][<01#=*#><%>*<#1]+}<}1
[{{]]#*]01**:-{]]+:#::>><:*>+=-:/[=[:=-0{/+>#/>#]-<%}:[#%#=/*]}-:>}=/0=-/1-+[}/:<=}%
>#:1]0:<0}/+{>=[/%/:#}##+-*]+]{%/>/:</#1<[>>/}]]-*-}><+%0+[<-#[#]>//=-%=+1%}]}:%]1+:
*#<]0:-0+-%>0]#/%0++=-1:0{*0<->[-}>}-[-=0%:/}-{0+#>[##{#>*}[*[>01//0%-#}[*1*1+>-=>%0
+#*}-=0{=<*</11]-#{*{=:+}0%--0#[1%:+#}0[<=1=**=}:#]{+/}11//<*0+{[*/*+1%0/-=+{[-/>+/<04 / outcome04 / outcome
What it achieved.What it achieved.
60,00060,000Employees it was built forEmployees it was built for
Red Dot + iFRed Dot + iF2020 / 20212020 / 2021