pocket

POCKET a “Find this garment” appGavin Johns - UX Designer

View more work at www.gavinpjohns.com , password “hotoffthepress”

http://www.gavinpjohns.com

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.

“I’m going to pocket that outfit.”

- fashionista in the near-future

PROCESS1. 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

USER PROFILE

Has FOMO & wants Bargains

Uses for Convenience

Saves Time & Gets Satisfaction

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.

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

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!

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.

RESEARCH

Google Shopping Express

Amazon Influence Barriers

PRODUCTS USERS

PRODUCT RESEARCH Express

• Great purchase flow • Organized by store.

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.

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?

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?

USER RESEARCH BarriersTo (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

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.

SKETCHING

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

SKETCHING

SKETCHING

I quickly iterated different versions of each screen.

SKETCHING Wire Progression




Open Pocket, and Capture outfit with

Camera View outfit

View match list

View item Add to cart

View cart

Checkout

Confirmation Delivery

Happy!




Delivery

Happy!

!

:)

HOME

Material Color PaletteTest what works best on Home screen, i.e. - Brief Tutorial, Recommended, Friends Purchased, Popular, all the above.

Opens the Capture Screen via Camera

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

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.

VIEW OUTFITIf more than one match per

object (shirt and pants), then screen will display in horizontal

scrolling grid preview.

Name and price.

VIEW TYPE

Each option displays social proof, price, % confidence and ability to

add to cart from full grid view.

VIEW DETAILS1

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

CART

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

CHECKOUT

During checkout, you can choose your delivery / billing address and

payment method from your profile.

Billing details

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!!

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

fin. lemme here those questions!

thank you! @gmail

@

gavinpjohns

.com

pocket

Technology