Introduction: As a UX designer, I had the privilege of working on an exciting project that aimed to revolutionize the online fashion shopping experience. The goal was to create an AI-powered platform that provides users with personalized outfit suggestions, helping them discover diverse and colorful clothing options that match their style and preferences. By leveraging the power of AI technology and offering a vast variety of products, we aimed to bring the personal shopper experience to the digital world.
Urban palette
A digital personal shopper experience based on AI technology
Problem Statement: The world of online fashion shopping has seen significant growth in recent years. However, despite its convenience, many users still face challenges when it comes to confidently selecting and coordinating clothing items. Our research revealed that 65% of people do not feel confident when buying clothes, and 58% are unsure whether their choices align with their desired style and color preferences. This lack of confidence can lead to hesitation, frustration, and ultimately, dissatisfaction with the online shopping experience.
and we tried to solve it with AI-powered whole outfit suggestions the main hassle was how to present those outfits in an interactive, simple, intuitive way.
User Research:
To gain a deep understanding of our target audience and their preferences, behaviors, and pain points when it comes to online fashion shopping, we conducted comprehensive user research. This research aimed to uncover valuable insights that would inform our design decisions and help us create a personalized shopping experience powered by AI technology. We employed a combination of surveys and interviews to gather qualitative and quantitative data, providing us with a holistic view of our users.
Surveys: We began our user research by distributing surveys to a diverse range of individuals who frequently engage in online fashion shopping. The survey questions were designed to capture demographic information, shopping habits, and the challenges users face when making clothing purchases online. By collecting quantitative data from a large sample size, we were able to identify common trends and patterns that shed light on the broader user experience landscape.
Key findings from the surveys revealed that 65% of respondents expressed a lack of confidence when purchasing clothes online. Many cited concerns about fit, style compatibility, and uncertainty about how the garments would look in person. Additionally, 58% of respondents indicated that they often struggle with matching their clothing choices in terms of style and color. These findings highlighted the importance of providing users with tools and guidance to enhance their decision-making process and alleviate their doubts.
Interviews: To gain deeper insights into the emotions, motivations, and decision-making processes of our target audience, we conducted a series of interviews. We engaged with three users who had varying levels of experience in online fashion shopping and two shopping consultants from popular brand shops. The interviews were semi-structured, allowing for open-ended conversations that encouraged participants to share their experiences and perspectives freely.
During the interviews, we explored topics such as the factors influencing clothing purchase decisions, the challenges faced during the online shopping process, and the role of personal style and fashion preferences. By delving into these areas, we gained a deeper understanding of the pain points users encounter and the specific areas where AI technology could provide assistance.
The interviews revealed several valuable insights. Users expressed frustration with the overwhelming number of options available online, often leading to decision paralysis. They also highlighted the desire for personalized recommendations that align with their individual style preferences. The shopping consultants provided additional insights from the perspective of brick-and-mortar stores, emphasizing the importance of a seamless online-to-offline shopping experience and the need for AI-powered tools to bridge that gap.
These research findings guided our design decisions, ensuring that our solutions addressed the core issues faced by users. We understood the importance of building trust, enhancing confidence, and simplifying the shopping process through the integration of AI technology.
By combining the quantitative data from surveys with the qualitative insights from interviews, we developed a comprehensive understanding of our target audience. This enabled us to create meaningful and relevant personas, and user journeys, and design solutions that would resonate with our users, providing them with a personalized and enjoyable shopping experience.
Personas:
During the user research phase, we gained valuable insights into the needs, goals, and pain points of our target audience. To ensure a user-centered design approach, we created two personas, Natalie Meyers and Michael Moore, who represent distinct user archetypes within our target demographic.
Persona: Natalie Meyers
Age: 33
Occupation: Sales Manager
Location: New York
Education: MBA Graduate
Background: Natalie is a driven and ambitious professional who leads a busy lifestyle. As a sales manager, she values her appearance and understands the importance of dressing well to make a strong impression. However, she often finds herself short on time due to her demanding job, leaving little room for extensive shopping trips. Natalie relies heavily on online shopping for convenience but struggles with making confident clothing choices.
Goals and Behaviors:
Natalie seeks stylish and sophisticated clothing that reflects her professional image.
She desires a seamless shopping experience that saves her time and provides personalized recommendations.
Natalie is open to exploring new fashion trends and incorporating them into her wardrobe.
Pain Points:
Natalie feels overwhelmed by the vast array of options available online and struggles to make informed decisions.
She lacks confidence in her ability to put together stylish outfits and match clothing items effectively.
Natalie often finds it challenging to determine how a particular garment will fit her body shape and size accurately.
Persona: Michael Moore
Age: 35
Occupation: Marketing Manager
Location: Vienna
Background: Michael is a fashion-conscious marketing manager who enjoys expressing his unique sense of style through his clothing choices. He appreciates the diversity and colorfulness that fashion offers and enjoys experimenting with different looks. Michael seeks a digital shopping experience that allows him to discover new styles and effortlessly curate outfits.
Goals and Behaviors:
Michael desires a platform that offers a wide variety of fashion products and encourages exploration.
He seeks personalized recommendations based on his preferences and style preferences.
Michael enjoys engaging with fashion trends and incorporating them into his wardrobe.
Pain Points:
Michael often faces difficulty finding clothing items that match his unique style preferences and reflect his personality.
He feels overwhelmed by the sheer volume of fashion choices available online and struggles to navigate through them effectively.
Michael is uncertain about the fit of certain garments and wishes for a more accurate representation of how they would look on him.
By developing these personas, we now have a clear understanding of the diverse needs, motivations, and pain points of our target users. Natalie represents the busy professional seeking convenience and confidence, while Michael embodies the fashion enthusiast looking for variety and personalization. These personas serve as a reference point throughout the design process, ensuring that our solutions cater to the specific requirements of our users and align with their expectations.
User Journey:
The user journey for Urban Palette begins with the initial interaction between the user and the online fashion shop and encompasses every step until the user completes a successful purchase. Understanding the user journey allows us to identify key touchpoints, pain points, and opportunities for enhancing the overall shopping experience.
Awareness:
User becomes aware of Urban Palette through online advertisements, social media, or word-of-mouth recommendations.
User visits the website and is greeted with an engaging and visually appealing landing page.
Exploration and Discovery:
User navigates through the intuitive and user-friendly interface to explore various product categories.
User utilizes search and filtering options to narrow down their preferences based on style, color, size, and other criteria.
User encounters personalized recommendations based on their previous browsing and purchase history, enhancing their discovery of new styles.
Product Selection:
User selects a specific clothing item or enters the "Outfit Suggestion" section for a complete set of clothing recommendations.
User can either choose to browse individual products or opt for a pre-curated outfit suggestion generated by the AI-powered system.
Personalization and Virtual Fitting:
User customizes their selection by specifying preferred colors, sizes, and any specific requirements.
User can visualize how the selected outfit will look on them through a virtual fitting feature, providing a realistic representation of fit and style.
Decision Making:
User evaluates the outfit options, taking into consideration style, color coordination, and personal preferences.
User can read detailed product descriptions, view high-resolution images, and access user reviews to make an informed decision.
Seamless Checkout:
User adds the selected items to their shopping cart and proceeds to the checkout process.
User can securely enter their payment information and shipping details.
User may have the option to select express delivery or pick-up at a nearby store for added convenience.
Post-Purchase Experience:
User receives a confirmation of their purchase and tracking information for their order.
User may receive personalized recommendations for future purchases based on their shopping history and preferences.
User has the option to provide feedback and ratings, contributing to the continuous improvement of the shopping experience.
The user journey for Urban Palette aims to address the pain points highlighted during user research, such as a lack of confidence in clothing choices and uncertainty about style and color coordination. By providing personalized recommendations, virtual fitting, and a seamless checkout process, Urban Palette strives to create a delightful and empowering shopping experience for users, enabling them to confidently explore and express their unique sense of style.
competitive analysis:
To provide valuable insights into the competitive landscape of the "Urban Palette" project, I have conducted a comprehensive analysis of similar online fashion platforms. This analysis aims to identify their strengths, weaknesses, and opportunities for differentiation. By understanding the key players in the market, we can refine our strategy and design a platform that stands out among competitors.
Based on the competitive analysis, the "Urban Palette" project can leverage its unique features, such as virtual try-on, real-time style coordination feedback, and a vast variety of products, to differentiate itself from competitors. By addressing the identified weaknesses and capitalizing on the opportunities, we can create a compelling and engaging online fashion platform that caters to users' desire for personalization, style guidance, and confidence in their fashion choices.
The project is still ongoing and more pages will be added soon
Older version of sections for previous iterations
Design solution
To address the challenges identified during the research phase, our design solution for the "Urban Palette" project focuses on enhancing user confidence, facilitating style and color coordination, and providing a seamless personalized shopping experience. We have incorporated several key features and functionalities to achieve these goals:
Personalized Outfit Recommendations: The "Urban Palette" platform leverages AI algorithms to analyze user preferences, style choices, and body measurements. Based on this information, the platform suggests personalized outfits tailored to each user's unique taste, body type, and occasion. These recommendations take into account color palettes, style preferences, and fashion trends, helping users discover new and exciting clothing options that align with their individual styles.
Style and Color Coordination Tools: To assist users in matching their clothing items cohesively, the platform provides intuitive style and color coordination tools. Users can experiment with different combinations, visualize how different pieces complement each other, and receive real-time feedback on style compatibility and color harmony. These tools empower users to confidently curate outfits that reflect their personal style and preferences
Seamless Shopping Experience: The "Urban Palette" platform offers a streamlined and intuitive interface for users to browse, filter, and purchase clothing items seamlessly. The user interface is designed with a focus on simplicity and clarity, ensuring easy navigation and efficient access to product details, reviews, and sizing information. Users can save their favorite items, create personalized collections, and receive notifications on new arrivals or sales, providing an engaging and convenient shopping experience
By integrating these features and functionalities, the design solution for "Urban Palette" aims to revolutionize the online fashion shopping experience. It empowers users to confidently explore diverse and colorful clothing options, make informed choices, and express their individuality through fashion. With AI-powered personalization and a user-centric approach, the "Urban Palette" platform strives to become the go-to destination for users seeking a digital personal shopper experience.
Ideation, sketching and wireframing
During the ideation workshop for the "Urban Palette" project, we engaged in a collaborative and creative process to generate and refine design concepts. Through sketching and wireframing, we visually explored various ideas and potential solutions. Here is an overview of the key sketches and wireframes that emerged from the workshop:
Home Page: To create an engaging and intuitive home page, we brainstormed different layout options. Sketches included variations of a visually appealing hero section showcasing personalized outfit recommendations, featured collections, and a prominent search bar for easy navigation. We explored the placement of curated content, such as fashion trends and styling tips, to inspire users and keep them engaged.
Style and Color Coordination Tools: To assist users in coordinating their outfits effectively, we sketched and wireframed various style and color coordination tools. These included drag-and-drop interfaces, color palette generators, and the ability to save and compare different combinations. We focused on creating a user-friendly experience that enabled seamless exploration and experimentation with different styles and color schemes.
Personalized Outfit Recommendations: Based on user research insights, we envisioned a section dedicated to personalized outfit recommendations. Wireframes showcased a carousel-style design, where users could swipe through different outfit suggestions tailored to their preferences. We explored the integration of AI-driven algorithms that considered factors such as body type, style preferences, and occasion to provide relevant and diverse outfit options.
Product Detail and Checkout: In our ideation workshop, we also focused on sketching and wireframing the product detail pages and the checkout process. We explored layouts that emphasized clear and comprehensive product information, including images, descriptions, pricing, and sizing options. The checkout process aimed for simplicity and ease of use, reducing friction and ensuring a seamless transaction.
These sketches and wireframes formed the foundation for the subsequent design iterations and prototype development phases. By visualizing and refining these concepts, we were able to create a user-centric and visually compelling experience for the "Urban Palette" platform, delivering a seamless and personalized shopping journey for our users.
One of the first things that changed during the first round of iteration was the background color from gradient to white. Below you can see the older iterations.
Designs and prototypes are all in mid-fidelity stage