AI Stylist Studio
Introduction
This project was launched within Snap’s AR Shopping Suite as an innovative approach to revolutionize product discovery using generative AI, with the goal of reshaping user interaction in the fashion space. It became a design sprint, allowing each designer to explore distinctive ideas and experiment with interactive features and user flows. The collaborative environment fostered a range of creative solutions, all aimed at delivering a seamless, personalized shopping journey. My proposal builds on these foundations to drive deeper user engagement and enhance the overall AR shopping experience.
My Role
As a Product Designer on the AI Stylist Studio project, I focused on reimagining product discovery through generative AI, aiming to revolutionize user engagement in fashion. I developed a proposal that explored innovative features and user flows, collaborating closely with the design team during a design sprint to generate diverse solutions. My work emphasized creating a seamless, personalized shopping experience, and my proposal was ultimately selected for A/B testing, reflecting its potential to enhance user interaction.
Project Collaborators
- Head of Product: Oversaw product strategy and ensured alignment with business goals.
- Head of Design: Guided the overall design vision, fostering creativity and innovation.
- User Researcher: Gathered valuable insights to shape user-centered design decisions.
- Product Designers: Contributed diverse proposals and refined ideas through feedback.
- Engineers: Engineered robust, scalable solutions to bring designs to life.
Design Process
- Define
- Research
- Analysis
- Design
- Prototype
- Test
- Developer Handoff
- A/B Test
- Next Steps
AI Stylist Studio
Introduction
This project was launched within Snap’s AR Shopping Suite as an innovative approach to revolutionize product discovery using generative AI, with the goal of reshaping user interaction in the fashion space. It became a design sprint, allowing each designer to explore distinctive ideas and experiment with interactive features and user flows. The collaborative environment fostered a range of creative solutions, all aimed at delivering a seamless, personalized shopping journey. My proposal builds on these foundations to drive deeper user engagement and enhance the overall AR shopping experience.
My Role
As a Product Designer on the AI Stylist Studio project, I focused on reimagining product discovery through generative AI, aiming to revolutionize user engagement in fashion. I developed a proposal that explored innovative features and user flows, collaborating closely with the design team during a design sprint to generate diverse solutions. My work emphasized creating a seamless, personalized shopping experience, and my proposal was ultimately selected for A/B testing, reflecting its potential to enhance user interaction.
Project Collaborators
- Head of Product: Oversaw product strategy and ensured alignment with business goals.
- Head of Design: Guided the overall design vision, fostering creativity and innovation.
- User Researcher: Gathered valuable insights to shape user-centered design decisions.
- Product Designers: Contributed diverse proposals and refined ideas through feedback.
- Engineers: Engineered robust, scalable solutions to bring designs to life.
Design Process
- Define
- Research
- Analysis
- Design
- Prototype
- Test
- Developer Handoff
- A/B Test
- Next Steps
Define
Duration: 1 week
Collaborated with: Product Manager and key business stakeholders to align on user needs, business goals, and KPIs
We held several stakeholder meetings to craft the problem statement and set key objectives. Product designers collaborated to ensure the approach aligned with both user needs and the broader business strategy. This foundational work focused on understanding how the product could meet user expectations while supporting strategic goals, setting clear, measurable KPIs to guide the design process.
Problem Statement
How might we create an intuitive, AI-powered shopping experience that delivers personalized recommendations and ensures perfect fit?
Key Objectives
- User Engagement: Achieve a minimum of 500 active users within the first month.
- Usability Validation: Attain a task completion rate of at least 85% in usability tests.
- User Satisfaction: Target a user satisfaction score of 4.5/5 or higher in post-launch surveys.
- Interaction Metrics: Monitor average session duration, aiming for at least 5 minutes per session.
Product Roadmap
The AI Stylist Studio roadmap spans research, design, development, A/B testing, and post-launch planning, with a focus on enhancing user experience and increasing engagement. Key milestones are in place to keep the team aligned at each step.
Research
Duration: 2 weeks
Collaborated with: User Researcher and Data Scientists to gather insights through surveys and user interviews, identifying key pain points and expectations for the shopping experience
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
We analyzed competitors such as Stitch Fix and Zalando—platforms offering personalized fashion recommendations. Emerging trends in the fashion tech space included the growing use of AI-powered virtual try-ons and augmented reality fitting rooms, seen in brands like Farfetch and Amazon, which integrate AI to enhance the shopping experience. Understanding these trends and competitor strategies allowed us to identify gaps and opportunities for AI Stylist Studio to offer a more tailored and engaging product discovery process.
User Research
This centered on understanding user needs and building empathy through a variety of methods. We conducted in-depth interviews and surveys to gather firsthand insights, focusing on user preferences and pain points in the shopping experience. Additionally, empathy mapping and user journey mapping helped us visualize user emotions and behaviors throughout their interaction with the product. Tools like affinity diagrams and card sorting allowed us to organize and analyze this data, ensuring the final design reflected users’ expectations and provided intuitive, AI-driven solutions tailored to their needs.
Empathy Mapping
A collaborative technique used to visualize a user’s thoughts, feelings, needs, and behaviors to better understand their experience and perspective.
User Journey Mapping
A visual representation of the most common steps a user takes while shopping online, highlighting key stages, actions and pain points.
Card Sorting
A method where users organize topics into categories, helping to inform information architecture and improve the structure of a product or website.
Similarity Matrix
A data visualization tool that displays how often users grouped items together in a card sorting activity, with blue square clusters indicating shared patterns and associations in their mental models.
Affinity Diagram
A technique used to group large amounts of qualitative data or ideas based on their natural relationships, helping to identify patterns and insights.
Research
Duration: 2 weeks
Collaborated with: User Researcher and Data Scientists to gather insights through surveys and user interviews, identifying key pain points and expectations for the shopping experience
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
We analyzed competitors such as Stitch Fix and Zalando—platforms offering personalized fashion recommendations. Emerging trends in the fashion tech space included the growing use of AI-powered virtual try-ons and augmented reality fitting rooms, seen in brands like Farfetch and Amazon, which integrate AI to enhance the shopping experience. Understanding these trends and competitor strategies allowed us to identify gaps and opportunities for AI Stylist Studio to offer a more tailored and engaging product discovery process.
User Research
This centered on understanding user needs and building empathy through a variety of methods. We conducted in-depth interviews and surveys to gather firsthand insights, focusing on user preferences and pain points in the shopping experience. Additionally, empathy mapping and user journey mapping helped us visualize user emotions and behaviors throughout their interaction with the product. Tools like affinity diagrams and card sorting allowed us to organize and analyze this data, ensuring the final design reflected users’ expectations and provided intuitive, AI-driven solutions tailored to their needs.
Empathy Mapping
A collaborative technique used to visualize a user’s thoughts, feelings, needs, and behaviors to better understand their experience and perspective.
User Journey Mapping
A visual representation of the most common steps a user takes while shopping online, highlighting key stages, actions and pain points.
Card Sorting
A method where users organize topics into categories, helping to inform information architecture and improve the structure of a product or website.
Similarity Matrix
A data visualization tool that displays how often users grouped items together in a card sorting activity, with blue square clusters indicating shared patterns and associations in their mental models.
Affinity Diagram
A technique used to group large amounts of qualitative data or ideas based on their natural relationships, helping to identify patterns and insights.
Analysis
Duration: 2 weeks
Collaborated with: User Researcher and Data Scientists to analyze research data and translate findings into actionable design requirements
We synthesized the insights gathered during the research stage to strategically plan how to address user needs effectively. This involved developing detailed user personas to capture the diverse experiences of our target audience. We mapped out high-level user flows and created a sitemap to visualize the product’s structure. Additionally, we considered the technologies needed for implementation and established a comprehensive project roadmap, complete with milestones, to ensure a clear path forward as we transitioned into the design phase.
User Personas
“Shopping should be quick, easy, and personal. I don’t have time to waste, and I want to get the right fit the first time.”
1. Sarah Thompson
Personal Background:
Sarah, 29 years old, divorced mother of one, holds a Bachelor’s degree in Marketing, and lives in New York City.
Professional Background:
Marketing Manager at a mid-size tech company, earning $85,000 per year.
User Environment:
Sarah primarily shops online using her smartphone, during her commute or work breaks. She’s comfortable with technology and loves apps that simplify her life.
Psychographics:
-
- Values efficiency and convenience in online shopping.
- Prefers personalized recommendations to save time.
- Frustrated by size inconsistencies, leading to frequent returns.
- Enjoys staying on top of fashion trends but doesn’t want to spend hours browsing.
End Goals
- Quickly find clothes that match her style and fit perfectly.
- Reduce the hassle of returning items that don’t fit.
Scenario:
“I’m usually shopping during my break or while commuting. I want to find clothes that look great without second-guessing the size. Accurate size recommendations are key—I don’t want to return anything. If I can use AR to see how it fits before I buy, even better.”
“Just tell me what fits so I can buy it without having to think too much.”
2. Daniel Lopez
Personal Background:
Daniel, 35 years old, married, Master’s degree in Computer Science, lives in San Francisco.
Professional Background:
Software Engineer at a major tech company, earning $120,000 per year.
User Environment:
Daniel primarily shops on his desktop at home in the evenings and uses his phone for quick purchases. He prefers detailed size information when shopping for clothes and is tech-savvy, using digital tools to enhance his experience.
Psychographics:
-
- Prioritizes functionality and fit over fashion.
- Dislikes spending time browsing for clothes.
- Needs accurate size recommendations to avoid returns, as he shops infrequently.
- Appreciates technology that simplifies decision-making.
End Goals
- Get reliable size recommendations without having to browse endlessly.
- Avoid the inconvenience of returns by getting the right size the first time.
Scenario
“I shop for clothes maybe once every few months, and when I do, I just want to get it over with quickly. I hate having to return items because they don’t fit. If the size recommendation is spot-on, I’ll buy it—especially if it’s simple to do.”
“I need my fashion choices to be trendy, shareable, and accurate in size—I can’t afford mistakes.”
3. Emily Zhang
Personal Background:
Emily, 25 years old, single, Bachelor’s degree in Fashion Design, lives in London.
Professional Background:
Fashion Blogger and Social Media Influencer, earning £50,000 a year from her online platforms.
User Environment:
Emily shops using her laptop at home but often uses her phone when she’s out at events or creating content. She’s moderately tech-savvy and interested in trying new tech like AR.
Psychographics:
-
- Loves staying ahead of trends and sharing her style with her followers.
- Needs sizing accuracy to maintain her credibility with brands and followers.
- Frustrated by inconsistent sizing between brands.
- Interested in AR Try-On to make her shopping more engaging for her audience.
End Goals
- Discover trendy, well-fitting clothes to share with her followers.
- Reduce returns by ensuring her sizing is spot on every time.
Scenario
“As a fashion blogger, I need to be sure the outfits I buy are exactly what I’m expecting. It’s embarrassing to recommend something to my followers and have it fit wrong. A tool that gives me personalized size recommendations and AR Try-On would be perfect—I’d share it with my audience too!”
User Flow
Mapping the user flow reveals essential actions and decision points, guiding the design of an intuitive navigation system that enhances engagement and drives conversions. The Similarity Matrix shows that users perceive search cards and style recommendation cards as complementary, affirming the decision to integrate both features seamlessly.
Sitemap
A visual representation of the website’s architecture outlines the content organization, ensuring users can easily navigate and find information. The AI Stylist Studio branch is highlighted in green for clarity and emphasis.
Design
Duration: 4 weeks
Collaborated with: Other Product Designers for design critiques, Product Manager to ensure alignment with our goals, and Engineers on design tokens and consistency across the project
We translated our ideas into tangible design concepts over four weeks. This began with brainstorming sessions using Crazy 8s to rapidly generate layout and navigation ideas. Preliminary sketches helped us explore interactions and essential information hierarchy, laying the groundwork for wireframes. We focused on both UX and UI aspects, refining information architecture, usability, and accessibility.
Design Mentorship
I mentored junior designers by immersing them in key aspects of the design process, starting with user research to gather insights and understand pain points. We conducted brainstorming sessions to encourage fresh perspectives and creative problem-solving. In weekly critiques, I provided structured feedback to guide their design decisions and enhance their user-centered approach. I introduced them to our design system, demonstrating how to maintain and expand it for consistency across components. This mentorship empowered them to contribute meaningfully while building skills in research, collaboration, and systems thinking.
Design Mentorship
I mentored junior designers by immersing them in key aspects of the design process, starting with user research to gather insights and understand pain points. We conducted brainstorming sessions to encourage fresh perspectives and creative problem-solving. In weekly critiques, I provided structured feedback to guide their design decisions and enhance their user-centered approach. I introduced them to our design system, demonstrating how to maintain and expand it for consistency across components. This mentorship empowered them to contribute meaningfully while building skills in research, collaboration, and systems thinking.
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.
Wireframes
We then turn the sketches into structured layouts, guiding the next steps in the design process.
Hi-Fidelity Designs
Here we transform wireframes into polished, visually detailed interfaces, incorporating final design elements like color, typography, and imagery.
Design System
A design system establishes a cohesive set of guidelines and reusable components, ensuring consistency and efficiency across all aspects of the product’s 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: Other Product Designers to gather feedback and refine the prototype
This phase brings the designs to life, enabling us to create interactive, clickable models that closely simulate the user experience. By allowing users to navigate through the prototype, we can assess functionality and gather valuable feedback on usability and design elements. This iterative process is crucial for identifying potential issues and making informed adjustments, ensuring that the product is refined and optimized before moving into final development.
Find Your Style
Discovering your style becomes effortless with conversational prompts that guide you through personalized suggestions. As you engage, the system learns from your preferences, offering tailored recommendations that align more closely with your unique taste over time. It’s a shopping experience that evolves with you, making it easier to find outfits you’ll love.
Prompt: Need outfit inspiration for an Amalfi Coast vacation in June. Help me find the perfect pieces!
Virtual Fitting Room
Clicking the ‘View On Model’ button seamlessly takes you into the virtual fitting room of AI Stylist Studio. View how different items, from tops and bottoms to shoes and accessories, look on models of various body types. This feature offers a crisp, personalized visualization of how styles fit and enhance your shape, making it effortless to find the perfect match for your unique silhouette.
Fit Finder Integration for Perfect Sizing
Fit Finder integration in the AI Stylist Studio guarantees perfect style and fit recommendations, enhancing your shopping experience with personalized accuracy.
Mobile Views
The mobile versions of the designs are optimized for smaller screens, ensuring a seamless, intuitive experience with responsive layouts and touch-friendly interactions.
Find Your Style
Virtual Fitting Room
Fit Finder Integration
Usability Test
Duration: 1 week
Collaborated with: User Researcher to conduct moderated usability tests, gather user feedback, and identify areas for improvement in the prototype
Overview
With three design proposals for the AI Stylist Studio now complete—my own and two created by other product designers—we prepared for usability testing to identify which design would resonate most with users. The tests focused on usability, as the prototypes did not yet include functional elements like the recommendation algorithm and size recommendations.
Objectives
The primary objective was to identify the most user-friendly and engaging design through usability testing. We aimed for a task success rate of 80-90%, an error rate below 5%, and at least 60% user engagement with key features such as the Virtual Fitting Room and Fit Finder. The leading design would then progress to development and A/B testing.
Outcome
The usability testing results highlighted my design’s strengths, with a task success rate of 88% and an error rate of 3%. In contrast, the other designs had success rates of 75% and 70%, with error rates of 7% and 9%. My version achieved 65% engagement with key features, surpassing the competitors’ 50% and 45%. Consequently, my design moved into development.
Developer Handoff
Duration: 2 weeks
Collaborated with: The Engineering Lead and Developers to provide detailed design specifications, tokens, and assets, ensuring a smooth handoff and accurate implementation
I compiled comprehensive documentation to facilitate seamless collaboration between design and development teams, ensuring all necessary specifications, guidelines, and resources were readily available for successful implementation.
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.
Seamless Performance
Our development team focused on optimizing performance to ensure a smooth, fast experience for users. By implementing efficient caching strategies and optimizing server requests, they reduced the average loading time for search results from 1.8 seconds to 0.8 seconds. Additionally, they enhanced the application of AR filters on models, achieving a 60% reduction in rendering time—from 2.5 seconds down to just 1 second. These improvements provided a more seamless experience, allowing users to quickly view and interact with personalized fashion recommendations.
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
Setup
After a four-week development sprint, we conducted A/B testing with retail clients. Users were divided between the traditional shopping flow and the AI platform, allowing us to assess task success, session duration, and user satisfaction.
Did the Product Solve the Problem?
AI Stylist Studio addressed the problem by creating an intuitive, AI-powered shopping experience with personalized recommendations and seamless fit-checking. However, the A/B test highlighted areas where the product didn’t fully meet key objectives.
Falling Short of Key Objectives
The A/B test recorded 340 active users—short of the 500-user goal. The task completion rate was 63%, below the 85% target, and the average session duration was 3.8 minutes, missing the 5-minute mark. User satisfaction scored 4.0/5, falling short of the 4.5/5 goal, signaling areas for improvement.
Next Steps
Collaborated with: Product Manager and UX Researcher to plan revisions based on test results and user feedback, defining priorities for future iterations
We will refine the user experience by streamlining task flows and enhancing feature engagement to improve task success rates and session duration. Gathering more user feedback will help us pinpoint pain points and iterate on features like the Virtual Fitting Room and Fit Finder. A revised usability test and a new A/B test will follow to measure improvements and work toward meeting our objectives.