Fit Finder Redesign for ARES
Product
Fit Finder is a product designed by Fit Analytics to help users find the perfect fit for clothing and apparel items by providing personalized recommendations based on their measurements and preferences. It streamlines the shopping experience by offering tailored size suggestions, ultimately enhancing user satisfaction and reducing returns. Customers include well-known fashion brands such as Hugo Boss and Zara, as well as online retailers such as ASOS. The service is used by several million users every month.
Challenge
In 2021, Fit Analytics was acquired by Snap Inc., and subsequently, in 2023, the company introduced Augmented Reality Enterprise Services (ARES), which aimed to provide AR tools to enterprise clients – TechCrunch, March 23 2023. Fit Finder was integrated into the Shopping Suite alongside Live Try On, 2D Try On, and 3D Viewer. My task involved redesigning Fit Finder to align with the design guidelines we created for Shopping Suite. Fit Finder’s User Interface had not undergone a major facelift since 2018, rendering the redesign imperative by 2023.
Role
As the Lead Interface Designer for the Fit Finder redesign, I spearheaded the project’s visual direction and implementation. Additionally, I worked closely with designer Micah Saiger to develop and maintain the component libraries for Shopping Suite, ensuring consistency and efficiency across design assets.
Fit Finder Redesign for ARES
Product
Fit Finder is a product designed by Fit Analytics to help users find the perfect fit for clothing and apparel items by providing personalized recommendations based on their measurements and preferences. It streamlines the shopping experience by offering tailored size suggestions, ultimately enhancing user satisfaction and reducing returns. Customers include well-known fashion brands such as Hugo Boss and Zara, as well as online retailers such as ASOS. The service is used by several million users every month.
Challenge
Role
As the Lead Interface Designer for the Fit Finder redesign, I spearheaded the project’s visual direction and implementation. Additionally, I worked closely with designer Micah Saiger to develop and maintain the component libraries for Shopping Suite, ensuring consistency and efficiency across design assets.
Defining Goals and Objectives
We aligned the redesign objectives with the overall business goals, namely increasing conversion rate, and enhancing the user experience. Since most of these were Low-end improvements we aimed for a 2-5% increase in conversion rate. Defining clear objectives helped set the direction for the redesign process and ensured that our efforts were focused on achieving measurable outcomes.
Research and Analysis
The first step in redesigning the Fit Finder feature 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
We aligned the redesign objectives with the overall business goals, namely increasing conversion rate, and enhancing the user experience. Since most of these were Low-end improvements we aimed for a 2-5% increase in conversion rate. Defining clear objectives helped set the direction for the redesign process and ensured that our efforts were focused on achieving measurable outcomes.
Research and Analysis
The first step in redesigning the Fit Finder feature 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.
Fresh Paint
Fresh Paint
Product Display Page
On supported products, the “Find Your Size” button is positioned within the Size section of their respective pages. Following user testing of various wording and icon combinations, we implemented the most well-received version. Interacting with this button opens the Fit Finder modal.
Product Display Page
On supported products, the “Find Your Size” button is positioned within the Size section of their respective pages. Following user testing of various wording and icon combinations, we implemented the most well-received version. Interacting with this button opens the Fit Finder modal.
Measurements
Once the user clicks on ‘Find Your Size’, the Fit Finder modal opens. The modal’s global UI underwent significant updates, incorporating the Inter font, a monochrome color scheme, centralized branding, and the replacement of the ‘Privacy’ button with Snap attribution. On desktop, enhancements included larger product imagery, wider CTAs, integration of the Close button within the header, and removal of the Fit Finder logo. Meanwhile, on mobile devices, improvements comprised a full-width display and updated text inputs.
A notable enhancement in mobile UX addressed an issue with the previous version, where default pre-filled values led to inaccuracies in user input and subsequent misleading size recommendations. To rectify this, default inputs on mobile were removed, and the text input UX from desktop was adopted for consistency and accuracy.
Before
After
Measurements
Once the user clicks on ‘Find Your Size’, the Fit Finder modal opens. The modal’s global UI underwent significant updates, incorporating the Inter font, a monochrome color scheme, centralized branding, and the replacement of the ‘Privacy’ button with Snap attribution. On desktop, enhancements included larger product imagery, wider CTAs, integration of the Close button within the header, and removal of the Fit Finder logo. Meanwhile, on mobile devices, improvements comprised a full-width display and updated text inputs.
A notable enhancement in mobile UX addressed an issue with the previous version, where default pre-filled values led to inaccuracies in user input and subsequent misleading size recommendations. To rectify this, default inputs on mobile were removed, and the text input UX from desktop was adopted for consistency and accuracy.
Before
After
Belly Shape
Previously, the desktop version lacked a selected state and a clear CTA. Users would select from three options without a consistent progression mechanism. To rectify this inconsistency, the UX from the mobile version, which includes both a selected state and a CTA, was adopted. Additionally, a redundant subheading was removed.
Before
After
Belly Shape
Previously, the desktop version lacked a selected state and a clear CTA. Users would select from three options without a consistent progression mechanism. To rectify this inconsistency, the UX from the mobile version, which includes both a selected state and a CTA, was adopted. Additionally, a redundant subheading was removed.
Before
After
Hip Shape
Similar updates applied to the Belly Shape screen were extended to the Hip Shape screen, including versions tailored for male users.
Before
After
Hip Shape
Similar updates applied to the Belly Shape screen were extended to the Hip Shape screen, including versions tailored for male users.
Before
After
Bra size
Before
After
Bra size
Before
After
Age
The stroke surrounding the information text was eliminated. Similar to the Measurements screen, default inputs were removed from the previous mobile version to prevent inaccurate size recommendations. The desktop text input UX was mirrored for consistency.
Before
After
Age
The stroke surrounding the information text was eliminated. Similar to the Measurements screen, default inputs were removed from the previous mobile version to prevent inaccurate size recommendations. The desktop text input UX was mirrored for consistency.
Before
After
Fit Preference
Desktop adjustments included changing the slider color to black and converting the text to sentence case. On mobile, radio buttons were replaced with buttons featuring a selected state and a clear CTA for continuity across screens.
Before
After
Fit Preference
Desktop adjustments included changing the slider color to black and converting the text to sentence case. On mobile, radio buttons were replaced with buttons featuring a selected state and a clear CTA for continuity across screens.
Before
After
Results
The initial paragraph of text was omitted due to limited perceived value by users. This adjustment was made to enhance emphasis on the size recommendations. Additionally, in the previous iteration, confusion arose as users mistook the green checkmark icon for the selected size, particularly when opting for a secondary recommendation. To address this issue, the checkmark was modified to denote the selected size, and its color was changed to black for improved clarity.
Before
After
Results
The initial paragraph of text was omitted due to limited perceived value by users. This adjustment was made to enhance emphasis on the size recommendations. Additionally, in the previous iteration, confusion arose as users mistook the green checkmark icon for the selected size, particularly when opting for a secondary recommendation. To address this issue, the checkmark was modified to denote the selected size, and its color was changed to black for improved clarity.
Before
After
Product Display Page with Size Recommendation
Upon adding an item to the cart, users are redirected to the Product Display Page with a notification confirming the addition, alongside an updated Fit Finder button reflecting the user’s size for the item. The icon was updated to a checkmark to denote completion of Fit Finder. Subsequently, browsing other upper body product pages yields instant size recommendations.
Product Display Page with Size Recommendation
Upon adding an item to the cart, users are redirected to the Product Display Page with a notification confirming the addition, alongside an updated Fit Finder button reflecting the user’s size for the item. The icon was updated to a checkmark to denote completion of Fit Finder. Subsequently, browsing other upper body product pages yields instant size recommendations.
Discontinuation of Fit Finder Redesign Amid Snap Inc.’s Enterprise Services Closure
Prior to the scheduled testing and launch of the redesigned Fit Finder, intended as a component of the Shopping Suite alongside other augmented reality features, Snap Inc. abruptly closed its enterprise services division within a year of its establishment – TechCrunch September 27 2023. The company cited the rise of generative AI technology, which facilitated the creation of try-on experiences for consumers across various business scales, thus diminishing the need for their specialized offerings. Given the substantial investment required to develop their ARES platform further, Snap determined that it was financially untenable to continue supporting these efforts.
As of 2024, Fit Analytics has undergone a relaunch as an independent entity and is presently operating the legacy Fit Finder on the websites and applications of its existing clients.
Discontinuation of Fit Finder Redesign Amid Snap Inc.’s Enterprise Services Closure
Prior to the scheduled testing and launch of the redesigned Fit Finder, intended as a component of the Shopping Suite alongside other augmented reality features, Snap Inc. abruptly closed its enterprise services division within a year of its establishment – TechCrunch September 27 2023. The company cited the rise of generative AI technology, which facilitated the creation of try-on experiences for consumers across various business scales, thus diminishing the need for their specialized offerings. Given the substantial investment required to develop their ARES platform further, Snap determined that it was financially untenable to continue supporting these efforts.
As of 2024, Fit Analytics has undergone a relaunch as an independent entity and is presently operating the legacy Fit Finder on the websites and applications of its existing clients.