Cartier
virtual try-on redesign
We have redesigned the Cartier Virtual Try-On experience to provide users with an even more seamless and immersive way to try on Cartier‘s jewelry.
We have redesigned the Cartier Virtual Try-On experience to provide users with an even more seamless and immersive way to try on Cartier‘s jewelry.
Cartier is a renowned jewelry and watch brand. Traditionally, trying on jewelry and watches requires a visit to a physical store, which can be time-consuming and tedious for customers. However, with the introduction of virtual try-on customers can try on Cartier's products from the comfort of their own homes using the mini-app from WeChat, saving time and providing convenience.
In light of this, after assessing client's needs, we started our redesign. Our focus is on enhancing the fundamental try-on features and improving existing functionalities.
🕓 8 weeks, 2022
📱 This is a student mobile redesign project, we collaborated with Cartier's internal team, but we have no employment relationship with Cartier
🏷️ Consumer, Virtual reality, Virtual try-on apps
How can Cartier, a noble and high-end brand, cater to the lifestyle and purchasing behavior of contemporary young generation?
I started the design with an exploration for our key users on WeChat: Gen Z Trendsetters.
I love novelty, but I'm a mindful consumer. If it offers compelling aesthetics and appeals to me, I'm likely to make a purchase.
Gen Z Trendsetter with discovering mind
78% of total searchers
Absence of luxury purchasing habit
will browse and explore for holiday and occasion.
Based on research, we summarized the key pain points from current interfaces.
📷 Unclear guidance on the capture interface
🧐 Lacking visibility into available functionalities
👀 Limited product options, with high costs for continued exploration
So how might we improve the virtual try-on experience where users can adapt the feature more easily🆕, have greater flexibility to adjust try-ons🔄 and experiment with different styles💍?
Based on current pain points, I did some explorations and iterations on features, user flows, and interfaces.
As a team, after several meetings and user test we compiled a number of ideas based on the use cases for each pain point and worked with the cross-functional team to complete the MVP.
- Persistent recognition failures without adequate prompts can frustrate users.
- Lack of smoothness and fluidity in the user flow.
How might we make it easier for users to understand the current system status and provide a smooth and seamless capture experience?
We have combined the demonstration animation and capture action to facilitate a faster shooting process for users.
Furthermore, we have included descriptive text on every waiting page to provide clarity on the current state, helping users understand the program's ongoing response and its associated state.
Merging components enables seamless user progression from demo to capture, significantly reduces the time and effort required for users to complete the capturing process, ultimately enhancing their overall satisfaction and engagement with the virtual try-on program.
Implemented an overlay mask on the capture interface, providing clearer visual cues for the current prompts.
Recognition Error Popup Update: In the previous version, users faced a challenge when encountering capture errors as they were unable to revisit the tutorial, potentially leading to repeated recognition failures.
This updated feature offers users the option to rewatch the demonstration animation, empowering them to better navigate the capture process and increase their chances of successful recognition.
- Upon entering the homepage, it's unclear what functionalities are available, resulting in a low utilization rate of product functionalities.
- From our usability test results, most of the time, users feel confused and uncertain.
How might we create an integrated surface where users can adapt the feature more easily?
☑️ I tried to incorporate adding an animated user guide, which effectively guides users through the necessary steps.
Option 1
Displayed directly on the post-capture page.
Pros
· Easy to understand
· Good vision accessibility
Cons
· Limited space for product display
· Can be mistaken by users as an error message
· Weak localization
Option 2
Introducing new feature - user guide
Pros
· Enhanced Onboarding
· Improved User Engagement
· Reduced Learning Curve
· Easy to adjust to localization
Cons
· Might be cognitive overload
Option 2.1
user guide
· Adding descriptive text for each feature
Pros
· Better clarity and understanding
· Better discoverability
· Accelerates the learning curve, making it easier for new users to familiarize themselves with the product.
Cons
· Might be visual clutter
· Might have localization challenges
Option 2.2
user guide
· Updated Ring Size Adjustment Visuals
Pros
· Enhanced user understanding
· Better usability, easier for users to locate and interact
· Align the updated button style with commonly recognized symbols for consistency and familiarity
Cons
· Might have visual disruption
After discussion and voting on 🙋, we have the following
✅ User guide with descriptive text and updated adjustment tool's visuals
Pros
· Icon display and guide will not blend with the capture image
· Wouldn’t be confused as an error message
· Easy to read
· High scalability
· High localization
· Design is consistency with Cartier colour palette
Cons
· The addition of animated user guide may potentially result in slower program performance.
With the user testing, we got some interesting feedback about users’ need, Therefore, I did several iterations and introduced some new design.
| I already know how to use those functions, can I close the user guide?
Therefore, I explored and added a skip button for the user guide.
A minimalist design, and the addition of a stroke help it stand out and effectively prompt users.
The addition of a "Next" button makes the interface appear cluttered and cumbersome.
it is a minimalist design, but it might be easily overlooked by users
The skip button appears to be overly prominent and highlighted, which may create a sense of urgency for users to click on it.
This additional element introduces extra decision-making and requires users to consider whether to proceed with the next step or skip it.
| Where is the retake button? It's very hard to find.
With this question in mind, I did several iterations and introduced the new designs.
The previous design for the "Retake" and "Share" buttons lacked visibility and clarity. The text prompts could easily blend with a dark background, making them difficult to see. This negatively impacts the usability and overall effectiveness of the buttons.
The previous design has excessive amount of text description, making it challenging for users to immediately connect with our product.
In order to solve the issue, here are some of our attempts ⬇️
Retake and share buttons
Place them inside the product information pull-up area.
Place them on the right side of the screen.
Place them on the top corner of the interaction interface.
Share button on the top corner and rest placed above the pull-up area.
Stacked them on the right side of the screen.
Stacked them on the left side of the screen.
Product Information and display
Replaced the textual descriptions with product images to enhance the visual representation of the current material and colour. Implemented a zoom-in feature for the selected products.
Replaced the textual descriptions with product images to enhance the visual representation of the current materials. Keeping them the same size.
Replaced the textual descriptions with product images. Keeping them the same size and replace the bottom button to retake and share.
Replaced the textual descriptions with product images to enhance the visual representation of the current materials. Implemented a zoom-in feature for the selected products. Place colour information on the top.
Single-product display, showcasing the product solely through images. The color selection for the product follows the existing design.
Replaced the textual descriptions with product images to enhance the visual representation of the current material and colour.
After conducting two rounds of usability tests and iterating we have improved the user dwell time by 52%, we have successfully aligned with the product manager and synchronized our progress with the development team.
Our next step is to finalize the design specifications and create a comprehensive design documentation package. This will include detailed wireframes, interactive prototypes, and design guidelines. Additionally, we will collaborate with the development team to ensure a smooth implementation of the design, closely monitoring the progress and addressing any potential challenges that may arise.
