Mira
CLIENT
TIME
6 weeks
SKILL
UX Design, User Research, Visual Design
TOOL
Figma, After Effect, Premier Pro
MY ROLE
Product Designer
TEAM
Researcher + Motion Designer
Mira is a conversational user interface (CUI) for SpreeAI, adding features like onboarding, makeup and background options, and personalized gift suggestions.
Our goal was to enhance engagement, confidence, and social interactions while strengthening brand loyalty and seamless collaboration with partner brands.
PROBLEM
SpreeAI is an AI company focused on revolutionizing the shopping experience with their Software-as-a-Service products. They aim to bring innovation to the fashion industry by providing customized user interfaces and cutting-edge technology solutions, ensuring a seamless shopping experience for brands.
As a result, they approach the School of Design at Carnegie Mellon University to find an improved method for integrating conversational experiences into their current virtual try-on platform.
Based on SpreeAI’s user study, they identified key pain points in their virtual try-on service, primarily centered around the multi-step onboarding process. They emphasized that onboarding is crucial for collecting accurate body measurements from users, which is essential for delivering optimal results given the way their AI models are trained.
Pain Points
We delved deeper into discussions on adding more value for the client—exploring the online shopping journey and assessing CUI’s capabilities. Through this process, we identified key “opportunity spaces.”
Opportunity Spaces
Given the scope above, we redefined our problem statement:
How might we
enhance the shopping experience by providing emotional support and styling guidance while promoting social and sustainable choices?
PROCESS
The project consisted of six phases, including initial exploratory research and increased focus on UI design and iteration.
1 /
Exploratory
Research
To ensure alignment with our client, SpreeAI, and the virtual try-on market, we initiated early phase research by utilizing the 3C model: Company, Competitors, and Consumers.
Company
During the project kickoff meeting, SpreeAI provided extensive information, including their service model, product flow, and current challenges. They also shared UI guidelines as resources for further design development. This information was sufficient for our understanding of the company and helped us formulate early hypotheses for design solutions.
Competitor
Next, we conducted a competitive analysis to gain insight into SpreeAI's strengths and opportunities.
Consumer
Finally, to gain a thorough understanding of the customer, we conducted quantitative research by surveying 20 young adults aged 20-30 about their shopping habits and experiences. During this process, we also tested our initial concepts to verify that the features were aligned with our objectives.
2 /
Ideate
Affinity Mapping
Next, we proceeded to the ideation phase. It took some time (and lots of infinity mapping, white-boarding, and sketching) for us to identify the key features we wanted to prioritize initially.
Storyboarding
In this process, we created storyboards for the three primary features we planned to introduce, outlining a core experience flow that we hoped users would encounter with the new design.
User Journey Map
The experience then turns into user journey maps, adding users' emotions and how we imagine MIRA to play a part in the experience.
3 /
Design
Visual Identity
When considering MIRA's visual identity, we drew inspiration from the concept of a "mirror" and envisioned symmetrical shapes. One of these shapes evolved into the button, which became our primary identity for further development.
Motion States
We also created an initial version of the CUI motion, investigating various interaction possibilities..
UI
A major component of the project involved demonstrating how MIRA functions on a real website. We began by integrating the design system from SpreeAI for the onboarding process, initially using SpreeAI's own UI. When the user navigates back to the SSENSE website, the UI transitions into SSENSE's design.
The image below shows the initial high fidelity UI we presented to SpreeAI at the midterm presentation. By using the existing design system, it is 80% similar to the final version, with only minor adjustments made in between.
4 /
Evaluate
User Interview
To gain a deeper insight into user thoughts and evaluate our designs, we employed qualitative research methods, including storyboarding and feature walkthroughs, to collect feedback from 5 individuals.
Drawing from the insights gathered from the interviewees, we created a user testing result profile for each individual we engaged with, serving as an overview of our target customer and a roadmap for future actions.
Peer Feedback
Additionally, our team presented our initial motion design to the class to gather feedback from peers and instructors. We displayed the motions on the screen and invited them to place sticky notes on the corresponding states, such as idle, speaking, listening, and loading.
By engaging in discussion, we can learn how motion states function and adjust our direction accordingly.
5 /
Iterate &
Finalize
By integrating feedback from users, peers, and instructors, we enhanced the app's UI and motion and started preparing for the final presentation to SpreeAI and the demo video.
During the final presentation, our demo was praised by our clients for the feasibility and creativity of the gift-giving feature. We are eager to see SpreeAI implement some of our ideas and make a greater impact on the customers.
SOLUTION
We introduced
Mira, a personalized conversational interface for online shoppers,
designed to enhance the shopping experience through three key features:
1. Onboarding: A seamless onboarding process with hands-free guidance.
2. Virtual Try-On: An engaging virtual try-on experience.
3. Gift Giving: Smart gift recommendations for users and their friends.
For the apparel brand we want to showcase, we chose SSENSE, a curated platform that offers high-end products from multiple designer brands, making it an excellent potential partner for SpreeAI.
Onboarding
When a user is new to SpreeAI, they are prompted to create an account. After doing so, their try-on data will be saved, allowing them access to quick try-ons and more personalized features with SpreeAI.
🪄 Hands-Free Guidance
Mira provides real-time assistance, clarifying photo requirements pre-photo and offering warnings during the photo taking process.
🪄 Style Quiz
Understand users’ style better, leading to personalized recommendations and enhancing the social features.
Virtual Try-On
On SpreeAI's core feature page for virtual try-on, users can see how an item appears on them with the help of AI model. They can also modify their hairstyle, makeup, and background to match the occasion they envision wearing the clothing.
🪄 Realistic Try-On
Powered by AI technology, the app accurately measures and predicts how clothing will fit and appear on the user.
🪄 Changing Background
Different outfits suit different occasions. Mira simulates how the dress would appear in its intended setting.
🪄 Hair & Makeup
Try Mira’s personalized feature—customize your hairstyle and makeup to match your dress.
🪄 "Call"-To-Action
Ask Mira to handle tasks for you—save your preferred style or add the item to your cart.
Gift Giving
Having trouble sending gifts to your friends or loved ones? With MIRA, you can explore the intersection of your preferences and those of your friends to ensure a satisfying gifting experience.
🪄 Personalized Gifting Suggestions
Do you know that 25-30% of holiday gifts purchased online are returned, due to issues like sizing or preferences?
Mira matches friends' tastes and sizes for easier, thoughtful gift-giving.
3 /
CUI Characteristic
We established guiding principles as our north star to ensure consistency throughout the experience. Starting with defining our CUI’s core traits, we then shaped its interactions and movement.
Here is a demo of the 4 main motions that we landed on:
Idle, Speaking, Listening, and Loading.
4 /
Design System
A major component of the project involved demonstrating MIRA's functionality on a real website. We began by integrating SpreeAI's design system for the onboarding process, initially using SpreeAI's UI. When the user navigates back to the SSENSE website, the UI transitions to match SSENSE's design.
For MIRA, as named by SpreeAI, its visual identity should be a neutral design based on SpreeAI's existing UI guidelines.
REFLECTION
The primary challenge we faced was creating an effective CUI for SpreeAI’s business model.
One of the major challenges we encountered was the feature ideation process. CUI serves as a tool to enhance personalization and build long-term customer loyalty. As a third-party company collaborating with various brands, SpreeAI faces unique challenges in developing a universal CUI that functions consistently for all partners. Through careful ideation, we crafted a solution by introducing CUI to SSENSE, a multi-brand platform, ensuring both impact and adaptability.
However, this may not be the sole path for SpreeAI's partnerships. They will consider collaborating with individual brands for improved revenue streams. Looking ahead, I would focus on creating a modular approach to develop a dynamic CUI that can be easily customized for partner brands, while also expanding features beyond virtual try-ons to include item recommendations or personal stylist options, fully unlocking CUI's potential.
minjeanchu@gmail.com