61
UNIFY YOUR DELIVERABLES TWITTER: @8SUNIFY Prepared by Nathan Curtis for the IA Summit 2009, Memphis TN © EightShapes LLC

Unify Your Deliverables

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Unify Your Deliverables

U N I F Y Y O U R D E L I V E R A B L E S

T W I T T E R : @ 8 S U N I F Y

Prepared by Nathan Curtis for the IA Summit 2009, Memphis TN © EightShapes LLC

Page 2: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The Doc System!

We use and teach teams systematic ways to create better documentation.

At it’s heart, the “doc system” is a set of templates + tools + techniques.

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

7%&"(S(TN-%A0$/($./"+%-OU(S(

TN-%A0$/(,.&"U

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

789F;:

?9<;:

?9:;:

?:<;:X<

?:<;`

^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035

\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5

IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)

;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5

!"#!"#$%&'

The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

New ComponentsThe product page includes the following new components:

1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings

The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.

1

2

5

3

4

! cation([email protected])

5 5 5 5

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

D'-05/5;%+03(4(?./"+%-O

a"O[%-A3

#32G'4

L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

*+,-.+/0)(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

!"

12+3456);/<$%) =&$-4)

(1%-("*+2/32.4"35$%&

)".-$26789>;:

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

c9<;:

New ComponentsThe product category page will include the following two new components:

1. c1. Mini-Cart 2. c2. Contact Us

These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.

The product category page includes a video spotlight and a range of featured product collections.

1

2

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

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

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

>+3%5?/%4(P<Q( IA*/(?.-/

(

100$054+5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(

"4E$%5'4$G)5'-5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P>Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

Without Promo Code

Empty Cart

1 Item

2+ Items

With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

VariationsEmpty cart:A. Without promo codeB. With promo code

1 item in cart:C. Without promo codeD. With promo code

2+ items in cart:E: Without promo code (in-page update)F: With promo code

Elements1. Minicart header

2. Empty cart message ! If the cart contains no items, then show the

Empty Cart Message; otherwise hide this message.

3-6 Product ! Display a row in the mini-cart from every

product in the cart, including the product name, description, price, and remove button.

3. Product name # onclick: Navigate to the product page

4. Product description ! Limit to no more than two lines (~60 characters).

If a description exceeds 60 characters, truncate at 60 characters and follow with “....”

1

2

3 6

7

13

4

5

8

9

10

11

12

5. Product price ! Format all prices with commas for thousands

and two decimal point accuracy ! If the product has quantity > 1, then show a price

per item in parentheses. ! If a product is discounted, include the original

price as gray, struckthrough, and to the left of the discounted price.

6. Remove product button # onclick: Remove the product from the shopping

cart, and refresh the minicart display

7. Edit cart link # onclick: Navigate to the shopping cart page

8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands

and two decimal point accuracy

9. Proceed to checkout button # onclick: Navigate to the checkout page

10. Added to your cart message ! Display if the user has added an item to the

cart within the current page via the add-to-cart button.

11. Other items in your cart message ! Display if other items were already in the cart

andthe user has added an item to the cart within the current page via the add-to-cart button.

12. Promo code ! If the user has applied a promo code to their

shopping cart, then show the promo code.

13. Remove promo code button ! If the user has applied a promo code to their

shopping cart, then show the remove promo code button.

# onclick: Remove the promo code from the shopping cart and refresh the minicart.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

eCommerce [RH329] :: Design SpeciVersion 1 published June 26, 2009

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

@A$/0.'-$5NC

T)0B2".A(<(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

@A$/0.'-$5OC

T)0B2".A(>(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

$%"#,)--.#+"$

StandardA

Two FeaturesB

Feature CarouselC

1

2

3

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$&"#/#*'+&'012030/-)&45'#5/6+'

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee

Standard (with Click-to-chat)A

Pop-inC

Non-interactive (no Click-to-Chat)B

StaticD

VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static

Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.

Elements1. Header

! Enable publisher to update label on a per-page (per-product) basis

2. Description ! Enable publisher to update description on a per-

page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”

3. Chat Now Button # onclick: Open the existing click-to-chat window

already available within the support section ! If (normal business hours) and (Click-to-chat is

enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.

4. Email Link # onclick: Navigate to the Email Us page.

5. Call Link # onclick: Navigate to the Call Us page.

1

2

3

4

5 6

7

8

9

6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.

7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.

8. Close Button # onclick: Close the popin window, and return

focus to the parent page.

9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.

" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component

Page 3: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Rationale

ConsistencySpeedReuseand then, if you get more serious:collaboration, scale, portability, standard, credibility

"

Page 4: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Wireframes!!!!"

#$%&'()*+,%- ./01%* 23415* 6718'*

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

)".-$26789:;<

9%8'3:'(6/-;'<;341*(

8%-(3.#"3=(/-.*,*,+=(.,>(%/2"-(+","-.#(

*,?0*-*"3=($%,/.$/(03(;*.(/2"(1%##%@*,+(

%4/*%,36

9;3'(=%>

(» A&.*#

(» B.##

(» 7.;"(C3(B.##(D%0

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

)9<;<

</-8(?8(=%>

C3"-,.&"(

E.33@%->(

(

(F"&"&G"-(&"(%,(/2*3($%&40/"-

( (</-8(?8

8%-+%/(H%0-6(C3"-,.&"I(E.33@%->I

=%'(@1'(3(A1B$15C

B-"./"(.,(.$$%0,/(1%-(.$$"33(/%(

"*+2/32.4"35$%&5

D%>8,%30*(JK%$0&",/(,.&"L

(JK%$0&",/(,.&"L

(JK%$0&",/(,.&"L

(JK%$0&",/(,.&"L

M9N;<

89<;<

?0./"&(;*>"&?0."(;%#%(*,$*(%&,*3(.0/("3("3/(;%#04/*%3(.#*?0*>(&.(.4"#"3/*%-.(>*3(-"($%-"&4%(--%;*>"G*/(.,*3/%/.&($03.&=(.4"#(

&*#*./03(.0>*/(?0*(*,;",*3$*>*/(;%#%-*%(-"4-"&("O4"#(";"#"3(";"#*/(0,/(10+.5(M.&(>03(.-*G03(>*/("/(.$"--%("/(0##%-4%-*.(>%#%-*.(/*%-"3">*3(

A,>*3*/./(&%#04/./(./",*2*/("/(#.&(,.&03/**3("/(0/(?0"(%>*(,%G*3(.$$0&(?0*(-"3/*."-%(%>*%(G#.,>*3$*>(&%#04/./"("%33*/(#.,>*(>0,/*.,(

>*/./"/("O4#.G%-(&%3/=(.0/(*,(-"-0&("/(;",*2*#*?0"(4%--0&(;%#04/.3(.>(0/(.-0&("0&(?0*($%,"/=(3."(4-./0-*3(3">(&.+,*3*/(>0,/5

P/./03>."(,"3/*.(3",*/*%,3">(?0*3(>%#"3"?0"(,*&03(.0/"&4%-0&(";"##.$"-*3(.3(>*(-"2",>*/("3("*$/%(*,*&03("/(?0."(.>("O$"4">(?0*3(

,%,(-"(,%,3"?0.3(>%#"3/=(3.&(1.$"-34("-"4">*/(;%#04/./"&(>*/=(/"&?0*G03.(>0,/(?0*3(>",*&(,%G*/(4%-*($03(&%>*3$*"/(?0.&(0/(4%-(

-"&?00,>."(%$$."5(Q;*/(%&&%#%(?0*3(.(,./*%5(R"&(>%#%--0&(3"?0."(;%#%-0&=(3%#0/"&4%3(*03(,*3(3"?0.&=(30&=(,03("/03=(?0."(&.(

,%3.&("/(-"4-./"&($%-4%3("33*(?0*>03(3*/(-"-"($%-(.0/(-"4"-"(4.(>*/("/(.0>*/(2.-0&("3/(;%#%-*3(/*3$*.&"/(%>(?0%>*3*(3*(*,*3(3*&("./*(*&*#(

&.O*&*#(#.$$./(;%#0/"&(-"&(".?0*.3(*,/*G03(*#*?0*(0/(".-0&(2*##",*(&*#*?0*(>"(,*&*=(.0>*3(*0-I

E./01%(F/',1GJS*>"%(>"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;"#",/*3/(.0/(10+.5(

C/(.0/(#*?0%>(&%>*/./"(*>(".?0"("%3(,0&?0*>(?00,/(*#*$(

/"&4">(?0./0-"(4"-1"-0&(10+.5(8"-L

U%-"(A*+2/)2.4"3(S*>"%3

E-*;.$H()/./"&",/(V(B%%W*"(E%#*$H(V(R-.>"&.-W3(%1(A*+2/)2.4"3(TTB

#5'/:,1(H/-;,/-;'*

/) JX-/*$#"(2*+2#*+2/L

/) JX-/*$#"(2*+2#*+2/L

/) JX-/*$#"(2*+2#*+2/L

/) JX-/*$#"(2*+2#*+2/L

()2.-"((( (A&.*#((( (E-*,/(((R"O/()*Y"6(#(#(#

!"

<157/:1* D%>8,%30* #$%&'()*F53/8/8- +,%- ./01%* 23415* 6718'*

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

)".-$26

789<;<

789N;<

789Z;<

789:;<

B%,/.$/3(V(8"">G.$W(V(7"#4(V()*/"(U.4((

[(N99\]N99^(A*+2/)2.4"3(TTB(X##(-*+2/3(-"3"-;">5((R"-&3(_(B%,>*/*%,3(V(E-*;.$H()/./"&",/(V(B%%W*"(E%#*$H(V(R-.>"&.-W3(%1(A*+2/)2.4"3(TTB

@%&5(935'(`9a(

D%0($0--",/#H(2.;"(,%(*/"&3(*,(H%0-(

32%44*,+($.-/5

7%&"(b(JE-%>0$/($./"+%-HL(b(

JE-%>0$/(,.&"L

EH130,/81G

J)0G2".>(4%-*3(.0/(#.G%-"&("./0-(3."(4-%(?0*3(>*(0/(

*,/=(3*,*(-"4"-*G03(*0,/(&.O*&4%3/(%>(?0"(;%#"33*/*3(

"/("O4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-=($%,(

-"&4%-0,>*/(>%#%-(.-0&(.3(.#*/("/0-*G035L

#00('%(935'

"7157/1> F1:;(<41:* D%>8,%30*

F./"(/2*3(JP/"&(/H4"L6( (`,%/(H"/(-./">a

9%8'3:'(6/-;'<;341*(

8%-(3.#"3=(/-.*,*,+=(.,>(%/2"-(+","-.#(

*,?0*-*"3=($%,/.$/(03(;*.(/2"(1%##%@*,+(

%4/*%,36

9;3'(=%>

(» A&.*#

(» B.##

(» 7.;"(C3(B.##(D%0

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

I13'&51*

E./01%(F/',1GJS*>"%(>"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;"#",/*3/(.0/(10+.5(

C/(.0/(#*?0%>(&%>*/./"(*>(".?0"("%3(,0&?0*>(?00,/(*#*$(

/"&4">(?0./0-"(4"-1"-0&(10+.5(8"-L

(» U%-"(A*+2/)2.4"3(S*>"%3

789\;<

B9N;<

B9<;<

B<N;<ON

B<N;c

Q/./"(30&(-./0-(3"?0*>(0##"3(&*#(&*,/(.0>*/("#*/(-./*(

G#.G%--%;*/("3/"&(*&03.&(.3(>%##"3(".(;%#04/.("-*%--%(

&.+,*3("O("*$*##.($*/.&=(?0.&=($%-(.0/(*43.4*"/(.G%5(XO*&(

;"#*?0*3("3/=(%>(?0%(G"./(.4*$/%(/%/./0-(",>*43035

C4/.33*/."(4#.G%-0&(-./.(;%#%-"=(;",>*+,(*&*,$/./"&(3%#0/(4"##.G%-(

-"&%>*3(0/("/(%4/.3303>."("/(&.+,*3(&*#*+",>*/=(";"#*?0*(>%#04/.(

/03>.,/(0-*G03(-"3/*0&(.3(4"#*+",>"&(-"&("O4#*/./*.(?0*3(*,(,%G*3(

*430,/"3(,"3/-04/.3(*,$*#(*3(?0."(;%#%-"(,./(.G%-"3"(?0.3*/(%>*43.(

;",*3*/.3(3"?0"(%$$03("0&(1.$$03=(?0*>0,/(#.,>*/(*>*%-"-%(&%>*/./(

.3("O("O4#*?0*.,/5

AO4"-0&(?0*>0$**3(./*%-"3/=(30&(.#*G03("/(4"-%(*4*",/(0#4.($%,"3/*3(

.$"-*%5(8*$*/(2.-0&?0*G03(&%#%-"*$**3(-"(-"-0&(".?0./03(?0.&(

;",>*/=(%4/./0&($%-"*035

"+,)-'0()1"1)(0#-2'304)56")-"#('64)56()%"$"#(#.7'3)063)$0)0%)(.3()

>%#",/(;%#04/./",*3(.3(&%#%-"*($/./"/("O$"4/0-*(3%#04/./03=(/"(,*&*,(

-"(.>(?0*(?0*(G#.0/5

8'13'96.3)0%)560303(4"%'3)'164)56().'4)(1%04:)630.)063)+6;0<)=(1'0.7)(#"##")"+,

3.,*3(>%#04/.3(;%#04/0-(&%>*3(,%G*3(.0>.(.&03.,>.&("330&(.3(0/(;%#0/("33

<5( *,0&(;%#04/.3*&*,(4#./0-(-"4/./"(4-%-",>*3(;",/(#.G%-*.3(&%>(?0%>(?0*(-"&4%-(.0/(#.G%-"2(","&4%3(>%#04*"(,>."4-.(/",>."33*/(2*/(

?0*3(&.O*&*,/(;%#04/."-0&(2*$*0&(3"?0%3.&("/(.>*/./0&(>%#04/.($03=(?0.&(;%

N5( #%-(.#*?0./0-I(AG*/*G03>.(,.&(-"*$/%(*3($%&&%#%-"(",/*0&(,*/./(&.(;%#0&=(0/(.>(?0"(>"G*3(>","/(?0.&(*,("/(2.-*."(4%-"$"--%-"(

;",>*.3(4"#",*3(>*($%-*.(;*>"(.34*$*.("O4#*?0(*G"-%--%("%3/%("33"?0.(3*,/03(.3(,

:5( "$/./(?0./"&(./(10+*/*.(?0%(%&,*&03=(?0%($%,3">*(?0*(0/"(>"33*&(2.-*%(/"&4%-"(4"-34"-0,>."("3"?0.3(4*$*>"G*3(?0.&=(303(,03(

0##.$"./*,($%&,*3(?0%3(-"&(1.$$04/.(*&03.4">(&.(;"#*/*.(,*2*$*(.>*%,3",*(>%#%-"-

Z5( %(*&.*%,($%,("/(>%#%-"(;"#"3$*#(*0&(;*>"(303(0,/(4%-"4"-0&(?0"(#.G(*4*/(?0*(/"&(#*.

(;%#"3$*./(>0$*#*?0*(%>(&*,;"-*G03("O("O$"3(;%#04/*.&(*&%>("*0&(.34*/(#.0/(10+*./0-=($%-*/(".(;%#%-"=(3">*/(.0/"&%#0&(2.-*G03(.4"-*%-(

-%;*/*3("/(.0/"&("/("/(.#*?0%($%,"3/=(0##.G(*,*&.(,./"3(>0$*",*&"(&%(;%#04/*(0&?0%>*(/*G035

U.+,.&(,*",/*G03("3/-0&($%,(,%3/=(*3("/=(".?0*3/(?0%(?0.&03."($0&(0/(>%#%-*(*&%#0&?(0.34*>0,/=(.0/(",*33*/(.$"3(>"#*?0"(>%#0&(

>($'-'7.046.)1'0.)6$$"#7"#'")"+,)-')'%6-')'$$'3)%"$"#()(64)61%(1%0)(-6$70)56'.)40;1')104:)56()(?-(.-'(1'0)56()56'96.)(1%')3(4)56')

;"#*.34*$*.3("/=(?0."(,%G*/(;%#0/",/(4#*/(0/(".?0"(-"3"(3*/(.$$0&=(.0/.("/("3$*.3("/("/(?0"($04/./*G03(?0%(G#.0>*/*.&($03/*(;%#%-4%-0&(

.34"-$2*##0/(#.G%-"($04/.34*3(?0"(.&(.$*(.3(&*=(3*($03.,>*3(&%3/%(&%>*(>%#%(>%#04/.%#",*"/(>%#%-0&(?0.&(?0."(4-."4">(&%(

G".?0.&=(%&,*2*/("#(&.+,*/*(0-*%-"*0,/(;%#04/.(>%#"$/"(*,03$*#*?0.&(>%#%-"=(30,/(?0"(,035

@%)63)0%'.)%'30()1"9'3(4)'46.)>"$")"+,)-36.:)-"44"%')%"$6730)>(#-2'-0()>"$64)56')%"$67'30)>($$09")#(-3(.3'64:).'4()16$$0).'3)>"$"#(2)

",*&%#%-.(*,/=($%,3"-0&(,*33*/(%&,*."($%,"$/./"33*(,./?0%(%&,*&(10+.5(P&03(3*/"&(>%#%-4%-"(;"#(*>*.(>"&(.G(*#*/*(%>*430&?0*($%,(-"&(

"3("/=(*&4%3(>*$*>0$*&(1.$$03=($03=(?0*($%,(,0##.0/(0##.G%-"-*%(>%#0/(?0"("3(&*,*3/(;%#04/./0-(3"$/"&(-.(?0*>"&?0"(;",>*/("33*(0/("%3(

$%-"-1"-*%5(C/(*>(".?0*>(&%#%-"&(10+*./0-I

E./01%(F/',1GJS*>"%(>"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;"#",/*3/(.0/(10+.5(

C/(.0/(#*?0%>(&%>*/./"(*>(".?0"("%3(,0&?0*>(?00,/(*#*$(

/"&4">(?0./0-"(4"-1"-0&(10+.5(8"-L

(» U%-"(A*+2/)2.4"3(S*>"%3

B%,/.$/3(V(8"">G.$W(V(7"#4(V()*/"(U.4((

[(N99\]N99^(A*+2/)2.4"3(TTB(X##(-*+2/3(-"3"-;">5((R"-&3(_(B%,>*/*%,3

<157/:1* D%>8,%30*F53/8/8-

!"#$%&"'(

789<;<

789N;<

789Z;<

7%&"(b()044%-/(b(J)044%-/(B./"+%-HL(b(

J)044%-/(R%4*$(R*/#"L

789\;<

B9N;<

B9<;<

Product PageB Support PageB

#

Page 5: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$

Wireframe Templates Setup

Styles

Layers

Layouts

Grids

1 Page

Page 6: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Standard, “atomic” symbols:• Forms• Navigation• Icons• Ads• Text

%

Wireframe Elements

Location: /wireframes/_elements/

Page 7: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Wireframe Components&

A component is a reusable page chunk.

Page 8: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

'

Page 9: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Page LibrariesSome teams even havestandard page types.

They are built from components, of course.

(

Location: /wireframes/_pages/

Page 10: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)*

Extreme Wireframing

Page 11: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Design vs. DeliverableUnits / Size

Typography

Grid

PurposeDepict what a screen looks like Combine pictures & words to document design

Page 12: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Deliverables!!!)!

http://semanticstudios.com/publications/semantics/000228.php

Plus:

Contracts

Proposals

Placards

Tri-folds

Offer Letters

Honey-Dos

Page 13: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Common Deliverables)"

Strategy Specifications Persona

Mental Model Style Guide Comp Specs

Just a few of the kinds of deliverables we produce...

Page 14: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Yes, Jason’s Worth It!)#

Page 15: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Pick a Template)$

Choose your page size & orientation (order by frequency of use):

1LetterLandscape

2LegalPortrait

3LetterPortrait

4TabloidLandscape

Location: /deliverables/

Page 16: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The “Blank Canvas”Every deliverable is born with two measly pages.

)%

Cover Interior

Page 17: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

FEATURE:

Naming Your DocumentEvery deliverable should have a clearly evident title, author, and version.

Use text variables to set those values – across pages – right when you start a new document.

)&

Feature: Type > Text Variables > Define...

Page 18: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

FEATURE:

Naming Your PagesPage titles are included on the master, and then you override it on each page.

It’s the only shortcutyou have to know:CTRL-SHFT-Click it.

That said, you wanna be a deliverable ninja? Then learn shortcuts!

)'

Page 19: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)(

Frames

Page 20: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

!*

Modular Designs

Page 21: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Using Wireframes, Again!)

Page 22: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Finishing the Flow!!

Page 23: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

!"

Deliverable ElementsDo you get the standard annotation stuff? Absolutely.• Markers• Callouts• Frames• Site Maps• People• Flows (thanks JJG!)• Project Plans• Reviews

Page 24: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

!#

Markers

Page 25: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Deliverable Pages!$

Page 26: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Document Planning!%

7/#887"&709:;<=>?0@@0A72)B*0CD7&)E0&+')#*

Version 1Published February 24, 2009Created by Nathan Curtis

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

/"7+')F70,")7G

The ecommerce " ow requires a range of updates based on formative user research and business requirements.In an e# ort to increase product marketing impact and social interactions, the team looks to improve marketing billboards on product and category pages and enable product ratings. Additionally, customer service will improve via inline click-to-chat sessions between customer and representative.In addition, new business requirements will facilitate credit check across multiple audience types, promotion codes to enable discounts, and varied shipping options and discounts.

DeliverablesDesign StrategyAliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies leo dapibus ultricies. Wireframes & Design Speci! cationDocumentation of the interaction design, depicting the structure, behaviors, and functional requirementsVisual Design CompsVisual, high-$ delity mockups that clarify color, typography, and $ nal layout upon which presentation layer assets are createdUsability Test ScriptPrototypeModerate $ delity mockups used to assess design quality via usability testing with participantsUsability Test Report

Assumptions, Constraints & Other ConsiderationsAll visual style, typography, and layout will be instantiated based on exisiting conventionsComponents will be reused, particularly those for page shells and existing page designsProduct taxonomy (including available product attributes and classi$ cations) will remain unchanged for this release

Presentation ModelThe experience will be built largely upon the existing design system foundation of page types & components. However, new components and page types will be de$ ned and design as necessary.

Design Objectives1. Lift order conversions2. Improve customer satisfaction3. Increase store " exibility

Project ScopeThe project scope is limited to requirements formally identi$ ed by Product Marketing in:ProjectRH329.FallUpdates.Requirements.doc

Target AudienceThe audiences for this documentation include:

Product Marketing: To understand and validate the realization of the user experience based on requirements Engineering: Learn and respond to design treatments that must be implemented.Quality Assurance: Identify test cases and clarify requirements in detail.Design Peers: Con$ rm and collaborate on a consensus design solution across roles

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!"#$

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

D'-05/5;%+03(4(?./"+%-O

a"O[%-A3

#32G'4

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

*+,-.+/0)(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@#$(+-0/%L5D$/43%$)C

7%&"(S

TN-%A0$/($./"+%-OU

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

@A$/0.'-$C

T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

P$/%-5Q+%$

789F;:

c9<;:c9:;> c9:;> c9:;>

?9<;:

?9:;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#

@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U

N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU

( N-%&%/*%,(A*3$%0,/( gdTee5eeU

( )/./"(/.X(P"3/*&./"AQ( dTee5eeU

( )2*44*,+(P"3/*&./"AQ( dTee5eeU

5 >+35</L5T$)4'G/4$0U5 H@IIJIIC

5;%+($$054+5?E$(K+34

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

789F;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

7%&"(S(TN-%A0$/($./"+%-OU(S(

TN-%A0$/(,.&"U

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.!"#$%!&$'$(!)*

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

789F;:

?9<;:

?9:;:

?:<;:X<

?:<;`

^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035

\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5

IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)

;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5

789:;:

789=;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

?2"$C%0/?9:;:

W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%

;%'&/(L5;+.'(L

)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(

I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(

b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5

;$%)+-/.5S-X+%G/4'+-

( 8*-3/(c.&"(j(

( J.3/(c.&"(j(

( KAA-"33(j(( ( (

( ?*/O(j(

( )/./"(j(

( kZN(?%A"(j(

( N2%,"(c0&B"-(j(P Q(( G

9'..'-8

( ?.-A(LO4"(j(

(?-"A*/(?.-A(c0&B"-(j(

( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q

( IX4*-./*%,(b./"(j( (l(

789F;:

#E'<<'-8

*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( )%$*.#()"$0-*/O(e(j( (G( (G(

( b./"(%1(m*-/2(j( (DDlbblRRRR

( b-*;"-h3(J*$",3"(e(j(

(( J*$",3"()/./"(j( T)/./"U

?+-)3G$% 93)'-$))

?:<;:

?:<;`

Home Search Results

Page Variations

Components

N/A

c1. Contact Usc2. Mini-Cart

1. Single Photograph, No Items in Cart2. Multiple Photos, Items in Cart

c1. Contact Usc2. Mini-Cartc3. Billboardc4. Accordionc5. Ratings

1. Empty2. 1 Item3. Many Items, with Promo Code applied

c5. Promotion Code

1. Standard2. Business Credit Check, FREE Shipping

c6. Credit History Checkc7. Shipping Options

Product Category Product Cart Checkout

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

7%&"(S(TN-%A0$/($./"+%-OU(S(

TN-%A0$/(,.&"U

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

789F;:

?9<;:

?9:;:

?:<;:X<

?:<;`

^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035

\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5

IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)

;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5

!"#!"#$%&'

The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

New ComponentsThe product page includes the following new components:

1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings

The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.

1

2

5

3

4

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

%"'&"#/+"'H0I8D'J %"'!"#/+"'H0=K0L'782

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(,%(*/"&35(KAA(.,(*/"&(BO($#*$C*,+(/2"(nKAA(/%(?.-/o(B0//%,(%,(.,O(%1(O%0-(4-%A0$/(A*34#.O35

>"),)0%)/)6#"%5-2?).2/#2).1"66'0;)'0)"0()"+)"5#)-/2(;"#'(.@

(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6

N-%&%/*%,(?%A"( ( 1<<.L

789F;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#

@;%+03(45-/G$C( dTee5eeU( < ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U

@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U

@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U

N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU

( N-%&%/*%,(A*3$%0,/( gdTee5eeU

( )/./"(/.X(P"3/*&./"AQ( dTee5eeU

( )2*44*,+(P"3/*&./"AQ( dTee5eeU

5 >+35</L5T$)4'G/4$0U5 H@IIJIIC

5;%+($$054+5?E$(K+34

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

789F;:

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

C6)DD)*BH0&#*'M$

#E'<<'-8

*$)4'-/4'+-M

()",A(/%(&O(B*##*,+(.AA-"33

()",A(/%(.(.,%/2"-(.AA-"336

( KAA-"33(j(( ( (

( ?*/O(j(

( )/./"(j(

( kZN(?%A"(j(

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

#E'<<'-8

*$)4'-/4'+-M

()",A(/%(&O(B*##*,+(.AA-"33

()",A(/%(.(.,%/2"-(.AA-"33

Q$4E+05Y5;%'($M

DR==5"&$%-'8E45#E'<<'-8ZZZA0"(/%(/2"(.44#*"A(4-%&%/*%,($%A"(%1(T4-%&%/*%,($%A"(,.&"U5

Destination Options, Method OptionsD

Destination Options, FREE ShippingC

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

/6+*B70;)2'#"J

Version 1 :: June 26, 2009Initial design spec authored based on $ nal wireframes and design strategyInclusive of requirements for product category, product, cart, and checkout pages

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

N#"8+')F70:727+"&6

Introductory descriptive text about the context of the quotes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. ApproachNullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.

ParticipantsSed aliquam, nunc eget euismod ullamcorper:

[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)

[Summary Point][Objective descriptionctet am etue magna commodolore molor iriusting ero]

[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point]

[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point][Objective bullet point]

[Summary Point][Objective description ecte delenis niam, si. Ectet lorperil el etum autpat loreros nonsectet am etue magna commodolore molor iriusting eroctet am etue magna commodolore molor iriusting ero]

1

2

3

4

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

&"#!"#$%&'0/+'7B#"J

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

D'-05/5;%+03(4(?./"+%-O

a"O[%-A3

#32G'4

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

*+,-.+/0)(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@#$(+-0/%L5D$/43%$)C

7%&"(S

TN-%A0$/($./"+%-OU

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

@A$/0.'-$C

T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

P$/%-5Q+%$

789F;:

c9<;:

c9:;> c9:;> c9:;>

?9<;:

?9:;:

New ComponentsThe product category page will include the following two new components:

1. c1. Mini-Cart 2. c2. Contact Us

These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.

The product category page includes a video spotlight and a range of featured product collections.

1

2

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

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

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

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

TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(.#*V0././0-](Y*/./5(^$$."4"-*B03U

(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(

.#*V0././0-](Y*/./5(^$$."4"-*B03U

(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(

.#*V0././0-](Y*/./5(^$$."4"-*B03U

(

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

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

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

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

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

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(D%-"(b"/.*#3(

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

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

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

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

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

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

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

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

("#/67&4#%'789:;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

?2"$C%0/?9:;:

W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%

;%'&/(L5;+.'(L

)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(

I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(

b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5

;$%)+-/.5S-X+%G/4'+-

( 8*-3/(c.&"(j(

( J.3/(c.&"(j(

( KAA-"33(j(( ( (

( ?*/O(j(

( )/./"(j(

( kZN(?%A"(j(

( N2%,"(c0&B"-(j(P Q(( G

9'..'-8

( ?.-A(LO4"(j(

(?-"A*/(?.-A(c0&B"-(j(

( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q

( IX4*-./*%,(b./"(j( (l(

789F;:

#E'<<'-8

*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( )%$*.#()"$0-*/O(e(j( (G( (G(

( b./"(%1(m*-/2(j( (DDlbblRRRR

( b-*;"-h3(J*$",3"(e(j(

(( J*$",3"()/./"(j( T)/./"U

?+-)3G$% 93)'-$))

?:<;:

?:<;`

1

2

New ComponentsThe product category page will include the following new/updated components:

1. c6. Credit history check2. c7. Shipping options

These two components will be displayed, in that order, between the personal information and billing sections of the checkout page.

The checkout page enables a customer to provide personal and billing information to purchase one or more products.

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

A72)B*0C'"+'7BJ030:727+"&6

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

(+D2030N-#P2

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

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

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

>+3%5?/%4(P<Q( IA*/(?.-/

(

100$054+5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(

"4E$%5'4$G)5'-5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P>Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

Without Promo Code

Empty Cart

1 Item

2+ Items

With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

VariationsEmpty cart:A. Without promo codeB. With promo code

1 item in cart:C. Without promo codeD. With promo code

2+ items in cart:E: Without promo code (in-page update)F: With promo code

Elements1. Minicart header

2. Empty cart message ! If the cart contains no items, then show the

Empty Cart Message; otherwise hide this message.

3-6 Product ! Display a row in the mini-cart from every

product in the cart, including the product name, description, price, and remove button.

3. Product name # onclick: Navigate to the product page

4. Product description ! Limit to no more than two lines (~60 characters).

If a description exceeds 60 characters, truncate at 60 characters and follow with “....”

1

2

3 6

7

13

4

5

8

9

10

11

12

5. Product price ! Format all prices with commas for thousands

and two decimal point accuracy ! If the product has quantity > 1, then show a price

per item in parentheses. ! If a product is discounted, include the original

price as gray, struckthrough, and to the left of the discounted price.

6. Remove product button # onclick: Remove the product from the shopping

cart, and refresh the minicart display

7. Edit cart link # onclick: Navigate to the shopping cart page

8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands

and two decimal point accuracy

9. Proceed to checkout button # onclick: Navigate to the checkout page

10. Added to your cart message ! Display if the user has added an item to the

cart within the current page via the add-to-cart button.

11. Other items in your cart message ! Display if other items were already in the cart

andthe user has added an item to the cart within the current page via the add-to-cart button.

12. Promo code ! If the user has applied a promo code to their

shopping cart, then show the promo code.

13. Remove promo code button ! If the user has applied a promo code to their

shopping cart, then show the remove promo code button.

# onclick: Remove the promo code from the shopping cart and refresh the minicart.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

%"#/+"'

PurposeThe shopping cart serves as the hub of selected items through an online store experience, and the key page from which the user can continue through to checkout in a familiar way.

For this project, the shopping cart serves as the primary location to apply and manage a promotion code. Here, users can:

Add a promo code whether or not the cart contains any itemsRemove an applied promotion codeLearn about promotion codesNavigate to as a hub for promo code application (such as from a promo banner elsewhere on the site or via paid search and print advertising)

Promo & Cart RationaleThe shopping cart serves as a persistent and visible destination within the shopping experience, where users can manage their overall order, discern price impacts, and consider their order from a high level.

Unchanged Components1. Header 2. Breadcrumbs 3. Page Title 4. Page Message 5. Cart Table Header 6. Cart Item(s) 7. Cart Subtotal & Update

Updated Component8. Cart Summary

New Component9. Cart Promo Codes

Unchanged Components (cont’d)10. About the Shopping Cart 11. Recommendations 12. Recently Viewed Items 13. Footer

The shopping cart summarizes all items that the user intends to purchase, displays aggregate pricing, and leads to checkout.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#

@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U

N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU

( N-%&%/*%,(A*3$%0,/( gdTee5eeU

( )/./"(/.X(P"3/*&./"AQ( dTee5eeU

( )2*44*,+(P"3/*&./"AQ( dTee5eeU

5 >+35</L5T$)4'G/4$0U5 H@IIJIIC

5;%+($$054+5?E$(K+34

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

789F;:

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

1

2

3

4

5

6

7

9

13

11

12

10

8

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$)"#+,)--)*.

#E'<<'-8

*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

#E'<<'-8

*$)4'-/4'+-

( KAA-"33(j(( ( (

( ?*/O(j(

( )/./"(j(

( kZN(?%A"(j(

Q$4E+05Y5;%'($M

N[0/L5#E'<<'-85X+%5HIIJII1%-(.##(40-$2.3"3(&.A"(/2-%0+2(/2"(T$%&4.,O(,.&"U(3044%-/(4-%+-.&

Destination Fixed, Method OptionsA

Destination Entry, Method FixedB

Alternative shipping options are personalized by previous product selection, experience context, and business rules based on cart composition.

Destination Options1. Constrained (see Figure A)

The cart product combination requires that the products are sent to the personal information that serves as the billing address

2. Custom (see Figure B)3. Options (see Figures C & D)

User can select to reuse billing address or enter an alternative address

Method Options1. FREE (see Figure D)2. Fixed (see Figure B)3. Options (see Figure A)

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

O+.-70#G0/#*'7*'2

Change History. . . . . . . . . . . . . . . . . . . . . 3Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4

Design Strategy & ResearchCreative Brief . . . . . . . . . . . . . . . . . . . . . . 6Design Objectives . . . . . . . . . . . . . . . . . . . 7Formative Research. . . . . . . . . . . . . . . . . . . 8Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9

Maps & FlowsFlow . . . . . . . . . . . . . . . . . . . . . . . . . 11

Pages1. Product Category . . . . . . . . . . . . . . . . . 13

c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15

2. Product. . . . . . . . . . . . . . . . . . . . . . . 16c3. Billboard . . . . . . . . . . . . . . . . . . . . 17c4. Accordion. . . . . . . . . . . . . . . . . . . . 18c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19

3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 203.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 213.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21c6. Promo Code . . . . . . . . . . . . . . . . . . 22

4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23c7. Credit History Check . . . . . . . . . . . . . . 24c8. Shipping . . . . . . . . . . . . . . . . . . . . 25Error Messaging . . . . . . . . . . . . . . . . . . 27

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

A72)B*0Q.R7&')F72

The following objectives are formed as a result of design collaboration, site analytics of the e-commerce process, and user-centered feedback derived from interviews.

Lift Order ConversionsDecrease exit rate by answering key questionsImprove user interface of complex customer decisionsEnhance product displays via billboard photos & carousels

Improve Customer SatisfactionEnable customers to engage more deeply through:

Real-time customer supportCustomer ratings

Increase Store FlexibilityBroaden store capabilities to:

O# er varied discounts through promo codesHandle consumer and business customers di# erently

1

2

3

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

!+B72

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

@A$/0.'-$5NC

T)0B2".A(<(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

@A$/0.'-$5OC

T)0B2".A(>(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

$%"#,)--.#+"$

StandardA

Two FeaturesB

Feature CarouselC

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

VariationsA. StandardB. Two FeaturesC. Feature Carousel

Elements1. Feature headline

" Limit headlines to one line, do not wrap " Follow brand guidelines for voice and tone

2. Feature description " Limit descriptions to four lines; optimally

descriptions span no more than two lines

3. Add to cart button # Add the item to the shopping cart; if the item is

already in the shopping cart, the increment the item quantity by one.

Add the item to the in-page mini-cart if not already included.Refresh minicart calculation including subtotalTransition the minicart item using a yellow fade to connote the cart’s change in statusStay on the current page

4. Feature image " Use a product photography if possible " Avoid inspirational photographs of people

unless directly interacting with the product. In such cases, focus/crop photographs to focus on the product.

5. Feature option image ! If more than one feature is available within the

1

2

4

5

6

3

billboard, then display a thumbnail associated with each feature to the right of the feature image.

! If the image applies to the current displayed feature, then highlight the image (such as with a larger stroke weight as in Figure 3).

# onclick: Display the selected feature headline, description, and photograph within the billboard

6. Feature carousel navigation ! If more than three features are included within

the billboard, display feature carousel navigation above and below the three feature option images.

# onclick: Rotate thumbnail images in the direction selected by 1 (do not rotate “pages” of feature option images).

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$*"#/'#0#12#(3

;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6

N-%&%/*%,(?%A"( ( 1<<.L

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

;%+G+4'+-5?+0$(L2"(4-%&%/*%,($%A"(O%0h;"(.44#*"A(A%"3(,%/(&./$2(.($0--",/(4-%&%/*%,5(N#".3"(-"",/"-(/2"($%A"(.,A(/-O(.+.*,5

N-%&%/*%,(?%A"( T$%A"(*,("--%-U ( 1<<.L

The promo code application enables users to enter a textual promo code to receive discounts and premium o# ers.

VariationsA. Default (no code applied)B. Applied codeC. Error

Elements1. Header

2. Introduction

3. Text box ! Limit entry to no more than 10 characters

4. Apply button # onclick

If the text box is empty, then display an error messageValidate the promo code applied, based on table X.If the promo code is valid, refresh the Promo Code to re" ect the applied code (see $ gure B), and refresh the shopping cart inline to re" ect any applicable savings.

5. Description & discount percentage

6. Remove code button # onclick

Remove the applied promo codeRefresh the Promo Code component to the no code applied state (refer to $ gure A).Refresh the shopping cart to remove any promo-code based discounts applied.

7. Error message

Default (no code applied)A

Applied codeB

ErrorC

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

789:;:

?2"$C%0/?9:;:

;$%)+-/.5S-X+%G/4'+-

( 8*-3/(c.&"(j( (8*-3/(,.&"(*3(-"V0*-"A

( J.3/(c.&"(j( ?0-/*3

( KAA-"33(j( :<>(I#&()/-""/

+,$-$!./!0!1-234$5!6.),!%27-!088-$//!/735.//.2'9!:4$0/$!(!44!.'!044!-$;7.-$8!

088-$//!(!$48/9!

I""#"0(722+B)*B

Checkout page with error messageA

ConventionsThe error messaging presentation rules for the Checkout page do not change with this release.

New MessagesThe following additional validations are to be added based on new data collection:

ID Event Condition Message

1 onblur Social Security Number (any $ eld) contains a non numeric character

Social security number contains a nonnumeric character

2 onblur Date of birth is nonempty and not formatted as MM/DD/YYYY

Date of birth is not formatted correctly

3 onblur Date of birth is less than 18 years from today’s date

Date of birth re" ects that you are not old enough to purchase a product from this website

4 onblur Tax ID (either $ eld) is nonempty and contains a nonnumeric character

Tax ID contains a nonnumeric character

5 onblur ZIP Code is nonempty and is not a $ ve digit numeric string

ZIP code is not formatted correctly

6 onsubmit Social security number is empty Social security number is required

7 onsubmit Date of birth is empty Date of Birth is required

8 onsubmit Drivers License Number is empty Drivers Licence Number is required

9 onsubmit Tax ID is empty Tax ID is required

10 onsubmit Company name is empty Company Name is required

11 onsubmit Custom address is selected and address is empty

Address is required

12 onsubmit Custom address is selected and City is empty

City is required

13 onsubmit Custom address is selected and ZIP Code is empty

ZIP Code is required

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

:7F)7P7"2

Reviewer Email Address Role Group

Core TeamJohn Smith [email protected] Information Architect UXD

Jane Brown [email protected] Visual Deisgner UXD

Adam Morris [email protected] Design Technologist WXD

Samantha March [email protected] Product Manager Mktg

Dan Ayers [email protected] Engineer IT

Extended TeamJohn Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

7/207/137/66/296/226/156/8

JulyJuneToday

!"#R7&'0!-+*

Interaction Design

Design Strategy

Visual Design

Usability TestingScripting

Wireframes Specs Revisions

Prototyping

Testing Report

Draft 1 Final Draft 1 Draft 2

Final Report

Draft 1

Draft 1

Draft 1

Final

Final Final

Final

Final

Review

NOTE: This project plan illustrates design team activities only; for the project’s complete plan, refer to the plan produced by the project management team.

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$&"#/#*'+&'012030/-)&45'#5/6+'

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee

Standard (with Click-to-chat)A

Pop-inC

Non-interactive (no Click-to-Chat)B

StaticD

VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static

Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.

Elements1. Header

! Enable publisher to update label on a per-page (per-product) basis

2. Description ! Enable publisher to update description on a per-

page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”

3. Chat Now Button # onclick: Open the existing click-to-chat window

already available within the support section ! If (normal business hours) and (Click-to-chat is

enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.

4. Email Link # onclick: Navigate to the Email Us page.

5. Call Link # onclick: Navigate to the Call Us page.

1

2

3

4

5 6

7

8

9

6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.

7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.

8. Close Button # onclick: Close the popin window, and return

focus to the parent page.

9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.

" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$+"#:+')*B2

Y./"(/2*3(TZ/"&(/O4"U6( (P>5=(%0/(%1(`(3/.-3Q

Y./"(/2*3(TZ/"&(/O4"U6( (7%--",A%03'

Y./"(/2*3(TZ/"&(/O4"U6( (N%%-

Y./"(/2*3(TZ/"&(/O4"U6( (8.*-

Y./"(/2*3(TZ/"&(/O4"U6( (p%%A

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

Y./"(/2*3(TZ/"&(/O4"U6( (IX$"##",/'

Y./"(/2*3(TZ/"&(/O4"U6( ().;"A

Not Yet Rated

Hovered & Levels

Click & Save

Applied Ratings

The product rating component enables users to view and apply a rating to the displayed product.

VariationsAa. StandardB. Two FeaturesC. Feature Carousel

Elements1. Rating Label

" Include a speci$ c label of what is being rated, generally by “type”. For example, include “product”, “article”, or “post.”

" Do not label the speci$ c item, since the rating is adjacent to the item title anyway.

2. Rating Stars # onhover: Highlight all stars to the left of and

including the current star, connoting that a rating would be applied equivalent to the currently hovered star. Also update the Rating Messaging to re" ect the level of the current star.

# onclick: Save the applied rating, and once saved, exchange the level (such as “Excellent”) with “Saved.” Do not transition to an applied rating after this (until the user would reload the page), but instead sustain the user’s applied rating.

3. Rating Messaging ! If the item has not yet been rated, show “(not yet

rated)”.If the item is being rated (a star is being hovered), then display the associated rating level.If the item has been rated, display the average out of total possible stars (refer to “Applied Ratings” $ gure).

" Use a common and meaningful spectrum of rating levels, such as Horrendous, Poor, Fair, Good, and Excellent.

" Use levels consistent with the tone of the brand.

A

1 2 3

B

C

D

E

F

G

H

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$,"#/"7$)'0;)2'#"J0/67&4

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( )%$*.#()"$0-*/O(e(j( (G( (G(

( b./"(%1(m*-/2(j( (DDlbblRRRR

( b-*;"-h3(J*$",3"(e(j(

(( J*$",3"()/./"(j( T)/./"U

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( L.X(Zb(e(j( (G(

( ?%&4.,O(c.&"(j(

?%$0'45A')4+%L5?E$(K

)*,$"(O%0(.-"(40-$2.3*,+(/2"3"(4-%A0$/3(1%-(B03*,"33(03"W(O%0-(B03*,"33([*##(B"(#*.B#"(1%-(/2*3(40-$2.3"(.,A(,%($-"A*/(2*3/%-O($2"$C(*3(-"V0*-"A5

1%$5L+35<3%(E/)'-85X+%5<$%)+-/.53)$5'-)4$/0\I,/"-(4"-3%,.#(*,1%-&./*%,(*,3/".A(_

?+-)3G$%

93)'-$))

93)'-$))

?+-)3G$%

?:<;:

?:<;:

?:<;`

?:<;`

Consumer optionA

Business optionB

Business (! xed)C

1

2

11

3

4

5

6

7

8

9

10

1. Cover Page

5. Chapter (Strategy)

2. Table of Contents

6. Creative Brief

3. Change History

7. Design Objectives

4. Reviewers

8. Research Results 9. Project Plan

10. Chapter (Maps/Flows) 11. Wire"ow

12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component 18. Component

19. Annotated Component 20. Chunked Page 21. Page Variations 22. Annotated Component 23. Chunked Page 24. Annotated Component

25. Annotated Component 26. Component Variations 27. Copy Table & Sample

Collaborative outline Co-authored document

Page 27: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Standardize a deliverable! What’s with the XML?

!&

Automating Starting Points

Page 28: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

!'

Page 29: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Table of ContentsProducing a TOC is simple: Select “Table of Contents...” and click “OK.”You can even create other predefined indices too!

* All page titles are consistently styled as 1st level, 2nd level (indented), No TOC (omitted), chapter titles (bold), or as an auto-numbered variation.

!(

Page 30: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Publishing Deliverables"*

Page 31: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Print VersionThe Black Bar is dead. Long live the Black Bar.

When you PDF, the Black Bar appears, but when you send it to a printer, the bar is hidden. Automagically.

")

Page 32: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

8 Customize it!Not everyone loves orange (why I don’t know).Customize deliverable templates easily with:

"!

BackgroundLogo

Type

AnnotationColor

Page 33: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The system is...

TEMPL ATES

""

Page 34: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The System Is...Templates34

Deliverables

Templates

Elements Pages

Pages Elements

Templates

Components

Wireframes

Page 35: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The Template Landscape"$

Templates

Elements Pages

Comps

Components

Deliverables

Pages Elements

Templates

Page 36: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Zipping It UpThe system of templates, libraries, and other documentation is delivered as a ZIP file.

"%

Page 37: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The system is...

TOOLS

"&

Page 38: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Why InDesign?"'

Our surveys reveal that Visio and Omnigraffle are the two most popular tools in the IA community. We work in InDesign because:

1. Cross platform

2. Most modular (snippets, linked files including PDFs)

3. Powerful styles (type, objects, tables, TOC, etc)

4. UX “Designers” include more than just IAs!

http://www.nathancurtis.com/2009/02/06/why-indesign/

Page 39: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

WIREFRAMESIllustrator

Combining Tools"(

WIREFRAMESInDesign

DELIVERABLESInDesign

COMPSPhotoshop

PROTOTYPESFireworks

!"

WIREFRAMES & COMPSFireworks

COPYInCopy

Page 40: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Tools by Discipline#*

VisualDesigner

InformationArchitect

“Design”

ContentStrategist

Deliverables

(Wireframes) (Comps) (Copy)

SameTemplates!

SameStyles, Grids, etc..

Page 41: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The system is...

TECHNIQUES

#)

Adobe Bridge Wireframe Page Design File File > Place Dialog

Page 42: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Connecting Many Documents#!

From “Reduce, Reuse, Recycle”: http://unify.eightshapes.com/concepts/reduce-reuse-recycle/

Page 43: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

You’ve got to work hard to scale that wall, usually with help.

And not just help from me, but from each other.

#"http://www.flickr.com/photos/fenris/2651905163/sizes/l/

Page 44: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

10:47:20 AM Nathan Curtis: The other key areas of InDesign to familiarize yourself with for flows are (a) the Stroke palette (line weight, style, start/end shapes like arrows, etc) and (b) the Direct Selection tool (A) to manipulate segments of a path (ie, connector)10:47:41 AM [User]: wish me luck10:47:58 AM [User]: right now i am grateful for your pointers but feeling pretty much like i need a week to learn this tool10:48:03 AM [User]: and it aint gonna happen10:48:20 AM Nathan Curtis: all of this is covered in the 5 minute Flow video, which is half the time of our IM session ;)

##

Page 45: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

1. Don’t let them snap and come unglued:Encourage users to produce visualizationsartifacts with other software when it makes sense(e.g., use Visio or Omnigraffle for a flow or concept model, then place the PDF in an InDesign deliverable)

2. Be realistic about tool switching costs, but also communicate benefits and rationale

3. Teach through multiple channels (documents, websites, training videos, brownbags, reviews)

4. Provide starting points and samples

#$

Lessons Abound

Page 46: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Assignment:Annotate three screenshots provided, using 1-2 deliverable pages.

Results:Wildly different layouts, editorial style, details, and assumed audiences. For our unfortunate readers, it’s empathy time.But there’s hope!

#%

Massive Frame? A table!A table!

Art in middle? Specs by element

Visual flow! Little structure

Homework

Page 47: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Outlining#&

eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected]) 17 of 27

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

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

#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)

&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)

-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

!"#$!"##$%&'(

StandardA

Two FeaturesB

Feature CarouselC

eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected]) 17 of 27

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

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

#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)

&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)

-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

!"#$!"##$%&'(

StandardA

Two FeaturesB

Feature CarouselC

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

Elements1. Feature headline

2. Feature description

3. Add to cart button

4. Feature image

5. Feature option image

6. Feature carousel navigation

1

2

4

5

6

3

eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected]) 17 of 27

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

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

#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)

&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)

-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

!"#$!"##$%&'(

StandardA

Two FeaturesB

Feature CarouselC

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

Elements1. Feature headline

" Length " Brand

2. Feature description " Length

3. Add to cart button # onclick

4. Feature image " Photo types " Photo selection

5. Feature option image ! Thumbnails ! Highlight

# onclick

6. Feature carousel navigation ! More than 3?

# onclick

1

2

4

5

6

3

eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

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

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

#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)

&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)

-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

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

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

3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)

,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)

'-#2)'/)'1.0)&0#-.$#/9:

,%%)-.)/$0-

!"#$!"##$%&'(

StandardA

Two FeaturesB

Feature CarouselC

Display: Required Recommended Optional || Spec Type:

The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

VariationsA. StandardB. Two FeaturesC. Feature Carousel

Elements1. Feature headline

! Limit headlines to one line, do not wrap ! Follow brand guidelines for voice and tone

2. Feature description ! Limit descriptions to four lines; optimally

descriptions span no more than two lines

3. Add to cart button " Add the item to the shopping cart; if the item is

already in the shopping cart, the increment the item quantity by one.

Add the item to the in-page mini-cart if not already included.Refresh minicart calculation including subtotalTransition the minicart item using a yellow fade to connote the cart’s change in statusStay on the current page

4. Feature image ! Use a product photography if possible ! Avoid inspirational photographs of people

unless directly interacting with the product. In such cases, focus/crop photographs to focus on the product.

5. Feature option image # If more than one feature is available within the

1

2

4

5

6

3

billboard, then display a thumbnail associated with each feature to the right of the feature image.

# If the image applies to the current displayed feature, then highlight the image (such as with a larger stroke weight as in Figure 3).

" onclick: Display the selected feature headline, description, and photograph within the billboard

6. Feature carousel navigation # If more than three features are included within

the billboard, display feature carousel navigation above and below the three feature option images.

" onclick: Rotate thumbnail images in the direction selected by 1 (do not rotate “pages” of feature option images).

1. Placed & mark figures

2. Mark elements

3. Identify properties 4. Fill in details

Page 48: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

7/#887"&709:;<=>?0@@0A72)B*0CD7&)E0&+')#*

Published February 24, 2009Created by Nathan Curtis

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

/"7+')F70,")7G

The ecommerce " ow requires a range of updates based on formative user research and business requirements.In an e# ort to increase product marketing impact and social interactions, the team looks to improve marketing billboards on product and category pages and enable product ratings. Additionally, customer service will improve via inline click-to-chat sessions between customer and representative.In addition, new business requirements will facilitate credit check across multiple audience types, promotion codes to enable discounts, and varied shipping options and discounts.

DeliverablesDesign StrategyAliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies leo dapibus ultricies. Wireframes & Design Speci! cationDocumentation of the interaction design, depicting the structure, behaviors, and functional requirementsVisual Design CompsVisual, high-$ delity mockups that clarify color, typography, and $ nal layout upon which presentation layer assets are createdUsability Test ScriptPrototypeModerate $ delity mockups used to assess design quality via usability testing with participantsUsability Test Report

Assumptions, Constraints & Other ConsiderationsAll visual style, typography, and layout will be instantiated based on exisiting conventionsComponents will be reused, particularly those for page shells and existing page designsProduct taxonomy (including available product attributes and classi$ cations) will remain unchanged for this release

Presentation ModelThe experience will be built largely upon the existing design system foundation of page types & components. However, new components and page types will be de$ ned and design as necessary.

Design Objectives1. Lift order conversions2. Improve customer satisfaction3. Increase store " exibility

Project ScopeThe project scope is limited to requirements formally identi$ ed by Product Marketing in:ProjectRH329.FallUpdates.Requirements.doc

Target AudienceThe audiences for this documentation include:

Product Marketing: To understand and validate the realization of the user experience based on requirements Engineering: Learn and respond to design treatments that must be implemented.Quality Assurance: Identify test cases and clarify requirements in detail.Design Peers: Con$ rm and collaborate on a consensus design solution across roles

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!"#$

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

D'-05/5;%+03(4(?./"+%-O

a"O[%-A3

#32G'4

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

*+,-.+/0)(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@#$(+-0/%L5D$/43%$)C

7%&"(S

TN-%A0$/($./"+%-OU

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

@A$/0.'-$C

T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

P$/%-5Q+%$

789F;:

c9<;:

c9:;> c9:;> c9:;>

?9<;:

?9:;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#

@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U

N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU

( N-%&%/*%,(A*3$%0,/( gdTee5eeU

( )/./"(/.X(P"3/*&./"AQ( dTee5eeU

( )2*44*,+(P"3/*&./"AQ( dTee5eeU

5 >+35</L5T$)4'G/4$0U5 H@IIJIIC

5;%+($$054+5?E$(K+34

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

789F;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

7%&"(S(TN-%A0$/($./"+%-OU(S(

TN-%A0$/(,.&"U

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

789F;:

?9<;:

?9:;:

?:<;:X<

?:<;`

^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035

\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5

IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)

;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5

789:;:

789=;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

?2"$C%0/?9:;:

W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%

;%'&/(L5;+.'(L

)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(

I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(

b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5

;$%)+-/.5S-X+%G/4'+-

( 8*-3/(c.&"(j(

( J.3/(c.&"(j(

( KAA-"33(j(( ( (

( ?*/O(j(

( )/./"(j(

( kZN(?%A"(j(

( N2%,"(c0&B"-(j(P Q(( G

9'..'-8

( ?.-A(LO4"(j(

(?-"A*/(?.-A(c0&B"-(j(

( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q

( IX4*-./*%,(b./"(j( (l(

789F;:

#E'<<'-8

*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( )%$*.#()"$0-*/O(e(j( (G( (G(

( b./"(%1(m*-/2(j( (DDlbblRRRR

( b-*;"-h3(J*$",3"(e(j(

(( J*$",3"()/./"(j( T)/./"U

?+-)3G$% 93)'-$))

?:<;:

?:<;`

Home Search Results

Page Variations

Components

N/A

c1. Contact Usc2. Mini-Cart

1. Single Photograph, No Items in Cart2. Multiple Photos, Items in Cart

c1. Contact Usc2. Mini-Cartc3. Billboardc4. Accordionc5. Ratings

1. Empty2. 1 Item3. Many Items, with Promo Code applied

c5. Promotion Code

1. Standard2. Business Credit Check, FREE Shipping

c6. Credit History Checkc7. Shipping Options

Product Category Product Cart Checkout

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

7%&"(S(TN-%A0$/($./"+%-OU(S(

TN-%A0$/(,.&"U

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

789F;:

?9<;:

?9:;:

?:<;:X<

?:<;`

^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035

\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5

IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)

;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5

!"#!"#$%&'

The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

New ComponentsThe product page includes the following new components:

1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings

The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.

1

2

5

3

4

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

%"'&"#/+"'H0I8D'J %"'!"#/+"'H0=K0L'782

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(,%(*/"&35(KAA(.,(*/"&(BO($#*$C*,+(/2"(nKAA(/%(?.-/o(B0//%,(%,(.,O(%1(O%0-(4-%A0$/(A*34#.O35

>"),)0%)/)6#"%5-2?).2/#2).1"66'0;)'0)"0()"+)"5#)-/2(;"#'(.@

(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6

N-%&%/*%,(?%A"( ( 1<<.L

789F;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#

@;%+03(45-/G$C( dTee5eeU( < ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U

@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U

@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U

N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU

( N-%&%/*%,(A*3$%0,/( gdTee5eeU

( )/./"(/.X(P"3/*&./"AQ( dTee5eeU

( )2*44*,+(P"3/*&./"AQ( dTee5eeU

5 >+35</L5T$)4'G/4$0U5 H@IIJIIC

5;%+($$054+5?E$(K+34

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

789F;:

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

C6)DD)*BH0&#*'M$

#E'<<'-8

*$)4'-/4'+-M

#E'<<'-8

*$)4'-/4'+-M

()",A(/%(&O(B*##*,+(.AA-"33

()",A(/%(.(.,%/2"-(.AA-"33

Q$4E+05Y5;%'($M

DR==5"&$%-'8E45#E'<<'-8ZZZA0"(/%(/2"(.44#*"A(4-%&%/*%,($%A"(%1(T4-%&%/*%,($%A"(,.&"U5

Destination Options, FREE ShippingC

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

/6+*B70;)2'#"J

Version 1 :: June 26, 2009Initial design spec authored based on $ nal wireframes and design strategyInclusive of requirements for product category, product, cart, and checkout pages

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

N#"8+')F70:727+"&6

Introductory descriptive text about the context of the quotes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. ApproachNullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.

ParticipantsSed aliquam, nunc eget euismod ullamcorper:

[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)

[Summary Point][Objective descriptionctet am etue magna commodolore molor iriusting ero]

[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point]

[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point][Objective bullet point]

[Summary Point][Objective description ecte delenis niam, si. Ectet lorperil el etum autpat loreros nonsectet am etue magna commodolore molor iriusting eroctet am etue magna commodolore molor iriusting ero]

1

2

3

4

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

&"#!"#$%&'0/+'7B#"J

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

D'-05/5;%+03(4(?./"+%-O

a"O[%-A3

#32G'4

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

*+,-.+/0)(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@#$(+-0/%L5D$/43%$)C

7%&"(S

TN-%A0$/($./"+%-OU

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

@A$/0.'-$C

T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

P$/%-5Q+%$

789F;:

c9<;:

c9:;> c9:;> c9:;>

?9<;:

?9:;:

New ComponentsThe product category page will include the following two new components:

1. c1. Mini-Cart 2. c2. Contact Us

These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.

The product category page includes a video spotlight and a range of featured product collections.

1

2

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

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

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

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

TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(.#*V0././0-](Y*/./5(^$$."4"-*B03U

(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(

.#*V0././0-](Y*/./5(^$$."4"-*B03U

(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(

.#*V0././0-](Y*/./5(^$$."4"-*B03U

(

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

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

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

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

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

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(D%-"(b"/.*#3(

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

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

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

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

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

@#324'4.$CT?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-]U_(J".-,(D%-"(

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

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

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

("#/67&4#%'789:;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

?2"$C%0/?9:;:

W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%

;%'&/(L5;+.'(L

)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(

I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(

b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5

;$%)+-/.5S-X+%G/4'+-

( 8*-3/(c.&"(j(

( J.3/(c.&"(j(

( KAA-"33(j(( ( (

( ?*/O(j(

( )/./"(j(

( kZN(?%A"(j(

( N2%,"(c0&B"-(j(P Q(( G

9'..'-8

( ?.-A(LO4"(j(

(?-"A*/(?.-A(c0&B"-(j(

( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q

( IX4*-./*%,(b./"(j( (l(

789F;:

#E'<<'-8

*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( )%$*.#()"$0-*/O(e(j( (G( (G(

( b./"(%1(m*-/2(j( (DDlbblRRRR

( b-*;"-h3(J*$",3"(e(j(

(( J*$",3"()/./"(j( T)/./"U

?+-)3G$% 93)'-$))

?:<;:

?:<;`

1

2

New ComponentsThe product category page will include the following new/updated components:

1. c6. Credit history check2. c7. Shipping options

These two components will be displayed, in that order, between the personal information and billing sections of the checkout page.

The checkout page enables a customer to provide personal and billing information to purchase one or more products.

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

A72)B*0C'"+'7BJ030:727+"&6

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

(+D2030N-#P2

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

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

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

>+3%5?/%4(P<Q( IA*/(?.-/

(

100$054+5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(

"4E$%5'4$G)5'-5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P>Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

Without Promo Code

Empty Cart

1 Item

2+ Items

With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

VariationsEmpty cart:A. Without promo codeB. With promo code

1 item in cart:C. Without promo codeD. With promo code

2+ items in cart:E: Without promo code (in-page update)F: With promo code

Elements1. Minicart header

2. Empty cart message ! If the cart contains no items, then show the

Empty Cart Message; otherwise hide this message.

3-6 Product ! Display a row in the mini-cart from every

product in the cart, including the product name, description, price, and remove button.

3. Product name # onclick: Navigate to the product page

4. Product description ! Limit to no more than two lines (~60 characters).

If a description exceeds 60 characters, truncate at 60 characters and follow with “....”

1

2

3 6

7

13

4

5

8

9

10

11

12

5. Product price ! Format all prices with commas for thousands

and two decimal point accuracy ! If the product has quantity > 1, then show a price

per item in parentheses. ! If a product is discounted, include the original

price as gray, struckthrough, and to the left of the discounted price.

6. Remove product button # onclick: Remove the product from the shopping

cart, and refresh the minicart display

7. Edit cart link # onclick: Navigate to the shopping cart page

8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands

and two decimal point accuracy

9. Proceed to checkout button # onclick: Navigate to the checkout page

10. Added to your cart message ! Display if the user has added an item to the

cart within the current page via the add-to-cart button.

11. Other items in your cart message ! Display if other items were already in the cart

andthe user has added an item to the cart within the current page via the add-to-cart button.

12. Promo code ! If the user has applied a promo code to their

shopping cart, then show the promo code.

13. Remove promo code button ! If the user has applied a promo code to their

shopping cart, then show the remove promo code button.

# onclick: Remove the promo code from the shopping cart and refresh the minicart.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

%"#/+"'

PurposeThe shopping cart serves as the hub of selected items through an online store experience, and the key page from which the user can continue through to checkout in a familiar way.

For this project, the shopping cart serves as the primary location to apply and manage a promotion code. Here, users can:

Add a promo code whether or not the cart contains any itemsRemove an applied promotion codeLearn about promotion codesNavigate to as a hub for promo code application (such as from a promo banner elsewhere on the site or via paid search and print advertising)

Promo & Cart RationaleThe shopping cart serves as a persistent and visible destination within the shopping experience, where users can manage their overall order, discern price impacts, and consider their order from a high level.

Unchanged Components1. Header 2. Breadcrumbs 3. Page Title 4. Page Message 5. Cart Table Header 6. Cart Item(s) 7. Cart Subtotal & Update

Updated Component8. Cart Summary

New Component9. Cart Promo Codes

Unchanged Components (cont’d)10. About the Shopping Cart 11. Recommendations 12. Recently Viewed Items 13. Footer

The shopping cart summarizes all items that the user intends to purchase, displays aggregate pricing, and leads to checkout.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#

@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U

N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU

( N-%&%/*%,(A*3$%0,/( gdTee5eeU

( )/./"(/.X(P"3/*&./"AQ( dTee5eeU

( )2*44*,+(P"3/*&./"AQ( dTee5eeU

5 >+35</L5T$)4'G/4$0U5 H@IIJIIC

5;%+($$054+5?E$(K+34

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

789F;:

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

1

2

3

4

5

6

7

9

13

11

12

10

8

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$)"#+,)--)*.

#E'<<'-8

*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

#E'<<'-8

*$)4'-/4'+-

Destination Fixed, Method OptionsA

Alternative shipping options are personalized by previous product selection, experience context, and business rules based on cart composition.

Destination Options1. Constrained (see Figure A)

The cart product combination requires that the products are sent to the personal information that serves as the billing address

2. Custom (see Figure B)3. Options (see Figures C & D)

User can select to reuse billing address or enter an alternative address

Method Options

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

O+.-70#G0/#*'7*'2

Change History. . . . . . . . . . . . . . . . . . . . . 3Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4

Design Strategy & ResearchCreative Brief . . . . . . . . . . . . . . . . . . . . . . 6Design Objectives . . . . . . . . . . . . . . . . . . . 7Formative Research. . . . . . . . . . . . . . . . . . . 8Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9

Maps & FlowsFlow . . . . . . . . . . . . . . . . . . . . . . . . . 11

Pages1. Product Category . . . . . . . . . . . . . . . . . 13

c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15

2. Product. . . . . . . . . . . . . . . . . . . . . . . 16c3. Billboard . . . . . . . . . . . . . . . . . . . . 17c4. Accordion. . . . . . . . . . . . . . . . . . . . 18c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19

3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 203.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 213.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21c6. Promo Code . . . . . . . . . . . . . . . . . . 22

4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23c7. Credit History Check . . . . . . . . . . . . . . 24c8. Shipping . . . . . . . . . . . . . . . . . . . . 25Error Messaging . . . . . . . . . . . . . . . . . . 27

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

A72)B*0Q.R7&')F72

The following objectives are formed as a result of design collaboration, site analytics of the e-commerce process, and user-centered feedback derived from interviews.

Lift Order ConversionsDecrease exit rate by answering key questionsImprove user interface of complex customer decisionsEnhance product displays via billboard photos & carousels

Improve Customer SatisfactionEnable customers to engage more deeply through:

Real-time customer supportCustomer ratings

Increase Store FlexibilityBroaden store capabilities to:

O# er varied discounts through promo codesHandle consumer and business customers di# erently

1

2

3

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

!+B72

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

@A$/0.'-$5NC

T)0B2".A(<(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

@A$/0.'-$5OC

T)0B2".A(>(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

$%"#,)--.#+"$

StandardA

Two FeaturesB

Feature CarouselC

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

VariationsA. StandardB. Two FeaturesC. Feature Carousel

Elements1. Feature headline

" Limit headlines to one line, do not wrap " Follow brand guidelines for voice and tone

2. Feature description " Limit descriptions to four lines; optimally

descriptions span no more than two lines

3. Add to cart button # Add the item to the shopping cart; if the item is

already in the shopping cart, the increment the item quantity by one.

Add the item to the in-page mini-cart if not already included.Refresh minicart calculation including subtotalTransition the minicart item using a yellow fade to connote the cart’s change in statusStay on the current page

4. Feature image " Use a product photography if possible " Avoid inspirational photographs of people

unless directly interacting with the product. In such cases, focus/crop photographs to focus on the product.

5. Feature option image ! If more than one feature is available within the

1

2

4

5

6

3

billboard, then display a thumbnail associated with each feature to the right of the feature image.

! If the image applies to the current displayed feature, then highlight the image (such as with a larger stroke weight as in Figure 3).

# onclick: Display the selected feature headline, description, and photograph within the billboard

6. Feature carousel navigation ! If more than three features are included within

the billboard, display feature carousel navigation above and below the three feature option images.

# onclick: Rotate thumbnail images in the direction selected by 1 (do not rotate “pages” of feature option images).

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$*"#/'#0#12#(3

;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6

N-%&%/*%,(?%A"( ( 1<<.L

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

;%+G+4'+-5?+0$(L2"(4-%&%/*%,($%A"(O%0h;"(.44#*"A(A%"3(,%/(&./$2(.($0--",/(4-%&%/*%,5(N#".3"(-"",/"-(/2"($%A"(.,A(/-O(.+.*,5

N-%&%/*%,(?%A"( T$%A"(*,("--%-U ( 1<<.L

The promo code application enables users to enter a textual promo code to receive discounts and premium o# ers.

VariationsA. Default (no code applied)B. Applied codeC. Error

Elements1. Header

2. Introduction

3. Text box ! Limit entry to no more than 10 characters

4. Apply button # onclick

If the text box is empty, then display an error messageValidate the promo code applied, based on table X.If the promo code is valid, refresh the Promo Code to re" ect the applied code (see $ gure B), and refresh the shopping cart inline to re" ect any applicable savings.

5. Description & discount percentage

6. Remove code button # onclick

Remove the applied promo codeRefresh the Promo Code component to the no code applied state (refer to $ gure A).Refresh the shopping cart to remove any promo-code based discounts applied.

7. Error message

Default (no code applied)A

Applied codeB

ErrorC

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

789:;:

?2"$C%0/?9:;:

;$%)+-/.5S-X+%G/4'+-

( 8*-3/(c.&"(j( (8*-3/(,.&"(*3(-"V0*-"A

( J.3/(c.&"(j( ?0-/*3

( KAA-"33(j( :<>(I#&()/-""/

+,$-$!./!0!1-234$5!6.),!%27-!088-$//!/735.//.2'9!:4$0/$!(!44!.'!044!-$;7.-$8!

088-$//!(!$48/9!

I""#"0(722+B)*B

Checkout page with error messageA

ConventionsThe error messaging presentation rules for the Checkout page do not change with this release.

New MessagesThe following additional validations are to be added based on new data collection:

ID Event Condition Message

1 onblur Social Security Number (any $ eld) contains a non numeric character

Social security number contains a nonnumeric character

2 onblur Date of birth is nonempty and not formatted as MM/DD/YYYY

Date of birth is not formatted correctly

3 onblur Date of birth is less than 18 years from today’s date

Date of birth re" ects that you are not old enough to purchase a product from this website

4 onblur Tax ID (either $ eld) is nonempty and contains a nonnumeric character

Tax ID contains a nonnumeric character

5 onblur ZIP Code is nonempty and is not a $ ve digit numeric string

ZIP code is not formatted correctly

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

:7F)7P7"2

Reviewer Email Address Role Group

Core TeamJohn Smith [email protected] Information Architect UXD

Jane Brown [email protected] Visual Deisgner UXD

Adam Morris [email protected] Design Technologist WXD

Samantha March [email protected] Product Manager Mktg

Dan Ayers [email protected] Engineer IT

Extended TeamJohn Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

7/207/137/66/296/226/156/8

JulyJuneToday

!"#R7&'0!-+*

Interaction Design

Design Strategy

Visual Design

Usability TestingScripting

Wireframes Specs Revisions

Prototyping

Testing Report

Draft 1 Final Draft 1 Draft 2

Final Report

Draft 1

Draft 1

Draft 1

Final

Final Final

Final

Final

Review

NOTE: This project plan illustrates design team activities only; for the project’s complete plan, refer to the plan produced by the project management team.

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$&"#/#*'+&'012030/-)&45'#5/6+'

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee

Standard (with Click-to-chat)A

Pop-inC

Non-interactive (no Click-to-Chat)B

StaticD

VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static

Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.

Elements1. Header

! Enable publisher to update label on a per-page (per-product) basis

2. Description ! Enable publisher to update description on a per-

page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”

3. Chat Now Button # onclick: Open the existing click-to-chat window

already available within the support section ! If (normal business hours) and (Click-to-chat is

enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.

4. Email Link # onclick: Navigate to the Email Us page.

5. Call Link # onclick: Navigate to the Call Us page.

1

2

3

4

5 6

7

8

9

6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.

7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.

8. Close Button # onclick: Close the popin window, and return

focus to the parent page.

9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.

" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$+"#:+')*B2

Y./"(/2*3(TZ/"&(/O4"U6( (P>5=(%0/(%1(`(3/.-3Q

Y./"(/2*3(TZ/"&(/O4"U6( (7%--",A%03'

Y./"(/2*3(TZ/"&(/O4"U6( (N%%-

Y./"(/2*3(TZ/"&(/O4"U6( (8.*-

Y./"(/2*3(TZ/"&(/O4"U6( (p%%A

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

Y./"(/2*3(TZ/"&(/O4"U6( (IX$"##",/'

Y./"(/2*3(TZ/"&(/O4"U6( ().;"A

Not Yet Rated

Hovered & Levels

Click & Save

Applied Ratings

The product rating component enables users to view and apply a rating to the displayed product.

VariationsAa. StandardB. Two FeaturesC. Feature Carousel

Elements1. Rating Label

" Include a speci$ c label of what is being rated, generally by “type”. For example, include “product”, “article”, or “post.”

" Do not label the speci$ c item, since the rating is adjacent to the item title anyway.

2. Rating Stars # onhover: Highlight all stars to the left of and

including the current star, connoting that a rating would be applied equivalent to the currently hovered star. Also update the Rating Messaging to re" ect the level of the current star.

# onclick: Save the applied rating, and once saved, exchange the level (such as “Excellent”) with “Saved.” Do not transition to an applied rating after this (until the user would reload the page), but instead sustain the user’s applied rating.

3. Rating Messaging ! If the item has not yet been rated, show “(not yet

rated)”.If the item is being rated (a star is being hovered), then display the associated rating level.If the item has been rated, display the average out of total possible stars (refer to “Applied Ratings” $ gure).

" Use a common and meaningful spectrum of rating levels, such as Horrendous, Poor, Fair, Good, and Excellent.

" Use levels consistent with the tone of the brand.

A

1 2 3

B

C

D

E

F

G

H

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$,"#/"7$)'0;)2'#"J0/67&4

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( )%$*.#()"$0-*/O(e(j( (G( (G(

( b./"(%1(m*-/2(j( (DDlbblRRRR

( b-*;"-h3(J*$",3"(e(j(

(( J*$",3"()/./"(j( T)/./"U

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( L.X(Zb(e(j( (G(

( ?%&4.,O(c.&"(j(

?%$0'45A')4+%L5?E$(K

)*,$"(O%0(.-"(40-$2.3*,+(/2"3"(4-%A0$/3(1%-(B03*,"33(03"W(O%0-(B03*,"33([*##(B"(#*.B#"(1%-(/2*3(40-$2.3"(.,A(,%($-"A*/(2*3/%-O($2"$C(*3(-"V0*-"A5

1%$5L+35<3%(E/)'-85X+%5<$%)+-/.53)$5'-)4$/0\I,/"-(4"-3%,.#(*,1%-&./*%,(*,3/".A(_

?+-)3G$%

93)'-$))

93)'-$))

?+-)3G$%

?:<;:

?:<;:

?:<;`

?:<;`

Consumer optionA

Business optionB

Business (! xed)C

1

2

11

3

4

5

6

7

8

9

10

The credit history check enables the business to validate that a customer is credit worthy to make ongoing payments for a subscription.

VariationsA. Consumer optionB. Business optionC. Business $ xed

Elements1. Header

2. Tabs # onclick: Toggle to the alternative selection

(between Consumer in $ gure A and Business in $ gure B)

3. Social security number

4. Date of birth

5. Drivers license number

6. License state

7. Tax ID

8. Company name

9. Single option message

10. Alternative link # onclick: Switch display to enable both business

and consumer credit history data entry (as displayed in $ gure A).

11. Why? link # onclick: Display W02v3 Information Balloon

within basic description of why credit history information is collected

Cover Page

Chapter (Strategy)

2. Table of Contents

6. Creative Brief

3. Change History

7. Design Objectives

4. Reviewers

8. Research Results 9. Project Plan

10. Chapter (Maps/Flows) 11. Wire"ow

12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component 18. Component

19. Annotated Component 20. Chunked Page 21. Page Variations 22. Annotated Component 23. Chunked Page 24. Annotated Component

The system is...

ARTIFACTS

#'

Page 49: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#(

Discovery Design Document

Page 50: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$*

Where are the wireframes?You can’t skip too many steps in cultural evolution. Don’t try to overlay wireframe systems in a culture where the archetype story is “we don’t use wireframes yet since that one time we did, an engineer built an app using that design because he didn’t know any better.”

1 2 3 4 5

Page 51: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The system is...

STANDARDS

$)

Page 52: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

“Creates formulaic design and removes creative potentialby reusing existing elements.”

$!

Page 53: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

“Creates formulaic starting points and focuses creative attentionby reusing existing elements.”

$"

Page 54: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

“Deliverables are not be a place to stand out from the crowd.

Be creative with your designs.”

$#

Page 55: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$$

7/#887"&709:;<=>?0@@0A72)B*0CD7&)E0&+')#*

Version 1Published February 24, 2009Created by Nathan Curtis

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

/"7+')F70,")7G

The ecommerce " ow requires a range of updates based on formative user research and business requirements.In an e# ort to increase product marketing impact and social interactions, the team looks to improve marketing billboards on product and category pages and enable product ratings. Additionally, customer service will improve via inline click-to-chat sessions between customer and representative.In addition, new business requirements will facilitate credit check across multiple audience types, promotion codes to enable discounts, and varied shipping options and discounts.

DeliverablesDesign StrategyAliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies leo dapibus ultricies. Wireframes & Design Speci! cationDocumentation of the interaction design, depicting the structure, behaviors, and functional requirementsVisual Design CompsVisual, high-$ delity mockups that clarify color, typography, and $ nal layout upon which presentation layer assets are createdUsability Test ScriptPrototypeModerate $ delity mockups used to assess design quality via usability testing with participantsUsability Test Report

Assumptions, Constraints & Other ConsiderationsAll visual style, typography, and layout will be instantiated based on exisiting conventionsComponents will be reused, particularly those for page shells and existing page designsProduct taxonomy (including available product attributes and classi$ cations) will remain unchanged for this release

Presentation ModelThe experience will be built largely upon the existing design system foundation of page types & components. However, new components and page types will be de$ ned and design as necessary.

Design Objectives1. Lift order conversions2. Improve customer satisfaction3. Increase store " exibility

Project ScopeThe project scope is limited to requirements formally identi$ ed by Product Marketing in:ProjectRH329.FallUpdates.Requirements.doc

Target AudienceThe audiences for this documentation include:

Product Marketing: To understand and validate the realization of the user experience based on requirements Engineering: Learn and respond to design treatments that must be implemented.Quality Assurance: Identify test cases and clarify requirements in detail.Design Peers: Con$ rm and collaborate on a consensus design solution across roles

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!"#$

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

D'-05/5;%+03(4(?./"+%-O

a"O[%-A3

#32G'4

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

*+,-.+/0)(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@#$(+-0/%L5D$/43%$)C

7%&"(S

TN-%A0$/($./"+%-OU

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

@A$/0.'-$C

T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

P$/%-5Q+%$

789F;:

c9<;:

c9:;> c9:;> c9:;>

?9<;:

?9:;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

7%&"(S()2%44*,+(S

)2%44*,+(?.-/

R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U

R$(+GG$-0/4'+-)(

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3

?9<;:

?9:;:

c9:;<

c9:;>

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6

12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)

4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5

N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#

@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U

N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU

( N-%&%/*%,(A*3$%0,/( gdTee5eeU

( )/./"(/.X(P"3/*&./"AQ( dTee5eeU

( )2*44*,+(P"3/*&./"AQ( dTee5eeU

5 >+35</L5T$)4'G/4$0U5 H@IIJIIC

5;%+($$054+5?E$(K+34

;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6

TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((

789F;:

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

7%&"(S(TN-%A0$/($./"+%-OU(S(

TN-%A0$/(,.&"U

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

789F;:

?9<;:

?9:;:

?:<;:X<

?:<;`

^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035

\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5

IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)

;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5

789:;:

789=;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

?2"$C%0/?9:;:

W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%

;%'&/(L5;+.'(L

)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(

I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(

b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5

;$%)+-/.5S-X+%G/4'+-

( 8*-3/(c.&"(j(

( J.3/(c.&"(j(

( KAA-"33(j(( ( (

( ?*/O(j(

( )/./"(j(

( kZN(?%A"(j(

( N2%,"(c0&B"-(j(P Q(( G

9'..'-8

( ?.-A(LO4"(j(

(?-"A*/(?.-A(c0&B"-(j(

( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q

( IX4*-./*%,(b./"(j( (l(

789F;:

#E'<<'-8

*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35

Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6

(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ

()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ

?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q

( )%$*.#()"$0-*/O(e(j( (G( (G(

( b./"(%1(m*-/2(j( (DDlbblRRRR

( b-*;"-h3(J*$",3"(e(j(

(( J*$",3"()/./"(j( T)/./"U

?+-)3G$% 93)'-$))

?:<;:

?:<;`

Home Search Results

Page Variations

Components

N/A

c1. Contact Usc2. Mini-Cart

1. Single Photograph, No Items in Cart2. Multiple Photos, Items in Cart

c1. Contact Usc2. Mini-Cartc3. Billboardc4. Accordionc5. Ratings

1. Empty2. 1 Item3. Many Items, with Promo Code applied

c5. Promotion Code

1. Standard2. Business Credit Check, FREE Shipping

c6. Credit History Checkc7. Shipping Options

Product Category Product Cart Checkout

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

7%&"(S(TN-%A0$/($./"+%-OU(S(

TN-%A0$/(,.&"U

@A$/0.'-$5BC

T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

10054+5?/%4

"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)

Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

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

T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(

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

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

789F;:

?9<;:

?9:;:

?:<;:X<

?:<;`

^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035

\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5

IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)

;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5

!"#!"#$%&'

The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.

Display: Required

New ComponentsThe product page includes the following new components:

1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings

The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.

1

2

5

3

4

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

/6+*B70;)2'#"J

Version 1 :: June 26, 2009Initial design spec authored based on $ nal wireframes and design strategyInclusive of requirements for product category, product, cart, and checkout pages

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

N#"8+')F70:727+"&6

Introductory descriptive text about the context of the quotes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. ApproachNullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.

ParticipantsSed aliquam, nunc eget euismod ullamcorper:

[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)

[Summary Point][Objective descriptionctet am etue magna commodolore molor iriusting ero]

[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point]

[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point][Objective bullet point]

[Summary Point][Objective description ecte delenis niam, si. Ectet lorperil el etum autpat loreros nonsectet am etue magna commodolore molor iriusting eroctet am etue magna commodolore molor iriusting ero]

1

2

3

4

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

&"#!"#$%&'0/+'7B#"J

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

@D$/43%$05;%+03(4)C5 5 5 5 5(

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U

D'-05/5;%+03(4(?./"+%-O

a"O[%-A3

#32G'4

?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?

*+,-.+/0)(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

(Tb%$0&",/(,.&"U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@;%+03(457L<$)C(

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U

@#$(+-0/%L5D$/43%$)C

7%&"(S

TN-%A0$/($./"+%-OU

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

!"

#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)

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

)".-$26

789:;:

789<;:

789=;:

789>;:

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

@A$/0.'-$C

T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U

P$/%-5Q+%$

789F;:

c9<;:

c9:;> c9:;> c9:;>

?9<;:

?9:;:

New ComponentsThe product category page will include the following two new components:

1. c1. Mini-Cart 2. c2. Contact Us

These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.

The product category page includes a video spotlight and a range of featured product collections.

1

2

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

A72)B*0C'"+'7BJ030:727+"&6

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

(+D2030N-#P2

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

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

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5

>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P:Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

>+3%5?/%4(P<Q( IA*/(?.-/

(

100$054+5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(

"4E$%5'4$G)5'-5L+3%5(/%4M

@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII

;%+($$054+5?E$(K+34

>+3%5?/%4(P>Q( IA*/(?.-/

(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5

;%+($$054+5?E$(K+34

Without Promo Code

Empty Cart

1 Item

2+ Items

With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.

VariationsEmpty cart:A. Without promo codeB. With promo code

1 item in cart:C. Without promo codeD. With promo code

2+ items in cart:E: Without promo code (in-page update)F: With promo code

Elements1. Minicart header

2. Empty cart message ! If the cart contains no items, then show the

Empty Cart Message; otherwise hide this message.

3-6 Product ! Display a row in the mini-cart from every

product in the cart, including the product name, description, price, and remove button.

3. Product name # onclick: Navigate to the product page

4. Product description ! Limit to no more than two lines (~60 characters).

If a description exceeds 60 characters, truncate at 60 characters and follow with “....”

1

2

3 6

7

13

4

5

8

9

10

11

12

5. Product price ! Format all prices with commas for thousands

and two decimal point accuracy ! If the product has quantity > 1, then show a price

per item in parentheses. ! If a product is discounted, include the original

price as gray, struckthrough, and to the left of the discounted price.

6. Remove product button # onclick: Remove the product from the shopping

cart, and refresh the minicart display

7. Edit cart link # onclick: Navigate to the shopping cart page

8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands

and two decimal point accuracy

9. Proceed to checkout button # onclick: Navigate to the checkout page

10. Added to your cart message ! Display if the user has added an item to the

cart within the current page via the add-to-cart button.

11. Other items in your cart message ! Display if other items were already in the cart

andthe user has added an item to the cart within the current page via the add-to-cart button.

12. Promo code ! If the user has applied a promo code to their

shopping cart, then show the promo code.

13. Remove promo code button ! If the user has applied a promo code to their

shopping cart, then show the remove promo code button.

# onclick: Remove the promo code from the shopping cart and refresh the minicart.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

O+.-70#G0/#*'7*'2

Change History. . . . . . . . . . . . . . . . . . . . . 3Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4

Design Strategy & ResearchCreative Brief . . . . . . . . . . . . . . . . . . . . . . 6Design Objectives . . . . . . . . . . . . . . . . . . . 7Formative Research. . . . . . . . . . . . . . . . . . . 8Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9

Maps & FlowsFlow . . . . . . . . . . . . . . . . . . . . . . . . . 11

Pages1. Product Category . . . . . . . . . . . . . . . . . 13

c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15

2. Product. . . . . . . . . . . . . . . . . . . . . . . 16c3. Billboard . . . . . . . . . . . . . . . . . . . . 17c4. Accordion. . . . . . . . . . . . . . . . . . . . 18c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19

3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 203.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 213.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21c6. Promo Code . . . . . . . . . . . . . . . . . . 22

4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23c7. Credit History Check . . . . . . . . . . . . . . 24c8. Shipping . . . . . . . . . . . . . . . . . . . . 25Error Messaging . . . . . . . . . . . . . . . . . . 27

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

A72)B*0Q.R7&')F72

The following objectives are formed as a result of design collaboration, site analytics of the e-commerce process, and user-centered feedback derived from interviews.

Lift Order ConversionsDecrease exit rate by answering key questionsImprove user interface of complex customer decisionsEnhance product displays via billboard photos & carousels

Improve Customer SatisfactionEnable customers to engage more deeply through:

Real-time customer supportCustomer ratings

Increase Store FlexibilityBroaden store capabilities to:

O# er varied discounts through promo codesHandle consumer and business customers di# erently

1

2

3

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

!+B70O)'-7

!+B72

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

:7F)7P7"2

Reviewer Email Address Role Group

Core TeamJohn Smith [email protected] Information Architect UXD

Jane Brown [email protected] Visual Deisgner UXD

Adam Morris [email protected] Design Technologist WXD

Samantha March [email protected] Product Manager Mktg

Dan Ayers [email protected] Engineer IT

Extended TeamJohn Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

John Smith [email protected] information Architect WXD

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

7/66/296/226/156/8

JulyJuneToday

!"#R7&'0!-+*

Interaction Design

Design Strategy

Visual Design

Usability TestingScripting

Wireframes Specs

Prototyping

Draft 1 Final Draft 1 Draft 2

Final Report

Draft 1

Draft 1

Review

NOTE: This project plan illustrates design team activities only; for the project’s complete plan, refer to the plan produced by the project management team.

eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])

$&"#/#*'+&'012030/-)&45'#5/6+'

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

?E/45F+,

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36

(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.

?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee

Standard (with Click-to-chat)A

Pop-inC

Non-interactive (no Click-to-Chat)B

StaticD

VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static

Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.

Elements1. Header

! Enable publisher to update label on a per-page (per-product) basis

2. Description ! Enable publisher to update description on a per-

page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”

3. Chat Now Button # onclick: Open the existing click-to-chat window

already available within the support section ! If (normal business hours) and (Click-to-chat is

enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.

4. Email Link # onclick: Navigate to the Email Us page.

5. Call Link # onclick: Navigate to the Call Us page.

1

2

3

4

5 6

7

8

9

6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.

7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.

8. Close Button # onclick: Close the popin window, and return

focus to the parent page.

9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.

" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.

Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data

1. Cover Page

5. Chapter (Strategy)

2. Table of Contents

6. Creative Brief

3. Change History

7. Design Objectives

4. Reviewers

8. Research Results 9. Project Plan

10. Chapter (Maps/Flows) 11. Wire"ow

12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page

Cover

Chunking

Chapters

TOC

Change History

Clear ObjectivesBriefs

Wireflows

Specs

Plans

Page 56: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The system is...

PEOPLE!!! !

$%

Page 57: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$&

Design

Strategy

Editorial

Guidelines

Design

Spec

Product

Manager

Site

StrategistPublisher Engineer QA

AUDIENCES

DESIGN

What do they need?

Page 58: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

A documentation system fails when there aren’t leaders that advocate and inspire.

$'

Where are the champions?

Page 59: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

The system is...

$(

Page 60: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

You can now download the EightShapes Unify deliverable templates from unify.eightshapes.com.

%*

Interested?

Page 61: Unify Your Deliverables

Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Thank you!

Wanna talk deliverables, components, EightShapes Unify, or other UX stuff?

The PersonNathan [email protected]: nathanacurtis

%)

The SystemEightShapes [email protected]: 8SUnify