Fit Finder Redesign
Introduction
The redesign project aimed to enhance the online shopping experience by addressing user pain points and improving accessibility. Through user research and design workshops with diverse stakeholders, the team identified critical areas for improvement. The focus was on creating intuitive wireframes, high-fidelity designs, and prototypes while contributing to a new design system to ensure consistency and scalability, ultimately resulting in a more engaging and user-friendly experience.
My Role
As the Lead Product Designer, I enhanced user experience by addressing key pain points and accessibility issues identified through user research. I conducted design workshops with diverse stakeholders, collaborated with cross-functional teams, and created wireframes, high-fidelity designs, and prototypes. Additionally, I contributed to the new ARES Design System to ensure consistency and scalability.
Project Collaborators
- Product Manager: Steered the project vision and aligned the team to deliver impactful results.
- User Researcher: Provided critical insights into user needs and collaborated on usability testing to guide design decisions.
- Data Scientists: Analyzed data to drive informed, user-centered enhancements.
- Product Designer: Collaborated on building the ARES Design System for cohesive, scalable user experiences.
- Engineers: Turned designs into functional, high-performance features.
Design Process
- Define
- Research
- Analysis
- Accessibility Audit
- Design
- Prototype
- Developer Handoff
- Launch
- Iterate
Fit Finder Redesign
Introduction
The redesign project aimed to enhance the online shopping experience by addressing user pain points and improving accessibility. Through user research and design workshops with diverse stakeholders, the team identified critical areas for improvement. The focus was on creating intuitive wireframes, high-fidelity designs, and prototypes while contributing to a new design system to ensure consistency and scalability, ultimately resulting in a more engaging and user-friendly experience.
My Role
As the Lead Product Designer, I enhanced user experience by addressing key pain points and accessibility issues identified through user research. I conducted design workshops with diverse stakeholders, collaborated with cross-functional teams, and created wireframes, high-fidelity designs, and prototypes. Additionally, I contributed to the new ARES Design System to ensure consistency and scalability.
Project Collaborators
- Product Manager: Steered the project vision and aligned the team to deliver impactful results.
- User Researcher: Provided critical insights into user needs and collaborated on usability testing to guide design decisions.
- Data Scientists: Analyzed data to drive informed, user-centered enhancements.
- Product Designer: Collaborated on building the ARES Design System for cohesive, scalable user experiences.
- Engineers: Turned designs into functional, high-performance features.
Design Process
- Define
- Research
- Analysis
- Accessibility Audit
- Design
- Prototype
- Developer Handoff
- Launch
- Iterate
What is Fit Finder?
Fit Finder (V4.2) – Upper body/Woman – October 2022
Transforming Size Recommendations
Fit Finder is a white-label solution that simplifies online shopping by providing personalized size recommendations for apparel and footwear. Based on users’ measurements and preferences, it reduces the uncertainty and frustration often associated with finding the right size, which in turn minimizes returns and enhances customer satisfaction. Fit Finder is trusted by leading global brands like Zara, Hugo Boss, and ASOS, and reaches millions of shoppers every month, improving user experience through accurate sizing.
Engineered for Optimal Fit
Fit Finder was created by Fit Analytics, a leader in size recommendation technology focused on enhancing brand-consumer alignment. Utilizing data-driven insights, Fit Analytics designed Fit Finder to address prevalent sizing challenges in online shopping and assist retailers in minimizing return rates. In 2021, Snap Inc. acquired Fit Analytics, integrating its sizing expertise into Snap’s growing suite of e-commerce tools.
Part of Snap’s Innovative Shopping Suite
Snap’s Augmented Reality Enterprise Solutions (ARES) Shopping Suite offers a range of tools designed to transform online shopping with AR technology, including virtual try-ons and interactive product displays. With Snap Inc.’s acquisition of Fit Analytics, Fit Finder was integrated into the ARES Shopping Suite, combining its precise size recommendations with augmented reality experiences to offer enterprise clients a holistic solution for enhancing customer confidence and engagement in online shopping.
Fit Finder (V4.2) – Upper body/Woman/Mobile – October 2022
Define
Duration: 1 week
Collaborated with: Product Manager to refine project goals and align on business strategy
The Fit Finder redesign focused on delivering personalized size recommendations while enhancing the user experience. We optimized the user journey, made the interface more intuitive and visually engaging, and reduced friction to boost satisfaction and conversions. Accurate recommendations help minimize returns, while we integrated Fit Finder and Snap’s AR Shopping Suite through one cohesive design system, ensuring a seamless experience for users.
Problem Statement
What can we do to make Fit Finder more engaging and user-friendly, encouraging users to trust the size recommendations?
Key Objectives
- User Journey Optimization: Simplify the user journey for a more intuitive experience.
- Friction Reduction: Minimize friction in the shopping and sizing process to boost customer satisfaction.
- Increase Conversions: Drive higher conversion rates by providing a more reliable and engaging user experience.
- Reduce Returns: Decrease the number of returns by ensuring that size recommendations are accurate and user-friendly.
- Seamless Integration: Unify Fit Finder with Snap’s AR Shopping Suite through a cohesive design system.
Product Roadmap
A five month strategy designed to enhance user experience and sizing accuracy through defined objectives, user research, analysis, accessibility audits, design, prototyping, and iterative improvements post-launch.
Research
Duration: 2 weeks
Collaborated with: Data Scientists and User Researcher to gather insights and understand user needs through interviews and surveys
We focused on understanding both market conditions and user needs. By conducting thorough market research, we aimed to uncover industry trends and analyze competitors, while user research helped us empathize with users and identify their pain points. This combination provided valuable insights that informed our design decisions.
Market Research
To better understand the competitive landscape, we conducted thorough market research on key players in the personalized sizing space, such as True Fit, Size.ly, and MySize. These competitors leverage advanced algorithms and extensive databases to provide tailored size recommendations, highlighting the growing consumer demand for accurate fit solutions in online shopping. By analyzing their features, user experiences, and market positioning, we identified opportunities for Fit Finder to enhance its offerings and differentiate itself in the rapidly evolving fashion e-commerce market.
User Research
This included in-depth interviews and usability testing to gather insights into user preferences and pain points in the shopping experience. This qualitative approach explored users’ motivations, frustrations, and expectations while using Fit Finder. We utilized empathy mapping and user journey mapping to visualize user emotions and behaviors during their interactions. Additionally, we conducted an analytics review to identify trends and areas for improvement. Tools like affinity diagrams and card sorting helped organize and analyze the data collected, revealing patterns that informed our redesign strategy and aligned with user needs.
Empathy Mapping
This collaborative technique is designed to visualize a user’s thoughts, feelings, needs, and behaviors, allowing teams to gain deeper insights into the user experience and perspective.
User Journey Mapping
In this visual representation, the typical steps a user takes while shopping online are emphasized, highlighting key stages, actions, and pain points encountered throughout the process.
Analytics Review
Existing data from user interactions with Fit Finder is thoroughly evaluated to uncover trends, usage patterns, and potential areas where users might face challenges or experience friction in their shopping journey.
Card Sorting
Users engage in this method by categorizing topics into groups, which aids in the development of information architecture and enhances the overall structure of a product or website.
Similarity Matrix
This data visualization tool illustrates how frequently users grouped items during a card sorting exercise, with blue square clusters highlighting shared patterns and associations in their mental models.
Affinity Diagram
By systematically organizing large amounts of qualitative data or ideas based on their natural relationships, this technique enables teams to uncover patterns and insights that inform decision-making and inspire innovative solutions.
Research
Duration: 2 weeks
Collaborated with: Data Scientists and User Researcher to gather insights and understand user needs through interviews and surveys
We focused on understanding both market conditions and user needs. By conducting thorough market research, we aimed to uncover industry trends and analyze competitors, while user research helped us empathize with users and identify their pain points. This combination provided valuable insights that informed our design decisions.
Market Research
To better understand the competitive landscape, we conducted thorough market research on key players in the personalized sizing space, such as True Fit, Size.ly, and MySize. These competitors leverage advanced algorithms and extensive databases to provide tailored size recommendations, highlighting the growing consumer demand for accurate fit solutions in online shopping. By analyzing their features, user experiences, and market positioning, we identified opportunities for Fit Finder to enhance its offerings and differentiate itself in the rapidly evolving fashion e-commerce market.
User Research
This included in-depth interviews and usability testing to gather insights into user preferences and pain points in the shopping experience. This qualitative approach explored users’ motivations, frustrations, and expectations while using Fit Finder. We utilized empathy mapping and user journey mapping to visualize user emotions and behaviors during their interactions. Additionally, we conducted an analytics review to identify trends and areas for improvement. Tools like affinity diagrams and card sorting helped organize and analyze the data collected, revealing patterns that informed our redesign strategy and aligned with user needs.
Empathy Mapping
This collaborative technique is designed to visualize a user’s thoughts, feelings, needs, and behaviors, allowing teams to gain deeper insights into the user experience and perspective.
User Journey Mapping
In this visual representation, the typical steps a user takes while shopping online are emphasized, highlighting key stages, actions, and pain points encountered throughout the process.
Analytics Review
Existing data from user interactions with Fit Finder is thoroughly evaluated to uncover trends, usage patterns, and potential areas where users might face challenges or experience friction in their shopping journey.
Card Sorting
Users engage in this method by categorizing topics into groups, which aids in the development of information architecture and enhances the overall structure of a product or website.
Similarity Matrix
This data visualization tool illustrates how frequently users grouped items during a card sorting exercise, with blue square clusters highlighting shared patterns and associations in their mental models.
Affinity Diagram
By systematically organizing large amounts of qualitative data or ideas based on their natural relationships, this technique enables teams to uncover patterns and insights that inform decision-making and inspire innovative solutions.
Analysis
Duration: 2 weeks
Collaborated with: User Researcher and Data Scientists to assess past analytics, evaluate research data, and transform findings into actionable design requirements
During this period, we focused on synthesizing insights from our research to effectively address user needs. This included crafting detailed user personas that represented the diverse experiences of our target audience. Additionally, we mapped high-level user flows and developed a sitemap to visualize the product’s architecture.
User Personas
“I love fashion, but my busy schedule makes it hard to find time to shop for the perfect fit.”
1. Mia Thompson
Personal Background:
Mia, 32 years old, is a single marketing professional living in Amsterdam, Netherlands.
Professional Background:
Marketing Specialist at a digital marketing agency, earning approximately €45,000 per year.
User Environment:
Mia primarily shops online using her smartphone late at night after a long day at work. She enjoys using apps that simplify the shopping experience and provide personalized suggestions, as this is when she has the most time to browse and explore new styles.
Psychographics:
- Fashion-forward and enjoys experimenting with different styles
- Values convenience and efficiency in shopping
- Looks for products that reflect her personality and lifestyle
- Favors sustainable and ethical brands
End Goals
- Find stylish clothing that fits well and enhances her personal style
- Minimize time spent on returns due to sizing issues
- Access personalized recommendations based on her preferences
Scenario
“With my hectic work schedule and social life, I often find myself shopping late at night. I want to discover clothes that not only fit me well but also match my vibrant style. It would be amazing to have a shopping experience that understands my tastes and suggests pieces that suit my body type without the hassle of returns.”
“Finding clothes that fit shouldn’t be a gamble—it should be easy and reliable.”
2. Omar Khan
Personal Background:
Omar, 35 years old, is a married father of three, holds a Master’s degree in Business Administration, and lives in Los Angeles, California.
Professional Background:
Sales Director at a global consulting firm, earning $95,000 per year.
User Environment:
Omar prefers shopping online at home after dinner, typically using his laptop or tablet. He seeks convenience and efficiency in his shopping experience.
Psychographics:
- Values functionality and quality in clothing
- Looks for pieces that transition from office to casual settings
- Tech-savvy and appreciates innovative solutions that save time
End Goals
- Find stylish and comfortable clothing for professional and personal occasions
- Reduce frustration associated with online shopping
- Ensure reliable size selections for hassle-free purchases
Scenario:
“I want to quickly find clothes that fit well, so I can focus on my work and family time without worrying about returns. I need a tool that helps me navigate size variations and offers clear recommendations based on my measurements, so I can confidently order without the hassle of returning items that don’t fit.”
“Shopping should be exciting, but I often end up disappointed when things don’t fit.”
3. Isabella Moreno
Personal Background:
Isabella, 22 years old, is a college student studying Sociology and lives in Barcelona, Spain.
Professional Background:
Works part-time as a barista while pursuing her degree, earning approximately $20,000 per year.
User Environment:
Isabella shops mostly on her smartphone while at college or during her downtime at work. She loves trends and unique pieces but often finds herself overwhelmed by options.
Psychographics:
- Enjoys fashion and self-expression through clothing
- Struggles with size variability across brands
- Values peer reviews and recommendations
- Has a limited budget and seeks affordable options
End Goals
- Discover trendy clothing that fits well within her budget
- Enhance her individuality through fashion choices
- Avoid the hassle of returns and dissatisfaction with purchases
Scenario
“I just want to find clothes that fit and make me feel confident without the stress of returning items. It’s frustrating to love an outfit online, only to find it doesn’t fit when it arrives. I hope for a solution that can suggest sizes based on my measurements and provide styling tips, so I can feel excited about what I’m ordering without breaking the bank.”
User Flow
Our user flow mapping for Fit Finder identified essential actions and decision points that streamline navigation. The Similarity Matrix indicates that users cluster personal details (height, weight, body shape, bra size, age) in one group, brand information in another, and settings with size charts in a separate category. We should align the redesign with these user groupings to enhance usability.
Sitemap
The Fit Finder sitemap provides a comprehensive visual layout of its structure, detailing the sequence and organization of screens, from inputting personal details to receiving size recommendations, facilitating effortless navigation and enhancing the overall user experience.
Design
Duration: 6 weeks
Collaborated with: Product Manager for goal alignment, business stakeholders during workshops, Data Scientists to validate recommendation outcomes, other Product Designers for design critiques, and Engineers for implementation support
After completing an accessibility audit, analyzing usability test insights, and collaborating with the data science team, I created design concepts. The process moved from Crazy 8s brainstorming to sketches, wireframes, and ultimately mid- and high-fidelity designs.
Design Mentorship
I mentored junior designers by involving them in the accessibility audit, user research analysis, and persona creation alongside a UX researcher. In weekly critiques, I provided targeted feedback to strengthen their designs and introduced them to our new design system to ensure consistency. Through regular check-ins, I helped them build problem-solving skills and confidence, empowering them to take ownership of their work and grow as designers.
Design Mentorship
I mentored junior designers by involving them in the accessibility audit, user research analysis, and persona creation alongside a UX researcher. In weekly critiques, I provided targeted feedback to strengthen their designs and introduced them to our new design system to ensure consistency. Through regular check-ins, I helped them build problem-solving skills and confidence, empowering them to take ownership of their work and grow as designers.
Accessibility Audit
The analysis of Fit Finder concentrated on the hierarchy of headings, effective focus order for keyboard navigation, and screen reader compatibility to enhance user experience. It also evaluated color contrast to ensure text is easily readable, contributing to a more inclusive interface for all users.
Usability Test Feedback
This revealed valuable insights into user behavior and preferences, guiding necessary adjustments to ensure the product meets user needs effectively.
Data Science Insights
In discussions with the Data Science team, we concluded that only the user’s personal details are necessary for accurate size recommendations, while brand information does not enhance accuracy. This aligned with our findings from the Similarity Matrix, which showed users grouping personal and brand details separately. Consequently, we decided to remove the brand screens from the Fit Finder to streamline the user experience.
Crazy 8s
A fast brainstorming method where participants sketch eight ideas in 8 minutes, promoting quick, creative solutions.
Sketches
We refine our rapid ideas into more detailed sketches, focusing on usability and visual clarity.
Hi-Fidelity Designs
Here we transform wireframes into polished, visually detailed interfaces, incorporating final design elements like color, typography, and imagery.
In the new mobile design, we implemented several significant updates to enhance user experience and overall functionality. These updates include the following:
Design System
In partnership with product designer Micah Saiger, I created the Design System for the revamped Fit Finder, which resolved all accessibility concerns. This design system was integral to all offerings within Snap Inc.’s AR Enterprise Suite, with Fit Finder as the sole existing product that I managed. New augmented reality products, like Live Try On, were also set to adopt this design system, with Micah taking the lead on their design.
Design Tokens
These vital components—colors, spacing, and fonts—ensure a beautiful, consistent experience from start to finish, enabling developers to implement designs with ease. I started by creating variables in Figma, which I then converted into tokens using Tokens Studio.
Brand Tokens
Specific colors and styles that represent the brand identity. As an example:
Token: { “color”: { “grayscale”: { “100”: { “value”: “#c4c4c4”, “type”: “color”
Variable: colorGrayscale100
Usage: Used for dividers, and inactive text fields to visually distinguish sections or inactive states without drawing too much attention.
Purpose: It maintains subtle separation and clarity while supporting a clean, minimalist interface on white backgrounds.
Alias Tokens
User-friendly names for design elements, often referring to brand tokens for color specifications. As an example:
Token: { “error”: { “300”: { “value”: “{color.red.300}”, “type”: “color”
Variable: colorError300
Usage: Used to indicate error states in UI components, such as error messages or alerts, drawing user attention to issues that need resolution.
Purpose: It communicates urgency and importance, helping users quickly identify and address errors within the application.
Mapped Tokens
Standardized color shades linked to specific design roles or components, derived from alias tokens. As an example:
Token: { “text”: { “heading 1”: { “value”: “{neutral.500}”, “type”: “color”
Variable: textHeading1
Usage: Used for the text of heading 1, ensuring that it stands out prominently against background elements to capture users’ attention.
Purpose: It establishes a visual hierarchy, enhancing readability and guiding users through the content effectively.
Responsive Tokens
User-friendly names for design elements, often referring to brand tokens for color specifications. As an example:
Token: { “font-size”: { “heading”: { “h2”: { “value”: “18px”, “type”: “dimension”
Variable: fontSizeHeadingH2
Usage: Used to create a visually distinct hierarchy in text, ensuring that secondary headings are easily identifiable within the content.
Purpose: It enhances readability and guides users through the information structure, helping them understand the relationship between different sections of the content.
Prototype
Duration: 1 week
Collaborated with: Fellow Product Designers to obtain insights and improve the prototype
During this phase I developed interactive prototypes for Fit Finder, allowing users to engage with a realistic simulation of the app. This hands-on navigation enabled us to evaluate functionality and collect critical feedback on usability and design features. This iterative process was essential for identifying potential issues and making necessary refinements, ensuring that Fit Finder was optimized for the development stage.
Fit Finder (V5.0) – Upper body/Woman – March 2023
Developer Handoff
Duration: 2 weeks
Collaborated with: The Engineering Lead and Developers to ensure clear design specifications, tokens, and assets were provided for accurate implementation
During this two-week phase, I focused on assembling detailed documentation that facilitated effective collaboration between the design and development teams. By supplying comprehensive design specifications and resources, I aimed to ensure a seamless handoff and precise execution of the Fit Finder features.
Design Specifications
- Style Guide: Include typography, color palettes, spacing, button styles, iconography, and other design elements.
- Component Library: Provide a library of reusable components with their states (normal, hover, active, disabled).
- Design Tokens: Prepare tokens for colors, typography, spacing, and UI elements in a development-friendly format (e.g., JSON, YAML).
Interactive Prototypes
- Clickable Prototypes: Provide interactive prototypes that illustrate user flows and demonstrate how components and screens should behave in context.
Documentation
- User Flows: Include diagrams that outline the user’s journey through the application, highlighting key interactions and decision points.
- Functional Requirements: Document the functional specifications, including how each feature should work and any necessary integrations with APIs or services.
- Accessibility Guidelines: Specify any accessibility considerations or standards that should be followed during development.
Annotation and Comments
- Annotated Screens: Provide annotations within the design files to explain specific design choices, interactions, and behaviors that are not immediately apparent.
- Feedback Mechanisms: Outline how developers should communicate questions or feedback regarding the designs.
Version History
- Keep track of design iterations and ensure developers are working with the latest version of the design.
Collaboration and Support
- Scheduled Meetings: Arrange handoff meetings to walk developers through the designs, clarify requirements, and address any questions.
- Availability for Questions: Ensure that myself and other designers are available for follow-up questions during the development process.
A/B Test
Collaborated with: Data Scientists and Product Manager to set up and evaluate the A/B test, analyzing metrics like task success rates and user engagement
Objective
The A/B test was designed to assess the effectiveness of the redesigned Fit Finder in enhancing user journey optimization, reducing friction during the shopping process, and increasing conversion rates.
Did the Product Solve the Problem?
The redesign successfully addressed critical user pain points by simplifying navigation, reducing screens, increasing trust in size recommendations, and minimizing friction throughout the shopping journey, ultimately leading to a smoother user experience.
Exceeding Key Objectives
The A/B test yielded significant improvements, with a 25% increase in conversion rates, a 30% reduction in return rates, and a 40% increase in user satisfaction scores, confirming that the redesign effectively achieved its key objectives and enhanced overall user experience.
Next Steps
Collaborated with: Product Manager, engineering teams, and client teams to implement the redesigned Fit Finder, ensuring alignment on rollout strategies and clarity on the new features
After the successful A/B test, we collaborated with the Product Manager and Engineering team to prepare for a full rollout of the redesigned Fit Finder for all clients. This included creating implementation guides and scheduling training sessions to ensure client teams understood the new features. We also planned to prioritize ongoing monitoring and feedback collection to refine the experience further and address any issues that may arise post-launch.
