The renowned French jewelry brand is expanding their market to lower-tier cities in China where customers don’t have convenient access to physical boutiques. The client wanted to utilize AR technology to target this segment of potential customers and to make their online shopping experience more confident and fun.
*Information of the client’s name (ABC) and products have been fuzzified.
To design an online shopping experience, the initial question being asked is -
How do people shop jewelry at a physical store?
(when they don’t have an exact idea of what to buy)
There is a gap between what current online store provides and what users really need to evaluate a product.
How might we help customers of ABC better evaluate the products while shopping online so they can make purchase decisions wisely?
Our team designed a virtual try-on mobile app as complementary to the online store. It enables a user to see the effect of rings, bracelets, and watches with their hand by taking a photo.
I led the UX research and design process throughout the project. My contributions include desktop research, interviews, competitive analysis, design ideation with sketching low-fi wireframes, design iterations, usability testing, and hi-fi prototype.
Augmented reality in retail has huge potential. According to a study from Singapore Management University in 2021, AR technology in retail settings has following benefits:[1]
[1] TAN, Yong Chin; CHANDUKALA, Sandeep R.; and REDDY, Srinivas K.. Augmented reality in retail and its impact on sales. (2021). Journal of Marketing. Research Collection Lee Kong Chian School Of Business.
Because of its positive impacts on sales, AR has increased the engagement for fashion and beauty brands that are investing in the technology. We looked at (4) virtual try-on apps in the market featuring hand and wrist. We also tried (3) other types of competitors to have a better understanding of general user flows and UI.
Findings
Using cell phone camera to take a photo of body part, the gesture is neither good-looking nor comfortable.
Some AR is too sensitive and the screen keeps strobing, others doesn’t provide auto-placement and requires manually putting on.
Without showing basic product info, the virtual try-on feature is only a game and can hardly lead to order placement.
We interviewed (5) general customers, and conducted a desktop research on social media posts and ABC online store reviews. We wanted to learn how in-store try-on helped customers evaluate jewelry, as well as their attitudes toward virtual try-on.
“
The ring is overall beautiful, but it is wider than I expected. I am used to wear thin rings.”
-- Customer’s Review from ABC online store
Findings: in-store try-on
Design Implications
Findings: virtual try-on
Informative
Provide enough information visually and verbally by showing the virtual try-on result, product details, and recommendations.
Effortless
Easy to use for both hands;
Automate the steps and minimize the efforts users need to take.
Free
Allow users to freely try on, adjust, compare, and mix match products without pressure.
Base on our research findings and requirements from the client, we mapped out a linear user flow. This flow consists of (4) parts - entrance, camera, virtual try-on, save and share.
Throughout the later design explorations, we kept referring back this user flow to make sure the design team and our client were on the same page.
In order for the computer to recognize the shape of a hand and then put the jewelry on the right place, a guide of hand position should be set for users to follow prior to taking the photo.
After testing on various screen sizes and focal distance, as well as hand positions, we found some keys to a successful photo:
And these would affect screen layout.
Not like this...
Marked negative space available for contents and buttons.
Mirrored to accommodate for both hands.
Started with a cartoon hand.
After the photo was taken, the pre-selected item automatically snaps to a finger or wrist. To have a better understanding of the actions users can/may take, let’s take a look at how the brand organizes products in its official online store.
We learned that products are firstly organized by types - rings, bracelets, watches, etc.
The next level is collections, holding products that share the same design concept and often look alike.
Within a collection, products of various appearance (shape, diamond paving, etc.) are listed.
Though products of different materials are distinctive SKUs, we kept the idea from the official online store and considered them different properties of a product.
Camera
Entry point B product list
Virtual try-on option 1
Virtual try-on option 2
After the major screens of the user flow were designed, we ran a usability test with mid-fi mockups. Among the (8) testees, we found the users had most issues with the virtual try-on phase. As annotated on the diagrams below, the affordance of some key CTAs were not enough. We need to craft the UI to eliminate the misunderstandings and making the functions really work.
Per client’s requirement, there are two ways to access this mini program.
Entry Point A
Entering from product detail page of ABC online store (the main mini program) where the product is already selected before entering the virtual try-on mini program.
Entry Point B
A general approach to the mini program’s home page from a KV banner or an external link. Users need to select a product from the list for trying. Entry point B will be eliminated when the main online store is fully developed.
Camera
After the product is selected, the program asks permission for camera and users would take a photo of hand following the guide.
Change Properties
From usability test we understood that users had trouble realizing the product was clickable and editable. Therefore we made the current product by default selected.
It is easier to read showing the metal picture with text than just a button saying “Properties”.
Adjust Size and Location
Users may be unsatisfied with the auto-generated location or want to try the product elsewhere. Just like any other stickers, a virtural product should allow for scaling, rotating, and moving.
Try on Multiple Items
According to our research findings, during a try-on process, users may (a) switch different products for one location and (b) try on multiple items at the same time. Our design should accommodate for both needs.
a. Switch: Tap a product on hand to select it, (it is selected by default), and choose another from the product list in the bottom drawer to replace the old one.
b. Add one: At any time, tap the “add one” button on the right side of screen to call out a new selection frame on hand, then choose a product from bottom drawer to add to the current location. When no product on hand is selected, choosing a new one will always lead to addition.
Enhance the Experience
Beautify: Skin softening and brightening are necessary requirements for people sharing selfies on SNS.
Zoom in: This feature helps users who are only trying for wrist or who want to see more details of design.
Show more: The bottom drawer is by default collapsed, only showing products of the same collection. When expand, users are able to browse all products available for virtural try-on to get more inspirations.
Users may browse products of a type regardless of collections by choosing “all collections”.
Share Posters
Lastly, when satisfied with the virtural try-on result, users can tap save button to save a post of current view. On the preview screen, options include change templates, save to album, share with friends, and go back to virtural try-on.
MVP first
The requirement from the client was pretty clear, but it is still not easy to keep the product simple. So it is important to set a specific goal at the beginning and check back with it whenever a decision is to be made. We removed features such as auto-capture and wishlist at very early stage to make sure we finish the MVP on time. Fortunately our final design fulfilled the requirements.
Collaborate with the client/PM
From this practical project I received great working experience with our client. As a designer, the requirement document was my good friend. Enough communication with the client and fully understanding of the business goals helped me to design the useful product.
“
This is very close to the product we expected. We will use this prototype as a valuable reference for our product development.”
- Mr. Zen, Senior Creative Technologist @ ABC
