This document outlines the design of a mobile app called "Pocket" that allows users to identify and purchase clothing items they see someone else wearing in public. The design process includes creating user profiles, defining the key tasks, researching similar products/users, sketching wireframes, and proposing next steps. The proposed app would use computer vision to recognize clothing when the user takes a photo, then provide matching items for purchase. Privacy concerns are noted as a potential barrier since photos would be taken of people without consent.

1. POCKET a “Find this garment” app
Gavin Johns - UX Designer
View more work at www.gavinpjohns.com , password “hotoffthepress”

2. APP IDEA
Imagine a mobile app that enables you to
impulsively identify and purchase a garment or
accessory that you see in real life. Design an end-
to-end flow covering the experience from the
moment of awareness to purchase completion.

3. “I’m going to pocket that outfit.”
- fashionista in the near-future

4. PROCESS
1. User Profile
2. Job to be done
3. Task Flow / Assumptions
4. Research
1. Product
2. User
3. (In)validate
5. Sketching
6. Wires
7. Next Steps

5. USER PROFILE
Has FOMO
& wants Bargains
Uses for
Convenience
Saves Time &
Gets Satisfaction

6. USER PROFILE
Saves Time &
Gets Satisfaction
• Returns 50% of ordered clothing every month.
• Frustrated by inconsistency of clothing
represented online.
• Spends 2 hrs/wk. researching clothes to buy.
• Frequently sees people wearing fashion in real
life worth buying.

7. JOB TO BE DONE
When I see someone wearing
something I admire in-person,
I want to figure out what it is and
order it, so I can finally be satisfied
with the real product and save time.
SITUATION
MOTIVATION
OUTCOME

8. SITUATION MOTIVATION OUTCOME
AWARENESS DISCOVERY EVALUATION PURCHASE SATISFACTION
See item of clothing/
accessory in-person
Open Pocket, and
Capture outfit with
Camera
View outfit
View match list
View item Add to cart
View cart
Checkout
Confirmation Delivery
Happy!

9. ASSUMPTIONS
Computer Vision - A phone’s object recognition
can detect people and clothing with high %
confidence within seconds and while moving.
Clothes on People - The clothes we want are
being worn by people we see in-person.

10. RESEARCH
Google Shopping
Express
Amazon Influence Barriers
PRODUCTS USERS

11. PRODUCT RESEARCH Express
• Great purchase flow
• Organized by store.

12. PRODUCT RESEARCH Amazon
• Interesting object recognition indicators
• Only recognizes one object at a time
• Great for branded items, but hard time
with more “generic” looking items.

13. USER RESEARCH Influence
Social Proof - Reviews & Ratings
Liking - Friends are buying this…
Scarcity - Low availability (2 left)
Reciprocity - Discount through sharing?
Authority - Brands? People?
Commitment - Bookmarking? Sharing?
WHAT FACTORS INFLUENCE THE PURCHASE DECISION?

14. USER RESEARCH Barriers
Privacy - Potentially seen as invading other’s
privacy if taken without permission.
Self Image - Avoiding hostility or perception of
invading others’ privacy.
WHAT FACTORS MIGHT KEEP PEOPLE FROM USING POCKET?

15. USER RESEARCH Barriers
To (in)validate my approach of using the camera to capture outfits on people in public, I asked
three friends to go outside and find someone wearing clothes they liked, then photograph
them. Afterward, we discussed their experience.
“He caught me… it was weird.” - Adam
“I just acted like I was taking a picture of
something behind them.” - Leona
“I actually asked them if it was okay.They even
posed!” - Vanessa

16. USER RESEARCH Barriers
Based on their experiences, I decided to continue
on with the assumption that using your phone to
capture another person’s outfit is worth exploring
and not disproven.

17. SKETCHING
I really drilled into the
Personas and started
writing more Tasks
that could be
incorporated in the
the Task Flow.

18. SKETCHING

19. SKETCHING
I quickly iterated
different versions of
each screen.

20. SKETCHING Wire Progression

21. SITUATION MOTIVATION OUTCOME
AWARENESS DISCOVERY EVALUATION PURCHASE SATISFACTION
See item of clothing/
accessory in-person
Open Pocket, and
Capture outfit with
Camera
View outfit
View match list
View item Add to cart
View cart
Checkout
Confirmation Delivery
Happy!

22. SITUATION MOTIVATION OUTCOME
AWARENESS DISCOVERY EVALUATION PURCHASE SATISFACTION
See item of clothing/
accessory in-person
Delivery
Happy!
!
:)

23. HOME
Material Color Palette
Test what works best on Home
screen, i.e. - Brief Tutorial,
Recommended, Friends
Purchased, Popular,
all the above.
Opens the Capture Screen
via Camera

24. CAPTURE
People are surrounded by
dynamic boxes as their clothing
and accessories are being
recognized and matched.
Flip the camera for capturing
outfits behind you in sneaky-
selfie mode.
“Finish” is disabled as the
computer vision starts to analyze
the person.
Close

25. CAPTURE Active
Dynamic white nodes will trace
geometry during object
recognition process to convey
what is being traced.
“Finish” button allows user to move
on when the items they’re interested
in are loaded and they don’t want to
wait; otherwise it will move on when
all objects are recognized in the box.
Dynamic “check-mark” indicator
shows when object is recognized and
follows object as you move. These
are important so you know if and
what /when garments are being
captured for matching.
Dynamic progress indicator
follows object as you move and
turns into “check-mark” when
object is recognized.

26. VIEW OUTFIT
If more than one match per
object (shirt and pants), then
screen will display in horizontal
scrolling grid preview.
Name and price.

27. VIEW TYPE
Each option displays social proof,
price, % confidence and ability to
add to cart from full grid view.

28. VIEW DETAILS
1
Some users might be able to skip
straight to this screen from the
capture view if the object
recognition has a high enough
confidence % to know it’s the same
article of clothing.
Add to cart, then go to cart
Name and price.
Selectable option like size
More info on reviews
Save / Bookmark item

29. CART
Item in Cart will stack in a list with
name, price and quantity.

30. CHECKOUT
During checkout, you can choose
your delivery / billing address and
payment method from your profile.
Billing details

31. CONFIRMATION
Opportunity to show other
recommended items.
Opportunity to invite friends and
receive discount or other promotion
Order details like tracking and
delivery address.
Thank you!!

32. NEXT STEPS
Other “Jobs to be done”
1. Capture multiple people
2. Create style profile
3. Saved outfits?
4. Photos in reviews?
5. Recommend items?
6. Popular items?
Glass app
1. Prompts you when an outfit matches
your profile in case you miss it.
2. Voice activated discovery
3. 3D model vs. Still image capture

33. fin. lemme here those
questions!
thank you!
@gmail
@
gavinpjohns
.com