top of page

Smart Style

​

Discover your perfect look with AI Style assistant

PROJECT OVERVIEW

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

View Desktop Figma Prototype

Tools

Figma, Adobe Suits, Primer Pro

Google docs, Zoom

Group of 4

Team
My Role

UX/UI Designer

Timeline

12 weeks, Part Time

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.

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.

Stakeholder Needs

We've identified three primary categories of potential users for our platform:​

Users and audience

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

Project Problem

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.

  • Limited style assistant platforms exist for style exploration.

  • Inefficient shopping experience and frustration.

  • Overwhelming clothing choices create confusion.

Initial Solution

​

  • Provide a Efficient and Effective AI-Powered Style Assistant.

  • Create a User-Friendly Styling Assistant Platform.

  • Simplify the Styling Journey With Personalized Recommendations.

PROCESS

Our 12-week design sprint consisted of 4 phases:
Note: there is no doubt that iteration is necessary during all phases.

Discover

Research Methodology

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:

Competitive Analyses

Survey

Interview & Affinity Map

During our competitor analysis, we analyzed 5 business in terms of their functionalities and interfaces. This allowed us to identify their strengths and weaknesses in comparison to our own offerings. 

Competitive Analysis

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.

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

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.

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.

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

Challenges / Frustrations

​

  1. Finding the right fit for my body

  2. Finding clothes for specific occasions

  3. Identifying my personal style

  4. Pairing colors that suit my Physical attribute

Important factors requested

​

  1. Occasion or event appropriateness

  2. Color combination

  3. Comfort and practicality

  4. Physical attribute

  5. Personal style and self-expression

*Ordered based on the user’s priorities.

Based on what we learned from our survey and looking closely at the data, we chose to talk with 19 people.

Interview
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 they regarding clothing that complements their body type?

Where have they faced clothing challenges?
Where do they envision receiving style information?

WHERE

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

User’s 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 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.

Define

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.

Empathy Map

Frustrated about not knowing what to wear.

Desires a boost in self-confidence through fashion.

Overwhelmed by the variety of clothing options available.

Feels

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.

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.

"When considering a brand purchase, she checks their website for styles, seeks fashion inspiration online, consults friends or family for advice, and tries on multiple outfits before heading out."

Does

Thinks

To set up objectives for our design and share insights we gathered about our users, we created a persona and a scenario.

Persona
Story Board

"Sara is invited to a party and doesn't know how to style herself.

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

"She asks for advice from her friend. Her friend suggests the 'Smart Style' website to her."

"And in the end, she was pleased with the outcome."

We're working on an AI-powered tool for users to create outfits from their own 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.

Ideate

Sketches
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

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.

Mid-fidelity Mockups

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.

High Fidelity Prototype

Testing

We created 4 different homepage designs. After several tests and improvements, we concluded that version 4  was the best choice for our website.

Usability Test & Iteration 1
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.

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.

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

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.

Usability Test & Iteration 2
AB Testing/ Style Cards

We switched the hero section from motion to static images. A/B testing with 8 users showed that motion better conveyed our concept and business functionality. Users found static images confusing, so we kept the motion element for improved UX.

AB Testing/ Home page

Reflections

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 accessibility of AR feature with elderly users for seamless usage.

What did I 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 accessibility of AR feature with elderly users for seamless usage.

What did I 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.

bottom of page