Using AR to help user try out more and drive sales
Tasked with designing an augmented reality fitting room that used to kinnect as its input method, we worked on this challenging product design for one of Mexico’s largest retail chains.
Years
2022
Client
NDA
The challenges
Utilizing kinnect’s capabilities to offer users a fun and easy way to quickly try out clothing.
Not having a set group of potential users due to the retail chain’s offerings for the whole family
Creating new paths and connecting to the retail chain’s existing sales funnel
Map it out
Once briefed we started mapping out the key features the app had to have. Exploring what a user might expect from a traditional fitting room experience and translating that to product features and user flows, as well as adding extra features that wouldn’t be possible in a physical fitting room like taking pictures and sharing them on your socials or adding products to your wish list.
First steps
We also took a deep dive into Microsoft’s user interface guide for the Kinnect, to ensure that any UX ideas and any UI design would be accessible, easy to use and took it vantage of features for example voice control.
The main focus of course of this app was being able to choose from different parts of the body, then sifting through available garments, choosing a color, seeing how the product looks on you and finally adding it to your cart and checking out.
Due to the scope of the project there would initially only be a few garments per body part so we didn’t delve deeply into offering a deeper search functionality or separating products into tabs or subcategories once you were searching for example torso garments.
As we were benchmarking, which for augmented reality product design is currently scarce and could be considered a blue ocean, we took a lot of pointers from Kinnect games, conceptual design and general UX and UI patterns from mobile products of course adapting it to the type of input we had.
From choosing a garment to checkout
During the wire framing process we explored a different number of steps to reach the end of a user journey looking to strike a balance between needing as few steps as possible, while maintaining as few inputs on the screen so users could focus on trying out garments.
We continually tested them thanks to the quick implementation from the devs and found what we thought was a good balance between speed and simplicity, looking to avoid over encumbering the screen with inputs.
Along with updating all the details we found from our first wireframe designs, this flow now added the option of changing colors and switching to the 3D avatar view in which the clothing could be modeled with closer fidelity and you could still pose and move around thanks to the Kinnect's tracking, we added a scroll grab to adapt to the Kinnect's input, a tooltip to the voice triggered actions, the photo mode flow, And updated the position of the cart preview and checkout button.
You can explore this Figma file here:
Baking a Protopie
Finally when moving to UI design we explored multiple different options but the main style we thought would best fit the product was a minimalistic icon based buttons with clear feedback of user movement taps in hovers following Microsoft’s recommended selection method.
In this instance, while Figma's toolset is incredible, we did find that for prototyping some ideas we needed a specific tool which we found in ProtoPie. With it we were able to prototype the main user journey and sharing it with the devs to ensure implementation was one to one with our original vision and especially helped with hover triggers smooth transitions and minute UI animations that profoundly helped the user with feedback during selection toggling scrolling and even prototyping voice triggered interactions.
Due to our experience in video games, we were also able to quickly and easily share the handoff and any assets with the devs, talk shop and ensure that the process was as streamlined as possible.
We wanted to ensure our Ui ideas, especially animation could be easily understood and replicated, so we took advantage of Protopie's advanced prototyping tools to show devs key UX interactions.
We also designed a short concise onboarding path to help users learn the basic inputs using the Kinnect by going through the path of trying on a product and adding it to your cart.
