Ikea VR Visualizer

Create a VR Experience to be used as part of the Pop Up Store concept of IKEA, to let the users visualize 100s of assets from a small real estate in matter of minutes, and in life size scale. Ikea always putting it step forward in innovation, now has big plans to cut down on its experience stores. Ikea envisioned to bring the shopping experience within household. As step 01 they decided to experiment with a VR furniture visualizer in one of its exhibition in Dubai. The project was deployed in Middle East and Northern Africa. The project’s client facing agency was Takeleap DMCC, Dubai.

 

Virtual Reality being an unexplored medium,the project in itself was exciting and challenging. We were a small startup of 2 devs, 2 3D artists and 2 desingers, beginning to get into the medium. We had a POC comprised of visual prototypes which won us the project.

Timeline

6 Months ( Aug 2017 - Jan 2018 )

Responsibilities

Research, Analysis, Product Design, Usability Testing

Role

Immersive UI UX Designer, Architect

Game Plan

After multiple interviews and visits of Ikea and Ikea’s in house designers, we gravitated towards  3 commonly found interiors found in Dubai, with a complete catalog of interior furniture.

User Research through In person discussion and online responses.

Identifying Patterns in Competitor Applications.

Understanding the controller and its usage

Identifying Issues according to order of importance.

Breaking down Data into simple use cases and stories.

Multiple iterations and testing with locals with the help of client’s front end partner

Phase 01

Before we could dive deep into the product design. We had to understand the tool we were working with. The mastering of the physical navigation  and movement of the users was necessary, after which we had plans to do test runs and exploit the controller to arrive at a general understanding of the system. We were basically testing waters, which was exciting and challenging at the same time.

HTC Vive Controller

HTC Vive lets you wirelessly interact and play with the virtual world. Features 24 sensors, multi-function trackpad, dual-stage trigger, HD haptic feedback. With all these features at our disposal we had to make use of them at its best to arrive at a seamless solution.

Onboarding Wireframes

Unlike rectangular screens, designing for VR was a quite a challenge. To understand the environment better we worked alongside IKEA and 3d visualizers. Created environments and the interface along with it so that we didnt have any discrepancies. We created 3d wireframes for the same.

When user enters for the first time :

The users enter the room on a default position. The onboarding guide pops open , with a greeting.

Understanding Teleport :

Immediately after that the guide asks the user to move the pointer to the glowing red circle ( which slowing fades in and out ), while holding ‘teleport’ (marked on the controller) and release to move to the position.

Phase 02

Soon after understanding the system, we decide to come up with constraints, and how the user can move around. interact with objects. The conditions were essential for directing the user behaviour and making instructured for the devs as well

Conditions

Hold trigger to select object to move

Select & move an object

Object gets selected

Move controller to move the object while holding trigger, vibrate on  collision

Rotate on pad to rotate the object while holding trigger

Phase 03

Moving away from 2d rectangular screens, virtual reality demanded a rather robust visual representation to communcate and express the behaviour of the user. We went ahead and created 3d mocks.

Adding a furniture to your environment :

User teleports to that position, the guide congratulates the user on learning to teleport. Now the guide asks the user to move the pointer to the red glowing circle , while holding ‘add’ and release to add an ikea rug under the sofa.

 

Note: The pointer on holding add changes to a different UI. the user has selected where he wants to add. 

Navigating through the menu :

After releasing the ‘add’ the library of furniture opens up. the guide asks the user to scroll through the library choose the ‘RUG’ section which is highlighted. (  all other options are disabled to choose). 

 

The pointer simultaneously changes from ‘add’ state to ‘selection state’ to allow the user to select from the library. ( the gaze period till the selection state remains has to discussed ) after selection it returns to ‘ normal state’ .

 

Scroll on controller is marked , once scrolled the controller marking changes to select.

Adding a furniture to your environment :

The rug section opens up and the user to asked to select the rug that is highlighted to place the ruf o hold select to move it around and release to place it.The selected rug is highlighted and all other objects lose 25% opacity ( has to be tested) 

 

On selection (one click) the rug appears below the sofa. On holding the selection key , the user can move around the rug on the floor and place when he releases the selection key. 

 

The user is guided with the controller marked ‘select’

Understanding Teleport :

User is congratulated on learning how to use the controller and asked to continue to his experience.

Marketing Video