Product Design / UX Case Study
Wishlist brings the pieces you save across the internet into one place — then helps you turn them into outfits before you buy.
where this started
“okay but — what was I even going to wear this with?”
— me, halfway through planning a trip
I love shopping online. Planning outfits from everything I save is where it gets messy — especially before a trip, when one look might be scattered across several retailers, Pinterest, open tabs, and screenshots.
Finding pieces wasn’t the hard part. Turning them into outfits was.
saving something
and styling something
are two different problems.
most shopping tools solve the first one
how the direction emerged
Discovery started with a workflow I knew intimately: how I saved, remembered, grouped, and styled fashion online. I combined self-observation with competitive research, visual/inspiration research, FigJam mapping, information-architecture exploration, and repeated interface iteration.
whering
indyx
alta
google shopping / photos
The market increasingly validates the idea that people want help not only finding clothes, but organizing, styling, and visualizing them.
The opportunity I saw was less about inventing digital wardrobe planning from scratch and more about connecting a workflow that still felt fragmented to me: discovering a product on the open web → saving it → organizing it for a specific plan → styling it alongside what I already own → visualizing the complete look.
opportunity
Connect pre-purchase discovery to outfit planning without forcing the user to rebuild the product manually.
effort matters
People like digital wardrobes but repeatedly describe setup and cataloging as work.
organization still breaks down
Users ask for better sorting by category, color, tags, and other attributes.
outfit composition is the value
People repeatedly describe outfit-building — and seeing how a new purchase works with existing clothes — as one of the most useful parts of wardrobe apps.
Secondary research — patterns drawn from public reviews and product marketing of existing tools, not original interviews I conducted.
The strongest signal wasn’t that people needed another inventory tool. It was that the value appeared when the wardrobe became usable for decisions.
A digital closet is most useful when it helps you decide what to wear — or whether to buy something at all.
hmw
Make saving a piece from any store feel like one single action?
hmw
Turn a pile of saved things into something you can actually plan with?
hmw
Let someone see whether pieces work together without opening Canva?
hmw
Make styling feel like play instead of admin work?
hmw
Help someone picture the outfit on themselves before buying it?
hmw
Keep clothes she already owns in the mix, not just new stuff?
fragmented
Saves live across retailer wishlists, Pinterest, screenshots, bookmarks, and open tabs.
forgotten
If I don’t buy it immediately, it becomes easy to lose track of.
invisible
I can save individual pieces, but I still can’t easily see how they work together.
manual
Visualizing an outfit means screenshotting, cutting out, and arranging each item manually.
risky
I can love an item independently without knowing whether it fits anything else I’m planning to wear.
FigJam board — research synthesis, HMWs, pain points, and the as-is / to-be flows that came out of them
Mapping the workflow exposed that Save couldn’t be the endpoint. Organizing what I liked and composing an outfit were separate jobs with different information needs.
as-is — what actually happens today
proposed — what I thought it should be
who this is for
“She doesn’t shop one item at a time.
She thinks in outfits.”
01
“everything I save lives on a different site.”
→ browser extension
02
“a pile of saves is still just a pile.”
→ wishlist + collections
03
“organized isn’t the same as styled.”
→ look studio
04
“a flat collage still takes imagination.”
→ visualize
One of the most important structural decisions was keeping Collections and Look Studio separate.
Collections answer “what am I planning for?” Look Studio answers “how do these pieces work together?” Combining them would have made one screen responsible for both organization and composition.
Give composition its own workspace.
This adds another destination to the product, but gives outfit-building enough space to behave like a creative task rather than a management tool.
Before Look Studio became its own space, styling could have lived in a few different places.
option a
style inside Collection
strength context stays together
problem organization and composition begin competing for space
option b
style from an individual product page
strength good for one item
problem poor fit for assembling complete looks
option c
dedicated Look Studio
strength supports composition as its own task
wishlist = collect. collections = contextualize. look studio = compose.
01 · save
need — capture a product without leaving the store’s tab.
The extension removes the extra work between finding something and saving it. Product details are pulled from the page and turned into a consistent Wishlist item.
Different storefronts expose product information differently, so the extension normalizes that complexity behind one consistent Save interaction — the shopper never has to think about which site she’s on.
the interaction is intentionally boring. the complexity belongs underneath it.
one closet.
every store.
02 · organize
need — a growing archive needs structure without becoming admin work.
Wishlist is the running archive. Collections turn it into smaller planning contexts — a trip, event, or aesthetic.
collections — each its own planning context
inside one collection
Filters stay behind one entry instead of competing with the clothing, because most sessions don’t need them.
Pieces already in her closet can join wishlist items later in Look Studio, so outfit-building isn’t limited to things she’s about to buy.
play dress-up
with your actual closet.
03 · style — the centerpiece
need — organized isn’t the same as styled.
Look Studio turns a saved archive into something composable. Instead of imagining whether pieces work together, she can drag them onto a canvas and build the outfit directly.
style what you want with what you already have.
Wishlist pieces and clothes she already owns can meet in the same outfit, so she can decide whether something new works with her current closet before buying.
Placed pieces can also be moved with the keyboard, not only drag-and-drop.
don’t imagine the outfit.
see it.
04 · visualize
need — a flat collage still takes imagination.
Visualize takes the outfit already composed in Look Studio and turns it into a fashion illustration using the model reference from the user’s profile.
outfit composition
fashion illustration
Generation runs through a secure server-side pipeline rather than directly from the browser.
An unexpected failure mode: early generations sometimes reproduced the physical sketchbook instead of only its illustration style. Tightening prompt constraints separated the desired style from unwanted artifacts.
already saved
could go wrongSaving the same product twice
responseDuplicate capture is detected and communicated rather than silently creating a second item.
empty collection
could go wrongA new Collection with nothing in it reads as broken
responseThe empty state explains what belongs here and gives a clear next action.
cutout needs correction
could go wrongAutomatic segmentation misjudges the product edges
responseInclude/exclude points let her correct it rather than treating segmentation as perfect.
visualization failure
could go wrongGeneration fails or times out
responseThe composed outfit stays intact on the canvas, and retrying doesn’t cost her the styling work.
experience iteration
Collections carried too much responsibility: organize, plan, and style all at once.
The screen was serving two different mental jobs, and neither one had enough room.
Collections organize. Look Studio composes.
Each destination got a clearer purpose, and composing an outfit stopped competing with managing a list.
visual direction
early direction
final product
Early explorations leaned too heavily into the playful aesthetic. As the product grew, I pulled the visual system back so the clothing — not the interface — could remain the most expressive thing on screen.
The final direction uses warm, light surfaces with strawberry and matcha as accents, while typography and small tactile details carry the whimsical personality.
visual hierarchy
Fashion imagery remains dominant.
color
Cream/paper surfaces create breathing room; strawberry and matcha act as accents.
interaction
Controls stay predictable and progressively disclosed so the product remains playful without becoming noisy.
your closet, before it’s your closet.
elsie — display
SAVE IT
bitcount — accent
Add to collection · Visualize outfit
quicksand — interface
Expressive type carries personality; restrained interface type carries clarity.
sign-in screen — the clothing-rack animation responding to typing
product + experience reasoning
01
save should feel the same even when the web doesn’t.
02
organized isn’t the same as styled.
03
model the wardrobe, not each screen.
reflection
design the workflow, not the feature.
I started with the idea of building a better wishlist. Mapping the full behavior showed me that the more interesting problem began after Save.
complexity can stay underneath.
Cross-site extraction, image processing, and generation are technically complicated. None of that complexity needs to become the user’s problem.
play can be functional.
The dress-up-game influence wasn’t just an aesthetic reference. Direct manipulation made outfit planning feel closer to styling than administration.
what I’d validate next
If I continued this project, my next step would be structured usability testing with people who regularly plan outfits before purchasing.
secondary questions
ownership
Wishlist was built solo, so product decisions, experience decisions, and engineering decisions weren’t separate handoffs — they shaped each other.
ux / product design
Observed the shopping workflow, mapped the experience, defined the Save → Organize → Style → Visualize model, designed the information architecture and interactions, and iterated the visual direction.
frontend / interaction
Built the React interface, Look Studio, and the extension experience.
full stack / systems
Built the supporting data model and the visualization pipeline.
your wishlist was never the problem.
turning it into an outfit was.
wishlist — save it. style it. see it together.