UI/UX

KASANE

portfolio
portfolio
portfolio

16 JUN 2024

Overview

I designed Kasane end to end: research, information architecture, interaction and visual design, plus usability testing and iteration. The project lasted about six to eight weeks—one week to map the landscape and define scope, two weeks to shape concepts and build prototypes, one to two weeks to run tests and fix what broke, and the rest to tidy the system and docs. I worked in Figma/FigJam and kept research notes and decisions in Notion. Kasane arranges fashion by style, mood, and occasion so people spot a look first and then pick the pieces without losing the vibe.


Background

Most fashion apps still start with brands and long product lists. That flow suits searching, not deciding. Our audience—women in their twenties and early thirties who want guidance or want to try new styles—often knows the feeling they’re after but can’t quickly turn that into a clear look with items they can buy now. Kasane flips the order: start with the look to create the spark, then show the facts (silhouette, fabric, price range) right where the decision happens.

Problem

On a typical e‑commerce site you bounce between brands, categories, colors, and sizes. Building a full outfit takes work, and the “does this feel like me?” question is left unanswered. The crucial details—fit, fabric behavior, styling context, stock, budget—arrive in pieces across different pages, which slows people down right before add‑to‑cart. Many apps also ask for an account too early and kill the momentum.

Goals and how I measured progress

My goal was to shrink the gap between “I like this” and “I’ll buy this.” Within about ten seconds of landing, people should see at least one look worth opening. On the look page, the first screen should already tell them the silhouette, the fabric story, and roughly where the price sits. Before signing up, they should be able to save and add to cart so curiosity turns into action instead of a wall. Early on I checked this qualitatively in tests; once live, I plan to confirm with experiments and basic analytics.


Market Research

This market research analyzes major competitors in the fashion and shopping experience space — SSENSE, Farfetch, Whering, Zara, and SHEIN. While each excels in different areas, all reveal gaps that create an opportunity for Kasane.

Luxury platforms like SSENSE and Farfetch emphasize brand-driven discovery but offer very little personalization around the user’s style. Whering focuses on helping users style their existing wardrobe, yet it lacks integrated shopping functionality. On the opposite end, fast-fashion players like SHEIN are affordable and fast, but provide weak styling guidance and low emphasis on personal expression.

Kasane fills this gap by placing style first, not brand — combining smart outfit recommendations powered by AI with a seamless shopping experience. Kasane helps users build personal style while discovering pieces that truly match who they are.


User Personas

Through qualitative and market research, I constructed three representative personas that reflect Kasane’s key audience segments.

By understanding their style goals, budget limitations, and pain points, I uncovered an opportunity to shift from brand-first shopping to a style-first experience — shaping both UX priorities and feature scope.




Overview

I designed Kasane end to end: research, information architecture, interaction and visual design, plus usability testing and iteration. The project lasted about six to eight weeks—one week to map the landscape and define scope, two weeks to shape concepts and build prototypes, one to two weeks to run tests and fix what broke, and the rest to tidy the system and docs. I worked in Figma/FigJam and kept research notes and decisions in Notion. Kasane arranges fashion by style, mood, and occasion so people spot a look first and then pick the pieces without losing the vibe.

Background

Most fashion apps still start with brands and long product lists. That flow suits searching, not deciding. Our audience—women in their twenties and early thirties who want guidance or want to try new styles—often knows the feeling they’re after but can’t quickly turn that into a clear look with items they can buy now. Kasane flips the order: start with the look to create the spark, then show the facts (silhouette, fabric, price range) right where the decision happens.

Problem

On a typical e‑commerce site you bounce between brands, categories, colors, and sizes. Building a full outfit takes work, and the “does this feel like me?” question is left unanswered. The crucial details—fit, fabric behavior, styling context, stock, budget—arrive in pieces across different pages, which slows people down right before add‑to‑cart. Many apps also ask for an account too early and kill the momentum.

Goals and how I measured progress

My goal was to shrink the gap between “I like this” and “I’ll buy this.” Within about ten seconds of landing, people should see at least one look worth opening. On the look page, the first screen should already tell them the silhouette, the fabric story, and roughly where the price sits. Before signing up, they should be able to save and add to cart so curiosity turns into action instead of a wall. Early on I checked this qualitatively in tests; once live, I plan to confirm with experiments and basic analytics.

Process

01 / Empathize — Research and insights

I started with a close read of SSENSE, FARFETCH, WHERING, ZARA, and SHEIN. I paid attention to how each site balances images and text, how they move people from a look to the actual items, where login appears, and what mobile gestures feel heavy. In interviews I asked three things: how people recognize their style, how they move between apps to decide, and which bits of information remove doubt about fit, fabric, and spend. Three clear patterns showed up. People read a look by silhouette first, then by fabric feel and details; brand and price come later. Concrete scenarios beat abstract tags—“wedding guest,” “office,” or “weekend monochrome” gets you to a shortlist faster than “tops” or “trousers.” And hard login gates cause obvious drop‑offs; people prefer to browse first and sign in when saving their first find.

02 / Define — What the design has to do

I framed the job in three parts. First, the look page has to tell the story in a single glance: what shape it is, how the fabric behaves, and roughly what it costs. Second, it must translate inspiration into a shoppable list without losing the styling logic, so swaps feel intentional instead of random. Third, it needs to guide people toward saving, adding to cart, and checking out without breaking the flow. I kept three reference personas in mind while making trade‑offs: a creator who invests time to look distinct, a student who wants reliable daily outfits with little effort, and a creative director who cares a lot about materials and finish.

03 / Concept and architecture — From magazine to decisions

The home screen behaves like a small magazine. You start with images, very little text, and entry points that mix occasion and style—Wedding Guest, Office, Weekend, Date Night—plus quick refiners like Minimalist, Monochrome, Airy, Oversized. Opening a look puts three things up front: a one‑line mood statement, small interactive tags for silhouette and fabric, and inline color/size state. Right below that is the breakdown of the look. Each item shows a suggested swap—either a friendlier price or a material‑equivalent option—and a short note on how that change shifts the overall feel so people can mix with intent.

To avoid page‑hopping, product details open in place inside the look. You can zoom texture, skim a short fit note, and read care info without losing context. Search isn’t a blank box; it nudges you to describe a scene—“black‑and‑white, minimalist, office‑appropriate”—and returns a handful of focused looks instead of an endless list. Nothing requires an account until the first save. When that happens, a light sheet appears with one‑tap Apple or Google sign‑in and doesn’t block what you were doing.

04 / Prototype and design system — The small details that make it feel right

In low‑fi, I tested how dense the images could be without crushing the hierarchy on a phone. I chose Inter for type because it stays clean at small sizes. The palette is neutral so photos and fabric nuance do the talking. On the look page, the tags are interactive summaries: tap the silhouette tag and you get a simple wear‑feel note and a cropped image that highlights shoulder line or volume; tap the fabric tag and you see composition, approximate weight, and a plain‑language comparison like “crisper” or “light drape.”

I built out the boring but necessary states: image skeletons while loading, low‑stock messaging, a gentle offline placeholder with recovery, and clear errors through checkout. The first‑save prompt is a soft gate. It shows after the action with copy like “We’ve saved this look—sign in to see it across devices,” and you can ask not to be reminded again. For accessibility I set a predictable focus order and meaningful labels so screen readers announce tags and swap notes correctly. Contrast is high enough to read in poor light, and feedback never depends on color alone.

I turned repeating UI into a small system: look cards, tags, embedded product cards, and swap cards, all using the same sizing, spacing, and elevation rules so the rhythm carries from home to look to checkout. Forms and buttons share radius and touch areas so moving from “save” to “add to cart” feels consistent. For performance I limited images per viewport, kept file sizes in check, and delayed loading of off‑screen swap sections so scrolling stays smooth.

05 / Test and iterate — What I watched and what I changed

The study used four linked tasks: find a wedding‑guest look, save it without signing in, add two items from that look to the cart, and narrow results to “black‑and‑white, minimalist” with the assistant. I watched how long people lingered on home versus entering a look, and whether their eyes naturally went to silhouette and fabric on the first screen. The magazine‑style home encouraged exploration, but on some devices the calls to action needed more weight. After reading the fabric sheet, a few people also wanted a short “how this might feel on you” line, not just composition.

I adjusted the first screen so the tags include short labels, which cut down on guessing. The refiner chips now persist while you scroll the breakdown so comparing swaps doesn’t lose context. The soft‑gate copy changed from “Sign in to save” to “We’ve temporarily saved this—sign in to view it across devices,” and the sign‑in control moved to the top‑right with a “later” option, which felt less like a roadblock. At checkout I added a light “complete the look” nudge for accessories, and when you return to the look you can clearly see what you chose versus what’s still suggested.

Deliverables and what comes next

I shipped the end‑to‑end flow, high‑fidelity home and look screens, a small design system, and a test read‑out with the fix list. Next I’ll test the timing of the browse‑first save prompt, tune image density on the home so it grabs attention without tiring the eye, and add a budget toggle inside the breakdown so people can switch between value and distinctiveness. I plan to track first look click, first save, how often people move from look to product, how much the swap area gets used, and how many savers end up signing in so the qualitative signals have numbers behind them.

Notes

A few numbers in this write‑up are placeholders until I plug in real test results and business targets. Once I have the prototype link and data, I’ll replace the placeholders so the case study reads as a fully executed project rather than a plan.

about kasane ?

What does this app do? Kasane recommends personalized outfits based on your style, mood, and occasion — and lets you shop them directly.

What problem am I solving? Many people struggle to define their style or match outfits. Kasane makes styling easier by offering guided, style-based recommendations — not just product listings.

Who are my target users? Women aged 21–35, especially those exploring new styles or needing help with coordination.

market research

“This research explores the strengths, weaknesses, and gaps of key players in the fashion and shopping space to identify opportunities for Kasane to stand out.”

ssense  farfetch  whering  zara  shein

  • SSENSE & FARFETCH focus on brands and luxury aesthetics, but lack deep personalization.

  • Whering helps users style what they already own — no shopping built in.

  • SHEIN is strong in price and speed, but offers poor outfit coordination or guidance.

  • Kasane’s Opportunity: Combine the AI-powered style intelligence of Whering with the shopping integration of SSENSE/FARFETCH, while being style-first instead of brand-first.