03Concept projectConsumer AIExplainable suggestions

Closet: an outfit in one glance

An AI wardrobe for busy students. It suggests outfits only from clothes they already own, using their calendar and the weather, and explains every pick so they can grab one and go.

My role: Concept, interaction and visual design, prototype
Deliverables: 16 interactive screens and states, Figma file with components, design spec
Tools: Claude Design, Figma
Status: Concept · not built or tested with users yet

Eight iPhone screens of Closet, left to right: a closed glass wardrobe on a cloud sky with the note Today: Career fair 2 PM, rain after 5; the same wardrobe with its doors open, shelves lit and labeled hanging tops, jackets, shoes, folded knits, trousers, bags and accessories; Today's pick showing three outfit tabs and a Polished outfit of navy oxford shirt, charcoal blazer, charcoal trousers, chelsea boots and tote; the Why I picked this panel with three reasons, each tagged with its source, and a confidence meter; the Not this sheet with reasons such as too formal and wore it to this group last week; the next outfit with an Adjusted for next time note and Undo; an Ask answer for an AI meetup with its reasons; and Privacy settings with a switch for each calendar and style rules for modest dress. — From closed doors to dressed: open the wardrobe, see why each outfit was picked, and correct it in one tap. Scroll sideways to see every screen.

The problem

A student's day can run from a 10 AM class to a 2 PM career fair to an evening meetup. Picking one outfit that works for all of it, the weather, and what's actually clean is a small decision that eats a busy morning.

Most style apps answer with shopping or a feed of other people's clothes. The question is simpler: what should I wear today, from what I own?

The idea

Closet reads the day's calendar and forecast, then picks three outfits from clean items in the wardrobe, with no prompt needed.

Every pick says why and where that reason came from. If it got the dress code wrong, one tap fixes it, and Closet says what it learned with an undo.

How a pick is made

1 · ContextReads the dayOnly the calendars the student turns on, plus the forecast. Event pages give the dress code when they state one.
2 · WardrobeUses what's cleanItems in the laundry or worn recently sit out. Nothing to buy, ever.
3 · PickExplains itselfThree outfits, each with reasons, the source of each reason, and a confidence level.
4 · StudentDecidesWear this, swap one piece, or Not this. Corrections change future picks, and every change can be undone.

Inside the prototype

Three Closet screens. A Why I picked this panel: career fair means business casual, from the event page; rain after 5 means boots, from the forecast; the blazer was last worn three weeks ago, from the outfit log; with high confidence. A one quick question card: the Startup Pitch Night page doesn't say what to wear, with Casual, Business casual, Formal and Not sure, above a smart casual pick marked low confidence. An Ask answer for an AI meetup with its reasons, sources and high confidence.

Every reason names its source

Each pick lists why, and every reason carries a chip: from the event page, the forecast, your outfit log or your feedback.

Confidence is shown, not hidden. High when the event page states a dress code, low when Closet is guessing, and "Confirmed by you" once the student fixes it.

When it doesn't know, it asks one short question instead of guessing, and suggests a safe middle until it hears back.

Three Closet screens. The dress code corrected to Casual with the note: career fairs are now casual and I'll remember it, with Undo. The Not this sheet over the rejected Polished outfit with Too formal selected and What I'll change: career fairs will lean one step more casual, Career Services events only, and a note that Closet never comments on bodies, weight or fit. The next outfit, Relaxed, under an Adjusted for next time note with Undo.

One tap to fix, with an undo

Wrong dress code? Three chips fix it for this event, and Closet says it will remember.

Not this opens over the outfit being rejected, so the reason sticks to the right pick. Closet shows exactly what it will change before moving on.

The reasons are about clothes and plans only. Closet never comments on bodies, weight or fit.

Three edge-case screens. No events on your calendars today, with chips for study day, work shift, going out and staying in, and a weather-only Easy Saturday pick marked low confidence. Only 9 clean items today, so 1 outfit instead of 3, with a checklist to mark laundry as clean. You're offline: this is the pick made at 7:02 AM, with a Try again button and reasons stamped with the time they were checked.

Honest when the data runs out

No events, a laundry-day wardrobe, offline: each state says what's missing in plain words and still offers a next step.

Confidence drops to match. A weather-only pick is labeled low confidence, and offline reasons show when they were last checked.

It never blames the student for missing data. It asks, or works with what it has.

Three Closet screens. Quick setup step 1: a camera view of a closet rail with framing corners and the hint good light, whole rail fits. Step 2: I found 8 items on your rail, with each item's type, color and dress code as tappable tags, a confirm check per item, and a progress bar at 8 of 10 items. Privacy and controls: a switch for each calendar with internship and personal off, and style rules to keep shoulders and knees covered or always include a head covering.

Value in one photo, on the student's terms

One photo of a closet rail becomes separate items. The student checks each tag, and anything the AI is unsure of is flagged in words.

Calendars are opt-in one by one. Work and personal can stay off, and photos are processed on the phone.

Style rules cover modest and cultural dress, and learned preferences are listed so they can be removed. Delete everything is one button.

Key decisions

Delight first, then speed.The wardrobe doors slide open on the first few visits. After that they open on their own and land on today's pick, and Reduce Motion swaps the slide for a crossfade.
Only what you own.No shopping and no feed. The trade-off: suggestions are only as good as the wardrobe Closet knows about, so setup has to be fast.
Explain, then let people fix it.A pick without reasons asks for blind trust. Sources, confidence and one-tap corrections make it checkable.
Say state in words, not just color.Clean, in laundry and worn recently each have a label, and every item is announced to screen readers with its state, like "Navy oxford shirt, clean."

What exists and what doesn't. A clickable prototype with 12 screens and 4 edge cases, a Figma file with editable layers, components and a linked prototype, and a design spec with measured contrast. Wardrobe recognition, calendar reading and the outfit logic are designed, not built, and the wardrobe is a fictional student's. Next: run the morning flow with 5 students and measure time from opening the app to "Wear this," and how often they trust or correct the reasons.

Click through the prototype Figma file