NET-A-PORTER AR by TEAM 27

Prototype

Although the project focuses more on the experience of trying on clothes with the HoloLens, we had to design a user interface that would allow users to move through the process as if it was already a fully-developed product. For this we started off with rough sketches on paper. This came about as an idea after using the HoloLens ourselves and attempting to get used to augmented reality as a new technology with a vast new range of interactions. We had to think about the user experience in terms of adopted standards for this device and ease in transition between the process of buying clothes online to the process of doing it using the HoloLens. Following on from these rough sketches, we decided to use software to hopefully provide a better insight into the kind of design we were hoping to attain in the real thing. We used Sketch on MacOS to do this.

The general theme is to mimic a fashion retailers tablet app in that the physical interaction would be a tap (or a gesture in terms of the HoloLens). The page remains the same size and general appearance but the contents change depending on the route taken. The voice input is an added feature which fully brings to use the abilities of the HoloLens, and in our opinion, streamlines the personal shopping process greatly.

We also attempted a real user interface for the HoloLens using Unity. Using the sketches as a basis, we used skills learnt in the official HoloLens tutorials to adapt a user interface for HoloLens made with the aid of multiple Unity UI tutorials. The UI developed so far has a focus on functionality rather than aesthetics. Here is the prototype:


We have implemented the gaze and gesture interaction and we are in the process of creating another page and getting the UI object to swap to the next page when the right gesture is made towards the button.

What we discovered

Since the whole purpose of the project is to provide a personal shopping experience, we understand that the process must be as simple as possible and parallel to the VIP personal shopping experience in store. This made us dive straight into the process with a search bar as soon as you start the app.

For people to have a full understanding of the product they’re trying on, such as price, material and sizes available, there has to be some form of UI available while the clothes are being displayed. So far in our prototypes we’ve planned for the display to have a gesture interaction built-in so that the user can load a UI plane that displays relevant information about any product being displayed. This could be done by pointing at the specific 3D model representing the product.

In the page where search results are displayed, multiple products must be allowed to be selected so that users can try on more than one item of clothing. This includes selecting more than one type of clothing so that in the display phase the user will be able to directly swap the items during it.

We should use the HoloLens’ voice input technology to potentially make the UI routing easier. Gestures should still be present in case people cannot use voice because maybe they are in an environment where they have to be silent.

The purpose of the personal shopping experience ends with the purchase of the items you liked. To this end, we have to provide a method of allowing purchase and so we have planned the display phase to allow the user to add the items intended to a shortlist via the available UI panel and then on the final page, confirm the list of items they want to shortlist which should show up in their account’s basket on the Net-a-porter website.