Our app offers personalized fashion recommendations based on user preferences and specific occasions. Users answer a few questions to receive curated outfit suggestions from multiple brands. Unlike services that send clothes, our app allows users to shop directly online, choosing either complete outfits or individual pieces. It combines style flexibility with a balanced price range to meet diverse fashion needs.

Project Overview

Timeline

8 Weeks

Team

Group of 3

Role

UX/UI Designer

Tools

Figma, Figjam, Photoshop, Canva, Google Form

My Contribution

Ux researcher and Ux designer: I was responsible for both strategic and planning and visual design.

Problem Statement

Many women struggle to find outfits that match their personal style, especially when shopping for specific occasions. The process can be time-consuming and frustrating, as it often requires browsing through numerous options without a clear sense of what would suit their taste or the event. Existing services like Stitch Fix provide personalized recommendations, but they require users to receive physical items first, limiting immediate purchase decisions and online shopping convenience.

I selected this problem statement because it strongly resonated with my own experiences. having encountered similar challenges in the past, I was motivated to work on finding a solution.

Business Goals

• Occasion-Based Recommendations: Personalized outfit suggestions tailored to specific events or occasions.

• Focus on Women's Fashion: Designed specifically for women's style needs.

• Personalized Style Preferences: Recommendations based on a user’s unique tastes and preferences.

• Diverse Brand Selection: Each outfit includes items from a variety of brands for a customized look.

• Increase Customer Engagement: Foster a loyal customer base through interactive features and personalized shopping experiences.
  

Target Users

Design Process

Women with demanding careers who need quick, stylish outfit recommendations for various occasions.

We Concentrated on designing a website for both targets

Our team of 4 followed a Double Diamond approach based on the Design Thinking methodology. It was not a linear path; we bounced between stages as the project progressed.

Fashion-forward women who seek guidance in creating balanced, cohesive looks and value the convenience of curated outfit options.

Discover

Reseaching, Observing, listening and learning

Research

I carried out in-depth research to gain insights into users' needs, preferences, and challenges. This research played a key role in guiding the app's design and functionality.

Research Objectives

User Needs and Pain Points: I focused on identifying the specific difficulties users encounter when choosing outfits for various occasions.

User Preferences: My objective was to discover users' preferred styles, their openness to personalized outfit recommendations, and their interest in creating outfits with some guidance.

Some quotes mentioned from interviews:

"I’m not very knowledgeable about fashion and struggle with understanding current trends. I often have difficulty putting together outfits that look good, which makes me feel self-conscious about my appearance at the office with my colleagues."

"I have numerous classes, assignments, and extracurricular activities to manage, which leaves me with minimal time to choose my outfits in the morning. As a result, I often rush my decision and end up with outfits I’m not satisfied with."

“As a professional woman frequently invited to conferences and events, I often feel uncertain about what to wear. I need outfits that are both stylish and appropriate for various professional settings, but I struggle to find the right look for each occasion.”

“As a busy mom, I don’t have much time to shop for clothes. Balancing my family’s needs and my own style can be challenging, and I often struggle to find outfits that fit both my budget and my busy schedule.”

Interview

I conducted 8 interviews with people from different fields and age groups.

There were 4 business professional, 3 Students and 1 Assistant professor.

Competitive Analysis

I researched similar apps and website in the fashion domain and discovered that platforms like Dia Shop, Fabletics, Stich Fix, StyleBook, and Wantable offer similar functionalities. However, each of these apps has certain limitations.

While these apps provide various methods for fashion coordination, each comes with its own strengths and limitations. For instance, DIA SHOP offers a broad selection of brands but lacks personalized outfit suggestions. Fabletics excels at subscription-based shopping but may not cater to specific occasion-based needs. Stitch Fix provides personalized styling but can be costly for regular use. Stylebook is great for organizing and creating outfits but doesn’t offer curated sets for specific events. Wantable allows customization but doesn’t always provide diverse brand options.

An ideal fashion coordination app would blend the best features of these platforms. It would ask users a few questions to understand their style preferences, recommend outfits tailored for specific occasions, and provide a selection of items from different brands—all within one seamless experience.

Survey

We conducted an online survey with 11 questions and 32 participants to gather insights on users' concerns and needs. our goal was to understand the essential factors for users when buying clothes online and identify any barriers that might prevent them from doing so. below are the main challenges highlighted by users regarding online shopping.

Survey for APP Task

5- short and concise questions and visual aids like images or videos are the most engaging elements for users answering a fashion style quiz.

6-The graph indicates that to make a long quiz experience more enjoyable ,users prefer incorporating interactive elements and Keep it short as possible.

Define

Establishing the priorities and key features

Persona

Based on our research findings, we built one primary persona to build empathy and keeping the user at the center of the design process

Designing the information architecture

Site Map

App User Flow

Develop

Exploring various ideas and solutions

Challenges

Solutions

1

visual aids by

4

Implemented a navigation bar with featuring pictures for each item to help users easily identify and select products.

2

Enhance User Engagement

Increasing Purchase Decisions

Added a section for reviews with customer photos, offering better visual context for informed purchasing decisions.

Designed a product display that includes clickable color options showing real photos from various angles and a zoomed-in fabric view, offering a detailed perspective on the product for detailed fabric inspection.

Enhance User Experience Through Visual Quality

3

Ensuring the Right Fit Without In-Person Try-On

Implemented a Fit Assist feature that asks users a few questions and provides instructions on how to measure their size accurately. This feature then recommends the correct size based on their measurements, helping ensure a better fit and reducing the uncertainty of online shopping.

5

Enhance User Trust for clothes quality

Creating a navigation bar that allows users to quickly find products by category for a seamless shopping experience.

Implemented a sticky navigation bar that stays visible as users scroll, making it easy for them to quickly locate and select items like "Sale."

Website Mid-Fed Wireframe

We sketched some ideas and designed low-fidelity wireframes that would allow us test and get feedback quickly.

Home Page

Sketches

App Mid-Fed Wireframe

Home Page

Matching set questions

Style Page

Set Clothes Page

Selected set Page

Product Page

Checkout Page

Deliver

Refining the final design

Here are the planned brand attribute

• Eco Friendly

• Authentic

• Modern

Mood Board

UI kit

High Fidelity Wireframe

Landing Home Page

Dresses Page

Selected Dress Page

Size Assistance Page

Checkout Process

Landing Home Page

Matching Set Question Pages

Matching Set Question Pages

Matching Set Pages

Selected Product Page

Checkout Page

Website

App

Prototype

Here is the last prototype, displaying what we've achieved through our design process.

Iteration and Usability Test

Throughout the project, we went through multiple iterations, driven by the insights we gained from usability tests. These tests were instrumental in shaping our decisions and constantly enhancing our project.

The first and most significant iteration we made was with the hero image. Users initially struggled to understand the message we wanted to convey through the hero image, leading us to refine it for better clarity and alignment with our goals. We initially tried showcasing individual clothing items separately and then displayed a woman wearing the full outfit in the second image.

Next, we experimented with using a single person in different styles, incorporating moving images to change her outfits dynamically.

1

Next, we experimented with using a single person in different styles, incorporating moving images to change her outfits dynamically.

To address the challenge, we ultimately placed a model in the center of the page, with her clothes and accessories changing in the background every few seconds. Additionally, we included a sentence on the hero image to clearly convey our goal.

2

Users did not realize that the navbar items were clickable.

Added an underline effect on hover to clearly indicate that the items are interactive.

Before usability testing

After usability testing

Before usability testing

Before usability testing

After usability testing

Before usability testing

After usability testing

3

Usability Issue: User did not realize they could scroll down to view more pictures on the clothes page.

Solution: Added a scroll bar on the right side and scroll points to indicate the number of available images.

Reflections

What I have learned?

• The critical role of user research in designing intuitive and effective solutions.

• Collaborating with cross-functional teams to align on vision and ensure timely project delivery.

• Iterative testing and feedback loops significantly enhanced usability and user satisfaction.

• Creating a UI kit to maintain design consistency and streamline team communication.

What Next?

• Finalize the mobile version of the design to ensure seamless adaptability across devices.

• Conduct further usability testing and iterations to refine the user flow and enhance the overall user experience.