IKEA Place HoloLens

A personal project - in collaboration with UofM 3D Engineering Lab

Challenge:

Design the IKEA Place AR Mobile App for HoloLens

360° Prototype

360 Image - rotate around to view the full prototype and click "full screen" for a more immersive experience! Please allow a few seconds for the content to load.

My main finding in the process was that HoloLens has wider vision scope, but has limited interaction channel. The 3 interaction channels are head rotation, finger click, and voice interaction. With that in mind, interface on HoloLens has to be identifiable, easily clickable, and voice interaction integrated.

Breaking down the mobile App

To fully understand the architecture of IKEA Place mobile App, I printed out the screens and broke them down into interaction procedures. Then I synthesized the interactions to understand what I needed to build for HoloLens, what the restraints were, and what I should take out.

Sketching the interface

Show More

Design Decisions

1. Because HoloLens interface has to be easily identifiable, images should far overweigh text.

2. The menu and listings of the interface cannot be scrolled, so a separate "scroll" button should be included for viewing additional listings.

3. There is no keyboard on HoloLens, so search has to be achieved through voice recognition.

4. Reduce the load of information for settings and profile page. Hide the information under a hover  pop-up.

5. Traditional webpage is hard to view on HoloLens, so an optimized single item page should be developed when users click on one specific furniture.

When I designed the prototype in Sketch the way I designed traditional screens, I noticed that the interfaces became distorted when put into 3D environment. Highly saturated background also detaches the interface from reality, making AR not so "AR".

Here is what I did to solve those issues:

Applying the Fluent Design System:

Material and Depth

Sense of material: frosted glass effect on the backgrounds and buttons.

Sense of Depth: Separated layer and proper shallow & transparency

Horizontal Cross - Equirectangular Distortion

Instead of designing a giant flat screen and let it be distorted, I decided to use a three-flat-dimension approach to normalize the interface, meaning the interfaces will still be designed as if they are traditional screens but will be split into three "walls" perpendicular to each other.

Special thanks to Zhi Qu for the help in this process.

Wireframes in 3D

What's next?

This project is still ongoing. I am currently working on the interaction and motion design. I am also trying to implement the prototype on HoloLens, and conduct testings on the prototype for the additional rounds iteration for design. 

I am also learning to build 3D models in Unity! Earlier this year I have built a switching furniture function prototype on HoloLens and recorded a video with the help from Cortana :)

Baby steps building models in Unity

Disclaimer: I am not affiliated, associated, authorized, endorsed by, or in any way officially connected with Ingvar Kamprad Elmtaryd Agunnaryd (IKEA) or any of its subsidiaries or affiliates. All branding material and logo included in this project are not for business purpose and belong to IKEA. 

Back to portfolio

Next Project