Smart Style
Project Overview
Smart Style is a cutting-edge platform that completely transforms your fashion experience. It uses advanced artificial intelligence to generate personalized style recommendations based on your individual preferences and what best suits you.
Duration:
12 weeks
Team:
Group of 4
Role:
UX/UI designer
Skill:
Qualitative and Quantitative research / Competitive Analysis / Information Architecture / Low-High Fidelity Design / UX Wireframe/Usability Testing/ Content testing/ Interactive Prototype
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 exist for style exploration.
- Inefficient shopping experience and frustration.
- Overwhelming clothing choices create confusion.
Initial solution
- Provide an efficient and effective AI-powered 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 direct 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 style as a hobby and seek inspiration and assistance in exploring new looks and trends.
Design Process
Our design sprint consisted of 4 phases:
Note: There is no doubt that iteration is necessary during all phases
Discover
Define
Ideate
Design
Test and 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
During competitor analysis, we analyzed five businesses in terms of their functionalities and interfaces. This allowed us to identify their strengths and weaknesses compared to our 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.
- Users need to sign up before receiving style suggestions.
- It lacks personalized style tips.
- There aren’t many different styles to choose from.
- Some parts of the website look different from others.
Strengthens
- 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 Insight
- 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 advice.
- Direct shopping link for convenience and clarity, saving time and reducing confusion
Survey
Analyzing competitors gave us a broad understanding. To identify potential users and understand their
expectations and needs for the platform, we conducted a survey to uncover their pain points and challenges.
Through our survey with 89 participants, which consisting of several questions covering a range of topics such as:
The survey consisting 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 of using a personal style assistant website.
Survey Result
Ordered based on the user’s priority
Challenges / Frustrations
- Finding the right fit for my body
- Finding clothes for specific occasions
- Identifying my personal style
- Pairing colors that suit my Physical attribute
Lack of inspiration
Important factors requested
- Occasion or event appropriateness
- Color combination
- Comfort and practicality
- Physical attribute
- Personal style and self-expression
Interview
Based on what we learned from our survey and looking closely at the data, we chose to talk with 19 people.
We wanted to figure out:
HOW
How do they typically style their self?
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 interests them 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’s Quotes
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 buying, 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 processes.
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 dilemmas and build a solution that enhances every outfit choice.
Persona
To set up objectives for our design and share insights we gathered about our users, we created a persona and a scenario.
“I want to be stylish and feel unique.”
Goal
- She desires to manage her expenses effectively while staying fashionable.
- Find a signature style that reflects her preferences.
Needs
- Struggles to identify a reliable source for fashion inspiration.
- She struggles to find the right outfit to match her unique body type and physical attributes.
- It is 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 “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
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.
UI kit
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
Body Parts Preferences
Style Preferences
Color Preferences
Pattern Preferences
Fabric Preferences
Sign in
Loading
Style Analysis
Desktop (Style Recommendation)
Home Page
Choose Your style
Applied Filter
Desktop (Dashboard)
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.
Landing page (Before)
Version 1
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.
Version 2
We reduced the initial text, used visuals with icons, focused on immediate understanding without scrolling, and minimized text under the main image.
Version 3
- 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.
- This change boosts user trust and comprehension of others’ feedback.
Landing page's last design
- In the first version, users had trouble understanding our personalized style suggestions and how to set filters for various occasions, ages, and needs. To improve this, we added images that, when hovered over, display videos with clear titles explaining our services and support options. However, the images were too small, which didn’t encourage interaction. We improved the design by making the images bigger for a more engaging experience
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 provide guidance for 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 and 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.
prototype
In this section, you can check out the complete final prototype.
Reflections
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, pain points, 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 to not 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.