Mira
Spree AI is a virtual try-on platform that allows users to explore clothing options with precise AI size predictions.
We designed Mira, a conversational UI assistant for Spree AI, to enhance the virtual try-on experience with three new features. Mira provides support, boosts confidence, and encourages social interaction by engaging users in natural, conversational dialogue, creating a more personalized and interactive online shopping experience.
SOLUTION OVERVIEW
Demo Video
We designed a mobile voice assistant for Spree AI, integrating machine vision and AI to introduce three brand new features:
Machine Vision-Enabled Onboarding Assistance
Personalized Gift-Giving Suggestions and Social Features
AI-Driven Hair, Makeup, and Background Generation with Try-On
In addition to the user testing provided by the client, we conducted our own in-depth research to gain deeper insights into users' shopping habits and experiences along with competitve analysis. This research combined both quantitative and qualitative data from 30 participants. We also designed and delivered a custom CUI character, complete with motion graphics.
CLIENT OVERVIEW
Overview of Spree AI
Spree AI’s core feature is to let users upload a photo for virtual try-ons with accurate AI size predictions.
This feature can be integrate into e-commerce platforms, matching each brand’s branding It helps shoppers visualize how clothes will fit, ultimately reducing return rates and speeding up the decision-making process.
RESEARCH
How can we improve Spree AI's existing features?
We conducted quantitative research with 30 participants, asking extensive questions about their online shopping experiences in three key steps while shopping online: search, decision, and post-purchase.
Key Findings
COMPETITIVE ANALYSIS
How can Spree AI stand out in the market?
We also conducted a competitive analysis to see how other key players are addressing similar challenges. This helped inform our design strategy, highlighting ways Spree AI can stand out with a more unique shopping experience, while also expanding its user base and strengthening its B2B pitch.
We found that Spree AI has the potential to incorporate more social features and added personalization in the virtual try on process.
RESEARCH
Summary of Spree AI’s Alpha Testing Results
Spree AI also shared their user testing results from the Alpha App with the existing onboarding experience below, where participants evaluated the onboarding process for taking their first photo for virtual try-on results.
Existing Onboarding Flow
Study Details
Key Findings
The current onboarding experience is lengthy and requires users to fulfill multiple conditions to take a usable photo for the try-on. Furthermore, since users typically take this photo by themselves, they struggle to read instructions on their phones while capturing the onboarding photo.
DESIGN GOAL
How might we help users onboard more efficiently while providing emotional support, offering styling suggestions, enabling quicker decision-making, and creating a more social shopping experience?
DESIGN
Designing Mira: Crafting a CUI that offers emotional support and guidance
We began the design process for the CUI character by defining key characteristics aligned with our design goals. Using the name Mira, provided by Spree AI, we aimed to create a character that embodies neutrality, insight, and care, ensuring it supports the overall user experience.
Visual Ideation
During the ideation phase, we aimed to create a CUI that embodied neutrality and care while reflecting key features of Spree AI’s virtual try-on. We explored forms that conveyed the concept of reflection, drawing inspiration from apparel-related elements, such as the shape of a buttonhole.
CUI Brand Identity
The final shape we chose for our CUI graphic resembles a buttonhole and is symmetrical on both sides, highlighting its mirror-like quality to reinforce the virtual try-on experience. The four circles are neutral and customizable, making the design adaptable to various brands with ease.
CUI Motion Ideation + Speed Dating
We developed motion designs based on our CUI guidelines, visualizing states like loading, idle, success, listening, speaking, error, and generating….To validate these, we conducted a speed dating exercise with potential users to see if they felt the motions effectively communicated the intended states. Below are some of our key takeaways:
Too many states cause confusion: Users found it difficult to remember and recognize multiple states.
Reduced states for clarity: Based on feedback, we decreased the number of states from many to four for a simpler, more intuitive experience.
Clearer motion design: We refined the motions to ensure they better communicated the intended states.
Visual branding alignment: We adjusted the visuals to align more closely with our original buttonhole concept for consistency and brand identity.
CUI Motions
DESIGN CHALLENGE 1:
How do we redesign the onboarding experience to improve clarity and efficiency?
In response to the user pain points identified during onboarding, we developed features to improve the process.
These features help users easily find a suitable location for their onboarding photo, while Mira provides real-time, hands-free guidance throughout the experience.
The user journey map to the left illustrates the redesign onboarding journey, including personalized features that will be detailed further in Design Challenge 2.
Solution Overview
DESIGN CHALLENGE 2:
How can we reduce users' search and decision time when shopping for themselves and others?
Based on survey results, we identified two key pain points: difficulty finding items that match users' styles and challenges with decision-making and time-consuming comparisons.
To address these, we developed a personalized recommendation feature for both self-purchasing and gift-giving.
We created the user journey map to the left and conducted evaluative research through user interviews below to gather insights for refining and implementing this feature effectively.
Interview Insights
Solution Overview
DESIGN CHALLENGE 3:
How can we shorten decision time and ensure items meet expectations while shopping?
Our research indicates that styling greatly influences self-perception and clothing choices.
We’re expanding virtual try-ons to include AI-generated hair, makeup, and background suggestions, enabling users to visualize outfits for events like weddings or parties. This enhancement aims to improve the shopping experience, reduce return rates, shorten decision time, and ensure that items meet user expectations.
To refine this feature, we created a user journey map and conducted user interviews for insights.
Interview Insights
Solution Overview
TAKEAWAYS
Closing Thoughts
Design is about working within constraints.
When we began our project with Spree AI, we were fortunate to have access to existing user testing data. However, as we delved deeper, we identified a gap: the data didn’t provide insight into how a Conversational User Interface could enhance the online shopping experience.
Rather than relying solely on the available data, we conducted in-depth user interviews to fill this gap. The key takeaway from this process was the importance of actively seeking out additional insights when existing research falls short. A designer’s role isn’t just to analyze data but to dig deeper, ask the right questions, and uncover new opportunities to improve the user experience.
2. Design is about creating connections.
Our research for the gift-giving experience pushed us beyond the typical transaction-focused design. We discovered that users valued not just the act of shopping, but the social and emotional aspects of gift-giving. This insight led us to integrate features that fostered connection and shared experiences, such as collaboration tools and personalized interactions. The key takeaway was that designing for deeper social engagement, not just the transaction, can transform a product experience into something more meaningful and memorable.