Smart Style

Introduction

"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.

This case study presents a conceptual project that I completed during my time at UX/UI school.

• 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 have identified three primary categories of potential users for our platform:

After our first discussion and primary research, we have identified key challenges and problems that demand our attention in the upcoming phases of our project. Additionally, we have explored initial solutions to address these challenges effectively.

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:

1. Competitive Analyses
2. Survey
3. Interview 

• Competetive Analysis

We analyzed five popular fashion and styling apps and websites to identify their common features, functionalities, and design interfaces.  Among these features, we found that the quiz section seems to be the most common feature. We examined how users make style choices and receive recommendations by analyzing the questions posed to them to understand their preferences. 

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 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.

Our survey with 89 participants, consisted 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.

We gathered input from users and organized it using an affinity diagram to guide our design decisions.

User’s Quotes

• 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 process.

• 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.

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.

• Sketches

• 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

Mid-fidelity Mockups

Next, we moved on to mid-fidelity wireframes using Figma. These wireframes were important in shaping page layouts and developing our design direction. We iterated on them multiple times before finalizing the content.

High-fidelity Prototype

Next, we moved on to mid-fidelity wireframes using Figma. These wireframes were important in shaping page layouts and developing our design direction. We iterated on them multiple times before finalizing the content.

Mobile (Take the Quiz)

Mobile (Take the Quiz)

Desktop (Style Recommendation)

Desktop (Dashboard)

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

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 & Iteration 1

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.

Final Prototype

In this section, you can check out the complete final prototype.

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?

• 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.

SEE MORE OF MY WORK:

yasamin.nassiri@gmail.com