Smart Mirror

Redesigning the Shopping Experience
OVERVIEW

Whenever we go apparel shopping alone or with someone, there are few inconveniences we face like lack of information on the apparels you're interested in, having to carry a lot of items to the trial room, or having to make multiple trips to the trial room.

We realized that the retail in-store shopping experience has a lot of space for improvement towards being more convenient and delightful.

This project was undertaken by me as a part of my Prototyping for Interactive Systems class. The goal of doing this project was to get hands-on experience in the various prototyping techniques.

Duration

March to April 2018

Tools

Balsamiq Mockups 3, Adobe Photoshop, Sketch, Adobe Premiere Pro and After Effects

Skills

User Research, Product Ideation, User Testing, Low and High Fidelity Prototyping, Video Filming & Editing

Role

UX Design, UX Research, Interaction Design, Product Design, Cinematography

ROLE

My role in this project was to research on the pain points that might have existed for shopping in store for clothes, brainstorm for solutions in the form of product designs. And then create a low fidelity prototype which can be tested with a sample set of users and creating high fidelity prototype based upon the feedback received during testing.

Frame 2.png
 
RESEARCH

PRIMARY RESEARCH - CONTEXTUAL INQUIRY

To analyse the current scenario of retail shopping experience in physical stores we conducted contextual inquiry in shopping malls with 12 participants to get in depth information about their pain points and experience in general.

 

SECONDARY RESEARCH —LITERATURE REVIEW

To understand the current state of technology and service available to work with, we started our process of gathering information from various sources to get familiar with the context.

INSIGHTS
  • Irrespective of the kind of shopper the participant was, they all seem to be attracted towards the store with discount and sale boards.

  • A range of activities that a shopper could do is influenced by the arrangement of the garment sections and ease of navigation within the store.

  • For most of the participants, the lack of information about the product seems to be an inconvenience while looking for clothes. Lack of staff to help with the questions was a concern.

  • The lack of trial rooms causes long queues. Multiple trips to the trial room due to incorrect size or style of the garment, which adds to the time taken in the queue at the checkout counter.

  • A common concern from participants was the inability to check the reviews of the products in the physical stores.

  • We also realized that it’s now time for retailers to bring the online and in-store shopping experiences together. We should create seamless experiences that connect touch points between desktop, mobile, and in-store engagements.

PROBLEM SYNTHESIS

After gathering insights from contextual inquiry and secondary research we needed to make sense of all the information we gathered. We started by mapping various pain points that were gathered in various stages of the retail shopping experience.

Mapping the current user journey to identify pain points

Screen Shot 2018-11-25 at 4.08.57 AM.png

Paint Points found in the existing shopping process

PRIORITIZING PAIN POINTS

As we found a lot of pain points in our research, we now cross referenced the pain points with the user statements to prioritize the problems. So that we could concentrate on the most important problems given the limited time frame we had since it was a class project.

 

Therefore the most important pain points were:

  • Browsing the store was time-consuming process

  • Making multiple trips to the trial room

  • Long checkout queues

IDEATING THE SOLUTION

We started our ideation phase by brainstorming for various solutions that could fit in at different stages of the retail shopping experience. The initial ideas were represented in the form of rough sketches.

SKETCHING IDEAS

 

Idea #1 — Mixed Reality Store

Providing a Microsoft Hololens headset to every shopper that walks in the store. So in this way the shopper will be able to move around the store in a normal fashion but whatever he sees will be augmented by the Hololens.

 

For example providing additional information about the garment, giving directions to a particular product the customer wants etc.

0_1tTCgg9RmkkfIszS.jpeg

Idea #1

Pros

  • Providing a surreal experience to the customer

  • Easy of navigation

  • Quick access to additional information like reviews

Cons

  • Providing Hololens headset to every will increase the operating costs drastically

  • Does not exactly address the issue of trail room visits and long checkout queues

Idea #2 — Smart Robot Assistant

Having mobile interactive bots in the store to help shoppers. The customers could browse catalog on the bot screen, ask the bot to fetch clothes or chat with a representative for any other assistance.

0_3uzoOPb6ZiE58Wva.jpeg

Idea #2

Pros

  • Customer can browse catalog on the robot screen

  • Ability to fetch clothing for the customer

  • Video chat with a representative

Cons

  • Can hinder the free movement of shoppers

  • Doesn’t address the issue of trail room visits completely

Idea#3 — Smart Trial Mirror

Installing smart mirrors instead of trial rooms. This mirror could help you browse the catalog and search for items and also lets you try garments by augmenting it on your reflection in the mirror. Additional if the user signs up on the store’s app, facial recognition could be used to checkout directly from the mirror.

0_4ayHURIXmIdf-cMq.jpeg

Idea #3

Pros

  • Shopper can try on any garment without going to the trial room

  • Quick, efficient alternative to trail room visits

  • Easy access to catalog

  • Ability to checkout directly through the mirror

Cons

  • Lack of privacy while trying clothes through smart mirror virtually

DOWN SELECTION PROCESS

We used the Desirability-Viability-Feasibility framework and Value Proposition Canvas to down select our final solution.

most_valuable_design.png

Desirability-Viability-Feasibility diagram

Idea #1 - Mixed Reality Store                  Idea #2 - Smart Robot Assistant                     Idea #3 - Smart Trial Mirror

All the 3 ideas were analysed based on their pros and cons using the Desirability-Viability-Feasibility framework. Idea #3 — Smart Trial Mirror was the one which faired well in all the three parameters as compared to the other ideas.

1_Bp5loQkLEZfJKjr5QCe2dg.png

Value Proposition Canvas

Also analysing the Value Proposition Canvas for each idea it was very clear that we should pursue Smart Trial Mirror as our solution as it best address all the major pain points.

 
SELECTED SOLUTION
Screenshot_20180831-191725.jpg

Selected Solution

After the down selection process, we decided to go with Smart Trial Mirror as our selected design solution. Here we added additional features to make the whole experience more engaging and appealing for the customer and also creating value for the store owner.

FEATURES


Mobile App

  • The store will have its own mobile app, which will contain information about the customer

  • It will also use augmented reality to scan clothes and gain additional information about them

  • It will also record your face details which will be used to make payment through facial recognition on the smart mirror at the store


Smart Trial Mirror

  • The user stands in a designated spot in front of the mirror for a body scan so that the mirror can augment clothing onto the user directly

  • It also uses facial recognition to log the user in the smart mirror

  • The user can now browse the catalog on the mirror

  • Select items to try on virtually

  • The user also has the option to try the actual garment by just pull down the curtains installed directly above the mirror

  • Also buy the items directly from the mirror

  • It then redirects you to an auto-checkout line where your product will already be packed and ready to pick up

 

Auto Delivery Counter

  • The user proceeds to the designated checkout line after making the payment

  • It uses facial recognition to unlock your package via a tablet

USER FLOW
Screen Shot 2018-11-27 at 11.14.38 PM.pn

The new shopping experience

STORYBOARD
WIREFRAMING

We start our prototyping with a paper given how disposable it is, it enabled us to perform quick modification and easy user testing of a preliminary concept for the service solution.

 

We had to design for 3 different experiences as our product involves a smart mirror, an accompanying mobile application and a delivery counter.

Smart Mirror

unnamed (2).png
unnamed (1).png
unnamed (3).png
unnamed.png
unnamed (4).png
unnamed (7).png
unnamed (6).png
unnamed (5).png

Mobile Application

unnamed (8).png
unnamed (12).png
unnamed (9).png
unnamed (13).png
unnamed (10).png
unnamed (11).png
unnamed (14).png
unnamed (15).png

Auto Delivery Counter

unnamed (16).png
unnamed (17).png
unnamed (18).png
User Testing

We conducted 3 think-aloud tests and 3 cognitive walkthroughs on the low-fidelity prototype to identify pain points and improve overall usability.

Key Findings

  • The icons in the smart mirror looked too cluttered and were confusing

  • The navigation on both the smart mirror and mobile app was also not very clear

  • The user wasn’t sure how to purchase an item through the mobile app

High-Fidelity Prototype

After getting feedback from the user testing sessions, we discussed the corrections and improvements that can be made to the prototype for easing the user experience of all three form factors i.e. smart mirror, mobile application and the delivery counter.

Changes were made to the overall navigation of smart mirror as well as the mobile application.

The process of scanning clothes was also modified in the smart mirror

Smart Mirror

unnamed (10).png
unnamed (11).png
unnamed (8).png
unnamed (9).png
unnamed (15).png
unnamed (12).png
unnamed (13).png
unnamed (14).png

Mobile Application

unnamed (17)_framed.png

Notification while walking past the store

unnamed (23)_framed.png

Scanning an item in the store

unnamed (22)_framed.png

Details about the item

unnamed (24)_framed.png

Ability to see the scanned list, cart

unnamed (16)_framed.png

Checkout to collect the items from automated delivery counter

Auto Delivery Counter

unnamed (29)_microsoft-surfacepro4-front
unnamed (28)_microsoft-surfacepro4-front

Counter ready to scan face

Ready to deliver the shopping bag to the customer

unnamed (27)_microsoft-surfacepro4-front

Detailed invoice can be reviewed if desired

User Testing - Round 2

We performed 2 observations as well as the role played a typical shopper to identify the issues in our design from the user’s perspective.

 

Key Findings

  • The user liked the Mobile app design and navigation

  • Users had mixed response when it came to the navigation and interaction with the smart mirror, some found it quite intuitive whereas others found it a little confusing

  • User liked the idea of payment through facial recognition which makes the process quite easy and quick

  • Some users had their concern about virtual trying there garments in public

  • Users appreciated the delivery mechanism

Final Prototype

Smart Mirror prototype video

Future Recommendation
  • Adding the ability to share photos or short video clips with friends to get their opinion on the garment while trying out in front of the mirror.

  • Ability to simultaneously see and compare trial videos of previously tried products. Extensive testing of physical prototype specifically for ergonomics.

  • Research on the usability of robot assistant to fetch items to try on in the trial room and deliver packed items to checkout kiosk.

  • Research more on alternative methods of input for the smart mirror to improve ease of use and learnability.

  • Finally, work on developing a functional physical prototype using Raspberry Pi and Airbar.

Reflections

Overall it was a really enriching experience for me as it was a very intense project to complete within 2 months. It also gave me a chance to hone my skills in the various prototyping techniques:

 

Paper Prototype: This helped to do quick modifications to the interfaces based on user testing.

 

Hybrid Sketches: Helped us visualize the smart mirror in an in-store setting.

Storyboarding: Helped us know our users and keep in mind the context we are designing for.

 

Role-playing: Helped us figure out the user flow and identify pain points.

 

Wireframing: We used this method to identify user’s opinion on functionality, information architecture and overall user experience.

 

High Fidelity Prototype: After making the required changes from wireframing user feedback, we used this method to obtain feedback on the usability and visual design of the product.

 

Experience Prototyping: It helped to understand, explore or communicate what it might be like to engage with the product, space or system we are designing.