Kaye Kagaoan | Senior UX Designer
black lapel intro.png

Find Your Fit

Outfit personalization for Black Lapel
(Desktop, 2016)

Brief 02.png

Brief

Black Lapel wanted to create a service that would personalize outfit recommendations (suit/blazer/pants/shirt combinations) to its customers. The service would be available to new users and existing users.

My task was to create a user flow and wireframes that illustrate how Black Lapel would offer an outfit recommendation to our user.

 

CLIENT

Black Lapel

RESPONSIBILITIES

Research & Design

TOOLS

Photoshop, Sketch, Draw.io, Pen and Paper

TIMELINE

One week

 
 

The User

John, 24

John is a first-time visitor to the Black Lapel site. He heard about the personalization service that Black Lapel is rolling out and he wants to give it a go!

He’s going to Vegas for the weekend and wants to look good and keep cool during the day while he’s exploring the area and at night when he’s hopping from casino to night club.

 

The Problem

How might we help John personalize his outfit from Black Lapel?

 
 
 

Process

Since a persona (“John”) was pre-defined in the brief, I instead conducted a brief survey pertaining specifically to the outfit personalization feature.

Survey responses gauged insights on menswear and outfit personalization interest among 10 males in their early to mid-20s.

 
Process Copy.png
 
 

Find Your Fit

Based on survey responses, I came up with an outfit recommendation engine called Find Your Fit. A new or existing user can take a short quiz that will place him under one of five style profiles. Black Lapel stylists initially recommend three outfits based on his style profile (and, in the future, his shopping habits): one Day, one Night, and one Flex (day-to-night) outfit.

 
 
FYF02.png
 
 

Sketches

Click to enlarge

 

User Flows

 
gZFjDfuw.png
 
 

High-Fidelity Mockups

Home Page with Find Your Fit Hero Image

annotatedmockup1.png
 

Find Your Fit Quiz Page

annotatedmockup2.png
 

Style Profile & Recommended Looks

annotatedmockup3.png
 

“Get the Look” Recommendations

annotatedmockup4.png
 

Product Detail Page

annotatedmockup6.png
 

Fit Customization Page

 

Customization Final Screen & Add to Bag

annotatedmockup7.png
 

New User Sign-Up Form

annotatedmockup8.png