designing a billion dollar user experience

50
Designing a billion dollar user experience

Upload: karlyn-neel

Post on 18-Dec-2014

3.024 views

Category:

Documents


0 download

DESCRIPTION

Designing a billion dollar user experienceHow to design a best-in-class global shopping experience for the mobile device.Karlyn Neel will walk you through the design of the core eBay iPhone application, a mobile experience expected to sell over 1.5 billion dollars in goods in 2010. Learn design tips that can take your mobile shopping experience design from standard to stellar!

TRANSCRIPT

Page 1: Designing a billion dollar user experience

Designing a billiondollar user experience

Page 2: Designing a billion dollar user experience
Page 3: Designing a billion dollar user experience
Page 4: Designing a billion dollar user experience
Page 5: Designing a billion dollar user experience
Page 6: Designing a billion dollar user experience
Page 7: Designing a billion dollar user experience
Page 8: Designing a billion dollar user experience
Page 9: Designing a billion dollar user experience
Page 10: Designing a billion dollar user experience

eBay is a leader in mobile commerce and the world's largest online marketplace. eBay is currently accounting for 50% of all mobile commerce in the US.

INTERNET RETAILER: FEBRUARY 16, 2010 $1.2B ACTUAL IN 2009 $2.4B PROJECTED IN 2010

Page 11: Designing a billion dollar user experience

iPhone appsCore appSelling appFashion appDeals appStubhubHalf.com

iPad appsCore app

Android appsCore app

Blackberry appsCore app

eBay mobile device targeting and support

Mobile web m.ebay.com

In more than 190 countries and eight languages.

Page 12: Designing a billion dollar user experience

mobile apps digital content online goods offline retail

m-commerce - where is the money?

$3B $24B $600B $5T

GLOBAL 2008 SALES | SOURCE: MCKINSEY, INFORMA, MORGAN STANLEY

Page 13: Designing a billion dollar user experience

Only 12% of the top 500 internet retailers havemobile-optimized sites.

AQUITY GROUP: SECOND ANNUAL MOBILE COMMERCE AUDIT

Only 7% of have mobile applications.

Only 2% offered applications with checkout.

Page 14: Designing a billion dollar user experience

So how has eBay been able to do that muchvolume in merchandise sold over mobile?• Early in mobile space; leadership• Extremely relevant: big user need & business opportunity• Extremely focused user experience

Page 15: Designing a billion dollar user experience

Your experience should be meaningful &relevant. Ultimately, technology should makepeople's lives easier.

Page 16: Designing a billion dollar user experience

And how has eBay been relevant?

$$$

People want deals. They now have the ultimate toolin their hand on location to help them get them.

Page 17: Designing a billion dollar user experience

Consumers now have the power to seek out the best deals regardless of time or location, doing comparison shopping on the mobile device while in the store at the mall.

Page 18: Designing a billion dollar user experience

Mobile commerce addresses the challenge of providing consumers with the ability to shop at what we call the point of impulse, that point at which the consumer first has a notion or inspiration to purchase a product

If that person is not near a store or their PC at that moment, it very likely may pass and that’s an opportunity lost

Page 19: Designing a billion dollar user experience

How did eBay create this billion dollar UX?

Page 20: Designing a billion dollar user experience

Keep it simple

"If you are going to have less things, they have to be great things."

— John Maeda

•Fight complexity & friction - make those hard choices. •Challenge yourself -how can you make things simpler?•Reduce and organize to focus on the one meaningful idea

Page 21: Designing a billion dollar user experience

I use it more than Ebay.comby SF95014

Great way of watching/buying on Ebay. I actually prefer using the phone app over the website.

Page 22: Designing a billion dollar user experience

Don't make it a mini version of your websitecompliment the experiences

Page 23: Designing a billion dollar user experience

eBay selling complimentary experiences

Page 24: Designing a billion dollar user experience

Define and limit your IAIt’s about making hard choices and exercising constraint.

Page 25: Designing a billion dollar user experience

The featuritus curve

T H E N U M B E R O F F E A T U R E S

US

ER

HA

PP

INE

SS

“Nice, but I wish I could do more”

“I’m so glad they added this”

“Guess I better look at the manual”“I RULE!”

“Hey, where the f... did they put that?!”

“Now I can’t even do the ONE SIMPLE THING

I bought this for...”

“I SUCK!”

HAPPY USER PEAK

KATHY SIERRA

Page 26: Designing a billion dollar user experience

eBay iPhone ScenariosThe following is a list of use cases and list of their associated features that would like to build for 1.0. All features in gray are deferred for future releases.

Use Case

Comparison shopping in the store – can I buy this for cheaper on eBay or not?

Features

+ Search results+ Best Match sort by default+ Allow user to select alternative sort on search results

screen (TES, price, price+shipping)+ Filter search results by category histogram helper+ Completed items search+ Historical pricing data

I want to bid / rebid quickly. + Easy to see / refresh current item bid data+ Efficient bidding interface+ Efficient outbid notification and rebid interface+ Support for: Bid, BIN, Bid/BIN, Multi-quantity+ No support for immediate payment (due to backend

constraints) – either filter from search results, gracefully message user on view item screen or flip the user over to the full website

Contact a seller. Respond to a buyer.

+ Ask a seller a question (ASQ) about a listing+ Respond to a buyer’s ASQ+ Best offer

Am I still winning? What’s happening with my watched items?

+ Home screen status for at a glance info+ My eBay Buying: Watching, Bidding (winning, losing),

Ended (won, lost)

How much stuff is my selling for? + Home screen status for at a glance info+ My eBay Selling: Scheduled, Active (bids, no bids, below

reserve price), Ended (sold, unsold)

I want to browse for something to buy.

I want to take pictures of items I want to sell.

I want to send this listing to a friend.

I want to be notified when I’m outbid or a listing is about to end.

+ Deferred for post-1.0 releases

+ Deferred for post-1.0 releases

+ Deferred for post-1.0 releases

+ Deferred for post-1.0 releases

Page 27: Designing a billion dollar user experience

We were super focused and supported onlythree main use cases:• “Can I get this thing cheaper?” • “I want to bid/rebid last minute”• “I want to check my status”

Page 28: Designing a billion dollar user experience

!"#$ %&'$()&*$)+,-

This focused IA has led to great scalability and limited feature creep.

Page 29: Designing a billion dollar user experience

! !

"#$%&'

()*+*,#)*'$*)-.#/)$/),.0-)$/)0##1#1)*.)/'.2)*'#)33)&'$%$&*#%),+4+*55))

67893:;3!"#$%&''%"()*+

,-"$./

()*+*,#)*'$*)-.#/)$/),.0-)$/)0##1#1)*.)/'.2)*'#)33)&'$%$&*#%),+4+*55))

67893:;3!"#$%&''

012")3"456

()*+*,#)*'$*)-.#/)$/),.0-)$/)0##1#1)*.)/'.2)*'#)33)&'$%$&*#%),+4+*55))

67893:;3!"#$%&''%"()*+

,-"$./

()*+*,#)*'$*)-.#/)$/),.0-)$/)0##1#1)*.)/'.2)*'#)33)&'$%$&*#%),+4+*55))

67893:;3!"#$%&''%"()*+

,-"$./

()*+*,#)*'$*)-.#/)$/),.0-)$/)0##1#1)*.)/'.2)*'#)33)&'$%$&*#%),+4+*55))

67893:;3!"#$%&''

012")3"456

!

!

!

!

!

".%*)<=))))7)/8"89*)9:"+5598+3

;<8=>?-@ ;A2"80=2@;B5/8@;<8=>?-@ ;A2"80=2@;B5/8@

80=2 CDDE8")F5*"GH0

>,$&#)<+1 ?$*&')+*#4

!

!

CDDE8")F5*"GH0"I-)380JC4K"4LI"M4"0NO"<D8?)=E"8*)3)59

@+4#),#A*B

CD%%#0*)<+1B

"'+EE+0-B

"#,,#%B

>$=4#0*/B

F#/&%+E*+.0B

81)7')894G")68H:HHP>88"+3=9*=>*"QE=3">=38"+-)DD)9:"35"3-8"R<

598:>8=3+8EE8>"SGTUV"""""""W

F=2F=EX"/5982"5>*8>+X"?=+-)8>+"?-8?YX"D8>+59=E"?-8?Y

<8EE8>")38/"*8+?>)D3)59

Z)86

GE1$*#1"%[,$['\";BII"CA

(EE,#)+>.1)9JK)KL(MF:::"#$%&'

In store: “Can I get this thing cheaper?” simple search

Page 30: Designing a billion dollar user experience

On the go: “I want to bid/rebid at the last minute” bid flow

!"#$%&'()*#+$%"

,, ,

-./01%&23%&3(43&'())%1&#+)&$/11%+2"5&(+&23%&"%#)6

7(8%&"%92:

*/11%+2&'():

-./1&8#;&'():

<)&=3&<>8?<@A@@?<=A@@

!"#$%&5./1&'()

7(8%&"%92:

*/11%+2&'():

-./1&8#;&'():

<)&=3&<>8BC&?<@A@@

!""#$%&'()%*+,%,-!./%.01%2.%,345$6(7)%#&7$%(8%9&9#$%:($;%<$=$

D.&2.&E5&%F#5

GHH"%&(!.)&>DF&FIGJK&JLMAAA

>5$?=6<@ >AB%$,?B@>C(D$@

!"#$%&5./1&'()

E(F=%D?G%H&)

I079$=%JKLMNK%(=%D(=$O

F()!"#$%&'() M#2$3&(2%8

,

!""#$%&'()%*+,%1<&9$,-!./%.01%2.%,34%5"$6&?#%$)&9&(7

7(8%&"%92:

*/11%+2&'():

C3(HH(+4:

C%""%1:

!#58%+2N:

K%N$1(H2(.+:

OO)&OO3&OO8?OOOPOOOAOO&&OPOOO&'()NP=$$%;9?7)?=)%8#?9%=?9$%;<&""&7:%9(%9<$%Q5

(7$:=$?9;$##$=%I*RST%%%%%%%O%UVM*W

'?B'?#X%D(7$B%(=)$=;X%6?;<&$=;%6<$6YX%"$=;(7?#%6<$6Y

5$$%&9$D%)$;6=&"9&(7

Z&$[

>5$?=6<@ >AB%$,?B@>C(D$@

GHH"%&(!.)&>DF&FIGAAAC%#1$3

*.+9(18&'()*#+$%"

I%Q(%R&#+)&$.+9(18&5./1&'()

7(8%&"%92:

*/11%+2&'():

-./1&8#;&'():

<)&=3&<>8?<@A@@?<=A@@

!""#$%&'()%*+,%1<&9$%,-!./%.01%2.%,34%5"$6&?#%$)&9&(7 !""#$%&'()%*+,%1<&9$%,-!./%

.01%2.%,34%5"$6&?#%$)&9&(7

,B%6(78&=D&7:%H&)X%B(F%6(DD&9%9(%HFB%9<&;%&9$D%8=(D%9<$%;$##$=%&8%B(F\=$%9<$%[&77&7:%H&))$=M

GHH"%&(!.)&>DF&FIGJKAAA GHH"%&(!.)&>DF&FIGJKAAA

>5$?=6<@ >AB%$,?B@>C(D$@ >5$?=6<@ >AB%$,?B@>C(D$@

Page 31: Designing a billion dollar user experience

On the go: “I want to check my status” My eBay

!"#$#%&"#'(#")*&+"(+"%*,)"(+",&&-&-"#*"+'*."#'&"//"0'(1(0#&1"%$2$#33""

4567/89/!"#$%&''%"()*+

,-"$./

!"#$#%&"#'(#")*&+"(+"%*,)"(+",&&-&-"#*"+'*."#'&"//"0'(1(0#&1"%$2$#33""

4567/89/!"#$%&''

012")3"456

!"#$#%&"#'(#")*&+"(+"%*,)"(+",&&-&-"#*"+'*."#'&"//"0'(1(0#&1"%$2$#33""

4:998;;!"#$%&''%"()*+

,-"$./

!"#$#%&"#'(#")*&+"(+"%*,)"(+",&&-&-"#*"+'*."#'&"//"0'(1(0#&1"%$2$#33""

4567/89/!"#$%&''%"()*+

,-"$./

!"#$#%&"#'(#")*&+"(+"%*,)"(+",&&-&-"#*"+'*."#'&"//"0'(1(0#&1"%$2$#33""

4567/89/!"#$%&''

012")3"456

<

<

<

<

<=,01&(+&">*?1"2(@"A$-

<

<

7889:");5*"<=0">-)3:0?74@"4A>"B4"0CD"E8:F)G9":*)3)5H

B$2&"%&C#D

E?11&,#"A$-D

F'$GG$,)D

H$-+D

F&%%&1D

I(>2&,#+D

J&+01$G#$*,D

6'"592KF"4:998;;!$%&''

%

5H:IJ:G3+:99:J"K<LMN"""""""O".P&.Q

;G2;G9R"/5H:2"5J*:J+R"FG+-):J+"F-:FSR"8:J+5HG9"F-:FS

E:99:J")3:/"*:+FJ)83)5H

!GG%&"$I*-"7LH"HM!NJ888

KG-(#&-"%T,$T'P"9DOO"7UVE:GJF-W VU2":0G2WVX5/:W

F&%%$,)P(#0'$,) H?>$,) Q>"&H(>

<

Page 32: Designing a billion dollar user experience

Test your use cases in the real world

Page 33: Designing a billion dollar user experience
Page 34: Designing a billion dollar user experience
Page 35: Designing a billion dollar user experience
Page 36: Designing a billion dollar user experience
Page 37: Designing a billion dollar user experience
Page 38: Designing a billion dollar user experience

Loading...

Page 39: Designing a billion dollar user experience

We had to go back and optimize our APIs

Page 40: Designing a billion dollar user experience

Design for small and quick tasks

Page 41: Designing a billion dollar user experience

Shopping is emotionalInspire with pictures, visuals, create urgency withlimited quantity and engagement with the environment

Page 42: Designing a billion dollar user experience

There is a customer expectation for higherquality, interactive viewing on mobile screens as technology improves

There is a customer expectation for uploadingof pictures through mobile devices

Page 43: Designing a billion dollar user experience

Rich, full-screen image zoom and videos are the most effectiveways to browse or display merchandise on mobile devices

ADOBE SCENE7 MOBILE COMMERCE SURVEY | AUGUST 2010

Page 44: Designing a billion dollar user experience

!"#$%&'() *#+$,&(+%-

.

.

.

!""#$%&'()%*+,%-.&/$,0!12%13-%41%,56%7"$8&9#%$)&/&(:

/(-%&"%0+1

2344%5+&'()1

6,(77(581

6%""%41

!#9-%5+:1

;%:$4(7+(<51

=)&>,&=?-@6&A=BCBB;<$$%=/9:)9<)%>#9/%<9/$%=.&""&:?%/(%/.$%@7

(:$?<$9/=$##$<%A*BCD%%%%%%%E

'9F'9#G%H(:$F%(<)$<=G%89=.&$<=%8.$8IG%"$<=(:9#%8.$8I

7$##$<%&/$H%)$=8<&"/&(:

J&$K

@7)#+%)%LMNOMPQ%D1EE%!R

F77"%&(!<)&?GH&HIFJ;CCC6%#4$, !,<+<:K+%-&;%:$C

User can swipe !lmstrip to cycle through minis and then select an image for the top area by touching a thumbnail.

They can also push the play button to see a slideshow.

Page 45: Designing a billion dollar user experience

New image stripfor fast browsing

Page 46: Designing a billion dollar user experience
Page 47: Designing a billion dollar user experience

BUY ME NOW!

Use big juicy buttons for transactional inputs

(or make it mind numbingly easy to buy things)

Page 48: Designing a billion dollar user experience

Home My  eBaySearch

?

Buy & Bid Ask seller question

Page 49: Designing a billion dollar user experience

As ambassadors for the customer, there are two keytakeaways for designing a billion dollar experience:•Keep it simple •Ultimately, technology should make people's lives easier