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.
When first opening Drobe, users are greeted by an iconic 3D logo and components that align closely with Apple's Human Interface Guidelines.
Users can visually scan their digital wardrobe by items, outfits, or capsules. They can also use advanced filters to narrow their search.
Tapping an item reveals a sheet that displays its corresponding details. Most of this information is autofilled by AI when the item is uploaded.
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.
Drobe’s in-app browser lets users screenshot clothing items in bulk. The app then performs background removal and autofills item details.
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 outfits are introduced with an audible chime and flowing gradient animation. Once visible, they can be saved, edited, refreshed, or flagged as inaccurate.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
