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.
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
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.
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.
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.
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.
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.
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
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
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
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Mobile Application
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Auto Delivery Counter
.png)
.png)
.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
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Mobile Application
_framed.png)
Notification while walking past the store
_framed.png)
Scanning an item in the store
_framed.png)
Details about the item
_framed.png)
Ability to see the scanned list, cart
_framed.png)
Checkout to collect the items from automated delivery counter
Auto Delivery Counter
_microsoft-surfacepro4-front.png)
_microsoft-surfacepro4-front.png)
Counter ready to scan face
Ready to deliver the shopping bag to the customer
_microsoft-surfacepro4-front.png)
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.