Designing a Fashion Stylist Chatbot UI

Introduction

Online apparel retailers struggle to engage shoppers and recommend products that match their preferences and personal style. Many shoppers find it difficult to discover products they truly like.

The Stylist Chatbot bridges this gap by replicating the in-store stylist experience online. Retailers integrate the chatbot into their websites, allowing customers to receive tailored product recommendations efficiently.

Challenge

How might we design a chatbot experience that helps online apparel retailers deliver personalized recommendations, improving both customer engagement and conversions?

My Role
User Interface Design | User Experience Design | Icon Design | Design System | Avatar Design | Prototype | Research | Wireframe | Interactive Design

Teams
Cofounders | Product Owner | Engineers | Clients

Research & Insights

AI Chatbots in Fashion E-commerce

To understand how AI chatbots enhance the fashion e-commerce experience, I studied industry leaders using AI for personalized shopping assistance, size recommendations, and conversational commerce.

  • H&M Chatbot – Suggests outfits based on user preferences.

  • Levi’s Virtual Stylist – Recommends jeans based on body type and fit.

  • Zalando’s AI Stylist – Uses image recognition and AI to assist with styling.

Key Takeaway

Fashion e-commerce chatbots improve user engagement by providing AI-driven recommendations, real-time size assistance, and seamless shopping guidance.

Interviewing In-Store Fashion Stylists

To create a chatbot that truly mimics a stylist’s expertise, I conducted interviews and shadowed professional fashion stylists to understand their approach to assisting shoppers.

Key Takeaway

  • Stylists ask key questions to gauge customer preferences.

  • Short, engaging interactions keep customers interested.

  • Visual references are crucial in explaining styles.

Developing the High Fidelity Prototype

Chatbot User Flow

I emphasized on clarity, simplicity, and a straightforward experience to test the concept of a stylist-bot more broadly.

Test & Identified Challenges

We developed a prototype and tested it within a mock e-commerce store. Initial results showed low engagement, with many users quitting before completing the styling quiz.

Key Issues Discovered

Shoppers were unfamiliar with fashion terms (e.g., minimalist, bohemian), causing confusion.

Text-heavy interfaces lacked visual appeal, leading to disengagement.

Improving Chatbot Engagement

To address these issues, I incorporated:

  • Simplified language based on stylist insights.

  • More visual-based styling quizzes instead of text-heavy options.

Avatar Design & Customization

Research on Avatar Styles

Two dominant chatbot styles emerged:

  • Minimalist Robotic Icons – Sleek and futuristic but impersonal.

  • Character-Based Illustrations – Approachable but often generic.

Designing an Engaging Avatar

To enhance engagement, I concluded that the chatbot avatar needed to be:

  • Friendly, stylish, and approachable – Reflecting expertise in fashion.

  • Visually engaging and diverse – Encouraging users to click and interact.

  • Minimalist yet expressive – Using variety of subtle facial features, hair, and fashion styles.

Avatar Variations

Integrating the Chatbot into E-Commerce Platforms

Strategic Placement on Retail Websites

Through testing, we identified key locations for maximum visibility and engagement:

  • Landing Page – Bottom-right or bottom-left corner (expected location for chatbots).

  • Navigation Bar – Accessible via a dedicated button.

  • Filter Section – Positioned above product filters to provide styling assistance.

Despite strategic placement, engagement remained low, which led to further refinement of the chatbot's design.

Customizing the Interface for E-Commerce

Customizing the UI pair E-commerce Requirements
After engaging with pilot customers, I recognized the necessity for increased design flexibility to align with diverse e-commerce branding strategies and customer base.

Result

The chatbot effectively engaged with first-time visitors to apparel e-commerce stores, initiating conversations. However, it fell short of significantly boosting conversion rates. Online shopper behavior indicated that customers prefer multiple interactions and searches before making a purchase and one time recommendation is not enough.

The e-commerce business utilized chatbot interactions and the data collected to retarget online customers. This approach allowed them to learn about shoppers' interests through the chatbot conversations. However, the revenue generated by the chatbot did not justify its cost for the e-commerce business.

Our product was still in the MVP phase, and we halted operations before further enhancing the experience or entering a growth phase.

Key Insights

Flexibility is Crucial: Customization for different e-commerce platforms highlighted the importance of designing adaptable components that cater to diverse branding and functional requirements.

Minimalism Supports Versatility: A neutral and minimal design ensures compatibility across various retail environments without causing visual distractions.

Scalability in Design: Developing variable components allowed for efficient scaling and tailoring of the chatbot to meet specific needs while maintaining consistency.