Let us remember for you!
An app designed to help digital documentation and organize your belongings, to remember your belongings 100% and decrease the spendings by 30%
​
As a UX Designer, I developed strategies for the problems with a design system from Concept, Market, and User Research to Final Product Prototype.
My key accomplishment was creating a design system focussing on the user needs and their underlying psychological limitations. I wore many hats by creating wireframes, mockups, prototypes, user testing, UI iterations.
My Role​
UX researcher
UI UX Designer
User Researcher
Visual Designer
UI Architect​
Tools
Figma
Adobe Illustrator​
Miro
Timeline
3 months
Final Product
A limitless wardrobe to store everything you want
A memory calendar to store your fav styles, log your daily outfits
A platform to create a personal store of your personal belongings.
Manually create an outfit with the items on the app
An AI feature that styles outfits using your existing wardrobe.
A platform similar to social media for styling, to share outfits & create moodboards.
Why this UI Design works
-
Clear Organization for Quick Decisions:
Listing items in one place helps users quickly make decisions by seeing all options at once. -
Strategic Content Hierarchy:
Key app functions—wardrobe, adding outfits, and planning—are prioritized in the first three options. -
Streamlined Navigation:
The navigation bar includes five essential options: Homepage, Calendar, Add Item, Search, and Profile for easy access. -
Familiar UI for Easy Adaptation:
The UI mirrors popular apps, reducing overwhelm and allowing users to quickly adapt to the interface.
Problem
Customers with extensive clothing collections struggle with organization and memory of their inventory, leading to duplicate purchases and unnecessary spending.
What did the existing products lack?
Lengthy Documentation Process: Simple tasks require a long user flow
Poor Organizational Features: The product lacks effective organization tools , making it difficult for users to manage their tasks efficiently
​
Does not solve the purpose of the task: The product functioned more like a storage solution than an organization solution to simplify user tasks
Insufficient User Scenario Consideration: Lacks consideration for various user needs , such as locating physical items after documentation.
Steep Learning Curve :Confusing UI leads to high dropout rates.​​
Process (non-linear)
Creating Design System
Strategizing design system with user testing and creating features to offer more help with organization
4
Research
My process begins with
1. Understand the problem first
2. Find the objective of the task
3. Understand the existing user flows
4. Find the Pros and cons of the flow.
Every phase of research unfolded different perspectives
Initial Research
Most of our users had busy schedules due to which they had less time to organize their wardrobe which in turn increased the mess in wardrobes and mountain of cloth pile increased creating an unending loop of procrastination and using anything thats on the surface level, this resulted in user taking
Impulsive Decisions.
Initially, our research only scratched the surface of user psychology. Later we uncovered deeper level of the mind that shaped this reality
Busy schedule
Laziness
Disorganization
Deeper Research
The internal Relationship with the mind
The portrayal of the ideal lifestyle is forced on us to influence our reality. We become unsatisfied with what we have and lead a negative cycle to attain instant gratification. When we realize this behavior then it helps us to address the root causes.
User Research Insights
I tried to find what the users were struggling with and the right design system to meet their behaviors, needs and expectations.
Social media makes me feel inadequate and pressures me to wear new outfits to fit in.
"
"
"
Organizing my wardrobe is a nightmare because
I have so many clothes I barely wear.
"
Bridging the gaps
Limitations of Existing applications
User needs
My proposal
After many brainstorming sessions, I decided to create an app that offered these basic features
​1. Easy documentation
2. Memory Aid
3. Financial Savings
User personas
Based on the user research we created three User Personas were developed to comprehensively capture the wants, needs, and desires of the different stakeholders using the application.
These personas include Students, Working professional, and Professional Stylists. We tried to capture the essence of what our core audience would be.
User Flows & Scenarios
User scenarios and understanding the natural flow of events into buying process.
Ideation easier user flows & cateogrizing Prospect Product Features.
Sketching wireframe ideas for the three initial features:
-
Documentation: A virtual Wardrobe
-
Memory Aid: Syncing your calendar with the App
-
Financial Savings: Offers a platform to setup a store on the app to sell the unwanted things.
With a clear start, I started to sitemap the entire product by clubbing various features under the right categories and introducing 5 main categories
Product Map
Low Fidelity Wireframes
First round Low Fidelity wireframes
All the important wireframes of the app and their key user flow frames
Homepage layout with access to all the features ​​
​
The nav bar at the bottom has quick access to
1. Homepage
2. Calendar to sync memories/add memories
3. Add new item/belonging
4. Quick search
5. User Profile
Inside wardrobe section, User flow of the inventory section
-
Inventory section Landing page
-
Categories within inventory
-
Adding a new item
-
Final item card with all the properties
1. Landing Page: Users see an overview of their wardrobe, with quick access to inventory items.
2. Categories Within Inventory: Items are organized by type (e.g., tops, bottoms, shoes), allowing easy browsing.
3. Adding a New Item: Users can input details like item name, category, color, and photo upload to add new wardrobe pieces.
4. Final Item Card: Displays all properties (e.g., image, category, color, material, season), allowing users to edit or view details at a glance.
User flow of Style Gallery
-
Adding new item in style gallery
-
Single item property card
.png)
AI Styling Tool
1. Landing page and options
2. Final output frame
Features in detail​
1. Landing Page: Users select style preferences, occasion, or wardrobe items for AI to generate outfit ideas.
2. Final Output: AI presents tailored outfit suggestions, including details and accessories, for review or saving.
.png)
​Secondary features
-
Outfit Memories in the In-App Calendar
-
Suitcase Planning with Existing Inventory
-
In-App Social Media Platform
-
In-App Thrift Store
.png)
Features in detail
​
1. Outfit Memories in the In-App Calendar: Allows users to log and track past outfits, making it easy to revisit looks for future inspiration.
2. Suitcase Planning with Existing Inventory: Users can plan travel outfits by selecting items from their current wardrobe, streamlining packing.
3. In-App Social Media Platform: A space for users to share outfit ideas, get inspiration, and engage with a fashion-focused community.
4. In-App Thrift Store: Enables users to buy, sell, or trade second-hand clothing within the app, promoting sustainable fashion.
UI Iterations and Refinements
Challenges​
Some design elements, such as button sizes, spacing, and alignment, felt unpolished and inconsistent in our initial User interfaces. The colors were too harsh and the UI did not feel smooth and consistent
Solution
Refine design elements to ensure visual consistency and balance for a more cohesive user experience.
Updating the Style Guide
Updated the visual identity with a new logo, streamlined the color palette from six to three colors, and refined button styles and list formatting. These changes create a more cohesive, polished UI, replacing the previous harsh design for a cleaner, user-friendly experience.
UI with first Style Guide
1st Round
UI with second Style Guide
2nd Round: Refined UI
Final UI Approach
Visual Style Guide
Exploring UI Designs
.png)
.png)
-
In our initial UI design, we experimented with introducing colors.
-
In the second iteration, we streamlined the interface by organizing items in a clear, prioritized list, making navigation more intuitive for users right from the moment they enter the app.
-
The features are now ranked based on their importance, ensuring a user-friendly experience. with a balance of color
​Final UI Design Selection
-
After evaluating the different UI designs, I decided to use the third iteration as the final version.
-
This design offered a balanced use of color, ensuring that none of the colors felt too dominant or overpowering.
-
The header graphic plays a key role in conveying organization, displaying a visual that resembles a stack of drawers, much like looking down on a dresser from above.
Exploring Different Colors and UI Elements
-
Finalized the color palette and treatment after multiple iterations.
-
Developed a clear navigation path, reducing steps for item documentation.
-
Achieved a smoother user flow, resulting in a more elegant and enjoyable UI.
-
Balanced color usage to enhance the overall user experience.
Lets go through the final UI flows
Wardrobe Feature UI
How to get into that section and explore different categories
Homepage UI
Wardrobe UI
Inventory
Category list view
-
1st Screen: Homepage UI
Displays the main wardrobe section with a clear layout of clothing items. -
2nd Screen: Wardrobe Section UI
Shows the Wardrobe layout and highlights the selected button with increased border weight for accessibility. -
3rd Screen: Inventory Section UI
Displays the inventory section UI with all the items. -
4th Screen: Category Expansion
Displays an expanded view of categories for easy navigation through item types.
Add new item to inventory
How to add a new item User flow
New item UI
Category input UI
Itemcard display UI
-
1st Screen: Add new Item User flow
The button to add new item gets highlighted upon clicking -
2nd Screen: Adding selected item through camera or gallery
​The UI when an item gets selected to add to the wardrobe and shows different categories it should be added. -
3rd Screen: Item card upon saving
Displays an expanded view of item card after being saved to inventory and various other fields to locate the item