The document outlines early wireframes and iterations for Sizable, a mobile app that allows men to find clothing that fits their body measurements by selecting their size on a virtual body and seeing search results for shirts, pants, and outfits that fit. Key screens include sliding to adjust size measurements, viewing search results filtered for items that fit the selected size, and seeing a map of nearby stores where matching items can be tried on or purchased. The wireframes show refinements to prioritize fit and add options for selecting body type silhouettes in response to usability testing feedback.
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Case Study: Sizable, Men's Fashion App
1. SIZABLE
A Men’s Fashion App | Version 3
For men who can't find clothes that fit, Sizable is a male fashion app. Unlike Mr. Porter,
Sizable only shows clothes that fit.. Because we believe anything looks good when it fits,
and that anyone can find their “Start-Up Look”.
@initialsJZ | Two Weeks In October 2013
Monday, March 3, 14
2. Key Screen Flow
1.0 Slide To Your Size
Increase or decrease your jacket size,
waist and inseam measurements. The
figure and the numbers on the screen
update as you slide.
Monday, March 3, 14
2.0 Search Results
Swipe to view individual "Items" and
entire "Outfits" that fit your
measurements. Can get more detail on
items.
3. Map of Stores
View stores nearby where you can try
on or buy clothes that fit you.
6. Personas
Last Minute Versus Planned Out
Name
Eric Sway
Neil Lee
Persona
Get in and get out Quarterback
Tailored Hipster
Age
Occupation
Body Type
24
Consultant, IBM
Broad Shoulders
31
Computer Scientist, Healthcare Start Up
Tall & Skinny
Quote
“What does a model who is 6’1” have to do with me? Sizes
based on him make me not want to buy the brand.”
“Start up founders are trendy. There’s an expected wardrobe”
•Eric is in Soho for one hour and remembers he needs three
Goals
Monday, March 3, 14
•Fit into the start-up culture. Know how to pull together outfits. He
new shirts.
•Only wants to try on slim shirts that are not boxy and would
fit him.
•Know what brands other broad-shouldered guys wear
Show he is edgy, but doesn’t want to be ridiculed for being “too out
there”.
•Share street fashion photography and pics of clothes he bought.
Talk to his co-workers about style.
•People asking him “where did you get that?”.
7. ERIC SWAY
Get In and Get Out Quarterback
“My shoulders don’t come down to my knees”
BACKGROUND
✤
Eric is a first year consultant. His wants
to gain visibility and get on important
projects.
PAIN POINTS
GOALS & NEEDS
Misses playing football though he still
goes to the gym with friends who
stayed in Chicago.
✤
His build doesn’t even
out and hates clothes
that make him look like
a clown.
Loves his girlfriend and taking her to
nice dinners.
✤
Size charts. What does
Tom have to do with
me? He’s a model, 6’1”?
This charts just make
me not want to buy it.
✤
✤
✤
Lost 10 pounds and needs clothes for a
trip to Italy.
Spends $300 on 8 pieces of clothing
once a season. Otherwise picks up any
one thing he needs after work.
Likes GQ because it tells him how to
dial down his pounds, and amp up his
watch purchases.
Monday, March 3, 14
✤
✤
✤
Feeling confident and
happy. “If I’m wearing
oversized clothes from
when I was a little bit
bigger. I know everything
is a little bit bigger and it
doesn’t fit well. It’s
already in my head.”
✤
Being able to find things
that will fit his broad
shoulders when he only
has an hour somewhere.
✤
✤
✤
Discovering shirts that
other guys with big
shoulders like.
Wasting time going into
stores and trying things
on that won’t fit him.
Not being able to shop
online.
8. ERIC SWAY
Get In and Get Out
Find A Fit Within the Hour
SCENARIOS
✤
✤
ERIC NEEDS TO BUY A SHIRT WHILE HE IS OUT: Eric
tried on some shirts that don’t fit and only has 20
minutes left to find one for wide shoulders that is not
boxy. Eric looks for stores nearby but has no idea which
stores to try next. He tries the Sizable app and only wants
to find shirts that fit. likes that he won’t have to waste
time Cool, he did not know one of his favorite brands
opened a new store nearby. never would have thought
about that brand, and didn’t know that store was on the
same block. He goes and tries on two styles. One fits! He
buys three colors of that style and makes it back to the
office in time.
ERIC NEEDS A NEW DEFAULT BRAND THAT FITS:
Eric’s favorite Abercrombie style no longer fits! Eric
wishes he bought out the old cut. He needs a new brand.
Friends have been talking about Sizable and that brands
change their sizes all the time. Before the weekend, Eric
looks at the other brands men his size on Sizable like.
And the styles that they voted fit best. He decides to go
to a mall that has more shirts that Sizable says should fit
him.
Monday, March 3, 14
FEATURES
✤
ERIC NEEDS TO BUY A SHIRT WHILE HE IS
OUT:
✤
✤
Body selector
✤
GPS Auto-locate
✤
✤
Search bar
Map of closest stores/online product page
ERIC NEEDS A NEW DEFAULT BRAND THAT
FITS:
✤
Brand selector
✤
Voting
✤
Watch list
10. NEIL CHECKERS
Silicon Alley Mover & Shaker
“I like the The Zach Braff blazer-over-hoodie look”
BACKGROUND
✤
Neil is a finance guy turned coder. He
works at a NYC start-up. Emulates
founders: nerdy, ambitious, hipster.
✤
✤
Goes to indie shows, follows street
photography on Instagram. It has to be real
life, not runways.
✤
PAIN POINTS
Shops with guy friends who vote what’s
cool or not cool. They text him pictures
“check out these shoes that I got.”
✤
✤
Trying to strike happy medium between
looking professional and keeping a casual
vibe. Nice sneaks, watch, long fitted shirt,
jeans or fitted pants...skinny tie, tailored
and polished like Ryan Gosling...Founders
of Bonobos, Warby Parker.
Spends $200 on clothing for one hour a
month, up to $600.
Monday, March 3, 14
✤
Not fitting in. If you
come in with a full wall
street suit, you would
be really out of place.
But this isn’t Silicon
Valley either where
Mark Zuckerberg
shows up in hoodie,
baggy jeans, and
Birkenstocks. So what
works?
Wearing something
way out there. A
patterned sweater can
look subdued when
you buy them, but
loud when you wear it.
GOALS & NEEDS
✤
Knowing trends and
upping his game: “Start
Up Founders are trendy,
it’s kind of a thing in our
generation to put forth
the effort. There’s an
expected wardrobe.
✤
Having people ask him
“where did you get that?”
Having friends tell him
they like him wearing his
brown dress shoes, dark
green jeans and blue
patterned shirt, together.
✤
Discovering more brands
that fit.
11. NEIL CHECKERS
Silicon Alley Mover & Shaker
Fits Into Work Culture
SCENARIOS
✤
✤
NEIL NEEDS TO UPDATE HIS WARDROBE FOR THE
START UP ENVIRONMENT: Neil can no longer mix
dress shirts and jeans differently every morning and
needs some new clothes. He hears that Sizable warns
when ironic double breasted jackets are trending in
advertising, but not yet for tech. Cut also warns against
it for skinny guys like him, but recommends wafered
shirts. That weekend, Neil and his girlfriend go to H&M
and picks up a wafered shirt to go under the blazers he
already has.
NEIL NEEDS AN EASY WAY TO ADD HIMSELF TO
THE STYLE CONVERSATION AT HIS START UP: Neil
sees colleagues at lunch voting on the Sizable app, on
cuts that fit or that they could wear in their industry.
When colleagues at work ask him where he got his
wafered shirt, he asks them if wafered shirts are in tech
yet. They go on the Sizable app to see which industry
the wafered shirt is being worn in. They see it is being
worn in tech. It’s trending, and post on Facebook “vote
for this if you work in tech.”
Monday, March 3, 14
FEATURES
✤
NEIL NEEDS TO UPDATE HIS WARDROBE
FOR THE START UP ENVIRONMENT:
✤
✤
✤
Cut & style content, indexing, or sizing
database
Warnings & recommendations
NEIL NEEDS AN EASY WAY TO ADD
HIMSELF TO THE STYLE CONVERSATION
AT HIS START UP:
✤
Voting
✤
Sharing
16. Site Map
Home
1.0 Slide
To Your Size
2.0 Search Results
2.2 Outfit
2.1 Item
2.1.1 Item
Detail
3.0 Map of Stores
3.1 Store
Detail
Monday, March 3, 14
3.2 List
19. Iterations 1, 2 & 3
Not social, not professional, fit first
Carrier
Carrier
12:00 PM
SELECT
OR
Email Address
Never tip the balance
Password
feet inch
SIGN IN
Jacket Size =
Skinny &
Tall
Sign In To Vote
1/2 Hipster + 1/2 Tailored
5' 9"
Hoodie
Skinny Jeans
32"
Body Type = Broad Shoulders
CHANGE MY BODY TYPE
Wool Blazer
Brown Oxfords
inches
Skinny &
Not So
Tall
F
Waist =
29"
inches
-
✤
1. ITERATION: Not Social,
Not Professional, Fit First
12:00 PM
SIZABLE My Account Settings
START UP LOOK
SLIDE
Height =
Broad
Shoulder
s
Carrier
12:00 PM
SIZABLE Outfit
SIZABLE Body Types
12
20
Hipsters
+
FIT?
12
CHANGE BODY TYPE
Skinny Jeans
20
10. Sign In / My Account
7. Body Types
Carrier
Carrier
12:00 PM
< Back
Carrier
Back
SIZABLE Body Types
CLICK ALL THAT APPLY
2. ITERATION: Fit First
& De-prioritize Styles
ALL STYLES
ALL PROFESSIONAL
OUTFITS
Broad Shoulders
3
Adver
tising
Phar
ma
Long Arms
3
Hoodies
2
72
1
52
Decrease Inseam
Add Extra Padding
SET MY SIZE
3. ITERATION: Fit Fit
& Add Body Silhouette
2
Jeans
22
1
Abercrombie
Ra
2
3 Blocks away
32
✤
List
SIZABLE Store Map
Body Type
Refine Later
✤
12:00 PM
12:00 PM
SIZEABLE : All
t-shirt
70
100 Mercer @ Lafayette
111
Cargo Pants
5. Map
7. Body Types
Carrier
Carrier
12:00 PM
SIZABLE
SIZABLE
SLIDE TO
YOUR SIZE
Carrier
< Back
12:00 PM
12:00 PM
List
SIZABLE Store Map
SIZABLE Item Detail
ABERCROMBIE
A
Slim Shirt
S
100 % Cotton, Combed By Monks
D
3
2
Jacket Size =
42"
3
inches
2
Waist =
29"
1
inches
Pic: Monks
Inseam =
32"
inches
FIND CLOTHES YOUR SIZE
1. Home
Monday, March 3, 14
1
Abercrombie
3 Blocks away
100 Mercer @ Lafayette
FIND STORES WITH SLIM SHIRT
3. Item
5. Map
2
Ra
70
111
20. Iterations on Social
Optimized by Usability Testing
✤
Not Social, Not Professional
Carrier
Carrier
12:00 PM
Carrier
12:00 PM
SIZABLE My Account Settings
SIZABLE Outfit
Never tip the balance
ALL PROFESSIONAL
OUTFITS
Password
SIGN IN
Hoodie
Wool Blazer
Body Type = Broad Shoulders
CHANGE MY BODY TYPE
F
Skinny Jeans
Body Type
ALL STYLES
Email Address
1/2 Hipster + 1/2 Tailored
12:00 PM
SIZEABLE : All
t-shirt
Sign In To Vote
START UP LOOK
Back
12
20
Brown Oxfords
Hipsters
Skinny Jeans
Adver
tising
Jeans
Phar
ma
Hoodies
72
52
22
32
12
FIT?
20
Cargo Pants
10. Sign In / My Account
Monday, March 3, 14
21. Iterations on Fit
Optimized by Usability Testing
✤
Prioritize Fit
& Add Body Silhouette
Carrier
Carrier
12:00 PM
< Back
SIZABLE Body Types
SELECT
OR
SLIDE
12:00 PM
Carrier
CLICK ALL THAT APPLY
SLIDE TO
YOUR SIZE
Refine Later
Height =
Broad
Shoulder
s
5' 9"
Skinny &
Tall
Broad Shoulders
Jacket Size =
feet inch
Jacket Size =
32"
12:00 PM
SIZABLE
SIZABLE
SIZABLE Body Types
42"
inches
Long Arms
Waist =
29"
inches
inches
Skinny &
Not So
Tall
Waist =
29"
Decrease Inseam
Inseam =
inches
-
+
SET MY SIZE
CHANGE BODY TYPE
7. Body Types
Monday, March 3, 14
32"
Add Extra Padding
7. Body Types
inches
FIND CLOTHES YOUR SIZE
1. Home
24. Key Screen Flow
1.0 Slide To Your Size
Increase or decrease your jacket size,
waist and inseam measurements. The
figure and the numbers on the screen
update as you slide.
Monday, March 3, 14
2.0 Search Results
Select from three categories, Shirts,
Pants, & Outfits. Shirts are individual
items, pants are individual items, while
Outfits are groups of items.
3. Map of Stores
View stores nearby where you can try
on or buy clothes that fit you.
25. Wireframe | 1.0 Slide to Your Size
Notes
1. Slider input for Jacket Size measurement
The figure and the numbers update as you increase or
decrease the value.
2. Slider input for Waist measurement
The figure and the numbers update as you increase or
decrease the value.
5.
3. Slider input for Inseam measurement
The figure and the numbers update as you increase or
decrease the value.
1.
4. Search Function
Clothes are indexed by their measurements and only returned
are clothes that fit the user.
2.
5. Goes to Navigation Picker
3.
4.
Monday, March 3, 14
26. Wireframe | 2.0 Search Results
Notes
1. Close up photo of a shirt that fits the user's measurements.
2. Goes to 2.1 "Item" screen of a Slim Shirt, in the Shirts
category, that fits the user's measurements.
10.
3. Goes to 2.1 "Item" screen of a Super Slim Shirt, in the Shirts
category, that fits the user's measurements.
1.
4. Close up photo of a pair of pants that fits the user's
measurements.
2.
3.
5. Goes to 2.1 "Item" screen of Slim Flat Front Pants, in the
Pants category, that fits the user's measurements.
4.
5.
6.
7.
6. Goes to 2.1 "Item" screen of a pair of Skinny Jeans, in the
Pants category, that fits the user's measurements.
7. Picture of a Style, or a whole Outfit worn by the model that fits
the user's measurements.
8. Goes to 2.2 "Outfit" screen of a Start Up Look outfit.
8.
9. Goes to 2.2 "Outfit" screen of a Madman Look outfit.
9.
Monday, March 3, 14
10. Navigation. Goes to 2.1 "Item" screen and 2.2 "Outfit" screen
of the app.
27. Wireframe | 3.0 Map of Stores
Notes
1. Pin of the closest store where the user can try on or buy the Item.
For example, buying Abercrombie at the Abercrombie flagship store.
Goes to 3.1 "Store Detail".
7.
8.
3.
2. Pin of the second closest store where the user can try on or buy the
Item.
For example, buying Abercrobie at Barney's Co-op or a department
store. Goes to 3.1 "Store Detail".
3. Pin of the third closest store where the user can try on or buy the
Item.
For example, a further Abercrombie. Goes to 3.1 "Store Detail".
2.
4. Go To My Location Function
Shows user where he is located on the map, his GPS location.
1.
5. Name of the second closest store where the user can try on or buy
the Item.
Swipe to view. For example, name of Barney's Co-op or a
department store where he can buy Abercrombie. Shows how many
blocks away the store is. Goes to 3.1 "Store Detail" screen.
4.
6.
5.
6. Name of the closest store where the user can try on or buy the Item.
Name of store where he can buy the Item he selected. Show how
many blocks away the store is. Goes to 3.1 "Store Detail" screen.
7. Navigation
Goes to 1.0 "Slide to Your Size screen, 2.1 "Item" screen and 2.2
"Outfit" screen of the app.
8. Goes to 3.2 "Store List" screen
User can see a list view of these stores.
Monday, March 3, 14
28. Results
✤
“I was shopping this weekend and this app would have saved me
so much time.” -- User feedback
✤
✤
Sizable allows men to input their size and filter first. It heals their
fit pain points and makes them feel successful when they need to
buy.
Sizable allows brands and retailers to increase conversion, and
decrease discovery and acquisition costs.
Monday, March 3, 14