Max Magic Mirror

Creative Director, UI/UX Designer

 

Client: Modern Avenue (China) + YouSpace

Team: Product Manager, Software & Mechanical Engineers, Designers, Modern Avenue Team

Shopping for clothes is exciting and enjoyable when you can find the right items that fit you well, with the style you like.

The Max Magic Mirror is the first real-time fitting and virtual try-on system. The YouSpace AI technology takes body measurements and provides a personalized outfit recommendation that matches customers' body type. It enables customers to experience wearing clothes on their body-accurate virtual model with a new level of engagement and entertainment.

The Challenge

How to build a smart mirror application that helps shoppers find the right outfits without the hassle of having to physically try them on?

 
 
 
 

Discovery

Shopper needs: The right fit, style personalization, great customer service, and seamless experience.

Retailer pain points: People, space, and inventory.

 
owner.jpg
 
 

Development Journey

Why a magic mirror? How can shoppers and retailers benefit from it?

We studied and compared the current in-store shopping experience with the magic mirror features. 

 

Mirror Features

 

Mirror App System Structure

mirror+structure.jpg
 

App Communication Network & Architecture Flow

 
 

Touch-Free Gesture Control Interaction Study

3 features were introduced to the users.

interaction study
Point to select

Point to select

Swipe left or right to change outfit

Swipe left or right to change outfit

2 thumbs up to like an outfit

2 thumbs up to like an outfit

 

YouSpace 3D Clothing Scanning Pipeline

A time effective pipeline is crucial to keep up with the ever changing fashion industry. The YouSpace data lab team has developed a proprietary pipeline for creating fast and realistic 3D clothing models. YouSpace 3D scanning pipeline is 15x faster than the traditional 3D modeling and animation. For example, a difficult item such a patterned suit jacket takes about 3 hours to become a production-ready asset for the mirror app to use.

 

3D Outfit Simulation

3D Shoes + WebGL Dynamic Lighting

 

Mobile App and Associate App Study

 
 

Mirror App UX Flow

MIR_MirrorUX
Attraction Zone - When user is outside of the interaction zone. The app shows fashion advertisements.

Attraction Zone - When user is outside of the interaction zone. The app shows fashion advertisements.

User enters the interaction zone. Mirror app guides the user to make a T-pose for the smart system to scan and detect accurate body measurements.

User enters the interaction zone. Mirror app guides the user to make a T-pose for the smart system to scan and detect accurate body measurements.

Done body measurement scanning.

Done body measurement scanning.

The smart system analyzes user’s body measurements.

The smart system analyzes user’s body measurements.

Show user’s body type: rectangle.

Show user’s body type: rectangle.

Pop up demo screen to show the user how to interact with the mirror with touch-free gesture control features: point to select icons.

Pop up demo screen to show the user how to interact with the mirror with touch-free gesture control features: point to select icons.

Pop up demo screen to show the user how to interact with the mirror with touch-free gesture control features: swipe left or right to change outfit.

Pop up demo screen to show the user how to interact with the mirror with touch-free gesture control features: swipe left or right to change outfit.

Pop up demo screen to show the user how to interact with the mirror with touch-free gesture control features: 2 thumbs up to like an outfit.

Pop up demo screen to show the user how to interact with the mirror with touch-free gesture control features: 2 thumbs up to like an outfit.

User swipes left or right to see different outfits on the 3D mannequin.

User swipes left or right to see different outfits on the 3D mannequin.

User points to select the icon to view each individual item’s brand.

User points to select the icon to view each individual item’s brand.

User 2 thumbs up to like an outfit.

User 2 thumbs up to like an outfit.

User rotates his body to the right or left to see the outfit’s back view on the 3D mannequin.

User rotates his body to the right or left to see the outfit’s back view on the 3D mannequin.

User points to select the gender icon to switch to female outfits.

User points to select the gender icon to switch to female outfits.

User scans the QR code to activate the 3D mannequin to LIVE view.( Currently limited to WeChat user.) User can see his saved “Liked” outfits detail information on his phone and make purchase through WeChat Pay.

User scans the QR code to activate the 3D mannequin to LIVE view.( Currently limited to WeChat user.) User can see his saved “Liked” outfits detail information on his phone and make purchase through WeChat Pay.

User is done interacting with the mirror app and leaves the interaction zone. The system automatically starts the attraction fashion advertisements.

User is done interacting with the mirror app and leaves the interaction zone. The system automatically starts the attraction fashion advertisements.

 
 

Mobile Mirror App UX Flow

MIR_MobileUX
After scanning the QR code from magic mirror to mobile app, user sees his/her body type information and tips about how to best mix and match outfit for its body type.

After scanning the QR code from magic mirror to mobile app, user sees his/her body type information and tips about how to best mix and match outfit for its body type.

User clicks the “my liked outfit” button to view the price and details about the outfits.

User clicks the “my liked outfit” button to view the price and details about the outfits.

User uses WeChat Pay to pay for the outfit items.

User uses WeChat Pay to pay for the outfit items.

 
 

Project Results

September, 2018 - March, 2019, Magic Mirror captured 400,000 human poses.

Press - Magic Mirror launched on September 2018 in Guangzhou, China. Customers experienced the advanced AI virtual fitting technology at the K11 Shopping Art Center.

 

Product demo walkthrough