Drobe
July 2024 – August 2024
Drobe
July 2024 – August 2024
Drobe
July 2024 – August 2024
Overview
Overview
Creating a sustainable wardrobe app to overcome the retention problems of existing alternatives
Creating a sustainable wardrobe app to overcome the retention problems of existing alternatives
During a design mentorship program, I created Drobe to improve user retention rates in the digital wardrobe space and promote sustainable fashion habits.
Drobe accomplishes these objectives by automating tedious wardrobe management tasks and using AI to deliver contextually relevant outfit suggestions.
My Roles
Interaction Design
Product Strategy
User Research
User Testing
Tools
Figma
Photoshop
Miro
Team
Jacob Kersh
(Solo Project)
Overview
Creating a sustainable wardrobe app to overcome the retention problems of existing alternatives
During a design mentorship program, I created Drobe to improve user retention rates in the digital wardrobe space and promote sustainable fashion habits.
Drobe accomplishes these objectives by automating tedious wardrobe management tasks and using AI to deliver contextually relevant outfit suggestions.
My Roles
Interaction Design
Product Strategy
User Research
User Testing
Tools
Figma
Photoshop
Miro
Team
Jacob Kersh
(Solo Project)
Solution Snapshot
Solution Snapshot
Solution Snapshot
A preview grid of the final design
A preview grid of the final design
A preview grid of the final design
The current state of Drobe reflects my commitment to intentional design and thorough testing, even when working within tight deadlines.
You can explore the solution snapshot below, or view full product demos here.
The current state of Drobe reflects my commitment to intentional design and thorough testing, even when working within tight deadlines.
You can explore the solution snapshot below, or view full product demos here.
Onboarding
Onboarding
Instantly familiar design language
Instantly familiar design language
When first opening Drobe, users are greeted by an iconic 3D logo and components that align closely with Apple's Human Interface Guidelines.
When first opening Drobe, users are greeted by an iconic 3D logo and components that align closely with Apple's Human Interface Guidelines.
Personalization through style profiling
During onboarding, users complete a brief style profile. This enables Drobe's AI to more accurately autofill clothing details and generate contextual outfits.
Personal Details
Gender
Body Type
Color Preferences
Base
Accent
Sizing Information
Top Size
Bottom Size
Shoe Size
Style Adjectives
Confident
Cool
Edgy
Sensual
Tailored
Flowy
Radiant
Artistic
Preppy
Classic
Dreamy
Daring
Fragile
Grunge
Innovative
Soft
Laid-Back
New
Architectural
Personalization through style profiling
During onboarding, users complete a brief style profile. This enables Drobe's AI to more accurately autofill clothing details and generate contextual outfits.
Personal Details
Gender
Body Type
Color Preferences
Base
Accent
Sizing Information
Top Size
Bottom Size
Shoe Size
Style Adjectives
Confident
Cool
Edgy
Sensual
Tailored
Flowy
Radiant
Artistic
Preppy
Classic
Dreamy
Daring
Fragile
Grunge
Innovative
Soft
Laid-Back
New
Architectural
Personalization through style profiling
During onboarding, users complete a brief style profile. This enables Drobe's AI to more accurately autofill clothing details and generate contextual outfits.
Personal Details
Gender
Body Type
Color Preferences
Base
Accent
Sizing Information
Top Size
Bottom Size
Shoe Size
Style Adjectives
Confident
Cool
Edgy
Sensual
Tailored
Flowy
Radiant
Artistic
Preppy
Classic
Dreamy
Daring
Fragile
Grunge
Innovative
Soft
Laid-Back
New
Architectural
Wardrobe
Wardrobe
Effortless scanning and filtering
Effortless scanning and filtering
Users can visually scan their digital wardrobe by items, outfits, or capsules. They can also use advanced filters to narrow their search.
Users can visually scan their digital wardrobe by items, outfits, or capsules. They can also use advanced filters to narrow their search.
Easy access to clothing item details
Easy access to clothing item details
Tapping an item reveals a sheet that displays its corresponding details. Most of this information is autofilled by AI when the item is uploaded.
Tapping an item reveals a sheet that displays its corresponding details. Most of this information is autofilled by AI when the item is uploaded.
Wear statistics at a glance
Diligently
analyzed.
Beautifully
visualized.
Diligently analyzed. Beautifully visualized.
Wardrobe Breakdown
Distribution of items by type
Tops
Accessories
Bottoms
Footwear
Outerwear
Swimwear
Average Item Cost
Current & depreciated totals
Current
$68.52
Depreciated
$41.11
Total Wardrobe Value
Sum of item costs
$890.80
Usage Rankings
Ordered by wear time
All
Tops
Bottoms
Outerwear
Footwear
Accessories
Swimwear
12 times
$1.66/wear
9 times
$4.99/wear
8 times
$26.25/wear
7 times
$3.28/wear
6 times
$19.50/wear
Color Distribution
Item count by base color
5
4
3
2
1
0
Overall Wear Rate
Percentage of items worn
36
%
100
%
Wear statistics at a glance
Diligently analyzed. Beautifully visualized.
Wardrobe Breakdown
Distribution of items by type
Tops
Accessories
Bottoms
Footwear
Outerwear
Swimwear
Average Item Cost
Current & depreciated totals
Current
$68.52
Depreciated
$41.11
Total Wardrobe Value
Sum of item costs
$890.80
Usage Rankings
Ordered by wear time
All
Tops
Bottoms
Outerwear
Footwear
Accessories
Swimwear
12 times
$1.66/wear
9 times
$4.99/wear
8 times
$26.25/wear
7 times
$3.28/wear
6 times
$19.50/wear
Color Distribution
Item count by base color
5
4
3
2
1
0
Overall Wear Rate
Percentage of items worn
36
%
100
%
Ability to import items using online stores
Ability to import items using online stores
Users can add items using product photos from online store pages—all without ever exiting the app. Store links can also be saved for quicker access.
Users can add items using product photos from online store pages—all without ever exiting the app. Store links can also be saved for quicker access.
Clothing uploads, entirely in-app
Clothing uploads, entirely in-app
Drobe’s in-app browser lets users screenshot clothing items in bulk. The app then performs background removal and autofills item details.
Drobe’s in-app browser lets users screenshot clothing items in bulk. The app then performs background removal and autofills item details.
Styling
Styling
Powerful outfit building tools
Powerful outfit building tools
A canvas for
self expression.
AI for tailored
suggestions.
A canvas for self expression. AI for tailored suggestions.
A canvas for self expression. AI for tailored suggestions.
Dynamic canvas with adaptable controls
Dynamic canvas with adaptable controls
Individual items in the canvas can easily be resized, rotated, and reordered. These controls become hidden when not in use, keeping focus on the outfit itself.
Individual items in the canvas can easily be resized, rotated, and reordered. These controls become hidden when not in use, keeping focus on the outfit itself.
AI outfit creation, guided by flexible criteria
Creating AI outfits in Drobe is quick and intuitive. Users just choose from a set of criteria and let the app do the rest.
Event Information
When & Where
Climate
Occasion
Prioritization
Item Types
Item Usage
Base Item
Style Preferences
Colors
Materials
Brands
AI outfit creation, guided by flexible criteria
Creating AI outfits in Drobe is quick and intuitive. Users just choose from a set of criteria and let the app do the rest.
Event Information
When & Where
Climate
Occasion
Prioritization
Item Types
Item Usage
Base Item
Style Preferences
Colors
Materials
Brands
AI outfit creation, guided by flexible criteria
Creating AI outfits in Drobe is quick and intuitive. Users just choose from a set of criteria and let the app do the rest.
Event Information
When & Where
Climate
Occasion
Prioritization
Item Types
Item Usage
Base Item
Style Preferences
Colors
Materials
Brands
Sleek and functional outfit generation process
Sleek and functional outfit generation process
AI outfits are introduced with an audible chime and flowing gradient animation. Once visible, they can be saved, edited, refreshed, or flagged as inaccurate.
AI outfits are introduced with an audible chime and flowing gradient animation. Once visible, they can be saved, edited, refreshed, or flagged as inaccurate.
Subscription with a clear value proposition
Subscription with a clear value proposition
In Drobe, the benefits of subscribing to Premium are communicated concisely and in a visually appealing manner. Pricing is transparent, and the purchasing process is well-integrated.
In Drobe, the benefits of subscribing to Premium are communicated concisely and in a visually appealing manner. Pricing is transparent, and the purchasing process is well-integrated.
Product Background
Product Background
Product Background
Learning the basics of digital wardrobes
Learning the basics of digital wardrobes
Learning the basics of digital wardrobes
Following the initial onboarding of my mentorship program, I was given two months to build a digital wardrobe application from scratch.
I promptly began researching the benefits of utilizing a digital wardrobe—and the limitations of existing solutions.
Following the initial onboarding of my mentorship program, I was given two months to build a digital wardrobe application from scratch.
I promptly began researching the benefits of utilizing a digital wardrobe—and the limitations of existing solutions.
👕
👕
What Are Digital Wardrobes?
What Are Digital Wardrobes?
What Are Digital Wardrobes?
Digital wardrobes bring your closet to your pocket, offering added functionality and increased sustainability.
When designed correctly, they feel like shopping from your own clothing collection.
Digital wardrobes bring your closet to your pocket, offering added functionality and increased sustainability.
When designed correctly, they feel like shopping from your own clothing collection.
🚧
🚧
What Problem Do They Address?
What Problem Do They Address?
What Problem Do They Address?
The fashion industry pushes us to buy constantly—so we feel we have nothing to wear.
Digital wardrobes counter this issue by being more visible, accessible, and intelligent than physical closet spaces.
The fashion industry pushes us to buy constantly—so we feel we have nothing to wear.
Digital wardrobes counter this issue by being more visible, accessible, and intelligent than physical closet spaces.
📉
📉
Why Do Current Solutions Fall Short?
Why Do Current Solutions Fall Short?
Why Do Current Solutions Fall Short?
Existing apps suffer from poor user retention rates due to a range of unresolved issues.
Fixing these concerns would would drive engagement and foster long-term sustainable fashion habits.
Existing apps suffer from poor user retention rates due to a range of unresolved issues.
Fixing these concerns would would drive engagement and foster long-term sustainable fashion habits.
Competitive Analysis
Competitive Analysis
Competitive Analysis
Analyzing the competition to identify problem areas
Analyzing the competition to identify problem areas
Analyzing the competition to identify problem areas
Once I grasped digital wardrobes as a concept, I began to analyze existing applications. I focused on user reviews to derive pain points, which I distilled into three core issues.
I then heuristically evaluated the apps most affected by each issue, which helped support my findings.
Once I grasped digital wardrobes as a concept, I began to analyze existing applications. I focused on user reviews to derive pain points, which I distilled into three core issues.
I then heuristically evaluated the apps most affected by each issue, which helped support my findings.
Problem Discovery
Problem Discovery
Problem Discovery
Integrating core issues to form an effective problem statement
Integrating core issues to form an effective problem statement
Integrating core issues to form an effective problem statement
Drawing from competitor reviews and my heuristic evaluation, I formulated a clear problem statement.
This step laid a strong foundation for subsequent research and design efforts.
Drawing from competitor reviews and my heuristic evaluation, I formulated a clear problem statement.
This step laid a strong foundation for subsequent research and design efforts.
Design a sustainable wardrobe app that boosts retention by eliminating the complex architecture, high interaction cost, and obstructive paywalls found in existing alternatives.
Design a sustainable wardrobe app that boosts retention by eliminating the complex architecture, high interaction cost, and obstructive paywalls found in existing alternatives.
Focus Group
Focus Group
Focus Group
Discussing the digital wardrobe space with current users
Discussing the digital wardrobe space with current users
Discussing the digital wardrobe space with current users
After setting the project's direction, I conducted a focus group with users from various digital wardrobe apps.
This dialogue revealed a set of shared frustrations, which I analyzed using thematic coding. My findings effectively validated the problem statement I had recently devised.
After setting the project's direction, I conducted a focus group with users from various digital wardrobe apps.
This dialogue revealed a set of shared frustrations, which I analyzed using thematic coding. My findings effectively validated the problem statement I had recently devised.
Complex Architecture
Complex Architecture
Complex Architecture
Poor navigation flow
Poor navigation flow
Poor navigation flow
"My entire app is menus inside of menus and going back and forth to find stuff."
"My entire app is menus inside of menus and going back and forth to find stuff."
Tedious item uploads
Tedious item uploads
Tedious item uploads
"It takes way too many pages to upload anything so I basically gave up."
"It takes way too many pages to upload anything so I basically gave up."
High Interaction Cost
High Interaction Cost
High Interaction Cost
AI is inaccurate
AI is inaccurate
AI is inaccurate
"The AI outfits are all misses for me. I feel like it's too early for it to be useful at all."
"The AI outfits are all misses for me. I feel like it's too early for it to be useful at all."
Too much upkeep
Too much upkeep
Too much upkeep
"If I want accurate statistics, I have to update every piece of clothing every time I wear it."
"If I want accurate statistics, I have to update every piece of clothing every time I wear it."
Obstructive Paywalls
Obstructive Paywalls
Obstructive Paywalls
Predatory charges
Predatory charges
Predatory charges
"They wait till you invest your time and energy, then charge you for basic features."
"They wait till you invest your time and energy, then charge you for basic features."
Distracting ads
Distracting ads
Distracting ads
"There's no pattern to when ads will pop up or how long they are—it is so frustrating."
"There's no pattern to when ads will pop up or how long they are—it is so frustrating."
MVP Mind Map
MVP Mind Map
MVP Mind Map
Translating user frustrations into exploratory product ideas
Translating user frustrations into exploratory product ideas
Translating user frustrations into exploratory product ideas
Based on my analysis of focus group insights, I created a mind map to quickly visualize how the established codes could translate into actionable product ideas.
This exercise produced a range of attributes to sort through and guided me towards defining the MVP.
Based on my analysis of focus group insights, I created a mind map to quickly visualize how the established codes could translate into actionable product ideas.
This exercise produced a range of attributes to sort through and guided me towards defining the MVP.
Prioritization Matrix
Prioritization Matrix
Prioritization Matrix
Ranking ideas to determine the minimum viable feature set
Ranking ideas to determine the minimum viable feature set
Ranking ideas to determine the minimum viable feature set
To prioritize the attributes I brainstormed, I ranked them by their impact on user experience and the effort required for development.
This process helped me define the MVP's necessary features while ensuring the project remained within the program's time constraints.
To prioritize the attributes I brainstormed, I ranked them by their impact on user experience and the effort required for development.
This process helped me define the MVP's necessary features while ensuring the project remained within the program's time constraints.
Show MVP features only
Information Architecture
Information Architecture
Information Architecture
Designing the architecture of Drobe to minimize interaction cost
Designing the architecture of Drobe to minimize interaction cost
Designing the architecture of Drobe to minimize interaction cost
With the MVP established, I structured Drobe’s information architecture around four global nodes.
Each global node corresponds to a primary screen, branching into local nodes for interaction points and contextual nodes for adaptive overlays.
This structure minimizes interaction cost by reducing taps and consolidating content onto single screens.
Note that the diagram includes features beyond the MVP to reflect Drobe’s broader future scope.
With the MVP established, I structured Drobe’s information architecture around four global nodes.
Each global node corresponds to a primary screen, branching into local nodes for interaction points and contextual nodes for adaptive overlays.
This structure minimizes interaction cost by reducing taps and consolidating content onto single screens.
Note that the diagram includes features beyond the MVP to reflect Drobe’s broader future scope.
Disable non-MVP features
Design System
Design System
Design System
Building a design system rooted in scaleability and familiarity
Building a design system rooted in scaleability and familiarity
Building a design system rooted in scaleability and familiarity
A core tenet of Drobe's MVP was to develop a familiar design system rooted in Apple’s Human Interface Guidelines.
To pave the way for scalability, I created collections of primitive and system design tokens using Figma variables. I then built a library of flexible components.
As testing progressed, I expanded the system with custom components and complex prototyping logic.
A core tenet of Drobe's MVP was to develop a familiar design system rooted in Apple’s Human Interface Guidelines.
To pave the way for scalability, I created collections of primitive and system design tokens using Figma variables. I then built a library of flexible components.
As testing progressed, I expanded the system with custom components and complex prototyping logic.
User Testing Highlights
User Testing Highlights
User Testing Highlights
Validating design decisions through extensive testing
Validating design decisions through extensive testing
Validating design decisions through extensive testing
Guided by Drobe's completed information architecture, I began iterating through several low-fidelity prototypes.
Once the app's main functionality was validated, I transitioned to developing high-fidelity flows and expanding the design system.
Below are some key highlights from the testing process.
Guided by Drobe's completed information architecture, I began iterating through several low-fidelity prototypes.
Once the app's main functionality was validated, I transitioned to developing high-fidelity flows and expanding the design system.
Below are some key highlights from the testing process.
Onboarding
Onboarding
Refining user color selection
During onboarding, users initially selected their color preferences through a pencil palette and saturation slider.
However, the color options were limited, and the slider mistakenly resembled an opacity control.
I resolved this by refining the slider and introducing new selection methods.
Wardrobe
Wardrobe
Improving item type statistics
A key visual in the statistics tab is the distribution of items by type.
Early iterations of this visual were difficult to read and lacked specific category breakdowns.
Thus, I restructured the design to be more compact and added a collapsible list with category details.
Styling
Styling
Streamlining AI outfit generation
To expedite AI outfit creation, I aimed for the weather criterion to autofill based on the user's chosen date and location.
A link button was integrated to show this connection, but failed to clearly convey its functionality.
To clarify, I pivoted to using a dashed line and autofill toggle.
Onboarding
Refining user color selection
During onboarding, users initially selected their color preferences through a pencil palette and saturation slider.
However, the color options were limited, and the slider mistakenly resembled an opacity control.
I resolved this by refining the slider and introducing new selection methods.
Wardrobe
Improving item type statistics
A key visual in the statistics tab is the distribution of items by type.
Early iterations of this visual were difficult to read and lacked specific category breakdowns.
Thus, I restructured the design to be more compact and added a collapsible list with category details.
Styling
Streamlining AI outfit generation
To expedite AI outfit creation, I aimed for the weather criterion to autofill based on the user's chosen date and location.
A link button was integrated to show this connection, but failed to clearly convey its functionality.
To clarify, I pivoted to using a dashed line and autofill toggle.
Post-Test Survey
Post-Test Survey
Post-Test Survey
Gathering quantitative feedback on the ultimate iteration
Gathering quantitative feedback on the ultimate iteration
Gathering quantitative feedback on the ultimate iteration
With the program winding down and high-fidelity testing yielding increasingly robust results, it felt appropriate to wrap up the development process.
To gauge user enthusiasm for the current iteration, I asked participants to complete a brief quantitative survey. The results were largely positive.
With the program winding down and high-fidelity testing yielding increasingly robust results, it felt appropriate to wrap up the development process.
To gauge user enthusiasm for the current iteration, I asked participants to complete a brief quantitative survey. The results were largely positive.
Below is an example survey question and its corresponding average response amount.
Free Version Usability
Free Version Usability
"The navigation of the free version of Drobe was easy and enjoyable to navigate."
1
2
3
4
5
Strongly disagree
Strongly agree
4.11 avg.
Free Version Usability
"The navigation of the free version of Drobe was easy and enjoyable to navigate."
1
2
3
4
5
Strongly disagree
Strongly agree
4.11 avg.
Free Version Usability
Free Version Usability
"The navigation of the free version of Drobe was easy and enjoyable to navigate."
1
2
3
4
5
Strongly disagree
Strongly agree
4.11 avg.
Free Version Usability
"The navigation of the free version of Drobe was easy and enjoyable to navigate."
1
2
3
4
5
Strongly disagree
Strongly agree
4.11 avg.
High-Fidelity Screens
High-Fidelity Screens
High-Fidelity Screens
Showcasing the final MVP through detailed product flows
Showcasing the final MVP through detailed product flows
Showcasing the final MVP through detailed product flows
The final iteration of Drobe includes product flows that encompass the complete MVP feature set and underlying information architecture.
For increased clarity, each flow has been illustrated via key screens and a playable demo of the full interaction.
Note that double tapping a demo will open it in fullscreen.
The final iteration of Drobe includes product flows that encompass the complete MVP feature set and underlying information architecture.
For increased clarity, each flow has been illustrated via key screens and a playable demo of the full interaction.
The final iteration of Drobe includes product flows that encompass the complete MVP feature set and underlying information architecture.
For increased clarity, each flow has been illustrated via a playable demo of the full interaction.
Onboarding & Style Profile
Wardrobe & Statistics
Uploading Items
Styling with Canvas
Styling with AI
Onboarding & Style Profile
Onboarding & Style Profile
Wardrobe & Statistics
Wardrobe & Statistics
Uploading Items
Uploading Items
Styling with Canvas
Styling with Canvas
Styling with AI
Styling with AI
Reflection
Reflection
Reflection
Highlighting Drobe's success and finding opportunities for growth
Highlighting Drobe's success and finding opportunities for growth
Highlighting Drobe's success and finding opportunities for growth
The program concluded with a presentation of Drobe’s final iteration, where I demonstrated its strong user reception and capacity to improve retention rates in the digital wardrobe space.
I also emphasized how Drobe promotes sustainable fashion habits amongst long-term users.
Afterwards, I reflected on the design process—identifying important lessons and opportunities for growth.
The program concluded with a presentation of Drobe’s final iteration, where I demonstrated its strong user reception and capacity to improve retention rates in the digital wardrobe space.
I also emphasized how Drobe promotes sustainable fashion habits amongst long-term users.
Afterwards, I reflected on the design process—identifying important lessons and opportunities for growth.
💡
💡
Key Takeaways
Key Takeaways
Key Takeaways
Design Tokens & Scalability
Design Tokens & Scalability
Design Tokens & Scalability
Leveraging design tokens early on was crucial for scaling visual identity.
Leveraging design tokens early on was crucial for scaling visual identity.
Leveraging design tokens early on was crucial for scaling visual identity.
Interaction Cost Distribution
Interaction Cost Distribution
Interaction Cost Distribution
Balancing interaction cost between onboarding and regular tasks improved the perceived value for users.
Balancing interaction cost between onboarding and regular tasks improved the perceived value for users.
Balancing interaction cost between onboarding and regular tasks improved the perceived value for users.
🛠️
🛠️
Areas for Improvement
Areas for Improvement
Areas for Improvement
Fidelity vs. Time Constraints
Fidelity vs. Time Constraints
Fidelity vs. Time Constraints
The temptation to achieve pixel-perfect fidelity hindered rapid prototyping efforts.
The temptation to achieve pixel-perfect fidelity hindered rapid prototyping efforts.
The temptation to achieve pixel-perfect fidelity hindered rapid prototyping efforts.
Lack of Process Flexibility
Lack of Process Flexibility
Lack of Process Flexibility
While it provided structure, strict adherence to design thinking framework ultimately constrained the MVP's scope.
While it provided structure, strict adherence to design thinking framework ultimately constrained the MVP's scope.
While it provided structure, strict adherence to design thinking framework ultimately constrained the MVP's scope.
🛩️
🛩️
Future Plans
Future Plans
Future Plans
Planner with Log Entries
Planner with Log Entries
Planner with Log Entries
Creating a log system in the planner tab would enhance wear tracking and analytics.
Creating a log system in the planner tab would enhance wear tracking and analytics.
Creating a log system in the planner tab would enhance wear tracking and analytics.
Moodboard & Panel System
Moodboard & Panel System
Moodboard & Panel System
Developing a moodboard tab with filterable panels would allow users to better visualize their style evolution.
Developing a moodboard tab with filterable panels would allow users to better visualize their style evolution.
Developing a moodboard tab with filterable panels would allow users to better visualize their style evolution.
Case Study Collection
Case Study Collection
Case Study Collection
Check out more of my recent work
Check out more of my recent work
Get in touch with me 📤
Want to delve deeper into my work? Feel free to email me at jkersh07@gmail.com or message me on any other platform. I love meeting new people.
Designed & developed by Jacob Kersh © 2024.
Get in touch with me 📤
Want to delve deeper into my work? Feel free to email me at jkersh07@gmail.com or message me on any other platform. I love meeting new people.
Designed & developed by Jacob Kersh © 2024.
Get in touch with me 📤
Want to delve deeper into my work? Feel free to email me at jkersh07@gmail.com or message me on any other platform. I love meeting new people.
Designed & developed by Jacob Kersh © 2024.