Hanyue Song
Visual Communication Designer

Swivel

#UX Research
#UX #UI

an E-commerce fashion App, employs  AI to provide tailored outfit suggestions reflecting individual style preferences and body shapes 

The App allows users to maintain a trendy appearance by adapting looks to changing tastes, and also introduces fashion influencers with similar styles.

The App facilitates convenient shopping through connections to diverse platforms, offering a multitude of fashion choices aligned with personal preferences.


My Role

UX Researcher
UX Designer
UI Designer

Contribution

User Research
UX Design
Prototype
Visual Design

Team

Hanyue
Catherine
Tanner

Tools

Figma
FigJam
Midjourney
Adobe Illustrator




OVERVIEW︎︎︎


📃 Context 
Online shopping has become a staple of modern life, yet the challenge of finding items that truly match our style, preferences, and budget persists.

Many of us have experienced the frustration and disappointment of receiving items that don't meet our expectations, leading to the hassle of returns. This is particularly pronounced when shopping for clothing, where fit and style are crucial.




🧐 Problem Statement 

How might we create an AIGC product for online shoppers that offers personalized outfit recommendations and quick outfit selection?




🎯  Project Goal
To provide a seamless and efficient online shopping experience, allowing shoppers to find the products they want quickly and easily, and making their experience more enjoyable, productive, and personalized.



👀  Product Preview
︎︎︎ Onboarding Progress
︎︎︎ Main Feature Pages
︎︎︎ Items Pages



RESEARCH︎︎︎


💬 Interview & Survey
We sent out an online survey and conducted interviews to understand users’ shopping experiences and their needs.

︎︎︎ Target Group
Aged 19-35, who are experiencing time-consuming and not personalized shopping process when shopping clothings and accessories online
︎︎︎ Confirmed Initial Assumptions
Swivel’s potential functions, but research also revealed that time and personalization was not the only factors.
︎︎︎ Other User Problems
Other user problems included misleading product descriptions and promotions, lack of cross-platform comparison, insufficient styling and matching suggestions and recommendations etc.



💡 Insights
Time
Accessibility
Personalization
Diversity
  • Tedious and lengthy process when browsing items and making online purchasing decisions
  • Lack of cross-platform comparison for shopping items, encompassing prices, shipping details, and return policies etc.
  • Personalized styling and matching suggestions and virtual try-on options tailored to individual shopper preferences
  • Insufficient diversity in accommodating various shopping habits and behaviors among users



❓ Problem Reframe

How might we design an AIGC (Artificial Intelligence Generated Content) product for online shopping that offers personalized efficiency, quick product discovery, and elevated satisfaction?




🤝 Personas



🚪 Opportunities
Personalized Suggestions
Influencer Integration
Precise Info
  • Personalized shopping item recommendations and suggestions
  • Integration with social media platforms, curating influencer feeds matching user interests
  • Enhanced accuracy in product descriptions and promotions, with precise labels and interactive customer reviews
Multi-Filter Search
Personalized Styles
Virtual Try-On
  • Facilitating cross-platform comparisons of shopping items, allowing sorting by multiple filters
  • Providing styling and matching suggestions tailored to personal preferences
  • Implementing outfit visualization and virtual try-on capabilities for complete outfit coordination with frequently purchased items



🧱 Information Architecture



IDEATION & DESIGN︎︎︎


🔑 Final Solution
Feature 01 Personalized Onboarding Progress

Input Age
Input Gender

Input Height & Weight
Select Body Figure
Input Skin Tone

Upload Favourite Outfit
Select Favourite Style
Input Personal Interests



Feature 02  New Styles and Inspirations for a Changing Body

Homepage
Update Information
Regenerating
New Outfit Diffuse Page
New Predict Influence Page

Select a Vlog
Influencer Homepage
Connect to Influencer’s Channel



Feature 03 Seamless Cross-Platform Information Integration

Search Page
Input 

Search Results
Similar Items
Item Info Page

Size Guide
Connect to Retailer



Feature 04 Notification of New Trends

Widget
Trend Now Page

Trend Details
Similar Items



Feature 05 Virtual Try-On

Drag Items to Try On
Try-on History

Try-on
Recommendations
 


NEXT STEPS︎︎︎



Further Iterations
  Completing the Flow
Visual Enhancement
  • Conduct user testing
  • Develop prototypes for user interaction
  • Complete the user profile page
  • Implement the “Favorites” feature
  • Integrate consistent image styles
  • Enhance information hierarchy





If you're all the way down here already,
💖 thank you so much for taking the time out of your day to live this journey with me!

Index                                 ︎ Previous                                 Next ︎

 
Hanyue Song, 2024