Virtual Try-On
Designing the invisible: blending AI and AR into the jewelry shopping experience
Project overview
The Virtual Try-On (VTO) app represents a groundbreaking solution in the jewelry retail industry, leveraging augmented reality technology to revolutionize the customer experience. Designed primarily for jewelry brands and retailers, VTO operates on a B2B2C model, offering a digital platform for customers to virtually try on jewelry anytime, anywhere using their smartphones. This innovative approach addresses the challenge of online jewelry shopping by providing a realistic and engaging way for customers to view and compare products. The integration of augmented reality into the VTO app not only enhances the online shopping experience but also aligns with the evolving needs of the modern consumer, making it an essential tool for brands looking to innovate and stay competitive in the digital era.
The problem: The primary challenge addressed by the VTO app stems from the inherent limitations of traditional online jewelry shopping. Customers often face uncertainty and a lack of confidence when purchasing jewelry online due to the inability to physically try on or closely examine the products. The VTO app aims to tackle the significant barriers in the online jewelry shopping experience by providing a realistic, engaging, and trustworthy platform for customers to virtually try on jewelry, thereby enhancing customer confidence and reducing the likelihood of returns.
From the perspective of jewelry online retailers, the challenges are multi-faceted and impact both customer experience and business operations. In essence, online jewelry retailers are in need of a solution that not only enhances the customer experience but also addresses these operational challenges by increasing sales conversions, reducing returns, building customer trust, and enabling them to stay competitive in a rapidly evolving digital marketplace.
The goal: To revolutionize the online jewelry shopping experience by introducing an AR-based virtual try-on feature that enables customers to see how jewelry pieces look on them in real-time, thereby enhancing customer confidence, reducing return rates, and increasing sales for retailers.
My role: UX/UI designer, product designer.
Responsibilities: User research, wireframing, prototyping, visual design, usability testing.
Design process
In my approach to the project, I employed the design thinking methodology, which involved several key stages, each crucial in developing a solution that was both innovative and practical. I began with Empathizing, where I focused on understanding the users' needs, feelings, and motivations. This was followed by Defining the problem, where I synthesized insights from the empathy stage into a clear problem statement. During the Ideation stage, I engaged in creative brainstorming to explore a wide range of potential solutions. Then came the Prototyping phase, where I transformed these ideas into tangible, albeit preliminary, products or experiences. Finally, I conducted Testing, applying these prototypes in real-world scenarios to gather feedback and refine the solution. This iterative process ensured that the final product was not only aligned with user needs but also a testament to innovation and practicality in design.
And here's a little spoiler: it took me three major iterations to design the app as it stands today. This wasn't a straightforward journey. Given the innovative nature of the UX design, a multitude of ideas had to be tested and retested. Each iteration was a step towards refining the balance between groundbreaking design and user-centric functionality. This path was not just about building an app; it was a venture into uncharted territories of design, leading to the polished and user-friendly app you see today.
User research
The initial research I undertook for the VTO project was pivotal in understanding the behaviors, pain points, and needs of potential users. For this purpose, I utilized a quantitative research method, focusing on gathering detailed insights from individual experiences. This approach was essential to empathize deeply with users and inform the design process effectively. I conducted a survey that asked respondents to provide insights into their experiences of buying jewelry, both online and in-store. This survey garnered 160 responses, offering a rich dataset for analysis.
My initial hypothesis was that the hesitation to purchase jewelry online stems largely from the inability to try on products and assess their look and feel in a real-world context. The findings from this research were revealing and largely confirmed this hypothesis.
These findings from the user research validated the initial hypothesis and highlighted the critical need for an augmented reality solution like Virtual Try-On. Such a solution could bridge the gap between online and in-store experiences, addressing user concerns regarding detail visualization, try-on experience, and accurate representation of products, thereby enhancing user satisfaction and confidence in online jewelry purchases.
Personas
Developing user personas was instrumental in gaining a deeper understanding and empathy towards the varied needs, experiences, behaviors, and goals of our target user groups. Each persona I crafted symbolized a key segment of the VTO user base. By tailoring the design to meet the specific needs of these representative personas, I aimed to ensure that the solution resonated with and effectively served our broader audience.
The inclusion of personas Jannet (The Innovation-Driven Brand Manager) and Ahmed (The Progressive Small Business Owner) was a strategic decision, emphasizing the B2B2C nature of the application. While the end-users of VTO were customers seeking a confident online shopping experience, it was important to acknowledge that the direct clients of VTO were actually jewelry brands and retailers. Jannet and Ahmed represented the business clients who were essential to the adoption and success of the VTO.
In essence, by understanding and addressing the needs of these B2B clients, the VTO app effectively bridged the gap between jewelry brands/retailers and their customers. It provided a solution that not only enhanced the online shopping experience for end-users but also aligned with the business goals of increasing sales, customer satisfaction, and digital innovation for our business clients. This dual-focus approach ensured that the VTO solution was beneficial and appealing to both sides of the B2B2C model.
Empathy mapping
After creating detailed personas, I transitioned to developing an empathy map for each one, a step that was integral in deepening the understanding of our users. This transition was crucial as it allowed me to delve beyond surface-level characteristics of our personas, exploring their thoughts, feelings, actions, and verbal expressions in relation to online jewelry shopping. The empathy maps served me as a dynamic tool, synthesizing these insights and highlighting the emotional and cognitive underpinnings of user behaviors. This process was vital in guiding the UX design strategy, ensuring that the solutions I created were not just user-centric but also resonated with the users’ deeper needs and expectations. It enabled me to create a more intuitive and empathetic user experience, tailored to address specific user concerns and enhance overall satisfaction.
User journey maps
User journey maps are essential in the UX process as they provide a vivid narrative of a user’s interactions with a product, from initial engagement to the final action. These maps helped me understand the sequence of actions that Emily, our persona, would undertake while interacting with the Virtual Try-On app.
By understanding and mapping out Emily's journey, I was able to pinpoint where the VTO app could enhance her experience, making it not just functional but also emotionally satisfying. This journey map guided the design process to ensure that every touchpoint in the app was tailored to meet and exceed Emily's expectations, ultimately leading to a confident purchase decision.
Problem statements
Utilizing the personas I had developed earlier, I crafted specific problem statements for each, following a structured approach:
[User name] is a [user characteristics] who needs [user need] because [insight].
For each persona, the problem statement was framed as follows:
Crafting these statements helped me and the team gain a clear understanding of the core issues faced by each type of user. They served as a guiding beacon, ensuring that our design efforts were consistently aligned with solving real user problems. Importantly, these problem statements fostered a shared focus among the team, enabling us to work collaboratively towards a common goal with a human-centered approach. They provided the necessary balance between defining a specific challenge to be addressed and allowing enough scope for creative and innovative design solutions.
Hypothesis statements
Following the definition of problem statements for each persona, I proceeded to draft hypothesis statements. These were structured using the "if/then" formula, a method that helps predict the potential impact of a proposed solution on the user's problem. This approach was instrumental in guiding the design process, providing a clear direction for potential solutions and their expected outcomes. It allowed for testing and validation of assumptions, ensuring that the design decisions were effectively addressing the user's needs.
Here's how I formulated the hypothesis statements for each persona:
Goal statement
Transitioning from identifying user problems to envisioning solutions, I crafted a goal statement for the project. This statement concisely outlines the purpose and benefits of the product for the user. A well-articulated goal statement clarifies who the product will serve, what it will enable them to do, and why it addresses their needs.
Goal statement: Virtual Try-On will enable users to experience a realistic virtual fitting of jewelry, significantly impacting customers like Emily who seek confidence in online shopping, brand managers like Jannet who strive to enhance online sales and customer satisfaction, and business owners like Ahmed who aim to modernize the shopping experience. The effectiveness of our product will be measured by its impact on online sales conversion rates, reduction in product returns, and improved user satisfaction ratings.
This goal statement provided a clear, actionable objective for the team, emphasizing not only the unique delivery mechanism but also the broad user base it aimed to serve.
Value proposition
Next, I created a value proposition for the VTO app.
In step 1, I described the app's features and benefits. I created a list of all the great features and benefits of the product, big and small. Here, I didn’t hold back; I listed everything that came to mind and then narrowed it down later.
In step 2, I explained the value of the product. The giant list of features and benefits from step one was sorted into 4 categories: efficiency, user experience, accessibility, and support.
In step 3, I connected these features and benefits with the needs of our users. The goal was to identify what’s truly valuable to the user and not just a cool feature that users didn’t ask for. To determine value, I took the personas I'd developed and paired each persona with a value proposition that met their biggest pain point.
In final step 4, I reviewed my official value proposition list for the VTO app.
Ideation phase and competitive audit
Having identified the unique selling points of the VTO app, it was time to transition into the ideation phase, where the focus shifted from planning to brainstorming innovative solutions for building the app. This stage was characterized by a flurry of creative thinking, where a multitude of ideas were generated, all while keeping the needs of both users and the business at the forefront. Alongside this creative process, I conducted a thorough competitive audit, examining both direct and indirect competitors in the market. This audit served two key purposes: it not only fueled inspiration for new design solutions but also highlighted gaps in the current market offerings that VTO could potentially address. This dual approach was instrumental in fostering a wide range of innovative and practical design options for the app, ensuring that VTO would not only meet but exceed market standards and user expectations.
Storyboards
In the ideation phase of my UX design process, I utilized storyboarding as an effective tool to visualize solutions. A storyboard in UX is essentially a visual sequence depicting a user's interaction with a product, incorporating characters, scenes, plots, and narratives. To capture a holistic view, I developed two distinct storyboards: a big picture storyboard, highlighting the user's overall experience and motivations, and a close-up storyboard, concentrating on the specific interactions with the product. This dual-storyboarding strategy was instrumental in thoroughly exploring both the user-centric aspects and the intricate details of the app's functionality.
The big picture storyboard effectively captures Emily's journey with the VTO app, highlighting its impact in facilitating a direct and confident purchase decision right after the virtual fitting. The close-up storyboard of Emily's interaction with the app highlights the ease and efficiency of the user experience, from initial engagement to final purchase, showcasing the app’s ability to replicate the in-store experience in a virtual environment.
User flows
Crafting a user flow was a pivotal element in my UX design process, allowing for a meticulous breakdown of the steps a typical user, like Emily, would take within the VTO app, from discovering it to completing a purchase. This visualization was instrumental in seamlessly integrating the app into the broader customer journey of browsing and purchasing jewelry online. By outlining each interaction with the app, I could pinpoint and smooth out any potential obstacles, ensuring an intuitive and fluid experience that enhances the overall online shopping process. Additionally, this user flow served as a vital tool for the whole team, offering a clear blueprint for how the app interfaces with and enriches the user's path to purchase.
Information architecture
I intentially designed the initial Information Architecture (IA) for the VTO app to be straightforward and user-friendly, focusing primarily on the core functionality. The rationale behind such a streamlined IA was to minimize cognitive overload and to guide users directly to the app’s primary function – virtual try-on and 3D viewing. By focusing on these key features and avoiding unnecessary complexity, the app could effectively introduce users to the novel concept of augmented reality in jewelry shopping, fostering a positive initial experience and encouraging continued use. This approach ensured that users could quickly grasp and utilize the app's functionality, leading to higher engagement and satisfaction.
As the VTO app developed and evolved over time, the IA was revisited and refined in response to insights gained from usability studies, user feedback, and emerging business requirements. This iterative approach allowed for the integration of new features and enhancements that better aligned with user needs and preferences.
Wireframes and low-fidelity prototype
In the wireframing stage of the VTO app, I started by sketching a range of design ideas on paper, allowing for quick and creative exploration of various interface layouts. This hands-on approach was key to visualizing and refining the app's design in its early stages. I then selected the most promising sketches for further development, transitioning these into digital wireframes using Figma. This digitalization process helped in refining the app's layout and functionality with greater precision. Once these digital wireframes were ready, they served as the foundation for creating a low-fidelity prototype. This lo-fi prototype was crucial for validating the design concept and gathering initial user feedback, setting the stage for iterative improvements and fine-tuning based on real user interactions and responses.
After finishing the digital wireframes, I progressed to the next step, which was creating a low-fidelity prototype. In this phase, I focused on linking the main screens together to show how users would typically use the app, especially how they would try on jewelry virtually, view products in 3D, and navigate around the app. This was an important step because it gave me a basic, working version of the app that could be tested with real users to see how well it functioned.
Usability study
Once the low-fidelity prototype was ready, I started an unmoderated usability study. The main purpose was to see if the design decisions I made were good and to get real feedback from users. I conducted this study with 8 participants to figure out how well the VTO app worked for them and to make sure they understood the app's main goal and its main features. This study was really important for understanding what the users needed and to check if the app was actually helpful in the way I planned.
After conducting the usability study, several key themes emerged, highlighting areas for improvement and user preferences. These insights have been instrumental in guiding the app's design refinements and ensuring a user-centric approach to its development.
Wireframes and lo-fi prototype refining (round 2)
After gathering user feedback from the usability study, I proceeded to refine the wireframes to better align with user needs and expectations. This phase saw a focused effort on enhancing the app's textual content, aiming to provide users with clearer context and guidance.
Visual design and mockups
Once the digital wireframes were refined and the recommendations from the initial usability study were incorporated, I moved on to the visual design phase.
I created design mockups for the dark theme too to cater to user preferences for visual comfort, especially in low-light conditions, reducing eye strain and enhancing accessibility. This approach also taps into the aesthetic appeal of dark themes, offering a modern and immersive user experience that stands out. By incorporating a dark theme, I aimed to offer users customization options that adapt to various environments and personal tastes, ensuring the app is both versatile and user-friendly.
High-fidelity prototype
After finalizing the mockups, I progressed to developing a high-fidelity prototype, which closely mirrored the final app, allowing for advanced user testing and feedback. This step bridged design and development, acting as the final review before coding began.
Feel free to explore the main user paths in the embedded Figma prototype.
A/B testing
After the VTO app was developed and launched, I leveraged Flagsmith Feature Flags and Google Analytics to delve into user behavior, app performance, and event analytics. A notable observation was the underutilization of the 3D View segment control tab by users for detailed product examination. In response, I decided to merge the Try-On and 3D View tabs onto a singular page, allowing users to both virtually try on items and inspect them in full detail within the same interface.
To validate the effectiveness of this integration, I conducted an A/B test comparing the original design (Group A) with the new combined page (Group B). During the A/B testing, I focused on three key metrics to gauge user engagement: the number of virtual fittings, engagement with the 3D feature, and the time spent on the page. This approach allowed for a comprehensive understanding of how users interacted with both the original and the modified versions of the app.
The findings from the first A/B testing were quite revealing:
Virtual fittings: In Group A (the original setup), 350 out of 500 users engaged in virtual fittings. In contrast, Group B (with the combined Virtual Try-On and 3D View) saw a significant increase, with 462 out of 500 users engaging in virtual fittings. This indicates a marked improvement in user interaction with the product try-on feature.
Engagement with 3D: The engagement with the 3D feature also saw dramatic changes. In Group A, only 86 out of 500 users utilized the 3D view. However, in Group B, this number skyrocketed to 378 users, showcasing the enhanced appeal and accessibility of the 3D view in the combined format.
Time spent on the page: Perhaps one of the most indicative metrics of user interest, the average time spent on the page, doubled from 8 seconds in Group A to 17 seconds in Group B. This substantial increase in dwell time suggests that users found the combined page more engaging and informative, leading to longer interaction periods.
These findings underscored the success of integrating the Virtual Try-On and 3D View into a single, more engaging interface. The increased numbers of virtual fittings and 3D engagements, along with the doubled time spent on the page in Group B, validated the decision to combine these features, proving it to be a more effective approach in enhancing user experience and engagement within the app.
Following the implementation of the Group B design across the board, I launched another A/B test to address a new challenge: the low number of taps on the "Buy Now" button, which was affecting the conversion rate. To counter this, I introduced an enhanced version of the main page, which featured more prominent product details (such as name, brand, and logo) and interactive action buttons, including "Website" (directing users to the brand's website for purchase), "Like" (allowing users to add products to favorites for later access), and "Share" (aimed at increasing user engagement, app installations, and social adoption rates).
The second A/B testing results for this new iteration were telling:
Clicks on a call to action (CTA) button: In Group A (previous version) with 500 users, there were 67 clicks on the CTA button, yielding a click rate of 15%. The Group B (improved version) saw a more substantial outcome, with 122 out of 500 users clicking on the CTA, achieving a 25% click rate.
User engagement overall: Group A (previous version) demonstrated an engagement rate of 50%, with 242 out of 500 users engaging with the app in various capacities. Group B (improved version) exhibited a higher engagement rate of 65%, with 317 out of 500 users actively engaging with the app's features.
These adjusted findings from the A/B test clearly underscore the improved version's superiority in increasing both the click-through rates on the CTA button and overall user engagement, establishing the enhanced main page design as the definitive winner in this testing phase.
The final outcome
The introduction of both List and Grid views was a strategic decision aimed at enhancing usability, particularly on tablets and iPads, where the grid (tile) view of the Recents page significantly improved content visualization and interaction. This thoughtful inclusion underscored my commitment to providing a seamless and adaptable user experience across all devices.
By designing the Android version simultaneously with the iOS app, I ensured that no design debt accumulated, maintaining consistency and coherence across both platforms. This parallel development approach allowed for a seamless user experience, regardless of the device, and expedited the app's market readiness, catering to a broader audience with efficiency.
Next steps
Looking ahead, I have identified several key areas to focus on to further enhance the Virtual Try-On app's user experience:
• AI assistant integration: I plan to integrate an AI assistant to incorporate conversational design into the app. This will enable a more interactive and tailored shopping experience, allowing users to engage in dialogue, ask questions, and receive personalized recommendations.
• Enhancing micro-interactions: Recognizing the impact of details on the user experience, I'm committed to adding and refining micro-interactions within the app. These subtle yet powerful design elements will add a layer of polish and interactivity, making every action within the app feel more responsive and rewarding.
• Accessibility audit and WCAG compliance: Ensuring the app's accessibility is paramount. I will conduct a thorough accessibility audit to pinpoint any areas for improvement. Following this audit, I will implement the necessary changes to adhere to accessibility standards, thereby making the app more inclusive and user-friendly for a wider audience.
• Auto-sizing feature: I'm excited to develop an auto-sizing feature that will automate the sizing process for users, significantly simplifying the task of finding the perfect fit for jewelry items. This feature is aimed at eliminating guesswork and streamlining the user journey within the app.
• Visual search feature: To improve product discovery, I intend to introduce a visual search feature. Users will have the ability to upload photos of desired jewelry styles, and the app will present similar items from our collection. My goal here is to enhance user engagement and satisfaction by making it easier to find products that align with their preferences.
These initiatives reflect my commitment to continuous improvement and innovation as a UX designer, with a focus on creating a more engaging, intuitive, and inclusive app experience.
Takeaways
When the VTO app idea first came up, it marked a revolutionary moment in the world of jewelry e-commerce. At that time, there was nothing quite like VTO in the market — a solution that seamlessly integrated AI and AR to enrich the online shopping experience. As a UX/UI designer, I was presented with a unique and exhilarating challenge: to create a user experience that was entirely novel, a design that essentially was 'no design' in the traditional sense.
The core of this challenge lay in crafting an experience where the user interface was basically unnoticeable. The user's journey needed to be fluid and uninterrupted, starting from a product page on a retailer's website and seamlessly transitioning to a one-click virtual fitting within the VTO app. The design had to be so intuitive and integrated that it felt like a natural extension of the browsing experience, not an additional layer or a separate entity.
The key was in minimalism and subtlety. Every aspect of the VTO interface was designed to be unobtrusive, ensuring that the focus remained on the jewelry pieces themselves. The user should feel as if they were not interacting with an app, but rather engaging directly with the product. This approach required a deep understanding of user behavior and expectations, coupled with a meticulous attention to detail in the design process. Once the user decided to purchase the tried-on item, the journey was designed to guide them seamlessly back to the retailer’s website to complete the transaction. This transition needed to be smooth and intuitive, maintaining the continuity of the shopping experience without any jarring shifts between platforms.
In essence, I designed the VTO app to be invisible yet impactful. I aimed to enhance the user's shopping experience without drawing attention to the app itself, blending seamlessly into the background and letting the beauty and allure of the jewelry take center stage. This invisible design approach was a bold move in the realm of UX/UI design, setting a new benchmark for how technology can enhance e-commerce without overshadowing the core product.
Next case study: