Smart Style
"Discover Your Perfect Look
with AI Style Assistant"
"Smart Style" is an innovative platform that transforms your fashion experience. Our platform, powered by advanced artificial intelligence, creates personalized style recommendations tailored to your unique preferences and what suits you best.
Note:
This case study features a class project on UX design for our school mentor as the stakeholder.
Overview
Team
Group of 4
My Role
UX/UI Designer
Timeline
12 weeks
Tools
Figma, Figjam, Adobe Suits, Ms Office, Google docs, Maze, Zoom
After our first discussion with the stakeholders and conducting primary research, we have identified potential challenges and problems that require our attention in the upcoming phases of our research. We also considered some initial solutions to address these challenges.
Project Problem
-
Limited style assistant platforms for style exploration.
-
Inefficient shopping experience and frustration.
-
Overwhelming clothing choices create confusion.
Initial Solution
-
Provide an efficient and effective AI-powered style assistant.
-
Create a user-friendly styling assistant platform.
-
Simplify the styling journey with personalized recommendations.
Stakeholder Needs
The stakeholders are interested in implementing AI technologies and a virtual fitting room, coupled with a shopping link, to create an affinity market and generate additional revenue streams.
Users and audience
We've identified three primary categories of potential users for our platform:
-
Users who may not have a strong sense of personal style or fashion knowledge.
-
Users with busy lifestyles who find it challenging to invest significant time in styling themselves.
-
Fashion enthusiasts who view styling as a hobby and seek inspiration and assistance in exploring new looks and trends
Note: We're working on an AI-powered tool for users to create outfits from their wardrobe. While not detailed in this case study, it's a key part of our website plans. With further research, we'll feature it in a separate case study.
Design Process
Discover
Define
Ideate
Design
Test & Iteration
Discover
At first, We conducted thorough market research to understand the business idea, competitors, and potential users and gain a deeper understanding of their needs. This provided valuable insights into the industry and key market players.
We planned the following steps:
Research Methodology
Competitive Analyses
Survey
Interview & Affinity Map
Competitive Analysis
During our competitor analysis, we analyzed 5 businesses in terms of their functionalities and interfaces. This allowed us to identify their strengths and weaknesses in comparison to our own offerings.
We analyzed how users choose and recommend styles. We looked at the questions they ask users to understand their preferences before making recommendations. We also examined the features and factors they take into account in terms of style, user interface, and sitemap
Weaknesses
-
Difficult and long quiz questions might make users lose interest
-
You can't see the final outfit options unless you pay.
-
It lacks personalized style tips.
-
There aren't many different styles to choose from.
-
Some part of the websites has visual inconsistencies.
Strengths
-
Allows users to save and revisit their favorite style recommendations for future reference.
-
Includes a helpful FAQ section to address common user queries and concerns.
-
Offers a wide selection of complementary accessories and items to complete the chosen style.
-
Well-designed quizzes can effectively identify users' priorities.
After conducting a thorough analysis of competitors, researching the market, and consulting with stakeholders while also taking into account the market's potential, we have chosen to implement the following features on the platform.
Top Insights
-
The capability to try on outfits virtually using AR technology in a fitting room.
-
Utilize AI technologies to provide style recommendations based on the latest inventory and fashion trends.
-
Prioritized filter based on user preferences.
-
Offer overall style analysis and tips.
-
Direct shopping link for convenience and clarity, saving time and reducing confusion
Quiz
Link to shop
Top Take away
AR Virtual fitting room
Personalize style analysis and tips
Filters
Survey
Analyzing competitors gave us a broad understanding. To identify potential users and understand their expectations and needs for the platform, we surveyed them to uncover their pain points and challenges.
Our survey with 89 participants, consisted of several questions covering a range of topics such as:
The survey consists of several questions covering a range of topics such as:
-
Interested in personal styling
-
Confident in matching clothing
-
Believe that suitable outfits affect a person's self-esteem and self-body image
-
Experience in using a personal style assistant website
Survey Result
*Ordered based on the user’s priorities.
Challenges / Frustrations
-
Finding the right fit for the user's body.
-
Finding clothes for specific occasions.
-
Identifying personal style.
-
Pairing colors that suit the user's physical attributes.
-
Lack of inspiration.
Important factors requested
-
Suitable for the occasion or event.
-
Color combination.
-
Comfort and practicality.
-
Physical attribute.
-
Personal style and self-expression.
Interview
We wanted to figure out:
Based on what we learned from our survey and looking closely at the data, we chose to talk with 19 people.
How
-
How do they typically style themselves?
-
How do they handle clothing challenges and regrettable purchases?
-
How likely are you to purchase recommended styles?
What
-
What inspires their outfit choices?
-
What features and information would they expect from a style advisory website?
-
What information are they interested in regarding clothing that complements their body type?
Where
-
Where have they faced clothing challenges?
-
Where do they envision receiving style information?
We gathered input from users and organized it using an affinity diagram to guide our design decisions.
User Quotes
My biggest issues is unsuitable dress to my body shape.
I am so busy and I usually have styling challenges and finding clothes for some occasions.
I find it challenging because my size varies across different brands.
I find it frustrating to select my outfits without considering my skin tone and hair color.
Interview Result
-
Users express a strong need to select the right style for various occasions.
-
Finding outfits that flatter specific body shapes is highly important to users.
-
Before purchasing, users like to use tools or guides to make sure they get the right size.
-
Users show an interest in receiving style suggestions tailored to their individual preferences.
-
Users value detailed information about fabric type and texture in their outfit choices.
-
Pricing and choosing budget options are significant factors in users' decision-making process.
Define
Empathy Map
The Empathy Map uncovers crucial insights into user perspectives and emotions, guiding the creation of a personalized styling assistant. This tool helps us address their style difficulties and build a solution that enhances every outfit choice.
Says
-
I want to feel confident in what I wear.
-
I don't have time to keep up with the latest fashion trends.
-
I struggle to put together outfits that look good.
Thinks
-
I'm not sure what colors or styles suit me best.
-
I wish I had help choosing the right outfits.
-
Fashion is important in making a good impression.
Does
-
When she shops for a brand, she checks their website for style recommendations.
-
she searches for fashion inspiration online.
-
she asks friends or family for style advice.
-
Tries on multiple outfits before going out.
Feels
-
Frustrated about not knowing what to wear.
-
Desires a boost in self-confidence through fashion.
-
Overwhelmed by the variety of clothing options available.
Persona
To set up objectives for our design and share insights we gathered about our users, we created a persona and a scenario.
Sara Mitchel
35, Photographer, LA
"I want to Be stylish and feel unique."
Goals
-
Desires to manage her expenses effectively while staying fashionable.
-
Find a signature style that reflects her preferences
Challenges
-
Struggles to identify a reliable source for fashion inspiration.
-
Struggles to find the right outfit to match her unique body type and physical attribute
-
Time-consuming to find the right style
Story Board
"Sara is invited to a party and doesn't know how to style herself. She asks for advice from her friend."
"Her friend suggests the website 'Smart Style' website to her."
"Sara enters the website and, based on her preferences and the theme of the party she's been invited to, answers questions and uses filters to find her desired style."
"And in the end, she was pleased with the outcome."
Ideate
Sketches
We started our UX journey with simple hand-drawn sketches. These initial ideas helped us communicate within the team. These basic wireframes set the stage for further progress.
Mood board & UI kit
To create high-fidelity interfaces, we established a comprehensive design system, UI kit, and mood board that encompasses consistent colors, fonts, and element dimensions to be maintained across all screens.
Design
Mid-fidelity Mockups
Next, we moved on to mid-fidelity wireframes using Figma. These wireframes played an important role in shaping page layouts and developing our design direction. We iterated on them multiple times before finalizing the content.
High Fidelity Prototype
These pages are a subset; for a comprehensive view, please refer to our Figma link and prototype, which showcase the complete range of our designs.
Mobile (Take The Quiz)
General Information
Body Shape
Fit and Size
Body Parts Preferences
Physical’s Attributes
Style Preferences
Fabric Preferences
Pattern Preferences
Color Preferences
Sign in
Loading
Style Analysis
Style Analysis (Expand)
Desktop (Style Recommendation)
Home Page
Choose Your Style
Applied Filter
Applied Filter
Fitting Room
Desktop (Dashboard)
My Profile
Wardrobe
My Style
Wish List
Testing
Usability Test & Iteration 1
We created four different homepage designs. After several tests and improvements, we concluded that Version 4 was the best choice for our website.
Home Page
Version 1
Version 2
Version 3
Final Version
The first main picture didn't clearly show our style advice and wasn't very appealing. So, we made it better to give users a clearer idea of what we offer.
We reduced the initial text, used visuals with icons, focused on immediate understanding without scrolling, and minimized text under the main image.
Users prefer visuals over lots of text. We initially tried a video, but it was overwhelming. We opted for a simple image to better showcase our services.
To enhance user experience, we revamped how we present testimonials. Visual testimonials are more engaging and easier for users to understand compared to text. This change boosts user trust and comprehension of others' feedback."
Our users had difficulty understanding our personalized style recommendations and filters. To clarify our services, we added images with clear titles. Furthermore, the images were too small and did not improve the user experience. To make the experience more engaging, we increased the size of the images.
Quiz (Body Preferences)
In this part, we found that users were confused due to seeing all body parts at the same time and this design didn't have any interaction and clarity, we tried to establish a new design so that users could concentrate on each part and see all the changing results by interaction and color saturation.
Quiz (Fit and Size)
Because the measurement units are fixed and repeated next to each box, we placed the option for selecting the measurement unit in the bottom left corner. Additionally, we added a general 'Measurement Guide' to guide all users.
Progress Bar In Quiz
We conducted an overhaul of the progress bar design to enhance user feedback, making the process clearer and more comprehensible. By incorporating checkmarks to show completed steps, we aimed to provide users with tangible encouragement in their UX journey.
Usability Test & Iteration 2
AB Testing/ Style Cards
The initial design didn't effectively communicate the product card to users, leading to confusion. Recognizing this, we aimed to optimize the layout by minimizing excessive white space. This ensures a more efficient use of screen space and improves user access to information.
Deliver
Reflection
What did We learn?
-
We learned the importance of user-centric design and prioritized the user's experience at every stage
-
The iterative process is valuable, allowing for refinement and improvement based on user feedback
-
Clear communication within the team is a significant factor, in ensuring alignment with the project's goals.
-
Designing should balance user needs and stakeholder needs.
-
Time management is crucial for the group project, with missing role deadlines having a significant impact on others' tasks
-
It's important not to get too attached to our designs and be open to making them better.
-
The most important thing we learned as a group is to share our ideas to avoid problems.
What can we do next?
-
Our next phase involves recognizing the demand for a virtual wardrobe, enabling users to create outfits with the assistance of an AI styling tool. We're dedicated to finalizing this feature and conducting further research to enrich our design process.
-
Conduct accessibility testing with elderly users to ensure inclusivity.
-
Implement a dedicated blog section to provide valuable content and engagement.
-
Evaluate the accessibility of AR features with elderly users for seamless usage.
Overview
