2D Try On
Product
The project aims to integrate Fit Finder, a digital sizing solution, with Forma’s virtual try-on technology, following Snap’s acquisitions of both companies. This fusion creates the 2D Try On feature, enhancing the online apparel shopping experience. Users can now receive personalized size recommendations from Fit Finder and virtually try on clothing using Forma’s capabilities. This comprehensive solution revolutionizes how users interact with apparel online, offering accurate sizing guidance and realistic visualizations to improve user satisfaction and reduce returns.
Challenge
Integrating Fit Finder with Forma presents several challenges, including merging disparate functionalities, ensuring coherence in user experience, and establishing technical compatibility. Bridging the gap between size recommendation algorithms and virtual try-on capabilities requires careful planning and collaboration. Additionally, creating seamless connectivity between the two platforms demands innovative solutions to deliver a cohesive user journey.
Role
As the sole Interface Designer, my role was pivotal in translating conceptual ideas into tangible user interfaces. I collaborated closely with Product Managers and engineers to ensure the feasibility and alignment of design solutions with project objectives. Responsibilities included wireframing, prototyping, user testing, and iterating designs based on feedback to deliver an exceptional user experience for both Fit Finder and the 2D Try On feature.
2D Try On
Product
The project aims to integrate Fit Finder, a digital sizing solution, with Forma’s virtual try-on technology, following Snap’s acquisitions of both companies. This fusion creates the 2D Try On feature, enhancing the online apparel shopping experience. Users can now receive personalized size recommendations from Fit Finder and virtually try on clothing using Forma’s capabilities. This comprehensive solution revolutionizes how users interact with apparel online, offering accurate sizing guidance and realistic visualizations to improve user satisfaction and reduce returns.
Challenge
Integrating Fit Finder with Forma presents several challenges, including merging disparate functionalities, ensuring coherence in user experience, and establishing technical compatibility. Bridging the gap between size recommendation algorithms and virtual try-on capabilities requires careful planning and collaboration. Additionally, creating seamless connectivity between the two platforms demands innovative solutions to deliver a cohesive user journey.
Role
As the sole Interface Designer, my role was pivotal in translating conceptual ideas into tangible user interfaces. I collaborated closely with Product Managers and engineers to ensure the feasibility and alignment of design solutions with project objectives. Responsibilities included wireframing, prototyping, user testing, and iterating designs based on feedback to deliver an exceptional user experience for both Fit Finder and the 2D Try On feature.
Defining Goals and Objectives
- Increase 2D Try On Conversion Rate: We aim to achieve at least a 50% conversion rate for users interacting with the 2D Try On feature.
- Maintain Fit Finder Performance: Crucially, this growth should not come at the expense of Fit Finder’s established success. We target a maximum 10% conversion rate decline for Fit Finder during the initial launch phase.
Research and Analysis
The first step in connecting Fit Finder and 2D Try On involved thorough research and analysis. This included gathering user feedback, conducting usability testing, and analyzing data metrics to identify pain points and areas for improvement. By understanding user behaviors, preferences, and pain points, we gained valuable insights that guided the redesign process.
Defining Goals and Objectives
- Increase 2D Try On Conversion Rate: We aim to achieve at least a 50% conversion rate for users interacting with the 2D Try On feature.
- Maintain Fit Finder Performance: Crucially, this growth should not come at the expense of Fit Finder’s established success. We target a maximum 10% conversion rate decline for Fit Finder during the initial launch phase.
Research and Analysis
The first step in connecting Fit Finder and 2D Try On involved thorough research and analysis. This included gathering user feedback, conducting usability testing, and analyzing data metrics to identify pain points and areas for improvement. By understanding user behaviors, preferences, and pain points, we gained valuable insights that guided the redesign process.
Size Recommendation + Try On
Since a product will have both Fit Finder and 2D Try On enabled, we had to build connective tissue between both features.
Product Display Page
On the Product Display Page, two buttons will be prominently displayed side by side: one labeled “Find your size” and the other “Try it on.” Users have the flexibility to choose between these options based on their preference, allowing them to utilize either Fit Finder or 2D Try On first, depending on their needs.
Product Display Page
On the Product Display Page, two buttons will be prominently displayed side by side: one labeled “Find your size” and the other “Try it on.” Users have the flexibility to choose between these options based on their preference, allowing them to utilize either Fit Finder or 2D Try On first, depending on their needs.
Hovering over each button on the desktop version triggers a tooltip, providing a concise description of the respective feature, enhancing user understanding and navigation.
Fit Finder Flow
This scenario entails the user initiating the process by selecting “Find Your Size.”
Fit Finder Flow
This scenario entails the user initiating the process by selecting “Find Your Size.”
Upon completion of the Fit Finder flow, users will encounter a prominently displayed “Try it on!” button on the results screen. From there, users have the option to either add the item to their cart or proceed to virtually try it on.
Intro Screen
Upon clicking the “Try It On!” button, users are directed to a dedicated screen detailing the functionality. Here, users are informed that uploading a full-length photo enables them to visualize how the selected item appears on them. Additionally, this screen outlines the prerequisites for photo submission and the data handling protocols. Users are then presented with the option to either view the item on other models or proceed with uploading their photo.
Intro Screen
Upon clicking the “Try It On!” button, users are directed to a dedicated screen detailing the functionality. Here, users are informed that uploading a full-length photo enables them to visualize how the selected item appears on them. Additionally, this screen outlines the prerequisites for photo submission and the data handling protocols. Users are then presented with the option to either view the item on other models or proceed with uploading their photo.
See It On Others
Opting to “See it on others” directs users to a screen showcasing stock models wearing the item, each labeled as “sample.” This feature is designed to motivate users to upload their photo by demonstrating the technology’s compatibility across diverse ethnicities and body types.
See It On Others
Opting to “See it on others” directs users to a screen showcasing stock models wearing the item, each labeled as “sample.” This feature is designed to motivate users to upload their photo by demonstrating the technology’s compatibility across diverse ethnicities and body types.
Upload Your Photo
Selecting the “Upload your photo” button allows users to choose a photo from their computer or smartphone to initiate the photo analysis process.
Upload Your Photo
Selecting the “Upload your photo” button allows users to choose a photo from their computer or smartphone to initiate the photo analysis process.
Upon successful adherence to upload guidelines, the uploaded photo joins the list of models without the “Sample” label, providing users with their personalized size recommendation and a visual representation of the item. Users are then prompted to “Add Size M to Cart.”
“Try it on” before “Find your size”
If users opt to use the “Try it on” feature before Fit Finder, the call-to-action prompts them to “Find your size,” which redirects them to Fit Finder for size recommendation.
“Try it on” before “Find your size”
If users opt to use the “Try it on” feature before Fit Finder, the call-to-action prompts them to “Find your size,” which redirects them to Fit Finder for size recommendation.
No Matching Size
In cases where Fit Finder determines no suitable size, users are guided to “Continue shopping,” redirecting them to the Product Display Page for further exploration.
No Matching Size
In cases where Fit Finder determines no suitable size, users are guided to “Continue shopping,” redirecting them to the Product Display Page for further exploration.
Error Message
In the event of an unsuccessful upload, an error message will detail the issues encountered with the uploaded photo, ensuring clarity and guidance for users.
Error Message
In the event of an unsuccessful upload, an error message will detail the issues encountered with the uploaded photo, ensuring clarity and guidance for users.
Results
While initial tests were promising, the 2D Try On feature’s performance fell short of expectations. With the sample set of clients we implemented this for, the conversion rate for users interacting with the feature only reached 22%, below our target goal of 50%. While the conversion rate for Fit Finder did see a 7% decrease, this remained within the 10% tolerance we established. However, due to the lower than anticipated performance of 2D Try On itself, the decision was made to pause the full launch and return the design to the research phase. This allows for further iteration and optimization based on user feedback and performance data.
We are confident that the concept of virtual try-on holds promise. In fact, it was revisited as part of the ARES project, where we explored integrating augmented reality for a more immersive try-on experience. While the 2D Try On feature required further refinement, the learnings from this project proved valuable in shaping future innovations.
Results
While initial tests were promising, the 2D Try On feature’s performance fell short of expectations. With the sample set of clients we implemented this for, the conversion rate for users interacting with the feature only reached 22%, below our target goal of 50%. While the conversion rate for Fit Finder did see a 7% decrease, this remained within the 10% tolerance we established. However, due to the lower than anticipated performance of 2D Try On itself, the decision was made to pause the full launch and return the design to the research phase. This allows for further iteration and optimization based on user feedback and performance data.
We are confident that the concept of virtual try-on holds promise. In fact, it was revisited as part of the ARES project, where we explored integrating augmented reality for a more immersive try-on experience. While the 2D Try On feature required further refinement, the learnings from this project proved valuable in shaping future innovations.