Project Goal
Despite online shopping’s convenience, users often face decision overload, struggle to find the right fit, and miss out on out-of-stock items. mira enhances the e-commerce journey with personalized guidance, making fashion shopping more efficient and enjoyable.
How might we…
...connect SpreeAI and online shoppers to streamline discovery, enhance guidance, and boost confidence in AI-powered shopping?
Core Experience
Hi, I'm mira! Your personal fashion stylist.
mira, the conversational AI assistant, makes shopping easier with voice commands that streamlined curated experience before, during and post shopping for online shopper.
Key Features
Personalization
Personalization through AI, allowing users to select an AI shopping assistant that fits their style.
Style and brand preferences are gathered through quick, interactive quizzes, enabling more tailored recommendations.
Smart Photo Recognition
Smart Photo Recognition enables shoppers to quickly and easily find the exact items they’re looking for.
Pre-Order
Pre-Order tracks out-of-stock items and notifies users as soon as they become available, reducing missed opportunities.
3D Mode & Product Details
With detailed product insights, including offer a realistic sense of fit, texture, and product details, helping users make confident purchasing decisions to replicate in-person shopping experiences.
Impact
mira’s smart AI approach made shopping more intuitive and enjoyable, reinforcing SpreeAI’s mission to simplify online shopping. It strengthened SpreeAI’s market position, leading to new B2B partnerships and greater adoption of its technology.
scroll down to explore our full research and design journey!
Research
Clarifying with clients & Understanding our user
Initiating with comprehending our client, we met with SpreeAI team to pinpoint exactly what their concerns are and how we can help.
What makes online shoppers frustrating?
To uncover key challenges in online shopping, we conducted 10 user interviews, industry research, and behavioral analysis, identifying major pain points and common shopping behaviors. Our findings inculde:
Decision Overload
Confidence Gap
Outfit Frustration
How do people shop online?
We analyzed shopping habits across platforms and found common behavioral patterns:
Users jump between multiple tabs, making it difficult to compare items.
Many shoppers save items but struggle to finalize a purchase.
Social media and influencers heavily influence shopping decisions.
79 min
70%
47%
Problem
SpreeAI
Wants to increase user adoption & business partnerships.
SpreeAI’s AI-powered shopping features face low adoption due to unclear guidance and drop-offs during key interactions like virtual try-ons.
Online Shoppers
Want to make the right decision and buy the right item.
Online shoppers often face decision overload, struggle to find the right fit, and miss out on out-of-stock items.
How might we…
...connect SpreeAI and online shoppers to streamline discovery, enhance guidance, and boost confidence in AI-powered shopping?
Design Solution
Introduce a conversational AI agent,
making shopping more interactive and accessible.
We designed mira, a fashion buddy for every online shopper. We added a conversational AI layer that streamlines discovery, reduces decision fatigue, and improves outfit coordination.
Define Scope
After identifying the main problem and defining the problem statements for SpreeAI and active shoppers, we mapped touchpoints across the entire shopping journey, as the challenges span the pre-purchase, purchase, and post-purchase phases. This helped us uncover opportunities where our conversational agent could provide assistance.
Based on these insights, we finalized our direction by focusing on three key phases—before, during, and after shopping—to develop targeted solutions.
Exploration
For the visual format, we drew inspiration for mira's visual form from the textile, tailoring, and fashion industries, combining these elements with a touch of magic to create a unique aesthetic.
We drew inspiration from pop culture, such as characters from Emily in Paris and animations, to create a persona that feels familiar and relatable. This connection helps users associate the character with fashion and clothing in an engaging and intuitive way.
Iteration
We conducted usability testing with online shoppers. Our goal was to assess conversational flow, ease of use and interaction design to ensure a seamless, engaging shopping experience.
Task Flow
Enhancing Toolbar Accessibility by fixing key features
The toolbar was a floating button in the top-right corner, making it difficult for users to tap due to limited space.
Fix the toolbar underneath the screen, showing only the most frequently used features to enhance accessibility and ease of use.
Enhancing Prompt Card Visibility & Interactivity
The prompt card was at the bottom of the screen with a short description, which limited the number of prompts shown and made interactions feel static.
The prompt card is now placed at the center with a single-sentence description, making it more dynamic and interactive, encouraging users to engage with mira more naturally.
Improving Visual Feedback in Image Search
The search results appeared instantly after processing, causing confusion as users often forgot what image they initially uploaded.
After users upload or capture a photo, Mira now displays the input image alongside search results, helping users recall what they provided.
Clarifying Mira’s Conversational Responses
mira was activated by voice (“Hey mira”) but did not display a response, leaving users uncertain about the assistant’s feedback.
We added a text dialogue display showing mira’s responses, ensuring users can read mira’s messages even if they can’t listen.
Final Design
Feature 01
We established seven states for mira, each accommodating distinct user interactions.
Users can customize the assistant’s personality to match their preferences, making the shopping experience more engaging and tailored to their needs.
Design System
The color palette draws from SpreeAI's existing branding, blending elements of fashion and technology for a cohesive and modern aesthetic.
Feature 02
Personalization
Personalization through AI, allowing users to select an AI shopping assistant that fits their style.
Style and brand preferences are gathered through quick, interactive quizzes, enabling more tailored recommendations.
Users meet mira on various e-commerce platforms that partner with SpreeAI. When they click Try On, they're prompted to activate the SpreeAI, where mira appears and introduces herself.
Onboarding Quiz
From here, users can choose their preferred stylist personality from three different styles, customizing mira’s approach to match their taste. They’ll then answer a few simple questions, following easy prompts, and land on the homepage.
From here, users can choose their preferred stylist personality from three different styles, customizing mira’s approach to match their taste. They’ll then answer a few simple questions, following easy prompts, and land on the homepage.
On the homepage, users have a few ways to interact with mira. There are quick prompts to jumpstart the experience, but users can also freely ask anything.
The layout includes several key sections: Settings, where users can manage their profile and switch mira’s personality anytime; Prompts, which offer conversation starters; and a Conversation Bar, where users can type or speak directly to mira.
Feature 02
Smart Photo Recognition
Personalization through AI, allowing users to select an AI shopping assistant that fits their style.
Style and brand preferences are gathered through quick, interactive quizzes, enabling more tailored recommendations.
Pre-Order & Virtual Try-on Guidance
Should a user's chosen size be unavailable, a Pre-Order alternative exists. mira assists in arranging a reminder for the user. For virtual try-on, mira is your guide throughout.
3D Mode
Users can click the 3D button to see a virtual try-on experience with the selected garment.
Product Details & AI-driven size recommendation
In the Try On section, users can find product details, including material info, background stories, and an AI-driven size recommendation that SpreeAI offers.
Feature 03
Outfit Recommendation
mira can also suggest outfit ideas, perfect for those days when deciding what to wear feels impossible.
Explore
Plus, users can explore by locking items they’re interested in, opening up recommendations for styles from SpreeAI’s brand partners.
Learning & Reflection
It's interesting to consider how a dialog-based agent can be integrated into an existing process to enhance user convenience. As we move forward, our design primarily focuses on creating a seamless mobile shopping experience. However, many users also shop from desktop devices, where they engage in more in-depth research, price comparisons, and bulk shopping. Integrating Mira into the desktop shopping experience could provide a more unified, cross-platform AI assistant, ensuring consistency and convenience across different devices.
