Linen
Tools
Figma, Adobe Photoshop, Illustrator
Timeline
Oct 2023 – Jan 2024
Role
Product Design & Art Director: user experience and interface design, user research, prototyping, illustration, art direction
Overview
Linen is an AI-powered fashion app offering fashion advice, outfit generation-based on preferences, virtual try-on, and an Instagram-style interface for fashion inspiration. This project was created in collaboration with my classmate, Chisom M, for our Senior capstone project.
The Problem
Through user research, we found that many college students face these challenges:
1. Selecting suitable outfits for various occasions
2. Financial constraints limiting their ability to explore new styles
3. Lack of knowledge about current fashion trends
AR try-on and In-app shopping
Shop owners can share products as 3D objects for users to virtually try on. This helps users establish a deeper connection with the product, enabling better conversion. Additionally, by adding items to the wishlist, users can shop within the app.
{Solution}
04
{Solution}
01
Use AI technology to generate outfits based on occasions and personal preferences
{Solution}
02
Digitize personal items into 3D objects and enable virtual try-on to save time
{Solution}
03
Instagram-like community to get inspired from around the world
As a design student with a business minor...
I wanted to go beyond just incorporating nice features and add something that can benefit the business.
So, I added an in-app shopping feature to enhance the user experience and contribute to the overall benefit of the business.
01. Research
We conducted five user interviews with current college students aged 18-25.
3 main pain points:
1. Time consuming
2. Financial constraints
3. Hard time selecting suitable outfits
A quote from our interviewee...
"The process ( of choosing an outfit) is really messy. My room is often a mess try to get ready for school or packing to travel. My room becomes a tornado."
Competitive Analysis
I researched some competitors' app to find inspiration. What I took away were:
1. Grouping information together using cards can best utilize space.
2. Having a familiar user interface helps users adopt more quickly.
3. Incorporating a section for user-generated content enhances engagement and promotes user stickiness.
Nike Virtual View
Nike Virtual View on FinishLine.com lets shoppers preview clothing on 3D holograms of models in WebAR.
Strengths:
• AR try-on features
• Easy access to web-based AR.
Weaknesses:
• Lack of personalized options
• Lack of variety (brands, choices)
Acloset
Acloset is an AI-powered fashion app that helps you manage your closet, create outfits, get style recommendations, and buy and sell pre-loved clothes.
Strengths:
• AI-powered
• Digital closet
• Outfit recommendations
• Pre-loved marketplace
Weaknesses:
• Lack of personalized options
• Lack of try-on feature
Aiuta
Aiuta is a fashion-tech app that uses AI to help users express their personality through style.
Strengths:
• AI-powered
• Virtual try-on feature using images
• AI stylist feedback
Weaknesses:
• Bad user experience
• Lack of user-generated content
02. Ideation
Sketches
At the beginning, I sketch out possible solutions with my peers.
Userflow
We mapped out the system and divided it into 5 sub pages: Homepage, Explore Page, Generate Outfit Page, My Closet Page, and Profile Page.
03. Design
Wireframe
User Testing Takeaways :
• Include all the steps for the main user flows that the user will take, including pop-up screens, etc.
• Ensure clear identification by labeling significant buttons, such as 'Try-on'.
Lo-fi Prototype
User Testing Takeaways:
• Incorporate onboarding pages to help users understand the app's purpose and functionality.
• Not every button needs to be functional, prioritize functionality for the main user flows.
• The camera has three functions – scan, AR try-on, and digitalize. The functionality of the camera is a bit confusing. Differentiate when to use each function.
04. User Testing
To evaluate our designs, we conducted a 1:1 moderated usability testings with 3 users. We developed an interactive prototype on Figma to gain a thorough understanding of how users engage with the interface. We formulated a user testing plan, designed tasks, and observed users completing the tasks both in-person and through Zoom.
Synthesize findings:
Sign Up Page
• Incorporate onboarding pages to help users understand the app's purpose and functionality
Home Page
• Remove the search bar on the top
• Add shop to the home page to showcase the 'shop feature'
Generate Outfit Page
• Change the overall layout, the information presented is confusing
• Prioritize the buttons, CTA should be the biggest
User Interface
• Change the layout and reorganize information
• Remove the pattern from the background
Explore Page
• Replace the camera icon with a new one to represent the 'scan' feature
My Closet Page
• There are too many features on the page, try to simplify and stay within the scope
05. Hi-fi Prototype
Design System
Hi-fi Prototype
06. Reflection
Throughout the process, I learned that user testing is key to UX design, and asking the right questions will keep me on the right track because we are designing for the users, not for ourselves. I challenged myself to think of many iterations and test them with users. I found talking to my users very enjoyable because every time I can learn a new perspective from them and discover a new way to solve the problem. If I have more time, I would continue to gather user feedback and make improvements.
