Unify Your Deliverables

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

! The Doc System We use and teach teams systematic ways to create better documentation. cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 (nathan@8shapes.com) $"#/#*'+&'012030/-)&45'#5/6+' $!quot;#()*)&+quot;' !quot;#!quot;#$%&' $%quot;#,)--.#+quot;$ The product category page includes a video spotlight and a The product page includes details across four tabs, highlights key Without Promo Code With Promo Code The Minicart is a Sidebar component that Variations 6. Have Us Call You Link 5. Product price Standard (with Click-to-chat) Non-interactive (no Click-to-Chat) 789:;: A B 789>;: 789>;: )quot;.-$26 )quot;.-$26 789<;: enables a user to view their carts contents, !quot; !quot; A. Standard (with Click-to-Chat # onclick: Navigate to the Have Us Call You page. ! Format all prices with commas for thousands (1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& @A$/0.'-$5BC range of featured product collections. features via a spotlight billboard, and provides calls-to-action. Empty 1 ?+-4/(45='8E4#E/<$) ?+-4/(45='8E4#E/<$) B. Non-interative (no Click-to-Chat) and two decimal point accuracy 1 >+3%5?/%4(P9Q >+3%5?/%4(P9Q prune undesired options, and proceed to 1 789=;: Cart ;/<$%) =&$-4) 12+3456) #$%&'($) 7. Worldwide O ces Link 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) C. Pop-in ! If the product has quantity > 1, then show a price ( ( ( ( T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( checkout without having to navigate to 2 D. Static per item in parentheses. # onclick: Navigate to the Worldwide O ces page. R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( ?9<;: 2 7%"(S(TN-%A0$/($./quot;+%-OU(S( the shopping cart. ! If a product is discounted, include the original 32%44*,+($.-/5 32%44*,+($.-/5 quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( 2 ?9:;: *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( New Components New Components TN-%A0$/(,."U 5 Clikc-to-Chat Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U 8. Close Button ( price as gray, struckthrough, and to the left of the %4/*%,36 %4/*%,36 Variations The product category page will include the following The product page includes the following new 12 N-%&%($%Aquot;6(@?+0$5-/G$C5 13 >+3%5?/%4(P9Q discounted price. The Click-to-Chat program enables customers to # onclick: Close the popin window, and return 1 1 >+3%5?/%4(P9Q 3 ( two new components: components: Empty cart: contact and have direct, online communication with R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( focus to the parent page. ( @A$/0.'-$5BC »( I&.*# 3 10054+5?/%4 32%44*,+($.-/5 3 6. Remove product button ?E/45F+, R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( A. Without promo code a support representative. The experience — beyond 32%44*,+($.-/5 »( ?.## 1. c1. Mini-Cart 1. c1. Minicart T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( B. With promo code 9. Address the new trigger to open the window via the Contact # onclick: Remove the product from the shopping Standard A 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 1 Item »( 7.;quot;(3(?.##(R%0 2 ?+-4/(45='8E4#E/<$) 2. c2. Contact Us 2. c2. Contact Us 2 ?+-4/(45='8E4#E/<$) quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( >+3%5?/%4(P:Q( Us component — is already in place for the Support cart, and refresh the minicart display >+3%5?/%4(P:Q( ( IA*/(?.-/ 7 The static address includes an location name, street IA*/(?.-/ »( I&.*# »( !quot;#$%&'%()*+,)-(. 3. c3. Billboard -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U 4 ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 1 item in cart: site area. Please refer to that project’s documentation ( ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( address lines 1 & 2, City, State, ZIP Code, and phone »( ?.## These two components will be displayed, in that 4. c4. Accordion 5 *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( %4/*%,36 7. Edit cart link C. Without promo code 3 for background and requirements of the program. @;%+03(45-/G$C5 @;%+03(45-/G$C5 6 %4/*%,36 number. @A$/0.'-$5NC 10054+5?/%4 »( 7.;quot;(3(?.##(R%0 order, at the top of the page’s sidebar, above existing 5. c5. Ratings 6 D. With promo code TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( ?E/45F+, # onclick: Navigate to the shopping cart page quot; Use the static address when contacting 4 components to Find a Product and Downloads. »( !quot;#$%&'%()*+, ?E/45F+, )-(. 7 Elements &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U EightShapes directly is not preferred, or when T)0B2quot;.A(<(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%( 5555 ?:<;:X< »( I&.*# The c1. Minicart and c2. Contact Us components will dee5ee(HIIJII5 5 HIIJII quot;&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) 2+ items in cart: 8. Subtotal »( I&.*# »( ?.## V0*3(A*(0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/( the primary task is to cut and paste the address »( ?.## »( 7.;quot;(3(?.##(R%0 be displayed, in that order, at the top of the page’s ( ( E: Without promo code (in-page update) 1. Header »( 7.;quot;(3(?.##(R%0 »( !quot;#$%&'%()*+, ^/./quot;(30&(-./0-(3quot;V0*A(0##quot;3(&*#(&*,/(.0A*/(quot;#*/(-./*(B#.B%--%;*/(quot;3/quot;&( %A(V0quot;(;%#quot;33*/*3(/0-W($%,(-quot;&4%-0,A*/(A%#%-( )-(. !quot;#$%!&$'$(!)* or send the company mail. ! Display the sum all product costs 8 )0B/%/.#6(HIIJII N-%&%($%Aquot;6(@?+0$5-/G$C5 sidebar, above any existing components. »( !quot;#$%&'%()*+,)-(. *&03.&(.3(A%##quot;3(quot;.(;%#04/.(quot;-*%--%(&.+,*3(quot;X(quot;*$*##.($*/.&W(V0.&W($%-( F: With promo code Pop-in Static .-0&(.3(.#*/(quot;/0-*B035U C D ! Format all prices with commas for thousands .0/(*43.4*quot;/(.B%5(KX*&(;quot;#*V0*3(quot;3/W(%A(V0%(Bquot;./(.4*$/%(/%/./0-(quot;,A*43035 ! Enable publisher to update label on a per-page ( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( T8quot;./0-quot;(/*/#quot;(/2./( 4 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 quot;X/quot;,A3(/[%(#*,quot;3U and two decimal point accuracy )0B/%/.#6(dee5ee(HIIJII5 (per-product) basis 4/.33*/.quot;(4#.B%-0&(-./.(;%#%-quot;W(;quot;,A*+,(*&*,$/./quot;&(3%#0/(4quot;##.B%-(-quot;&%A*3(0/( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ;%+($$054+5?E$(K+34 ( 10054+5?/%4 9 quot;/(%4/.3303A.quot;(quot;/(&.+,*3(&*#*+quot;,A*/W(quot;;quot;#*V0*(A%#04/.(/03A.,/(0-*B03(-quot;3/*0&(.3( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U ?./quot;+%-O ?+-4/(45='8E4#E/<$) ?+-4/(45='8E4#E/<$) 4quot;#*+quot;,Aquot;&(-quot;&(quot;X4#*/./*.(V0*3(*,(,%B*3(*430,/quot;3(,quot;3/-04/.3(*,$*#(*3(V0.quot;(;%#%-quot;(,./( 8 _(Jquot;.-,(D%-quot; Elements 9. Proceed to checkout button .B%-quot;3quot;(V0.3*/(%A*43.(;quot;,*3*/.3(3quot;V0quot;(%$$03(quot;0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-quot;-%( ( 2. Description ;%+($$054+5?E$(K+34 ( &%A*/./(.3(quot;X(quot;X4#*V0*.,/5 ( !quot;#$%!&$'$(!)* aquot;O[%-A3 Two Features T8quot;./0-quot;(/*/#quot;(/2./( # onclick: Navigate to the checkout page B ! Enable publisher to update description on a per- 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( IX4quot;-0&(V0*A0$**3(./*%-quot;3/W(30&(.#*B03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3(.$quot;-*%5(8*$*/( TJ%$./*%,(c."U 9 quot;X/quot;,A3(/[%(#*,quot;3U 1. Minicart header !quot;#$%!&$'$(!)* 2.-0&V0*B03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.V0./03(V0.&(;quot;,A*/W(%4/./0&($%-quot;*035 page (per-product) basis *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( TKAA-quot;33(:U quot;+,)-'/()0quot;0)(/#-1'2/3)45quot;)-quot;#('53)45()%quot;$quot;#(#.6'2)/52)$/)/%)(.2()%quot;$(02) 10. Added to your cart message #32G'4 ;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;X$quot;4/0-*(3%#04/./03W(/quot;(,*&*,(-quot;(.A(V0*(V0*(B#.0/5 quot; Limit to no more than three lines of text %4/*%,36 T?*/OUW(T)/./quot;U(eeeee 2. Empty cart message 2+ Items quot; Minimize description variation across pages ! Display if the user has added an item to the @A$/0.'-$5OC c9<;: N2%,quot;6(PeeeQ(eeeGeeee ?:<;` *+,-.+/0) >+3%5?/%4(P>Q( >+3%5?/%4(P<Q( IA*/(?.-/ ! If the cart contains no items, then show the IA*/(?.-/ quot; End description with “...options:” cart within the current page via the add-to-cart (Tb%$0",/(,."U ( ( ?E/45F+, Empty Cart Message; otherwise hide this (Tb%$0",/(,."U button. T)0B2quot;.A(>(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%( @*$)4'-/4'+-C 789F;: @;%+03(45-/G$C5 ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( 100$054+5L+3%5(/%4M (Tb%$0",/(,."U 10 3. Chat Now Button message. TKB3/-.$/(Aquot;3$-*4/*%,( V0*3(A*(0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? (Tb%$0",/(,."U TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 11. Other items in your cart message @;%+03(45-/G$C5 %A(V0quot;(;%#quot;33*/*3(/0-W($%,(-quot;&4%-0,A*/(A%#%-( T?.##(/%(.$/*%,U # onclick: Open the existing click-to-chat window &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U »( I&.*# 3-6 Product TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( .-0&(.3(.#*/(quot;/0-*B035U @*$)4'-/4'+-C already available within the support section ! Display if other items were already in the cart dee5ee(HIIJII5 »( ?.## TKB3/-.$/(Aquot;3$-*4/*%,( &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U ! Display a row in the mini-cart from every ( ! If (normal business hours) and (Click-to-chat is andthe user has added an item to the cart within Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U »( 7.;quot;(3(?.##(R%0 HIIJII 10054+5?/%4 T?.##(/%(.$/*%,U product in the cart, including the product name, @;%+03(45-/G$C(P<Q5 enabled for the product or product category), the current page via the add-to-cart button. ( »( !quot;#$%&'%()*+,)-(. @*$)4'-/4'+-C TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( description, price, and remove button. then display the Chat Now button. Otherwise, TKB3/-.$/(Aquot;3$-*4/*%,( 11 quot;4E$%5'4$G)5'-5L+3%5(/%4M &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 12. Promo code hide this button. Feature Carousel T?.##(/%(.$/*%,U C dee5ee(HIIJII5Pdee5ee(4quot;-(*/quot;&Q 3. Product name @;%+03(45-/G$C5 ! If the user has applied a promo code to their ( TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( 4. Email Link # onclick: Navigate to the product page shopping cart, then show the promo code. N-%&%($%Aquot;6(@?+0$5-/G$C5 &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? # onclick: Navigate to the Email Us page. ( HIIJII 4. Product description 13. Remove promo code button )0B/%/.#6(dee5ee(HIIJII5 ( 5. Call Link ! Limit to no more than two lines (~60 characters). )0B/%/.#6(HIIJII ! If the user has applied a promo code to their If a description exceeds 60 characters, truncate at # onclick: Navigate to the Call Us page. shopping cart, then show the remove promo ;%+($$054+5?E$(K+34 60 characters and follow with “....” code button. ;%+($$054+5?E$(K+34 # onclick: Remove the promo code from the shopping cart and refresh the minicart. Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Required Recommended Required Recommended Required Recommended Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated At it’s heart, the “doc system” is a set of templates + tools + techniques. Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot; Rationale Consistency Speed Reuse and then, if you get more serious: collaboration, scale, portability, standard, credibility Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

# Wireframes!!! 789<;< 789<;< 789:;< 789:;< )quot;.-$26 )quot;.-$26 789N;< 789N;< !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'( !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& 789Z;< 789Z;< <157/:1* +,%- ./01%* 23415* 6718'* #$%&'()* F53/8/8- D%>8,%30* <157/:1* F53/8/8- D%>8,%30* +,%- ./01%* 23415* 6718'* #$%&'()* B9N;< 7%"(b(JE-%>0$/($./quot;+%-HL(b( )9<;< B9N;< B9<;< 7%"(b()044%-/(b(J)044%-/(B./quot;+%-HL(b( JE-%>0$/(,."L 9%8'3:'(6/-;'<;341* #5'/:,1(H/-;,/-;'* F./quot;(/2*3(JP/quot;&(/H4quot;L6( (`,%/(Hquot;/(-./quot;>a B9<;< J)044%-/(R%4*$(R*/#quot;L ( /) JX-/*$#quot;(2*+2#*+2/L 8%-(3.#quot;3=(/-.*,*,+=(.,>(%/2quot;-(+quot;,quot;-.#( /) JX-/*$#quot;(2*+2#*+2/L *,?0*-*quot;3=($%,/.$/(03(;*.(/2quot;(1%##%@*,+( 8'13'96.3)0%)560303(4quot;%'3)'164)56().'4)(1%04:)630.)063)+6;0<)=(1'0.7)(#quot;##quot;)quot;+, @%&5(935'(`9a /) JX-/*$#quot;(2*+2#*+2/L %4/*%,36 3.,*3(>%#04/.3(;%#04/0-(&%>*3(,%G*3(.0>.(.&03.,>.&(quot;330&(.3(0/(;%#0/(quot;33 ( EH130,/81G /) JX-/*$#quot;(2*+2#*+2/L D%0($0--quot;,/#H(2.;quot;(,%(*/quot;&3(*,(H%0-( <5( *,0&(;%#04/.3*&*,(4#./0-(-quot;4/./quot;(4-%-quot;,>*3(;quot;,/(#.G%-*.3(&%>(?0%>(?0*(-quot;&4%-(.0/(#.G%-quot;2 9;3'(=%> 32%44*,+($.-/5 ?0*3(&.O*&*,/(;%#04/.quot;-0&(2*$*0&(3quot;?0%3.&(quot;/(.>*/./0&(>%#04/.($03=(?0.&(;% J)0G2quot;.>(4%-*3(.0/(#.G%-quot;&(quot;./0-(3.quot;(4-%(?0*3(>*(0/( N5( #%-(.#*?0./0-I(AG*/*G03>.(,.&(-quot;*$/%(*3($%&&%#%-quot;(quot;,/*0&(,*/./(&.(;%#0&=(0/(.>(?0quot;(>quot;G*3( *,/=(3*,*(-quot;4quot;-*G03(*0,/(&.O*&4%3/(%>(?0quot;(;%#quot;33*/*3( »( A&.*# ;quot;,>*.3(4quot;#quot;,*3(>*($%-*.(;*>quot;(.34*$*.(quot;O4#*?0(*Gquot;-%--%(quot;%3/%(quot;33quot;?0.(3*,/03(.3(, »( B.## quot;/(quot;O4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-=($%,( 9%8'3:'(6/-;'<;341* »( 7.;quot;(C3(B.##(D%0 -quot;&4%-0,>*/(>%#%-(.-0&(.3(.#*/(quot;/0-*G035L ( :5( quot;$/./(?0./quot;&(./(10+*/*.(?0%(%&,*&03=(?0%($%,3quot;>*(?0*(0/quot;(>quot;33*&(2.-*%(/quot;&4%-quot;(4quot;-34quot;-0, »( !quot;#$%&'%()*+,)-(. 8%-(3.#quot;3=(/-.*,*,+=(.,>(%/2quot;-(+quot;,quot;-.#( 0##.$quot;./*,($%&,*3(?0%3(-quot;&(1.$$04/.(*&03.4quot;>(&.(;quot;#*/*.(,*2*$*(.>*%,3quot;,*(>%#%-quot;- *,?0*-*quot;3=($%,/.$/(03(;*.(/2quot;(1%##%@*,+( Z5( %(*&.*%,($%,(quot;/(>%#%-quot;(;quot;#quot;3$*#(*0&(;*>quot;(303(0,/(4%-quot;4quot;-0&(?0quot;(#.G(*4*/(?0*(/quot;&(#*. %4/*%,36 89<;< #00('%(935' </-8(?8(=%> (;%#quot;3$*./(>0$*#*?0*(%>(&*,;quot;-*G03(quot;O(quot;O$quot;3(;%#04/*.&(*&%>(quot;*0&(.34*/(#.0/(10+*./0-=($%-*/(quot;.(;% 9;3'(=%> -%;*/*3(quot;/(.0/quot;&(quot;/(quot;/(.#*?0%($%,quot;3/=(0##.G(*,*&.(,./quot;3(>0$*quot;,*"(&%(;%#04/*(0&?0%>*(/*G035 B<N;<ON C3quot;-,."( quot;7157/1> I13'&51* F1:;(<41:* D%>8,%30* »( A&.*# »( B.## E.33@%->( »( 7.;quot;(C3(B.##(D%0 Q/./quot;(30&(-./0-(3quot;?0*>(0##quot;3(&*#(&*,/(.0>*/(quot;#*/(-./*( ( »( !quot;#$%&'%()*+,)-(. G#.G%--%;*/(quot;3/quot;&(*&03.&(.3(>%##quot;3(quot;.(;%#04/.(quot;-*%--%( (Fquot;"&Gquot;-("(%,(/2*3($%&40/quot;- &.+,*3(quot;O(quot;*$*##.($*/.&=(?0.&=($%-(.0/(*43.4*quot;/(.G%5(XO*&( ;quot;#*?0*3(quot;3/=(%>(?0%(Gquot;./(.4*$/%(/%/./0-(quot;,>*43035 </-8(?8 ( ( C4/.33*/.quot;(4#.G%-0&(-./.(;%#%-quot;=(;quot;,>*+,(*&*,$/./quot;&(3%#0/(4quot;##.G%-( -quot;&%>*3(0/(quot;/(%4/.3303>.quot;(quot;/(&.+,*3(&*#*+quot;,>*/=(quot;;quot;#*?0*(>%#04/.( 8%-+%/(H%0-6(C3quot;-,."I(E.33@%->I /03>.,/(0-*G03(-quot;3/*0&(.3(4quot;#*+quot;,>quot;&(-quot;&(quot;O4#*/./*.(?0*3(*,(,%G*3( E./01%(F/',1G *430,/quot;3(,quot;3/-04/.3(*,$*#(*3(?0.quot;(;%#%-quot;(,./(.G%-quot;3quot;(?0.3*/(%>*43.( =%'(@1'(3(A1B$15C ;quot;,*3*/.3(3quot;?0quot;(%$$03(quot;0&(1.$$03=(?0*>0,/(#.,>*/(*>*%-quot;-%(&%>*/./( JS*>quot;%(>quot;3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;quot;#quot;,/*3/(.0/(10+.5( .3(quot;O(quot;O4#*?0*.,/5 C/(.0/(#*?0%>(&%>*/./quot;(*>(quot;.?0quot;(quot;%3(,0&?0*>(?00,/(*#*$( B-quot;./quot;(.,(.$$%0,/(1%-(.$$quot;33(/%( /quot;&4quot;>(?0./0-quot;(4quot;-1quot;-0&(10+.5(8quot;-L quot;*+2/32.4quot;35$%&5 AO4quot;-0&(?0*>0$**3(./*%-quot;3/=(30&(.#*G03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3( U%-quot;(A*+2/)2.4quot;3(S*>quot;%3 .$quot;-*%5(8*$*/(2.-0&?0*G03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.?0./03(?0.&( ;quot;,>*/=(%4/./0&($%-quot;*035 M9N;< D%>8,%30* quot;+,)-'0()1quot;1)(0#-2'304)56quot;)-quot;#('64)56()%quot;$quot;#(#.7'3)063)$0)0%)(.3() E./01%(F/',1G ()2.-quot;((( (A&.*#((( (E-*,/(((Rquot;O/()*Yquot;6(#(#(# >%#quot;,/(;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;O$quot;4/0-*(3%#04/./03=(/quot;(,*&*,( (JK%$0",/(,."L JS*>quot;%(>quot;3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;quot;#quot;,/*3/(.0/(10+.5( -quot;(.>(?0*(?0*(G#.0/5 C/(.0/(#*?0%>(&%>*/./quot;(*>(quot;.?0quot;(quot;%3(,0&?0*>(?00,/(*#*$( (JK%$0",/(,."L (.#*?0*>(&.(.4quot;#quot;3/*%-.(>*3(-quot;($%-quot;&4%(--%;*>quot;G*/(.,*3/%/.&($03.&=(.4quot;#( E./01%(F/',1G /quot;&4quot;>(?0./0-quot;(4quot;-1quot;-0&(10+.5(8quot;-L (JK%$0",/(,."L quot;3(quot;;quot;#*/(0,/(10+.5(M.&(>03(.-*G03(>*/(quot;/(.$quot;--%(quot;/(0##%-4%-*.(>%#%-*.(/*%-quot;3quot;>*3( JS*>quot;%(>quot;3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;quot;#quot;,/*3/(.0/(10+.5( »( U%-quot;(A*+2/)2.4quot;3(S*>quot;%3 (JK%$0",/(,."L C/(.0/(#*?0%>(&%>*/./quot;(*>(quot;.?0quot;(quot;%3(,0&?0*>(?00,/(*#*$( /quot;&4quot;>(?0./0-quot;(4quot;-1quot;-0&(10+.5(8quot;-L *(,%G*3(.$$0&(?0*(-quot;3/*.quot;-%(%>*%(G#.,>*3$*>(&%#04/./quot;(quot;%33*/(#.,>*(>0,/*.,( »( U%-quot;(A*+2/)2.4quot;3(S*>quot;%3 U.+,.&(,*quot;,/*G03(quot;3/-0&($%,(,%3/=(*3(quot;/=(quot;.?0*3/(?0%(?0.&03.quot;($0&(0/(>%#%-*(*&%#0&?(0.34 (;%#04/.3(.>(0/(.-0&(quot;0&(?0*($%,quot;/=(3.quot;(4-./0-*3(3quot;>(&.+,*3*/(>0,/5 >($'-'7.046.)1'0.)6$$quot;#7quot;#'quot;)quot;+,)-')'%6-')'$$'3)%quot;$quot;#()(64)61%(1%0)(-6$70)56'.)40;1')104:)56() quot;&4%-0&(quot;;quot;##.$quot;-*3(.3(>*(-quot;2quot;,>*/(quot;3(quot;*$/%(*,*&03(quot;/(?0.quot;(.>(quot;O$quot;4quot;>(?0*3( B<N;c ;quot;#*.34*$*.3(quot;/=(?0.quot;(,%G*/(;%#0/quot;,/(4#*/(0/(quot;.?0quot;(-quot;3quot;(3*/(.$$0&=(.0/.(quot;/(quot;3$*.3(quot;/(quot;/(?0quot;($04/. /quot;&(>*/=(/quot;&?0*G03.(>0,/(?0*3(>quot;,*&(,%G*/(4%-*($03(&%>*3$*quot;/(?0.&(0/(4%-( .34quot;-$2*##0/(#.G%-quot;($04/.34*3(?0quot;(.&(.$*(.3(&*=(3*($03.,>*3(&%3/%(&%>*(>%#%(>%#04/.%#quot;,*quot;/(> %--0&(3quot;?0.quot;(;%#%-0&=(3%#0/quot;&4%3(*03(,*3(3quot;?0.&=(30&=(,03(quot;/03=(?0.quot;(&.( Gquot;.?0.&=(%&,*2*/(quot;#(&.+,*/*(0-*%-quot;*0,/(;%#04/.(>%#quot;$/quot;(*,03$*#*?0.&(>%#%-quot;=(30,/(?0quot;(,035 quot;4quot;-quot;(4.(>*/(quot;/(.0>*/(2.-0&(quot;3/(;%#%-*3(/*3$*."/(%>(?0%>*3*(3*(*,*3(3*&(quot;./*(*&*#( @%)63)0%'.)%'30()1quot;9'3(4)'46.)>quot;$quot;)quot;+,)-36.:)-quot;44quot;%')%quot;$6730)>(#-2'-0()>quot;$64)56')%quot;$67'30)>( 789;< 0&(2*##quot;,*(&*#*?0*(>quot;(,*&*=(.0>*3(*0-I B%,/.$/3(V(8quot;quot;>G.$W(V(7quot;#4(V()*/quot;(U.4(( quot;,*&%#%-.(*,/=($%,3quot;-0&(,*33*/(%&,*.quot;($%,quot;$/./quot;33*(,./?0%(%&,*&(10+.5(P&03(3*/quot;&(>%#%-4%- [(N99]N99^(A*+2/)2.4quot;3(TTB(X##(-*+2/3(-quot;3quot;-;quot;>5((Rquot;-&3(_(B%,>*/*%,3(V(E-*;.$H()/./quot;",/(V(B%%W*quot;(E%#*$H(V(R-.>quot;&.-W3(%1(A*+2/)2.4quot;3(TTB quot;3(quot;/=(*&4%3(>*$*>0$*&(1.$$03=($03=(?0*($%,(,0##.0/(0##.G%-quot;-*%(>%#0/(?0quot;(quot;3(&*,*3/(;%#04/./0-(3 $%-quot;-1quot;-*%5(C/(*>(quot;.?0*>(&%#%-quot;&(10+*./0-I 789;< B%,/.$/3(V(8quot;quot;>G.$W(V(7quot;#4(V()*/quot;(U.4(( E-*;.$H()/./quot;",/(V(B%%W*quot;(E%#*$H(V(R-.>quot;&.-W3(%1(A*+2/)2.4quot;3(TTB [(N99]N99^(A*+2/)2.4quot;3(TTB(X##(-*+2/3(-quot;3quot;-;quot;>5((Rquot;-&3(_(B%,>*/*%,3 Product Page Support Page B B Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$ Wireframe Templates Setup Layouts 1 Page Layers Styles Grids Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

% Wireframe Elements Standard, “atomic” symbols: • Forms • Navigation • Icons • Ads • Text Location: /wireframes/_elements/ Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

& Wireframe Components A component is a reusable page chunk. Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

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

( Page Libraries Some teams even have standard page types. They are built from components, of course. Location: /wireframes/_pages/ Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)* Extreme Wireframing Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

Design vs. Deliverable Units / Size Typography Grid Combine pictures & words to Depict what a screen looks like Purpose document design Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)! Deliverables!!! Plus: Contracts Proposals Placards Tri-folds Offer Letters Honey-Dos http://semanticstudios.com/publications/semantics/000228.php Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)quot; Common Deliverables Just a few of the kinds of deliverables we produce... Strategy Specifications Persona Mental Model Style Guide Comp Specs Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)# Yes, Jason’s Worth It! Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)$ Pick a Template Choose your page size & orientation (order by frequency of use): 1 2 3 4 Letter Legal Letter Tabloid Landscape Portrait Portrait Landscape Location: /deliverables/ Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)% The “Blank Canvas” Every deliverable is born with two measly pages. Cover Interior Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)& FEATURE: Naming Your Document Every 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... Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

)' FEATURE: Naming Your Pages Page titles are included on the master, and then you override it on each page. It’s the only shortcut you have to know: CTRL-SHFT-Click it. That said, you wanna be a deliverable ninja? Then learn shortcuts! Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

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

!* Modular Designs Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

!) Using Wireframes, Again Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

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

!quot; Deliverable Elements Do you get the standard annotation stuff? Absolutely. • Markers • Callouts • Frames • Site Maps • People • Flows (thanks JJG!) • Project Plans • Reviews Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

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

!$ Deliverable Pages Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

!% Document Planning Collaborative outline Co-authored document eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) O+.-70#G0/#*'7*'2 /6+*B70;)2'#quot;J :7F)7P7quot;2 Change History. . . . . . . . . . . . . . . . . . . . . 3 Version 1 :: June 26, 2009 Reviewer Email Address Role Group Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4 Initial design spec authored based on nal wireframes and design Core Team strategy Inclusive of requirements for product category, product, cart, and John Smith john@8shapes.com Information Architect UXD Design Strategy & Research checkout pages Jane Brown jane@8shapes.com Visual Deisgner UXD Creative Brief . . . . . . . . . . . . . . . . . . . . . . 6 Adam Morris adam@8shapes.com Design Technologist WXD Design Objectives . . . . . . . . . . . . . . . . . . . 7 Samantha March sam@8shapes.com Product Manager Mktg Formative Research. . . . . . . . . . . . . . . . . . . 8 Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9 Dan Ayers dan@8shapes.com Engineer IT Extended Team Maps & Flows John Smith john@john.com information Architect WXD Flow . . . . . . . . . . . . . . . . . . . . . . . . . 11 John Smith john@john.com information Architect WXD John Smith john@john.com information Architect WXD Pages 7/#887quot;&709:;<=>?0@@0A72)B*0CD7&)E 0&+')#* John Smith john@john.com information Architect WXD 1. Product Category . . . . . . . . . . . . . . . . . 13 John Smith john@john.com information Architect WXD c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14 c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15 2. Product. . . . . . . . . . . . . . . . . . . . . . . 16 c3. Billboard . . . . . . . . . . . . . . . . . . . . 17 c4. Accordion. . . . . . . . . . . . . . . . . . . . 18 c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19 3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 20 3.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 21 3.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21 c6. Promo Code . . . . . . . . . . . . . . . . . . 22 4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23 c7. Credit History Check . . . . . . . . . . . . . . 24 c8. Shipping . . . . . . . . . . . . . . . . . . . . 25 Error Messaging . . . . . . . . . . . . . . . . . . 27 Version 1 Published February 24, 2009 Created by Nathan Curtis 1. Cover Page 2. Table of Contents 3. Change History 4. Reviewers eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 /quot;7+')F70,quot;)7G A72)B*0Q.R7&')F72 N#quot;8+')F70:727+quot;&6 !quot;#R7&'0!-+* The ecommerce ow requires a range of Design Objectives Lift Order Conversions [Summary Point] The following objectives are formed as a result of design Introductory descriptive text about the context of the quotes Deliverables 6/8 6/15 6/22 6/29 7/6 7/13 7/20 1 1 Design Strategy updates based on formative user research collaboration, site analytics of the e-commerce process, and Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi 1. Lift order conversions Aliquam sagittis magna in felis egestas rutrum. Proin wisi libero, Decrease exit rate by answering key questions [Objective descriptionctet am etue magna commodolore vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies and business requirements. 2. Improve customer satisfaction user-centered feedback derived from interviews. commodo, ipsum sed pharetra gravida, orci magna rhoncus molor iriusting ero] leo dapibus ultricies. Improve user interface of complex customer decisions 3. Increase store exibility neque, id pulvinar odio lorem non turpis. Wireframes & Design Speci cation In an e ort to increase product marketing impact and Documentation of the interaction design, depicting the structure, social interactions, the team looks to improve marketing Enhance product displays via billboard photos & Project Scope Design Strategy behaviors, and functional requirements Approach billboards on product and category pages and enable Visual Design Comps carousels The project scope is limited to requirements formally product ratings. Additionally, customer service will Visual, high- delity mockups that clarify color, typography, and nal Final Report Review [Summary Point] Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam 2 identi ed by Product Marketing in: layout upon which presentation layer assets are created improve via inline click-to-chat sessions between customer erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Usability Test Script and representative. ProjectRH329.FallUpdates.Requirements.doc Nam consectetuer. [Objective bullet point] Prototype Improve Customer Satisfaction Interaction Design In addition, new business requirements will facilitate credit Moderate delity mockups used to assess design quality via usability 2 Target Audience Participants [Objective bullet point] testing with participants check across multiple audience types, promotion codes Wireframes Specs Revisions Usability Test Report The audiences for this documentation include: Enable customers to engage more deeply through: to enable discounts, and varied shipping options and Sed aliquam, nunc eget euismod ullamcorper: [Objective bullet point] A72)B*0C'quot;+'7BJ030:727+quot;&6 discounts. Draft 1 Final Draft 1 Draft 2 Final Assumptions, Constraints & Other Considerations Product Marketing: To understand and validate [Participant Type] (##) Real-time customer support All visual style, typography, and layout will be instantiated based on the realization of the user experience based on [Participant Type] (##) exisiting conventions requirements Customer ratings Components will be reused, particularly those for page shells and [Participant Type] (##) [Summary Point] Visual Design Engineering: Learn and respond to design treatments 3 existing page designs [Participant Type] (##) Product taxonomy (including available product attributes and that must be implemented. Draft 1 Final classi cations) will remain unchanged for this release [Objective bullet point] [Participant Type] (##) Quality Assurance: Identify test cases and clarify Increase Store Flexibility Presentation Model requirements in detail. 3 [Participant Type] (##) [Objective bullet point] The experience will be built largely upon the existing design system Design Peers: Con rm and collaborate on a consensus foundation of page types & components. However, new components Broaden store capabilities to: [Objective bullet point] Usability Testing design solution across roles and page types will be de ned and design as necessary. O er varied discounts through promo codes Scripting [Objective bullet point] Testing Report Handle consumer and business customers di erently Draft 1 Final Final [Summary Point] 4 Prototyping [Objective description ecte delenis niam, si. Ectet lorperil Draft 1 Final NOTE: This project plan illustrates design team activities el etum autpat loreros nonsectet am etue magna only; for the project’s complete plan, refer to the plan commodolore molor iriusting eroctet am etue magna produced by the project management team. commodolore molor iriusting ero] June July Today 5. Chapter (Strategy) 6. Creative Brief 7. Design Objectives 8. Research Results 9. Project Plan eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 !quot;#$ Home Search Results 789:;: 789:;: 789:;: 789:;: 789>;: 789>;: 789>;: )quot;.-$26 )quot;.-$26 )quot;.-$26 789<;: 789<;: 789<;: !quot; !quot; !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& 789=;: 789=;: 789=;: 789=;: ?9:;: #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) ?2quot;$C%0/ ;%'&/(L5;+.'(L ?9<;: ?9<;: 7%"(S ?9<;: 7%"(S()2%44*,+(S 7%"(S(TN-%A0$/($./quot;+%-OU(S( ;$%)+-/.5S-X+%G/4'+- )*33quot;V0./5(4/./quot;(A%#%-/*%,(2quot;,A-quot;&( ?9:;: TN-%A0$/($./quot;+%-OU ?9:;: ?9:;: *,$*(B#."/0(quot;-%3/*3(A%#%-(./5(Z-*0-quot;&( )2%44*,+(?.-/ TN-%A0$/(,."U ( 8*-3/(c."(j( ;quot;-%3/-0A(/./(;quot;#*/(.0/4./(#0&3.,( Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ c9:;> 0##."/(./*3(quot;33quot;A(&*,*3(quot;33*3*/(.#*/( R$(+GG$-0/4'+-) R%0-(32%44*,+($.-/($%,/.*,3(:(*/quot;&6 ( J.3/(c."(j( ;quot;#*V0*3*/W(;quot;#quot;3quot;,A-quot;(&.+,*&(*#*3&%A( >+3%5?/%4(P9Q ( *.&$%&&(%#%-quot;-./5( >+3%5?/%4(P9Q ( @;%+03(45F/G$C @A$/0.'-$C ( KAA-quot;33(j( N-%A0$/( N-*$quot;(4quot;-(*/quot;&( f0.,/*/O( L%/.# R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( TKB3/-.$/(Aquot;3$-*4/*%,( @A$/0.'-$5BC ( I$/quot;&(;%#%-quot;-(.quot;33*/(;0##.(1.$*#*V( ( (( 32%44*,+($.-/5 Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( 0*3$*4(quot;0(1.$*,+(quot;0(1.$*A0*4*/(*#(quot;,*3*3( @;%+03(45-/G$C( dTee5eeU( ( dTee5eeU _(bquot;/.*#3 32%44*,+($.-/5 T)0B2quot;.A(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*(0/( ,0##.&(ii-*/(#0/(;0#40/(#.%-quot;($%,3quot;A(/./( ( ?*/O(j( T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( TN-%A0$/(Aquot;3$-*4/*%,U *,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 4-.quot;3/*3(.&(quot;/(#%-(*0-quot;-%($%-(3*&(.A*+,.( @;%+03(45F/G$C 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( ?+-4/(45='8E4#E/<$) $%,0&3.(,A*+,*&(quot;33quot;$/quot;(&.+,*3$*,$*( quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( ( )/./quot;(j( TKB3/-.$/(Aquot;3$-*4/*%,( quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( ?+-4/(45='8E4#E/<$) B#.(1.$*#(quot;0*4(quot;0+.*/(#%-(.&(;quot;#quot;3/%(Aquot;#( ( -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U quot;0*3(.#*3(A%#%-quot;-$*(/./5(Y%3(.A*4*/(quot;/W( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( ( ( kZN(?%Aquot;(j( _(bquot;/.*#3 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU 303/%(A*.&W(;quot;,/(.&(.$*##.%-quot;&(ii-*#( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 0/quot;/0quot;(1quot;0&(,%,(2quot;,/(0##04/./5( %4/*%,36 *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( @;%+03(45F/G$C ( N2%,quot;(c0&Bquot;-(j(P Q(( G P$/%-5Q+%$ %4/*%,36 10054+5?/%4 TKB3/-.$/(Aquot;3$-*4/*%,( ( N-%&%/*%,(A*3$%0,/( gdTee5eeU b0*3(.#*/W(;quot;-*#(0##.%-quot;&(;quot;-%3(,*B2( ?E/45F+, Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U quot;/W(3quot;,/(.#*/(;quot;,*B2(quot;-*03$*#*/(./W(;quot;#( ?E/45F+, _(bquot;/.*#3 ( )/./quot;(/.X(Pquot;3/*&./quot;AQ( dTee5eeU A%#%-(3quot;V0./(;0##.(.#*V0.&(;quot;,*3(quot;33*( ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q @D$/43%$05;%+03(4)C5 5555 @D$/43%$05;%+03(4)C5 5555 quot;Xquot;-%3/*quot;(Aquot;#*V0.&$%,(quot;Xquot;-$*A(0*3$*4( »( I&.*# ?:<;:X< ?:<;: quot;&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) c9:;< quot;#quot;,*&(.0/4./5 »( I&.*# ( )2*44*,+(Pquot;3/*&./quot;AQ( dTee5eeU »( ?.## ( ( ?+-)3G$% 93)'-$)) R$($-4.L5:'$,$05S4$G) »( 7.;quot;(3(?.##(R%0 »( ?.## »( !quot;#$%&'%()*+,)-(. ^/./quot;(30&(-./0-(3quot;V0*A(0##quot;3(&*#(&*,/(.0A*/(quot;#*/(-./*(B#.B%--%;*/(quot;3/quot;&( »( 7.;quot;(3(?.##(R%0 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC ( !quot;#$%!&$'$(!)* ( )%$*.#()quot;$0-*/O(e(j( (G( (G( »( !quot;#$%&'%()*+,)-(. »( TN-%A0$/(c."U *&03.&(.3(A%##quot;3(quot;.(;%#04/.(quot;-*%--%(&.+,*3(quot;X(quot;*$*##.($*/.&W(V0.&W($%-( »( TN-%A0$/(c."U .0/(*43.4*quot;/(.B%5(KX*&(;quot;#*V0*3(quot;3/W(%A(V0%(Bquot;./(.4*$/%(/%/./0-(quot;,A*43035 T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( ;%+($$054+5?E$(K+34 ( b./quot;(%1(m*-/2(j( (DDlbblRRRR T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( »( TN-%A0$/(c."U 5 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U »( TN-%A0$/(c."U 4/.33*/.quot;(4#.B%-0&(-./.(;%#%-quot;W(;quot;,A*+,(*&*,$/./quot;&(3%#0/(4quot;##.B%-(-quot;&%A*3(0/( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ( b-*;quot;-h3(J*$quot;,3quot;(e(j( ( quot;/(%4/.3303A.quot;(quot;/(&.+,*3(&*#*+quot;,A*/W(quot;;quot;#*V0*(A%#04/.(/03A.,/(0-*B03(-quot;3/*0&(.3( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U (+D2030N-#P2 ?./quot;+%-O 4quot;#*+quot;,Aquot;&(-quot;&(quot;X4#*/./*.(V0*3(*,(,%B*3(*430,/quot;3(,quot;3/-04/.3(*,$*#(*3(V0.quot;(;%#%-quot;(,./( _(Jquot;.-,(D%-quot; (( J*$quot;,3quot;()/./quot;(j( T)/./quot;U .B%-quot;3quot;(V0.3*/(%A*43.(;quot;,*3*/.3(3quot;V0quot;(%$$03(quot;0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-quot;-%( ( &%A*/./(.3(quot;X(quot;X4#*V0*.,/5 ?:<;` !quot;#$%!&$'$(!)* 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ aquot;O[%-A3 T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( #E'<<'-8 IX4quot;-0&(V0*A0$**3(./*%-quot;3/W(30&(.#*B03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3(.$quot;-*%5(8*$*/( ( ( quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U !quot;#$%!&$'$(!)* 2.-0&V0*B03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.V0./03(V0.&(;quot;,A*/W(%4/./0&($%-quot;*035 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 quot;+,)-'/()0quot;0)(/#-1'2/3)45quot;)-quot;#('53)45()%quot;$quot;#(#.6'2)/52)$/)/%)(.2()%quot;$(02) 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 #32G'4 *$)4'-/4'+- ;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;X$quot;4/0-*(3%#04/./03W(/quot;(,*&*,(-quot;(.A(V0*(V0*(B#.0/5 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( @#$(+-0/%L5D$/43%$)C R%0-(4-%A0$/3([*##(Bquot;(3quot;,/(/%(O%0-($-quot;A*/($.-A(B*##*,+(.AA-quot;33(1%-(3quot;$0-*/O(40-4%3quot;35 P!2O]Q5 c9<;: ?:<;` *+,-.+/0) c9:;> c9:;> c9:;> @;%+03(457L<$)C @;%+03(457L<$)C @;%+03(457L<$)C (Tb%$0",/(,."U Q$4E+05Y5;%'($ ( ( ( (Tb%$0",/(,."U )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 789F;: @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( (Tb%$0",/(,."U (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ (Tb%$0",/(,."U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 9'..'-8 TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U ( ?.-A(LO4quot;(j( T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( -quot;A*/(?.-A(c0&Bquot;-(j( ? @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( ( )quot;$0-*/O(Zb(j( (P!2./(*3(/2*3]Q Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( IX4*-./*%,(b./quot;(j( (l( 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5quot;%0$% 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? Product Category Product Cart Checkout Page Variations N/A 1. Single Photograph, No Items in Cart 1. Empty 1. Standard 2. Multiple Photos, Items in Cart 2. 1 Item 2. Business Credit Check, FREE Shipping 3. Many Items, with Promo Code applied Components c1. Contact Us c1. Contact Us c5. Promotion Code c6. Credit History Check c2. Mini-Cart c2. Mini-Cart c7. Shipping Options c3. Billboard c4. Accordion c5. Ratings 10. Chapter (Maps/Flows) 11. Wire ow eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 "#!quot;#$%&'0/+'7B#quot;J $"#/#*'+&'012030/-)&45'#5/6+' $!quot;#()*)&+quot;' !quot;#!quot;#$%&' $%quot;#,)--.#+quot;$ $(quot;#%&&#'()#* 4 The product category page includes a video spotlight and a The product page includes details across four tabs, highlights key Without Promo Code With Promo Code Variations 6. Have Us Call You Link The Minicart is a Sidebar component that 5. Product price The Minicart is a Sidebar component that billboard, then display a thumbnail associated Standard (with Click-to-chat) Non-interactive (no Click-to-Chat) 789:;: 789:;: A B 789>;: 789>;: )quot;.-$26 )quot;.-$26 !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* with each feature to the right of the feature 789<;: 789<;: enables a user to view their carts contents, enables a user to view their carts contents, !quot; A. Standard (with Click-to-Chat # onclick: Navigate to the Have Us Call You page. ! Format all prices with commas for thousands !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& @A$/0.'-$5BC range of featured product collections. features via a spotlight billboard, and provides calls-to-action. Empty 1 image. ?+-4/(45='8E4#E/<$) ?+-4/(45='8E4#E/<$) B. Non-interative (no Click-to-Chat) and two decimal point accuracy 1 >+3%5?/%4(P9Q >+3%5?/%4(P9Q prune undesired options, and proceed to prune undesired options, and proceed to T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( 1 !quot;#$%!&$'$(!)* 789=;: 789=;: Cart ! If the image applies to the current displayed #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) 7. Worldwide O ces Link #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( C. Pop-in ! If the product has quantity > 1, then show a price ( ( ( ( T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( checkout without having to navigate to checkout without having to navigate to 2 ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( feature, then highlight the image (such as with a !quot;#$%!&$'$(!)* ?9<;: D. Static per item in parentheses. # onclick: Navigate to the Worldwide O ces page. R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 7%"(S 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( ?9<;: .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U 2 7%"(S(TN-%A0$/($./quot;+%-OU(S( the shopping cart. the shopping cart. larger stroke weight as in Figure 3). ?9:;: ! If a product is discounted, include the original 32%44*,+($.-/5 32%44*,+($.-/5 quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( TN-%A0$/($./quot;+%-OU _(Jquot;.-,(D%-quot; 2 ?9:;: *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( New Components New Components TN-%A0$/(,."U 5 # onclick: Display the selected feature headline, Clikc-to-Chat ( Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U 8. Close Button ( price as gray, struckthrough, and to the left of the %4/*%,36 %4/*%,36 !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* The product category page will include the following Variations The product page includes the following new Variations description, and photograph within the billboard 12 N-%&%($%Aquot;6(@?+0$5-/G$C5 13 >+3%5?/%4(P9Q discounted price. The Click-to-Chat program enables customers to # onclick: Close the popin window, and return 1 1 >+3%5?/%4(P9Q 3 ( two new components: components: @A$/0.'-$C Empty cart: A. Standard contact and have direct, online communication with R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( focus to the parent page. @A$/0.'-$5BC ( !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* »( I&.*# 3 6. Feature carousel navigation 10054+5?/%4 32%44*,+($.-/5 3 6. Remove product button ?E/45F+, R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( A. Without promo code B. Two Features a support representative. The experience — beyond 32%44*,+($.-/5 T)0B2quot;.A(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*(0/( »( ?.## 1. c1. Mini-Cart 1. c1. Minicart T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( ! If more than three features are included within B. With promo code C. Feature Carousel *,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 9. Address the new trigger to open the window via the Contact # onclick: Remove the product from the shopping Standard A 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 1 Item »( 7.;quot;(3(?.##(R%0 2 ?+-4/(45='8E4#E/<$) 2. c2. Contact Us 2. c2. Contact Us quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( the billboard, display feature carousel navigation 2 ?+-4/(45='8E4#E/<$) quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( >+3%5?/%4(P:Q( Us component — is already in place for the Support cart, and refresh the minicart display >+3%5?/%4(P:Q( ( 5 -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U The static address includes an location name, street IA*/(?.-/ 7 IA*/(?.-/ »( I&.*# »( !quot;#$%&'%()*+,)-(. 3. c3. Billboard 4 -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( Elements above and below the three feature option 1 item in cart: site area. Please refer to that project’s documentation ( ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( address lines 1 & 2, City, State, ZIP Code, and phone »( ?.## !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* These two components will be displayed, in that 4. c4. Accordion 5 images. *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( %4/*%,36 7. Edit cart link C. Without promo code 3 for background and requirements of the program. @;%+03(45-/G$C5 @;%+03(45-/G$C5 P$/%-5Q+%$ 6 number. %4/*%,36 @A$/0.'-$5NC »( 7.;quot;(3(?.##(R%0 10054+5?/%4 order, at the top of the page’s sidebar, above existing 5. c5. Ratings 6 # onclick: Rotate thumbnail images in the direction D. With promo code TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( 1. Feature headline TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( ?E/45F+, TZ/quot;&(L*/#quot;U( TZ/quot;&(bquot;3$-*4/*%,( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( # onclick: Navigate to the shopping cart page quot; Use the static address when contacting 4 components to Find a Product and Downloads. »( !quot;#$%&'%()*+, ?E/45F+, )-(. selected by 1 (do not rotate “pages” of feature 7 Elements &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U .#*V0././0-](Y*/./5( .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U quot; Limit headlines to one line, do not wrap EightShapes directly is not preferred, or when T)0B2quot;.A(<(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%( @D$/43%$05;%+03(4)C5 5555 @D$/43%$05;%+03(4)C5 5555 ?:<;:X< »( I&.*# The c1. Minicart and c2. Contact Us components will ^$$.quot;4quot;-*B03U ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( option images). dee5ee(HIIJII5 5 HIIJII quot;&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) 2+ items in cart: !+B72 8. Subtotal »( I&.*# »( ?.## ( ( V0*3(A*(0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/( quot; Follow brand guidelines for voice and tone the primary task is to cut and paste the address ( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U »( ?.## »( 7.;quot;(3(?.##(R%0 be displayed, in that order, at the top of the page’s ( ( E: Without promo code (in-page update) TZ/quot;&(L*/#quot;U( TZ/quot;&(bquot;3$-*4/*%,( _(Jquot;.-,(D%-quot; _(D%-quot;(bquot;/.*#3 1. Header »( 7.;quot;(3(?.##(R%0 »( !quot;#$%&'%()*+,)-(. ^/./quot;(30&(-./0-(3quot;V0*A(0##quot;3(&*#(&*,/(.0A*/(quot;#*/(-./*(B#.B%--%;*/(quot;3/quot;&( %A(V0quot;(;%#quot;33*/*3(/0-W($%,(-quot;&4%-0,A*/(A%#%-( !quot;#$%!&$'$(!)* or send the company mail. ! Display the sum all product costs 8 )0B/%/.#6(HIIJII N-%&%($%Aquot;6(@?+0$5-/G$C5 sidebar, above any existing components. »( !quot;#$%&'%()*+,)-(. *&03.&(.3(A%##quot;3(quot;.(;%#04/.(quot;-*%--%(&.+,*3(quot;X(quot;*$*##.($*/.&W(V0.&W($%-( .#*V0././0-](Y*/./5( ( F: With promo code Pop-in Static .-0&(.3(.#*/(quot;/0-*B035U 2. Feature description C D ! Format all prices with commas for thousands .0/(*43.4*quot;/(.B%5(KX*&(;quot;#*V0*3(quot;3/W(%A(V0%(Bquot;./(.4*$/%(/%/./0-(quot;,A*43035 ! Enable publisher to update label on a per-page ( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( ^$$.quot;4quot;-*B03U 5 !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( 4 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 ( quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U and two decimal point accuracy )0B/%/.#6(dee5ee(HIIJII5 (per-product) basis quot; Limit descriptions to four lines; optimally 4/.33*/.quot;(4#.B%-0&(-./.(;%#%-quot;W(;quot;,A*+,(*&*,$/./quot;&(3%#0/(4quot;##.B%-(-quot;&%A*3(0/( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ;%+($$054+5?E$(K+34 ( 10054+5?/%4 9 TZ/quot;&(L*/#quot;U( TZ/quot;&(bquot;3$-*4/*%,( quot;/(%4/.3303A.quot;(quot;/(&.+,*3(&*#*+quot;,A*/W(quot;;quot;#*V0*(A%#04/.(/03A.,/(0-*B03(-quot;3/*0&(.3( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( !quot;#$%!&$'$(!)* ?./quot;+%-O ?+-4/(45='8E4#E/<$) descriptions span no more than two lines ?+-4/(45='8E4#E/<$) 4quot;#*+quot;,Aquot;&(-quot;&(quot;X4#*/./*.(V0*3(*,(,%B*3(*430,/quot;3(,quot;3/-04/.3(*,$*#(*3(V0.quot;(;%#%-quot;(,./( 8 _(Jquot;.-,(D%-quot; Elements .#*V0././0-](Y*/./5( .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( 9. Proceed to checkout button .B%-quot;3quot;(V0.3*/(%A*43.(;quot;,*3*/.3(3quot;V0quot;(%$$03(quot;0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-quot;-%( ( 2. Description ^$$.quot;4quot;-*B03U ;%+($$054+5?E$(K+34 ( &%A*/./(.3(quot;X(quot;X4#*V0*.,/5 ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ( !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* ( aquot;O[%-A3 3. Add to cart button Two Features T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( # onclick: Navigate to the checkout page .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U B ! Enable publisher to update description on a per- 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( TJ%$./*%,(c."U IX4quot;-0&(V0*A0$**3(./*%-quot;3/W(30&(.#*B03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3(.$quot;-*%5(8*$*/( 9 quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U 1. Minicart header !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* 6 _(Jquot;.-,(D%-quot; 2.-0&V0*B03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.V0./03(V0.&(;quot;,A*/W(%4/./0&($%-quot;*035 page (per-product) basis # Add the item to the shopping cart; if the item is !quot;#$%!&$'$(!)* *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( TKAA-quot;33(:U quot;+,)-'/()0quot;0)(/#-1'2/3)45quot;)-quot;#('53)45()%quot;$quot;#(#.6'2)/52)$/)/%)(.2()%quot;$(02) ( 10. Added to your cart message #32G'4 ;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;X$quot;4/0-*(3%#04/./03W(/quot;(,*&*,(-quot;(.A(V0*(V0*(B#.0/5 quot; Limit to no more than three lines of text already in the shopping cart, the increment the !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* %4/*%,36 @#$(+-0/%L5D$/43%$)C T?*/OUW(T)/./quot;U(eeeee 2. Empty cart message 2+ Items quot; Minimize description variation across pages item quantity by one. ! Display if the user has added an item to the @A$/0.'-$5OC c9<;: N2%,quot;6(PeeeQ(eeeGeeee ?:<;` *+,-.+/0) >+3%5?/%4(P>Q( >+3%5?/%4(P<Q( c9:;> c9:;> c9:;> IA*/(?.-/ ! If the cart contains no items, then show the IA*/(?.-/ quot; End description with “...options:” Add the item to the in-page mini-cart if not cart within the current page via the add-to-cart @;%+03(457L<$)C @;%+03(457L<$)C @;%+03(457L<$)C (Tb%$0",/(,."U ( ( ?E/45F+, Empty Cart Message; otherwise hide this ( ( ( (Tb%$0",/(,."U already included. button. T)0B2quot;.A(>(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%( @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 789F;: @;%+03(45-/G$C5 ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( (Tb%$0",/(,."U 100$054+5L+3%5(/%4M 10 3. Chat Now Button message. TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( Refresh minicart calculation including V0*3(A*(0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? (Tb%$0",/(,."U TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 11. Other items in your cart message @;%+03(45-/G$C5 %A(V0quot;(;%#quot;33*/*3(/0-W($%,(-quot;&4%-0,A*/(A%#%-( subtotal T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U # onclick: Open the existing click-to-chat window &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U »( I&.*# 3-6 Product TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( .-0&(.3(.#*/(quot;/0-*B035U Transition the minicart item using a yellow @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C already available within the support section ! Display if other items were already in the cart dee5ee(HIIJII5 »( ?.## TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U ! Display a row in the mini-cart from every fade to connote the cart’s change in status ! If (normal business hours) and (Click-to-chat is ( andthe user has added an item to the cart within Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U »( 7.;quot;(3(?.##(R%0 HIIJII 10054+5?/%4 T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U product in the cart, including the product name, Stay on the current page @;%+03(45-/G$C(P<Q5 enabled for the product or product category), the current page via the add-to-cart button. ( »( !quot;#$%&'%()*+,)-(. @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( description, price, and remove button. then display the Chat Now button. Otherwise, TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( 11 quot;4E$%5'4$G)5'-5L+3%5(/%4M 4. Feature image &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 12. Promo code hide this button. Feature Carousel T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U C dee5ee(HIIJII5Pdee5ee(4quot;-(*/quot;&Q 3. Product name @;%+03(45-/G$C5 quot; Use a product photography if possible ! If the user has applied a promo code to their ( TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( 4. Email Link # onclick: Navigate to the product page quot; Avoid inspirational photographs of people shopping cart, then show the promo code. N-%&%($%Aquot;6(@?+0$5-/G$C5 789F;: &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( unless directly interacting with the product. In E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? # onclick: Navigate to the Email Us page. ( HIIJII 4. Product description 13. Remove promo code button such cases, focus/crop photographs to focus on )0B/%/.#6(dee5ee(HIIJII5 ( 5. Call Link the product. ! Limit to no more than two lines (~60 characters). )0B/%/.#6(HIIJII ! If the user has applied a promo code to their If a description exceeds 60 characters, truncate at # onclick: Navigate to the Call Us page. shopping cart, then show the remove promo ;%+($$054+5?E$(K+34 5. Feature option image 60 characters and follow with “....” code button. ;%+($$054+5?E$(K+34 ! If more than one feature is available within the # onclick: Remove the promo code from the shopping cart and refresh the minicart. Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Required Recommended Required Recommended Required Recommended Required Recommended 12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component 18. Component eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) $+quot;#:+')*B2 %quot;#/+quot;' %quot;'"#/+quot;'H0I8D'J %quot;'!quot;#/+quot;'H0=K0L'782 $*quot;#/'#0#12#(3 (quot;#/67&4#%' $,quot;#/quot;7$)'0;)2'#quot;J0/67&4 11 The shopping cart summarizes all items that the user intends to The checkout page enables a customer to provide personal and The product rating component enables The promo code application enables users 789:;: 789:;: 789:;: 1 2 3 789:;: 789>;: 789>;: 789>;: )quot;.-$26 )quot;.-$26 )quot;.-$26 ;%+G+4'+-5?+0$ ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q 1 1 789<;: 789<;: 789<;: users to view and apply a rating to the to enter a textual promo code to receive !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot; !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ purchase, displays aggregate pricing, and leads to checkout. billing information to purchase one or more products. A Not Yet Rated ?:<;: ( displayed product. discounts and premium o ers. 789=;: 789=;: 789=;: ?+-)3G$% 93)'-$)) 2 ?9:;: #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) ?2quot;$C%0/ p%/(.(4-%&%/*%,($%Aquot;](K44#O(O%0-(4-%&%/*%,($%Aquot;(2quot;-quot;(/%( ;%'&/(L5;+.'(L Variations 2 ?9<;: 3.;quot;(%,(O%0-(40-$2.3quot;(/%A.O6 ?9<;: ?9<;: Variations 7%"(S()2%44*,+(S 7%"(S()2%44*,+(S 7%"(S()2%44*,+(S ;$%)+-/.5S-X+%G/4'+- )*33quot;V0./5(4/./quot;(A%#%-/*%,(2quot;,A-quot;&( ( )%$*.#()quot;$0-*/O(e(j( (G( (G( ?9:;: ?9:;: ?9:;: 3 )2%44*,+(?.-/ )2%44*,+(?.-/ )2%44*,+(?.-/ *,$*(B#."/0(quot;-%3/*3(A%#%-(./5(Z-*0-quot;&( Purpose Unchanged Components New Components 3 Hovered & Levels Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (7%--quot;,A%03' Aa. Standard A. Default (no code applied) B ( 8*-3/(c."(j( c9:;> ;quot;-%3/-0A(/./(;quot;#*/(.0/4./(#0&3.,( c9:;> c9:;> 11 R$(+GG$-0/4'+-) R$(+GG$-0/4'+-) 0##."/(./*3(quot;33quot;A(&*,*3(quot;33*3*/(.#*/( R$(+GG$-0/4'+-) B. Two Features B. Applied code 4 The shopping cart serves as the hub of selected items 1. Header The product category page will include the following R%0-(32%44*,+($.-/($%,/.*,3(:(*/quot;&6 R%0-(32%44*,+($.-/($%,/.*,3(:(*/quot;&6 R%0-(32%44*,+($.-/($%,/.*,3(,%(*/quot;&35(KAA(.,(*/quot;&(BO($#*$C*,+(/2quot;(nKAA(/%(?.-/o(B0//%,(%,(.,O(%1(O%0-(4-%A0$/(A*34#.O35 ( 1<<.L N-%&%/*%,(?%Aquot;( ( J.3/(c."(j( ;quot;#*V0*3*/W(;quot;#quot;3quot;,A-quot;(&.+,*&(*#*3&%A( ( ( ( ( b./quot;(%1(m*-/2(j( (DDlbblRRRR 4 C. Feature Carousel C. Error *.&$%&&(%#%-quot;-./5( @;%+03(45F/G$C @;%+03(45F/G$C @;%+03(45F/G$C through an online store experience, and the key 2. Breadcrumbs new/updated components: 5 >quot;),)0%)/)6#quot;%5-2?).2/#2).1quot;66'0;)'0)quot;0()quot;+)quot;5#)-/2(;quot;#'(.@ N-%A0$/( N-*$quot;(4quot;-(*/quot;&( f0.,/*/O( L%/.# N-%A0$/( N-*$quot;(4quot;-(*/quot;&( f0.,/*/O( L%/.# ( KAA-quot;33(j( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( I$/quot;&(;%#%-quot;-(.quot;33*/(;0##.(1.$*#*V( ( (( page from which the user can continue through to 3. Page Title Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U »( TN-%A0$/($./quot;+%-OU 0*3$*4(quot;0(1.$*,+(quot;0(1.$*A0*4*/(*#(quot;,*3*3( @;%+03(45-/G$C( @;%+03(45-/G$C( _(bquot;/.*#3 dTee5eeU( ( dTee5eeU _(bquot;/.*#3 _(bquot;/.*#3 dTee5eeU( ( dTee5eeU Elements < Elements 6 5 ( b-*;quot;-h3(J*$quot;,3quot;(e(j( »( TN-%A0$/($./quot;+%-OU checkout in a familiar way. 4. Page Message ,0##.&(ii-*/(#0/(;0#40/(#.%-quot;($%,3quot;A(/./( Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (N%%- 1. c6. Credit history check C ( ?*/O(j( TN-%A0$/(Aquot;3$-*4/*%,U TN-%A0$/(Aquot;3$-*4/*%,U Default (no code applied) A »( TN-%A0$/($./quot;+%-OU 4-.quot;3/*3(.&(quot;/(#%-(*0-quot;-%($%-(3*&(.A*+,.( @;%+03(45F/G$C @;%+03(45F/G$C @;%+03(45F/G$C »( TN-%A0$/($./quot;+%-OU 5. Cart Table Header 2. c7. Shipping options $%,0&3.(,A*+,*&(quot;33quot;$/quot;(&.+,*3$*,$*( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( ( )/./quot;(j( »( TN-%A0$/($./quot;+%-OU B#.(1.$*#(quot;0*4(quot;0+.*/(#%-(.&(;quot;#quot;3/%(Aquot;#( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 1. Rating Label 1. Header 6 For this project, the shopping cart serves as the 6. Cart Item(s) J*$quot;,3quot;()/./quot;(j( T)/./quot;U (( quot;0*3(.#*3(A%#%-quot;-$*(/./5(Y%3(.A*4*/(quot;/W( _(bquot;/.*#3 _(bquot;/.*#3 _(bquot;/.*#3 7 @;%+03(45-/G$C( ( kZN(?%Aquot;(j( dTee5eeU(H@IIJIIC( ( (dTee5eeU(H@IIJIIC : 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU 303/%(A*.&W(;quot;,/(.&(.$*##.%-quot;&(ii-*#( TN-%A0$/(Aquot;3$-*4/*%,U primary location to apply and manage a promotion 7. Cart Subtotal & Update These two components will be displayed, in that quot; Include a speci c label of what is being rated, 0/quot;/0quot;(1quot;0&(,%,(2quot;,/(0##04/./5( @;%+03(45F/G$C @;%+03(45F/G$C @;%+03(45F/G$C ( N2%,quot;(c0&Bquot;-(j(P Q(( G ?:<;` TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( code. Here, users can: order, between the personal information and billing 12+3454E$5#E+<<'-85?/%4 2. Introduction ;%+G+4'+-5?+0$ Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (8.*- generally by “type”. For example, include ( N-%&%/*%,(A*3$%0,/( gdTee5eeU D b0*3(.#*/W(;quot;-*#(0##.%-quot;&(;quot;-%3(,*B2( 8 Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U ( ( Updated Component quot;/W(3quot;,/(.#*/(;quot;,*B2(quot;-*03$*#*/(./W(;quot;#( ;%+G+4'+-5?+0$ _(bquot;/.*#3 _(bquot;/.*#3 sections of the checkout page. _(bquot;/.*#3 @;%+03(45-/G$C( dTee5eeU(H@IIJIIC( ( (dTee5eeU(H@IIJIIC “product”, “article”, or “post.” : 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) p%/(.(4-%&%/*%,($%Aquot;](K44#O(O%0-(4-%&%/*%,($%Aquot;(2quot;-quot;(/%( ( )/./quot;(/.X(Pquot;3/*&./quot;AQ( dTee5eeU A%#%-(3quot;V0./(;0##.(.#*V0.&(;quot;,*3(quot;33*( Consumer option ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q TN-%A0$/(Aquot;3$-*4/*%,U A 1 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 3.;quot;(%,(O%0-(40-$2.3quot;(/%A.O6 quot;Xquot;-%3/*quot;(Aquot;#*V0.&$%,(quot;Xquot;-$*A(0*3$*4( Add a promo code whether or not the cart 3. Text box quot; Do not label the speci c item, since the rating is 8. Cart Summary ?:<;: c9:;< c9:;< 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( ( c9:;< ( )2*44*,+(Pquot;3/*&./quot;AQ( dTee5eeU quot;#quot;,*&(.0/4./5 ?+-)3G$% 93)'-$)) 12 R$($-4.L5:'$,$05S4$G) R$($-4.L5:'$,$05S4$G) P!2O]Q5 R$($-4.L5:'$,$05S4$G) contains any items ( 1<<.L N-%&%/*%,(?%Aquot;( adjacent to the item title anyway. R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC ! Limit entry to no more than 10 characters ( ( ( ( )%$*.#()quot;$0-*/O(e(j( (G( (G( Remove an applied promotion code New Component »( TN-%A0$/(c."U »( TN-%A0$/(c."U »( TN-%A0$/(c."U 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (p%%A E »( TN-%A0$/(c."U »( TN-%A0$/(c."U »( TN-%A0$/(c."U ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q ;%+($$054+5?E$(K+34 2. Rating Stars Learn about promotion codes ( b./quot;(%1(m*-/2(j( (DDlbblRRRR »( TN-%A0$/(c."U »( TN-%A0$/(c."U »( TN-%A0$/(c."U 5 4. Apply button 9. Cart Promo Codes ( N-%&%/*%,(A*3$%0,/( gdTee5eeU »( TN-%A0$/(c."U »( TN-%A0$/(c."U »( TN-%A0$/(c."U TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( Navigate to as a hub for promo code application ?:<;: ( b-*;quot;-h3(J*$quot;,3quot;(e(j( # onhover: Highlight all stars to the left of and # onclick ( )/./quot;(/.X(Pquot;3/*&./quot;AQ( dTee5eeU ?+-)3G$% 93)'-$)) (such as from a promo banner elsewhere on the Unchanged Components (cont’d) 10 including the current star, connoting that a rating (( J*$quot;,3quot;()/./quot;(j( T)/./quot;U Applied code If the text box is empty, then display an error B ( )2*44*,+(Pquot;3/*&./quot;AQ( dTee5eeU 789F;: site or via paid search and print advertising) ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( ?:<;` 9 would be applied equivalent to the currently 10. About the Shopping Cart 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (IX$quot;##quot;,/' message F 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC 7 ( ( #E'<<'-8 hovered star. Also update the Rating Messaging ( L.X(Zb(e(j( (G( 11. Recommendations 2 Validate the promo code applied, based on 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 to re ect the level of the current star. ;%+($$054+5?E$(K+34 12. Recently Viewed Items table X. 5 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( Promo & Cart Rationale TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( *$)4'-/4'+- # onclick: Save the applied rating, and once saved, P!2O]Q5 R%0-(4-%A0$/3([*##(Bquot;(3quot;,/(/%(O%0-($-quot;A*/($.-A(B*##*,+(.AA-quot;33(1%-(3quot;$0-*/O(40-4%3quot;35 8( 13. Footer ?%&4.,O(c."(j( If the promo code is valid, refresh the Promo The shopping cart serves as a persistent and visible exchange the level (such as “Excellent”) with Click & Save Code to re ect the applied code (see gure Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( ().;quot;A G ;%+G+4'+-5?+0$ destination within the shopping experience, where ?:<;` “Saved.” Do not transition to an applied rating 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ B), and refresh the shopping cart inline to Q$4E+05Y5;%'($ ( ( users can manage their overall order, discern price 789F;: )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 13 ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( after this (until the user would reload the page), ( 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 re ect any applicable savings. (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 impacts, and consider their order from a high level. Business option but instead sustain the user’s applied rating. ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ B L2quot;(4-%&%/*%,($%Aquot;(O%0h;quot;(.44#*quot;A(A%quot;3(,%/(&./$2(.($0--quot;,/( 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( P!2O]Q5 5. Description & discount percentage 4-%&%/*%,5(N#quot;.3quot;(-quot;quot;,/quot;-(/2quot;($%Aquot;(.,A(/-O(.+.*,5 Applied Ratings Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P>5=(%0/(%1(`(3/.-3Q H 3. Rating Messaging 9'..'-8 ?%$0'45A')4+%L5?E$(K ! If the item has not yet been rated, show “(not yet 6. Remove code button ( ?.-A(LO4quot;(j( 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( ( 1<<.L N-%&%/*%,(?%Aquot;( T$%Aquot;(*,(quot;--%-U rated)”. E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? ( -quot;A*/(?.-A(c0&Bquot;-(j( ? # onclick If the item is being rated (a star is being hovered), )*,$quot;(O%0(.-quot;(40-$2.3*,+(/2quot;3quot;(4-%A0$/3(1%-(B03*,quot;33(03quot;W(O%0-(B03*,quot;33([*##(Bquot;(#*.B#quot;( Remove the applied promo code ( )quot;$0-*/O(Zb(j( (P!2./(*3(/2*3]Q 9 then display the associated rating level. 1%-(/2*3(40-$2.3quot;(.,A(,%($-quot;A*/(2*3/%-O($2quot;$C(*3(-quot;V0*-quot;A5 Refresh the Promo Code component to the ( IX4*-./*%,(b./quot;(j( (l( Error If the item has been rated, display the average C no code applied state (refer to gure A). out of total possible stars (refer to “Applied 1%$5L+35<3%(E/)'-85X+%5<$%)+-/.53)$5'-)4$/0 Refresh the shopping cart to remove any 10 Ratings” gure). W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5quot;%0$% I,/quot;-(4quot;-3%,.#(*,1%-&./*%,(*,3/quot;.A(_ promo-code based discounts applied. quot; Use a common and meaningful spectrum of 789F;: rating levels, such as Horrendous, Poor, Fair, ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( 7. Error message E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? Business ( xed) C Good, and Excellent. quot; Use levels consistent with the tone of the brand. Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Required Recommended 19. Annotated Component 20. Chunked Page 21. Page Variations 22. Annotated Component 23. Chunked Page 24. Annotated Component eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) $)quot;#+,)--)*. C6)DD)*BH0&#*'M$ Iquot;quot;#quot;0(722+B)*B Conventions Alternative shipping options are 789:;: #E'<<'-8 #E'<<'-8 personalized by previous product The error messaging presentation rules for the Checkout page do not change with this selection, experience context, and release. business rules based on cart composition. *$)4'-/4'+- *$)4'-/4'+-M R%0-(4-%A0$/3([*##(Bquot;(3quot;,/(/%(O%0-($-quot;A*/($.-A(B*##*,+(.AA-quot;33(1%-(3quot;$0-*/O(40-4%3quot;35 ()quot;,A(/%(&O(B*##*,+(.AA-quot;33 New Messages ?9:;: Destination Options ?2quot;$C%0/ ()quot;,A(/%(.(.,%/2quot;-(.AA-quot;33 The following additional validations are to be added based on new data collection: 1. Constrained (see Figure A) The cart product combination requires Q$4E+05Y5;%'($ +,$-$!./!0!1-234$5!6.),!%27-!088-$//!/735.//.2'9!:4$0/$!(!44!.'!044!-$;7.-$8! ID Event Condition Message that the products are sent to the )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 088-$//!( !$48/9! Q$4E+05Y5;%'($M 1 onblur Social Security Number (any eld) contains Social security number contains a (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( personal information that serves as the DR==5quot;&$%-'8E45#E'<<'-8ZZZ a non numeric character nonnumeric character ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ A0quot;(/%(/2quot;(.44#*quot;A(4-%&%/*%,($%Aquot;(%1(T4-%&%/*%,($%Aquot;(,."U5 billing address ;$%)+-/.5S-X+%G/4'+- 2 onblur Date of birth is nonempty and not Date of birth is not formatted correctly 2. Custom (see Figure B) formatted as MM/DD/YYYY Destination Fixed, Method Options Destination Options, FREE Shipping A C ( 8*-3/(c."(j( (8*-3/(,."(*3(-quot;V0*-quot;A 3. Options (see Figures C & D) 3 onblur Date of birth is less than 18 years from Date of birth re ects that you are not today’s date old enough to purchase a product from User can select to reuse billing address ( J.3/(c."(j( ?0-/*3 this website or enter an alternative address 4 onblur Tax ID (either eld) is nonempty and Tax ID contains a nonnumeric character #E'<<'-8 #E'<<'-8 ( KAA-quot;33(j( :<>(I#&()/-quot;quot;/ contains a nonnumeric character 5 onblur ZIP Code is nonempty and is not a ve digit ZIP code is not formatted correctly Method Options Checkout page with error message A numeric string *$)4'-/4'+- *$)4'-/4'+-M 1. FREE (see Figure D) ()quot;,A(/%(&O(B*##*,+(.AA-quot;33 6 onsubmit Social security number is empty Social security number is required ( KAA-quot;33(j( ()quot;,A(/%(.(.,%/2quot;-(.AA-quot;336 2. Fixed (see Figure B) 7 onsubmit Date of birth is empty Date of Birth is required ( (( 3. Options (see Figure A) ( KAA-quot;33(j( 8 onsubmit Drivers License Number is empty Drivers Licence Number is required ( ?*/O(j( ( (( 9 onsubmit Tax ID is empty Tax ID is required 10 onsubmit Company name is empty Company Name is required ( )/./quot;(j( ( ?*/O(j( 11 onsubmit Custom address is selected and address is Address is required ( kZN(?%Aquot;(j( ( )/./quot;(j( empty 12 onsubmit Custom address is selected and City is City is required ( kZN(?%Aquot;(j( empty Q$4E+05Y5;%'($M 13 onsubmit Custom address is selected and ZIP Code ZIP Code is required N[0/L5#E'<<'-85X+%5HIIJII is empty Q$4E+05Y5;%'($ 1%-(.##(40-$2.3quot;3(&.Aquot;(/2-%0+2(/2quot;(T$%&4.,O(,."U(3044%-/(4-%+-.& )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( Destination Entry, Method Fixed B ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ Destination Options, Method Options D 25. Annotated Component 26. Component Variations 27. Copy Table & Sample Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

!& Automating Starting Points Standardize a deliverable! What’s with the XML? Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

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

!( Table of Contents Producing 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. Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;* Publishing Deliverables Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;) Print Version The 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. Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;! 8 Customize it! Not everyone loves orange (why I don’t know). Customize deliverable templates easily with: Logo Background Type Annotation Color Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;quot; The system is... T EM P L AT E S Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

34 The System Is...Templates Pages Elements Templates Deliverables Wireframes Templates Elements Components Pages Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;$ The Template Landscape Pages Elements Templates Deliverables Comps Templates Elements Components Pages Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;% Zipping It Up The system of templates, libraries, and other documentation is delivered as a ZIP file. Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;& The system is... T O O LS Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;' 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/ Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

quot;( Combining Tools COMPS DELIVERABLES WIREFRAMES Photoshop InDesign InDesign Illustrator !quot; COPY InCopy WIREFRAMES & COMPS PROTOTYPES Fireworks Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#* Tools by Discipline Information Visual Content Architect Designer Strategist Same “Design” Styles, Grids, etc.. (Wireframes) (Comps) (Copy) Same Deliverables Templates! Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#) The system is... T EC H N IQ U E S Adobe Bridge Wireframe Page Design File File > Place Dialog 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/ Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#quot; http://www.flickr.com/photos/fenris/2651905163/sizes/l/ You’ve got to work hard to scale that wall, usually with help. And not just help from me, but from each other. 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 luck 10:47:58 AM [User]: right now i am grateful for your pointers but feeling pretty much like i need a week to learn this tool 10:48:03 AM [User]: and it aint gonna happen 10: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 ;) Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#$ Lessons Abound 1. Don’t let them snap and come unglued: Encourage users to produce visualizations artifacts 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 Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#% Homework Assignment: Massive Frame? A table! Annotate three screenshots provided, using 1-2 deliverable pages. Results: Wildly different layouts, editorial style, details, and Art in middle? Specs by element assumed audiences. For our unfortunate readers, it’s empathy time. But there’s hope! Visual flow! Little structure Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#& Outlining eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !quot;#$!quot;##$%&'( eCommerce [RH329] :: Design Speci cation 17 of 27 Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !quot;#$!quot;##$%&'( !quot;#$%&'(#)*+ !quot;#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.) 4 #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: The Minicart is a Sidebar component that billboard, then display ,%%)-.)/$0- with each feature to th Standard A enables a user to view their carts contents, !quot;#$%&'(#)*+ !quot;#$%&'(#)1+ 1 image. !quot;#$%&'();)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,) prune undesired options, and proceed to 3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0) ,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-) # If the image applies to '-#2)'/)'1.0)&0#-.$#/9: ,%%)-.)/$0- !quot;#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.) checkout without having to navigate to 2 feature, then highlight Two Features B #0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./) the shopping cart. !quot;#$%&'(#)2+ larger stroke weight as &0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4) !quot;#$%&'()<)+,-./)'#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,-) quot; onclick: Display the sele '-#2)'/)'1.0)&0#-.$#/9: -&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9: ,%%)-.)/$0- Variations description, and photo Feature Carousel C A. Standard 3 6. Feature carousel naviga ,%%)-.)/$0- B. Two Features # If more than three featu C. Feature Carousel Standard A the billboard, display fe 1. Placed & mark figures 5 Elements above and below the th images. !quot;#$%&'(#)1+ quot; onclick: Rotate thumbn 1. Feature headline selected by 1 (do not ro ! Limit headlines to one line, do not wrap eCommerce [RH329] :: Design Speci cation !quot;#$%&'();)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,) 17 of 27 Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) option images). 3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0) ! Follow brand guidelines for voice and tone !quot;#$!quot;##$%&'( ,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-) 4 Elements '-#2)'/)'1.0)&0#-.$#/9: !quot;#$%&'(#)*+ 2. Feature description 1 1. Feature headline !quot;#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.) 2 2. Feature description #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: 3. Add to cart button ! Limit descriptions to four lines; optimally 3 4. Feature image ,%%)-.)/$0- ,%%)-.)/$0- Standard A 5. Feature option image descriptions span no more than two lines 5 6. Feature carousel navigation !quot;#$%&'(#)1+ !quot;#$%&'();)+,-./)'#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,-) 3. Add to cart button '-#2)'/)'1.0)&0#-.$#/9: Two Features B ,%%)-.)/$0- 6 Two Features B quot; Add the item to the shopping cart; if the item is 6 !quot;#$%&'(#)2+ already in the shopping cart, the increment the !quot;#$%&'()<)+,-./)'#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: item quantity by one. !quot;#$%&'(#)2+ ,%%)-.)/$0- Add the item to the in-page mini-cart if not Feature Carousel C already included. !quot;#$%&'()<)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,) Refresh minicart calculation including 3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0) Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Required Recommended subtotal ,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-) '-#2)'/)'1.0)&0#-.$#/9: Transition the minicart item using a yellow 2. Mark elements fade to connote the cart’s change in status ,%%)-.)/$0- Stay on the current page 4. Feature image eCommerce [RH329] :: Design Speci cation Feature Carousel 17 of 27 C Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) ! Use a product photography if possible !quot;#$!quot;##$%&'( ! Avoid inspirational photographs of people 4 The Minicart is a Sidebar component that enables a user to view their carts contents, !quot;#$%&'(#)*+ unless directly interacting with the product. In 1 prune undesired options, and proceed to !quot;#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.) checkout without having to navigate to 2 #0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./) the shopping cart. &0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4) such cases, focus/crop photographs to focus on -&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9: Elements 3 ,%%)-.)/$0- 1. Feature headline the product. Standard quot; Length A quot; Brand 5 2. Feature description !quot;#$%&'(#)1+ quot; Length !quot;#$%&'();)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,) 3. Add to cart button 5. Feature option image 3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0) ,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-) # onclick '-#2)'/)'1.0)&0#-.$#/9: 4. Feature image ,%%)-.)/$0- quot; Photo types # If more than one feature is available within the quot; Photo selection Two Features B 6 5. Feature option image ! Thumbnails ! Highlight !quot;#$%&'(#)2+ # onclick !quot;#$%&'()<)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,) 6. Feature carousel navigation 3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0) ,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-) ! More than 3? '-#2)'/)'1.0)&0#-.$#/9: # onclick ,%%)-.)/$0- Display: Optional || Spec Type: Required Recommended Feature Carousel C Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Required Recommended 3. Identify properties 4. Fill in details Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

#' eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) O+.-70#G0/#*'7*'2 /6+*B70;)2'#quot;J :7F)7P7quot;2 Change History. . . . . . . . . . . . . . . . . . . . . 3 Version 1 :: June 26, 2009 Reviewer Email Address Role Group Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4 Initial design spec authored based on nal wireframes and design Core Team strategy Inclusive of requirements for product category, product, cart, and John Smith john@8shapes.com Information Architect UXD Design Strategy & Research checkout pages Jane Brown jane@8shapes.com Visual Deisgner UXD Creative Brief . . . . . . . . . . . . . . . . . . . . . . 6 Adam Morris adam@8shapes.com Design Technologist WXD Design Objectives . . . . . . . . . . . . . . . . . . . 7 Samantha March sam@8shapes.com Product Manager Mktg Formative Research. . . . . . . . . . . . . . . . . . . 8 Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9 Dan Ayers dan@8shapes.com Engineer IT Extended Team Maps & Flows John Smith john@john.com information Architect WXD Flow . . . . . . . . . . . . . . . . . . . . . . . . . 11 John Smith john@john.com information Architect WXD John Smith john@john.com information Architect WXD Pages 7/#887quot;&709:;<=>?0@@0A72)B*0CD7&)E 0&+')#* John Smith john@john.com information Architect WXD 1. Product Category . . . . . . . . . . . . . . . . . 13 John Smith john@john.com information Architect WXD c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14 c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15 2. Product. . . . . . . . . . . . . . . . . . . . . . . 16 c3. Billboard . . . . . . . . . . . . . . . . . . . . 17 c4. Accordion. . . . . . . . . . . . . . . . . . . . 18 c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19 3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 20 3.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 21 3.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21 c6. Promo Code . . . . . . . . . . . . . . . . . . 22 4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23 c7. Credit History Check . . . . . . . . . . . . . . 24 c8. Shipping . . . . . . . . . . . . . . . . . . . . 25 Error Messaging . . . . . . . . . . . . . . . . . . 27 Published February 24, 2009 Created by Nathan Curtis The system is... Cover Page 2. Table of Contents 3. Change History 4. Reviewers eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 /quot;7+')F70,quot;)7G A72)B*0Q.R7&')F72 N#quot;8+')F70:727+quot;&6 !quot;#R7&'0!-+* The ecommerce ow requires a range of Design Objectives Lift Order Conversions [Summary Point] The following objectives are formed as a result of design Introductory descriptive text about the context of the quotes Deliverables 6/8 6/15 6/22 6/29 7/6 7/13 7/20 1 1 Design Strategy updates based on formative user research collaboration, site analytics of the e-commerce process, and Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi 1. Lift order conversions Aliquam sagittis magna in felis egestas rutrum. Proin wisi libero, Decrease exit rate by answering key questions [Objective descriptionctet am etue magna commodolore vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies 2. Improve customer satisfaction and business requirements. user-centered feedback derived from interviews. commodo, ipsum sed pharetra gravida, orci magna rhoncus molor iriusting ero] leo dapibus ultricies. Improve user interface of complex customer decisions 3. Increase store exibility neque, id pulvinar odio lorem non turpis. Wireframes & Design Speci cation In an e ort to increase product marketing impact and Documentation of the interaction design, depicting the structure, social interactions, the team looks to improve marketing Enhance product displays via billboard photos & Project Scope Design Strategy behaviors, and functional requirements Approach billboards on product and category pages and enable Visual Design Comps carousels The project scope is limited to requirements formally product ratings. Additionally, customer service will Visual, high- delity mockups that clarify color, typography, and nal Final Report Review [Summary Point] Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam 2 identi ed by Product Marketing in: layout upon which presentation layer assets are created improve via inline click-to-chat sessions between customer erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Usability Test Script and representative. ProjectRH329.FallUpdates.Requirements.doc Nam consectetuer. [Objective bullet point] Prototype Improve Customer Satisfaction Interaction Design In addition, new business requirements will facilitate credit Moderate delity mockups used to assess design quality via usability 2 Target Audience Participants [Objective bullet point] testing with participants check across multiple audience types, promotion codes Wireframes Specs Revisions Usability Test Report The audiences for this documentation include: Enable customers to engage more deeply through: to enable discounts, and varied shipping options and Sed aliquam, nunc eget euismod ullamcorper: [Objective bullet point] A72)B*0C'quot;+'7BJ030:727+quot;&6 discounts. Draft 1 Final Draft 1 Draft 2 Final Assumptions, Constraints & Other Considerations Product Marketing: To understand and validate [Participant Type] (##) A R T I FAC T S Real-time customer support All visual style, typography, and layout will be instantiated based on the realization of the user experience based on [Participant Type] (##) exisiting conventions requirements Customer ratings Components will be reused, particularly those for page shells and [Participant Type] (##) [Summary Point] Visual Design Engineering: Learn and respond to design treatments 3 existing page designs [Participant Type] (##) Product taxonomy (including available product attributes and that must be implemented. Draft 1 Final classi cations) will remain unchanged for this release [Objective bullet point] [Participant Type] (##) Quality Assurance: Identify test cases and clarify Increase Store Flexibility Presentation Model requirements in detail. 3 [Participant Type] (##) [Objective bullet point] The experience will be built largely upon the existing design system Design Peers: Con rm and collaborate on a consensus foundation of page types & components. However, new components Broaden store capabilities to: [Objective bullet point] Usability Testing design solution across roles and page types will be de ned and design as necessary. Scripting O er varied discounts through promo codes [Objective bullet point] Testing Report Handle consumer and business customers di erently Draft 1 Final Final [Summary Point] 4 Prototyping [Objective description ecte delenis niam, si. Ectet lorperil Draft 1 Final NOTE: This project plan illustrates design team activities el etum autpat loreros nonsectet am etue magna only; for the project’s complete plan, refer to the plan commodolore molor iriusting eroctet am etue magna produced by the project management team. commodolore molor iriusting ero] June July Today Chapter (Strategy) 6. Creative Brief 7. Design Objectives 8. Research Results 9. Project Plan eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 !quot;#$ Home Search Results 789:;: 789:;: 789:;: 789:;: 789>;: 789>;: 789>;: )quot;.-$26 )quot;.-$26 )quot;.-$26 789<;: 789<;: 789<;: !quot; !quot; !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& 789=;: 789=;: 789=;: 789=;: ?9:;: #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) ?2quot;$C%0/ ;%'&/(L5;+.'(L ?9<;: ?9<;: 7%"(S ?9<;: 7%"(S()2%44*,+(S ;$%)+-/.5S-X+%G/4'+- 7%"(S(TN-%A0$/($./quot;+%-OU(S( )*33quot;V0./5(4/./quot;(A%#%-/*%,(2quot;,A-quot;&( ?9:;: TN-%A0$/($./quot;+%-OU ?9:;: ?9:;: *,$*(B#."/0(quot;-%3/*3(A%#%-(./5(Z-*0-quot;&( )2%44*,+(?.-/ TN-%A0$/(,."U ( 8*-3/(c."(j( ;quot;-%3/-0A(/./(;quot;#*/(.0/4./(#0&3.,( Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ c9:;> 0##."/(./*3(quot;33quot;A(&*,*3(quot;33*3*/(.#*/( R$(+GG$-0/4'+-) ( J.3/(c."(j( R%0-(32%44*,+($.-/($%,/.*,3(:(*/quot;&6 ;quot;#*V0*3*/W(;quot;#quot;3quot;,A-quot;(&.+,*&(*#*3&%A( >+3%5?/%4(P9Q ( *.&$%&&(%#%-quot;-./5( >+3%5?/%4(P9Q ( @;%+03(45F/G$C @A$/0.'-$C ( KAA-quot;33(j( N-%A0$/( N-*$quot;(4quot;-(*/quot;&( f0.,/*/O( L%/.# R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( TKB3/-.$/(Aquot;3$-*4/*%,( @A$/0.'-$5BC ( I$/quot;&(;%#%-quot;-(.quot;33*/(;0##.(1.$*#*V( ( (( 32%44*,+($.-/5 Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( 0*3$*4(quot;0(1.$*,+(quot;0(1.$*A0*4*/(*#(quot;,*3*3( @;%+03(45-/G$C( dTee5eeU( ( dTee5eeU _(bquot;/.*#3 32%44*,+($.-/5 T)0B2quot;.A(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*(0/( ,0##.&(ii-*/(#0/(;0#40/(#.%-quot;($%,3quot;A(/./( ( ?*/O(j( T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( TN-%A0$/(Aquot;3$-*4/*%,U *,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 4-.quot;3/*3(.&(quot;/(#%-(*0-quot;-%($%-(3*&(.A*+,.( @;%+03(45F/G$C 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( ?+-4/(45='8E4#E/<$) $%,0&3.(,A*+,*&(quot;33quot;$/quot;(&.+,*3$*,$*( quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( ( )/./quot;(j( TKB3/-.$/(Aquot;3$-*4/*%,( quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( ?+-4/(45='8E4#E/<$) B#.(1.$*#(quot;0*4(quot;0+.*/(#%-(.&(;quot;#quot;3/%(Aquot;#( ( -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U quot;0*3(.#*3(A%#%-quot;-$*(/./5(Y%3(.A*4*/(quot;/W( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( ( ( kZN(?%Aquot;(j( _(bquot;/.*#3 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU 303/%(A*.&W(;quot;,/(.&(.$*##.%-quot;&(ii-*#( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 0/quot;/0quot;(1quot;0&(,%,(2quot;,/(0##04/./5( %4/*%,36 *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( @;%+03(45F/G$C ( N2%,quot;(c0&Bquot;-(j(P Q(( G P$/%-5Q+%$ %4/*%,36 10054+5?/%4 TKB3/-.$/(Aquot;3$-*4/*%,( ( N-%&%/*%,(A*3$%0,/( gdTee5eeU b0*3(.#*/W(;quot;-*#(0##.%-quot;&(;quot;-%3(,*B2( ?E/45F+, Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U quot;/W(3quot;,/(.#*/(;quot;,*B2(quot;-*03$*#*/(./W(;quot;#( ?E/45F+, _(bquot;/.*#3 ( )/./quot;(/.X(Pquot;3/*&./quot;AQ( dTee5eeU A%#%-(3quot;V0./(;0##.(.#*V0.&(;quot;,*3(quot;33*( ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q quot;Xquot;-%3/*quot;(Aquot;#*V0.&$%,(quot;Xquot;-$*A(0*3$*4( @D$/43%$05;%+03(4)C5 5555 @D$/43%$05;%+03(4)C5 5555 »( I&.*# ?:<;:X< ?:<;: quot;&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) c9:;< quot;#quot;,*&(.0/4./5 »( ?.## »( I&.*# ( )2*44*,+(Pquot;3/*&./quot;AQ( dTee5eeU ( ( ?+-)3G$% 93)'-$)) R$($-4.L5:'$,$05S4$G) »( 7.;quot;(3(?.##(R%0 »( ?.## »( !quot;#$%&'%()*+, »( 7.;quot;(3(?.##(R%0 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC )-(. ^/./quot;(30&(-./0-(3quot;V0*A(0##quot;3(&*#(&*,/(.0A*/(quot;#*/(-./*(B#.B%--%;*/(quot;3/quot;&( ( !quot;#$%!&$'$(!)* ( )%$*.#()quot;$0-*/O(e(j( (G( (G( »( !quot;#$%&'%()*+,)-(. »( TN-%A0$/(c."U *&03.&(.3(A%##quot;3(quot;.(;%#04/.(quot;-*%--%(&.+,*3(quot;X(quot;*$*##.($*/.&W(V0.&W($%-( »( TN-%A0$/(c."U .0/(*43.4*quot;/(.B%5(KX*&(;quot;#*V0*3(quot;3/W(%A(V0%(Bquot;./(.4*$/%(/%/./0-(quot;,A*43035 T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( ;%+($$054+5?E$(K+34 ( b./quot;(%1(m*-/2(j( (DDlbblRRRR T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( »( TN-%A0$/(c."U 5 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U »( TN-%A0$/(c."U 4/.33*/.quot;(4#.B%-0&(-./.(;%#%-quot;W(;quot;,A*+,(*&*,$/./quot;&(3%#0/(4quot;##.B%-(-quot;&%A*3(0/( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ( b-*;quot;-h3(J*$quot;,3quot;(e(j( ( quot;/(%4/.3303A.quot;(quot;/(&.+,*3(&*#*+quot;,A*/W(quot;;quot;#*V0*(A%#04/.(/03A.,/(0-*B03(-quot;3/*0&(.3( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U (+D2030N-#P2 ?./quot;+%-O 4quot;#*+quot;,Aquot;&(-quot;&(quot;X4#*/./*.(V0*3(*,(,%B*3(*430,/quot;3(,quot;3/-04/.3(*,$*#(*3(V0.quot;(;%#%-quot;(,./( _(Jquot;.-,(D%-quot; (( J*$quot;,3quot;()/./quot;(j( T)/./quot;U .B%-quot;3quot;(V0.3*/(%A*43.(;quot;,*3*/.3(3quot;V0quot;(%$$03(quot;0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-quot;-%( ( &%A*/./(.3(quot;X(quot;X4#*V0*.,/5 ?:<;` !quot;#$%!&$'$(!)* 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ aquot;O[%-A3 T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( #E'<<'-8 IX4quot;-0&(V0*A0$**3(./*%-quot;3/W(30&(.#*B03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3(.$quot;-*%5(8*$*/( ( ( quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U !quot;#$%!&$'$(!)* 2.-0&V0*B03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.V0./03(V0.&(;quot;,A*/W(%4/./0&($%-quot;*035 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 quot;+,)-'/()0quot;0)(/#-1'2/3)45quot;)-quot;#('53)45()%quot;$quot;#(#.6'2)/52)$/)/%)(.2()%quot;$(02) 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 #32G'4 *$)4'-/4'+- ;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;X$quot;4/0-*(3%#04/./03W(/quot;(,*&*,(-quot;(.A(V0*(V0*(B#.0/5 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( @#$(+-0/%L5D$/43%$)C R%0-(4-%A0$/3([*##(Bquot;(3quot;,/(/%(O%0-($-quot;A*/($.-A(B*##*,+(.AA-quot;33(1%-(3quot;$0-*/O(40-4%3quot;35 P!2O]Q5 c9<;: ?:<;` *+,-.+/0) c9:;> c9:;> c9:;> @;%+03(457L<$)C @;%+03(457L<$)C @;%+03(457L<$)C (Tb%$0",/(,."U Q$4E+05Y5;%'($ ( ( ( (Tb%$0",/(,."U )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( (Tb%$0",/(,."U (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ (Tb%$0",/(,."U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 9'..'-8 TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U ( ?.-A(LO4quot;(j( T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( -quot;A*/(?.-A(c0&Bquot;-(j( ? @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( ( )quot;$0-*/O(Zb(j( (P!2./(*3(/2*3]Q Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( IX4*-./*%,(b./quot;(j( (l( 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5quot;%0$% 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? Product Category Product Cart Checkout Page Variations N/A 1. Single Photograph, No Items in Cart 1. Empty 1. Standard 2. Multiple Photos, Items in Cart 2. 1 Item 2. Business Credit Check, FREE Shipping 3. Many Items, with Promo Code applied Components c1. Contact Us c1. Contact Us c5. Promotion Code c6. Credit History Check c2. Mini-Cart c2. Mini-Cart c7. Shipping Options c3. Billboard c4. Accordion c5. Ratings 10. Chapter (Maps/Flows) 11. Wire ow eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 "#!quot;#$%&'0/+'7B#quot;J $"#/#*'+&'012030/-)&45'#5/6+' $!quot;#()*)&+quot;' !quot;#!quot;#$%&' $%quot;#,)--.#+quot;$ $(quot;#%&&#'()#* 4 The product category page includes a video spotlight and a The product page includes details across four tabs, highlights key Without Promo Code With Promo Code The Minicart is a Sidebar component that The Minicart is a Sidebar component that Variations 6. Have Us Call You Link 5. Product price billboard, then display a thumbnail associated Standard (with Click-to-chat) Non-interactive (no Click-to-Chat) 789:;: 789:;: A B 789>;: 789>;: )quot;.-$26 )quot;.-$26 !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* with each feature to the right of the feature 789<;: 789<;: enables a user to view their carts contents, enables a user to view their carts contents, !quot; A. Standard (with Click-to-Chat # onclick: Navigate to the Have Us Call You page. ! Format all prices with commas for thousands !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& @A$/0.'-$5BC range of featured product collections. features via a spotlight billboard, and provides calls-to-action. Empty 1 image. ?+-4/(45='8E4#E/<$) ?+-4/(45='8E4#E/<$) B. Non-interative (no Click-to-Chat) and two decimal point accuracy 1 >+3%5?/%4(P9Q >+3%5?/%4(P9Q prune undesired options, and proceed to prune undesired options, and proceed to T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( @#324'4.$C !quot;#$%!&$'$(!)* 1 789=;: 789=;: Cart ! If the image applies to the current displayed #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) 7. Worldwide O ces Link #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&( C. Pop-in ! If the product has quantity > 1, then show a price ( ( ( ( T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( checkout without having to navigate to checkout without having to navigate to 2 ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( quot;%3(.-$2*$/03(A*3$*/*%-0&( feature, then highlight the image (such as with a !quot;#$%!&$'$(!)* ?9<;: D. Static per item in parentheses. # onclick: Navigate to the Worldwide O ces page. R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 7%"(S ?9<;: .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U .#*V0././0-]U 2 7%"(S(TN-%A0$/($./quot;+%-OU(S( the shopping cart. the shopping cart. larger stroke weight as in Figure 3). ?9:;: ! If a product is discounted, include the original 32%44*,+($.-/5 32%44*,+($.-/5 quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( TN-%A0$/($./quot;+%-OU _(Jquot;.-,(D%-quot; _(Jquot;.-,(D%-quot; 2 ?9:;: *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( New Components New Components TN-%A0$/(,."U 5 # onclick: Display the selected feature headline, Clikc-to-Chat ( ( Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U 8. Close Button ( price as gray, struckthrough, and to the left of the %4/*%,36 %4/*%,36 !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* The product category page will include the following Variations The product page includes the following new Variations description, and photograph within the billboard 12 N-%&%($%Aquot;6(@?+0$5-/G$C5 13 >+3%5?/%4(P9Q discounted price. The Click-to-Chat program enables customers to # onclick: Close the popin window, and return 1 1 >+3%5?/%4(P9Q 3 ( two new components: components: @A$/0.'-$C Empty cart: A. Standard contact and have direct, online communication with R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( focus to the parent page. ( @A$/0.'-$5BC !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* »( I&.*# 3 6. Feature carousel navigation 10054+5?/%4 32%44*,+($.-/5 3 6. Remove product button ?E/45F+, R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( A. Without promo code B. Two Features a support representative. The experience — beyond 32%44*,+($.-/5 T)0B2quot;.A(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*(0/( »( ?.## 1. c1. Mini-Cart 1. c1. Minicart T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( ! If more than three features are included within B. With promo code C. Feature Carousel *,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 9. Address the new trigger to open the window via the Contact # onclick: Remove the product from the shopping Standard A 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 1 Item »( 7.;quot;(3(?.##(R%0 2 ?+-4/(45='8E4#E/<$) 2. c2. Contact Us 2. c2. Contact Us quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( the billboard, display feature carousel navigation 2 ?+-4/(45='8E4#E/<$) quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( >+3%5?/%4(P:Q( Us component — is already in place for the Support cart, and refresh the minicart display >+3%5?/%4(P:Q( ( 5 -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U IA*/(?.-/ 7 The static address includes an location name, street IA*/(?.-/ »( I&.*# »( !quot;#$%&'%()*+,)-(. 3. c3. Billboard 4 -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( Elements above and below the three feature option 1 item in cart: site area. Please refer to that project’s documentation ( ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( address lines 1 & 2, City, State, ZIP Code, and phone »( ?.## !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* These two components will be displayed, in that 4. c4. Accordion 5 images. *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( %4/*%,36 7. Edit cart link C. Without promo code 3 for background and requirements of the program. @;%+03(45-/G$C5 @;%+03(45-/G$C5 P$/%-5Q+%$ 6 number. %4/*%,36 @A$/0.'-$5NC 10054+5?/%4 »( 7.;quot;(3(?.##(R%0 order, at the top of the page’s sidebar, above existing 5. c5. Ratings 6 # onclick: Rotate thumbnail images in the direction D. With promo code TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( 1. Feature headline TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( ?E/45F+, TZ/quot;&(L*/#quot;U( TZ/quot;&(bquot;3$-*4/*%,( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( # onclick: Navigate to the shopping cart page quot; Use the static address when contacting 4 components to Find a Product and Downloads. »( !quot;#$%&'%()*+, ?E/45F+, )-(. selected by 1 (do not rotate “pages” of feature 7 Elements &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U .#*V0././0-](Y*/./5( .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U quot; Limit headlines to one line, do not wrap EightShapes directly is not preferred, or when T)0B2quot;.A(<(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%( @D$/43%$05;%+03(4)C5 5555 @D$/43%$05;%+03(4)C5 5555 ?:<;:X< »( I&.*# The c1. Minicart and c2. Contact Us components will ^$$.quot;4quot;-*B03U ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( option images). dee5ee(HIIJII5 5 HIIJII quot;&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) 2+ items in cart: !+B72 8. Subtotal »( I&.*# »( ?.## ( ( V0*3(A*(0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/( quot; Follow brand guidelines for voice and tone the primary task is to cut and paste the address ( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U »( ?.## »( 7.;quot;(3(?.##(R%0 be displayed, in that order, at the top of the page’s ( ( E: Without promo code (in-page update) TZ/quot;&(L*/#quot;U( TZ/quot;&(bquot;3$-*4/*%,( _(Jquot;.-,(D%-quot; _(D%-quot;(bquot;/.*#3 1. Header »( 7.;quot;(3(?.##(R%0 »( !quot;#$%&'%()*+, ^/./quot;(30&(-./0-(3quot;V0*A(0##quot;3(&*#(&*,/(.0A*/(quot;#*/(-./*(B#.B%--%;*/(quot;3/quot;&( )-(. %A(V0quot;(;%#quot;33*/*3(/0-W($%,(-quot;&4%-0,A*/(A%#%-( !quot;#$%!&$'$(!)* or send the company mail. ! Display the sum all product costs 8 )0B/%/.#6(HIIJII N-%&%($%Aquot;6(@?+0$5-/G$C5 sidebar, above any existing components. »( !quot;#$%&'%()*+,)-(. *&03.&(.3(A%##quot;3(quot;.(;%#04/.(quot;-*%--%(&.+,*3(quot;X(quot;*$*##.($*/.&W(V0.&W($%-( .#*V0././0-](Y*/./5( ( F: With promo code Pop-in Static .-0&(.3(.#*/(quot;/0-*B035U 2. Feature description C D ! Format all prices with commas for thousands .0/(*43.4*quot;/(.B%5(KX*&(;quot;#*V0*3(quot;3/W(%A(V0%(Bquot;./(.4*$/%(/%/./0-(quot;,A*43035 ! Enable publisher to update label on a per-page ( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( ^$$.quot;4quot;-*B03U 5 !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( 4 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 ( quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U and two decimal point accuracy )0B/%/.#6(dee5ee(HIIJII5 (per-product) basis quot; Limit descriptions to four lines; optimally 4/.33*/.quot;(4#.B%-0&(-./.(;%#%-quot;W(;quot;,A*+,(*&*,$/./quot;&(3%#0/(4quot;##.B%-(-quot;&%A*3(0/( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ;%+($$054+5?E$(K+34 ( 10054+5?/%4 9 TZ/quot;&(L*/#quot;U( TZ/quot;&(bquot;3$-*4/*%,( quot;/(%4/.3303A.quot;(quot;/(&.+,*3(&*#*+quot;,A*/W(quot;;quot;#*V0*(A%#04/.(/03A.,/(0-*B03(-quot;3/*0&(.3( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( !quot;#$%!&$'$(!)* ?./quot;+%-O ?+-4/(45='8E4#E/<$) descriptions span no more than two lines ?+-4/(45='8E4#E/<$) 4quot;#*+quot;,Aquot;&(-quot;&(quot;X4#*/./*.(V0*3(*,(,%B*3(*430,/quot;3(,quot;3/-04/.3(*,$*#(*3(V0.quot;(;%#%-quot;(,./( 8 _(Jquot;.-,(D%-quot; Elements .#*V0././0-](Y*/./5( .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( 9. Proceed to checkout button .B%-quot;3quot;(V0.3*/(%A*43.(;quot;,*3*/.3(3quot;V0quot;(%$$03(quot;0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-quot;-%( ( 2. Description ^$$.quot;4quot;-*B03U ;%+($$054+5?E$(K+34 ( &%A*/./(.3(quot;X(quot;X4#*V0*.,/5 ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ( !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* ( 3. Add to cart button aquot;O[%-A3 Two Features T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U # onclick: Navigate to the checkout page B ! Enable publisher to update description on a per- 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( IX4quot;-0&(V0*A0$**3(./*%-quot;3/W(30&(.#*B03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3(.$quot;-*%5(8*$*/( TJ%$./*%,(c."U 9 quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U 1. Minicart header !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* 6 _(Jquot;.-,(D%-quot; 2.-0&V0*B03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.V0./03(V0.&(;quot;,A*/W(%4/./0&($%-quot;*035 page (per-product) basis # Add the item to the shopping cart; if the item is !quot;#$%!&$'$(!)* *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( TKAA-quot;33(:U quot;+,)-'/()0quot;0)(/#-1'2/3)45quot;)-quot;#('53)45()%quot;$quot;#(#.6'2)/52)$/)/%)(.2()%quot;$(02) ( 10. Added to your cart message #32G'4 ;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;X$quot;4/0-*(3%#04/./03W(/quot;(,*&*,(-quot;(.A(V0*(V0*(B#.0/5 quot; Limit to no more than three lines of text already in the shopping cart, the increment the !quot;#$%!&$'$(!)* !quot;#$%!&$'$(!)* %4/*%,36 @#$(+-0/%L5D$/43%$)C T?*/OUW(T)/./quot;U(eeeee 2. Empty cart message 2+ Items quot; Minimize description variation across pages item quantity by one. ! Display if the user has added an item to the @A$/0.'-$5OC c9<;: N2%,quot;6(PeeeQ(eeeGeeee ?:<;` *+,-.+/0) >+3%5?/%4(P>Q( >+3%5?/%4(P<Q( c9:;> c9:;> c9:;> IA*/(?.-/ ! If the cart contains no items, then show the IA*/(?.-/ quot; End description with “...options:” Add the item to the in-page mini-cart if not cart within the current page via the add-to-cart @;%+03(457L<$)C @;%+03(457L<$)C @;%+03(457L<$)C (Tb%$0",/(,."U ( ( ?E/45F+, Empty Cart Message; otherwise hide this ( ( ( (Tb%$0",/(,."U already included. button. T)0B2quot;.A(>(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%( @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 789F;: @;%+03(45-/G$C5 ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( 100$054+5L+3%5(/%4M (Tb%$0",/(,."U 10 3. Chat Now Button message. TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( Refresh minicart calculation including V0*3(A*(0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? (Tb%$0",/(,."U TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 11. Other items in your cart message @;%+03(45-/G$C5 %A(V0quot;(;%#quot;33*/*3(/0-W($%,(-quot;&4%-0,A*/(A%#%-( subtotal T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U # onclick: Open the existing click-to-chat window &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U »( I&.*# 3-6 Product TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( .-0&(.3(.#*/(quot;/0-*B035U Transition the minicart item using a yellow @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C already available within the support section ! Display if other items were already in the cart dee5ee(HIIJII5 »( ?.## TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U ! Display a row in the mini-cart from every fade to connote the cart’s change in status ! If (normal business hours) and (Click-to-chat is ( andthe user has added an item to the cart within Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U »( 7.;quot;(3(?.##(R%0 HIIJII 10054+5?/%4 T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U product in the cart, including the product name, Stay on the current page @;%+03(45-/G$C(P<Q5 enabled for the product or product category), the current page via the add-to-cart button. ( »( !quot;#$%&'%()*+,)-(. @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( description, price, and remove button. then display the Chat Now button. Otherwise, TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( 11 quot;4E$%5'4$G)5'-5L+3%5(/%4M 4. Feature image &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 12. Promo code hide this button. Feature Carousel T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U C dee5ee(HIIJII5Pdee5ee(4quot;-(*/quot;&Q 3. Product name @;%+03(45-/G$C5 quot; Use a product photography if possible ! If the user has applied a promo code to their ( TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( 4. Email Link # onclick: Navigate to the product page quot; Avoid inspirational photographs of people shopping cart, then show the promo code. N-%&%($%Aquot;6(@?+0$5-/G$C5 789F;: &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( unless directly interacting with the product. In E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? # onclick: Navigate to the Email Us page. ( HIIJII 4. Product description 13. Remove promo code button such cases, focus/crop photographs to focus on )0B/%/.#6(dee5ee(HIIJII5 ( 5. Call Link the product. ! Limit to no more than two lines (~60 characters). )0B/%/.#6(HIIJII ! If the user has applied a promo code to their If a description exceeds 60 characters, truncate at # onclick: Navigate to the Call Us page. shopping cart, then show the remove promo ;%+($$054+5?E$(K+34 5. Feature option image 60 characters and follow with “....” code button. ;%+($$054+5?E$(K+34 ! If more than one feature is available within the # onclick: Remove the promo code from the shopping cart and refresh the minicart. Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Required Recommended Required Recommended Required Recommended Required Recommended 12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component 18. Component eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) $+quot;#:+')*B2 %quot;#/+quot;' %quot;'"#/+quot;'H0I8D'J %quot;'!quot;#/+quot;'H0=K0L'782 $*quot;#/'#0#12#(3 (quot;#/67&4#%' $,quot;#/quot;7$)'0;)2'#quot;J0/67&4 11 The checkout page enables a customer to provide personal and The shopping cart summarizes all items that the user intends to The product rating component enables The promo code application enables users The credit history check enables the 789:;: 789:;: 789:;: 1 2 3 789:;: 789>;: 789>;: 789>;: )quot;.-$26 )quot;.-$26 )quot;.-$26 ;%+G+4'+-5?+0$ ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q 1 1 789<;: 789<;: 789<;: users to view and apply a rating to the to enter a textual promo code to receive business to validate that a customer is !quot; !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ billing information to purchase one or more products. purchase, displays aggregate pricing, and leads to checkout. A Not Yet Rated ?:<;: ( displayed product. discounts and premium o ers. credit worthy to make ongoing payments 789=;: 789=;: 789=;: ?+-)3G$% 93)'-$)) 2 ?9:;: #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) ?2quot;$C%0/ p%/(.(4-%&%/*%,($%Aquot;](K44#O(O%0-(4-%&%/*%,($%Aquot;(2quot;-quot;(/%( for a subscription. ;%'&/(L5;+.'(L ?9<;: Variations 2 3.;quot;(%,(O%0-(40-$2.3quot;(/%A.O6 Variations ?9<;: ?9<;: 7%"(S()2%44*,+(S 7%"(S()2%44*,+(S 7%"(S()2%44*,+(S ;$%)+-/.5S-X+%G/4'+- )*33quot;V0./5(4/./quot;(A%#%-/*%,(2quot;,A-quot;&( ( )%$*.#()quot;$0-*/O(e(j( (G( (G( ?9:;: ?9:;: ?9:;: 3 )2%44*,+(?.-/ )2%44*,+(?.-/ )2%44*,+(?.-/ *,$*(B#."/0(quot;-%3/*3(A%#%-(./5(Z-*0-quot;&( New Components Purpose Unchanged Components 3 Hovered & Levels Variations Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (7%--quot;,A%03' Aa. Standard A. Default (no code applied) B ( 8*-3/(c."(j( c9:;> ;quot;-%3/-0A(/./(;quot;#*/(.0/4./(#0&3.,( c9:;> c9:;> 11 R$(+GG$-0/4'+-) R$(+GG$-0/4'+-) 0##."/(./*3(quot;33quot;A(&*,*3(quot;33*3*/(.#*/( R$(+GG$-0/4'+-) B. Two Features B. Applied code 4 The product category page will include the following The shopping cart serves as the hub of selected items 1. Header A. Consumer option R%0-(32%44*,+($.-/($%,/.*,3(:(*/quot;&6 R%0-(32%44*,+($.-/($%,/.*,3(:(*/quot;&6 R%0-(32%44*,+($.-/($%,/.*,3(,%(*/quot;&35(KAA(.,(*/quot;&(BO($#*$C*,+(/2quot;(nKAA(/%(?.-/o(B0//%,(%,(.,O(%1(O%0-(4-%A0$/(A*34#.O35 ( 1<<.L N-%&%/*%,(?%Aquot;( ( J.3/(c."(j( ;quot;#*V0*3*/W(;quot;#quot;3quot;,A-quot;(&.+,*&(*#*3&%A( ( ( ( ( b./quot;(%1(m*-/2(j( (DDlbblRRRR 4 C. Feature Carousel C. Error *.&$%&&(%#%-quot;-./5( @;%+03(45F/G$C @;%+03(45F/G$C @;%+03(45F/G$C new/updated components: through an online store experience, and the key 2. Breadcrumbs B. Business option 5 >quot;),)0%)/)6#quot;%5-2?).2/#2).1quot;66'0;)'0)quot;0()quot;+)quot;5#)-/2(;quot;#'(.@ N-%A0$/( N-*$quot;(4quot;-(*/quot;&( f0.,/*/O( L%/.# N-%A0$/( N-*$quot;(4quot;-(*/quot;&( f0.,/*/O( L%/.# ( KAA-quot;33(j( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( I$/quot;&(;%#%-quot;-(.quot;33*/(;0##.(1.$*#*V( ( (( page from which the user can continue through to 3. Page Title Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U C. Business xed »( TN-%A0$/($./quot;+%-OU 0*3$*4(quot;0(1.$*,+(quot;0(1.$*A0*4*/(*#(quot;,*3*3( @;%+03(45-/G$C( @;%+03(45-/G$C( _(bquot;/.*#3 _(bquot;/.*#3 dTee5eeU( ( dTee5eeU _(bquot;/.*#3 dTee5eeU( ( dTee5eeU Elements < Elements 6 5 ( b-*;quot;-h3(J*$quot;,3quot;(e(j( »( TN-%A0$/($./quot;+%-OU ,0##.&(ii-*/(#0/(;0#40/(#.%-quot;($%,3quot;A(/./( 1. c6. Credit history check Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (N%%- checkout in a familiar way. 4. Page Message C ( ?*/O(j( TN-%A0$/(Aquot;3$-*4/*%,U TN-%A0$/(Aquot;3$-*4/*%,U Default (no code applied) A »( TN-%A0$/($./quot;+%-OU 4-.quot;3/*3(.&(quot;/(#%-(*0-quot;-%($%-(3*&(.A*+,.( @;%+03(45F/G$C @;%+03(45F/G$C @;%+03(45F/G$C Elements »( TN-%A0$/($./quot;+%-OU 2. c7. Shipping options 5. Cart Table Header $%,0&3.(,A*+,*&(quot;33quot;$/quot;(&.+,*3$*,$*( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( ( )/./quot;(j( »( TN-%A0$/($./quot;+%-OU B#.(1.$*#(quot;0*4(quot;0+.*/(#%-(.&(;quot;#quot;3/%(Aquot;#( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 1. Rating Label 1. Header 6 For this project, the shopping cart serves as the 6. Cart Item(s) J*$quot;,3quot;()/./quot;(j( T)/./quot;U (( quot;0*3(.#*3(A%#%-quot;-$*(/./5(Y%3(.A*4*/(quot;/W( _(bquot;/.*#3 _(bquot;/.*#3 _(bquot;/.*#3 7 @;%+03(45-/G$C( ( kZN(?%Aquot;(j( dTee5eeU(H@IIJIIC( ( (dTee5eeU(H@IIJIIC : 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU 303/%(A*.&W(;quot;,/(.&(.$*##.%-quot;&(ii-*#( TN-%A0$/(Aquot;3$-*4/*%,U These two components will be displayed, in that primary location to apply and manage a promotion 7. Cart Subtotal & Update 1. Header quot; Include a speci c label of what is being rated, 0/quot;/0quot;(1quot;0&(,%,(2quot;,/(0##04/./5( @;%+03(45F/G$C @;%+03(45F/G$C @;%+03(45F/G$C ( N2%,quot;(c0&Bquot;-(j(P Q(( G ?:<;` TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( order, between the personal information and billing code. Here, users can: 12+3454E$5#E+<<'-85?/%4 2. Introduction ;%+G+4'+-5?+0$ Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (8.*- generally by “type”. For example, include ( N-%&%/*%,(A*3$%0,/( gdTee5eeU D b0*3(.#*/W(;quot;-*#(0##.%-quot;&(;quot;-%3(,*B2( 8 Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U ( ( Updated Component quot;/W(3quot;,/(.#*/(;quot;,*B2(quot;-*03$*#*/(./W(;quot;#( ;%+G+4'+-5?+0$ _(bquot;/.*#3 _(bquot;/.*#3 sections of the checkout page. _(bquot;/.*#3 @;%+03(45-/G$C( dTee5eeU(H@IIJIIC( ( (dTee5eeU(H@IIJIIC “product”, “article”, or “post.” : 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) p%/(.(4-%&%/*%,($%Aquot;](K44#O(O%0-(4-%&%/*%,($%Aquot;(2quot;-quot;(/%( 2. Tabs ( )/./quot;(/.X(Pquot;3/*&./quot;AQ( dTee5eeU A%#%-(3quot;V0./(;0##.(.#*V0.&(;quot;,*3(quot;33*( Consumer option ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q A TN-%A0$/(Aquot;3$-*4/*%,U 1 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 3.;quot;(%,(O%0-(40-$2.3quot;(/%A.O6 quot;Xquot;-%3/*quot;(Aquot;#*V0.&$%,(quot;Xquot;-$*A(0*3$*4( Add a promo code whether or not the cart 3. Text box quot; Do not label the speci c item, since the rating is 8. Cart Summary ?:<;: c9:;< c9:;< ( 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( c9:;< ( )2*44*,+(Pquot;3/*&./quot;AQ( dTee5eeU quot;#quot;,*&(.0/4./5 # onclick: Toggle to the alternative selection ?+-)3G$% 93)'-$)) 12 R$($-4.L5:'$,$05S4$G) R$($-4.L5:'$,$05S4$G) P!2O]Q5 R$($-4.L5:'$,$05S4$G) contains any items ( 1<<.L N-%&%/*%,(?%Aquot;( adjacent to the item title anyway. R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC ! Limit entry to no more than 10 characters ( ( ( (between Consumer in gure A and Business in ( )%$*.#()quot;$0-*/O(e(j( (G( (G( Remove an applied promotion code New Component »( TN-%A0$/(c."U »( TN-%A0$/(c."U »( TN-%A0$/(c."U 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (p%%A E »( TN-%A0$/(c."U »( TN-%A0$/(c."U gure B) »( TN-%A0$/(c."U ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q ;%+($$054+5?E$(K+34 Learn about promotion codes 2. Rating Stars ( b./quot;(%1(m*-/2(j( (DDlbblRRRR »( TN-%A0$/(c."U »( TN-%A0$/(c."U »( TN-%A0$/(c."U 5 4. Apply button 9. Cart Promo Codes ( N-%&%/*%,(A*3$%0,/( gdTee5eeU »( TN-%A0$/(c."U »( TN-%A0$/(c."U »( TN-%A0$/(c."U TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( Navigate to as a hub for promo code application ?:<;: ( b-*;quot;-h3(J*$quot;,3quot;(e(j( # onhover: Highlight all stars to the left of and 3. Social security number # onclick ( )/./quot;(/.X(Pquot;3/*&./quot;AQ( dTee5eeU ?+-)3G$% 93)'-$)) (such as from a promo banner elsewhere on the Unchanged Components (cont’d) 10 including the current star, connoting that a rating (( J*$quot;,3quot;()/./quot;(j( T)/./quot;U Applied code If the text box is empty, then display an error B ( )2*44*,+(Pquot;3/*&./quot;AQ( dTee5eeU 789F;: site or via paid search and print advertising) ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( ?:<;` 9 would be applied equivalent to the currently 10. About the Shopping Cart 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ 4. Date of birth E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (IX$quot;##quot;,/' message F 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC 7 ( #E'<<'-8 ( hovered star. Also update the Rating Messaging ( L.X(Zb(e(j( (G( 11. Recommendations 2 Validate the promo code applied, based on 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 to re ect the level of the current star. ;%+($$054+5?E$(K+34 12. Recently Viewed Items table X. 5 5. Drivers license number 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( Promo & Cart Rationale TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( *$)4'-/4'+- # onclick: Save the applied rating, and once saved, P!2O]Q5 R%0-(4-%A0$/3([*##(Bquot;(3quot;,/(/%(O%0-($-quot;A*/($.-A(B*##*,+(.AA-quot;33(1%-(3quot;$0-*/O(40-4%3quot;35 8( 13. Footer ?%&4.,O(c."(j( If the promo code is valid, refresh the Promo The shopping cart serves as a persistent and visible exchange the level (such as “Excellent”) with Click & Save Code to re ect the applied code (see gure Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( ().;quot;A G 6. License state ;%+G+4'+-5?+0$ destination within the shopping experience, where ?:<;` “Saved.” Do not transition to an applied rating 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ B), and refresh the shopping cart inline to Q$4E+05Y5;%'($ ( ( users can manage their overall order, discern price 789F;: )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 13 ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( after this (until the user would reload the page), ( 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 re ect any applicable savings. (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? 7. Tax ID 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 impacts, and consider their order from a high level. Business option ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ but instead sustain the user’s applied rating. B L2quot;(4-%&%/*%,($%Aquot;(O%0h;quot;(.44#*quot;A(A%quot;3(,%/(&./$2(.($0--quot;,/( 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( P!2O]Q5 5. Description & discount percentage 4-%&%/*%,5(N#quot;.3quot;(-quot;quot;,/quot;-(/2quot;($%Aquot;(.,A(/-O(.+.*,5 Applied Ratings Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P>5=(%0/(%1(`(3/.-3Q H 8. Company name 3. Rating Messaging 9'..'-8 ?%$0'45A')4+%L5?E$(K ! If the item has not yet been rated, show “(not yet 6. Remove code button ( ?.-A(LO4quot;(j( 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( 9. Single option message ( 1<<.L N-%&%/*%,(?%Aquot;( T$%Aquot;(*,(quot;--%-U rated)”. E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? ( -quot;A*/(?.-A(c0&Bquot;-(j( ? # onclick If the item is being rated (a star is being hovered), )*,$quot;(O%0(.-quot;(40-$2.3*,+(/2quot;3quot;(4-%A0$/3(1%-(B03*,quot;33(03quot;W(O%0-(B03*,quot;33([*##(Bquot;(#*.B#quot;( Remove the applied promo code ( )quot;$0-*/O(Zb(j( (P!2./(*3(/2*3]Q 9 10. Alternative link then display the associated rating level. 1%-(/2*3(40-$2.3quot;(.,A(,%($-quot;A*/(2*3/%-O($2quot;$C(*3(-quot;V0*-quot;A5 Refresh the Promo Code component to the ( IX4*-./*%,(b./quot;(j( (l( Error If the item has been rated, display the average C # onclick: Switch display to enable both business no code applied state (refer to gure A). out of total possible stars (refer to “Applied and consumer credit history data entry (as 1%$5L+35<3%(E/)'-85X+%5<$%)+-/.53)$5'-)4$/0 Refresh the shopping cart to remove any 10 Ratings” gure). W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5quot;%0$% displayed in gure A). I,/quot;-(4quot;-3%,.#(*,1%-&./*%,(*,3/quot;.A(_ promo-code based discounts applied. quot; Use a common and meaningful spectrum of 789F;: rating levels, such as Horrendous, Poor, Fair, ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( 11. Why? link 7. Error message E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? Business ( xed) C Good, and Excellent. # onclick: Display W02v3 Information Balloon quot; Use levels consistent with the tone of the brand. within basic description of why credit history information is collected Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Required Recommended 19. Annotated Component 20. Chunked Page 21. Page Variations 22. Annotated Component 23. Chunked Page 24. Annotated Component eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) $)quot;#+,)--)*. C6)DD)*BH0&#*'M$ Iquot;quot;#quot;0(722+B)*B Conventions Alternative shipping options are 789:;: #E'<<'-8 #E'<<'-8 personalized by previous product The error messaging presentation rules for the Checkout page do not change with this selection, experience context, and release. business rules based on cart composition. *$)4'-/4'+- *$)4'-/4'+-M R%0-(4-%A0$/3([*##(Bquot;(3quot;,/(/%(O%0-($-quot;A*/($.-A(B*##*,+(.AA-quot;33(1%-(3quot;$0-*/O(40-4%3quot;35 ()quot;,A(/%(&O(B*##*,+(.AA-quot;33 New Messages ?9:;: Destination Options ?2quot;$C%0/ ()quot;,A(/%(.(.,%/2quot;-(.AA-quot;33 The following additional validations are to be added based on new data collection: 1. Constrained (see Figure A) The cart product combination requires Q$4E+05Y5;%'($ +,$-$!./!0!1-234$5!6.),!%27-!088-$//!/735.//.2'9!:4$0/$!(!44!.'!044!-$;7.-$8! Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC ID Event Condition Message that the products are sent to the )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 088-$//!( !$48/9! Q$4E+05Y5;%'($M 1 onblur Social Security Number (any eld) contains Social security number contains a (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( personal information that serves as the DR==5quot;&$%-'8E45#E'<<'-8ZZZ a non numeric character nonnumeric character ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ A0quot;(/%(/2quot;(.44#*quot;A(4-%&%/*%,($%Aquot;(%1(T4-%&%/*%,($%Aquot;(,."U5 billing address ;$%)+-/.5S-X+%G/4'+- 2 onblur Date of birth is nonempty and not Date of birth is not formatted correctly 2. Custom (see Figure B) formatted as MM/DD/YYYY Destination Fixed, Method Options Destination Options, FREE Shipping A C ( 8*-3/(c."(j( (8*-3/(,."(*3(-quot;V0*-quot;A 3. Options (see Figures C & D) 3 onblur Date of birth is less than 18 years from Date of birth re ects that you are not today’s date old enough to purchase a product from User can select to reuse billing address ( J.3/(c."(j( ?0-/*3 this website or enter an alternative address 4 onblur Tax ID (either eld) is nonempty and Tax ID contains a nonnumeric character #E'<<'-8 #E'<<'-8 ( KAA-quot;33(j( :<>(I#&()/-quot;quot;/ contains a nonnumeric character 5 onblur ZIP Code is nonempty and is not a ve digit ZIP code is not formatted correctly Method Options Checkout page with error message A numeric string *$)4'-/4'+-M *$)4'-/4'+-

$* 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 Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$! “Creates formulaic design and removes creative potential by reusing existing elements.” Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$quot; “Creates formulaic starting points and focuses creative attention by reusing existing elements.” 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.” Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

TOC $$ eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Cover O+.-70#G0/#*'7*'2 /6+*B70;)2'#quot;J :7F)7P7quot;2 Change History. . . . . . . . . . . . . . . . . . . . . 3 Version 1 :: June 26, 2009 Reviewer Email Address Role Group Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4 Initial design spec authored based on nal wireframes and design Core Team strategy Inclusive of requirements for product category, product, cart, and John Smith john@8shapes.com Information Architect UXD Design Strategy & Research checkout pages Jane Brown jane@8shapes.com Visual Deisgner UXD Creative Brief . . . . . . . . . . . . . . . . . . . . . . 6 Adam Morris adam@8shapes.com Design Technologist WXD Design Objectives . . . . . . . . . . . . . . . . . . . 7 Samantha March sam@8shapes.com Product Manager Mktg Formative Research. . . . . . . . . . . . . . . . . . . 8 Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9 Dan Ayers dan@8shapes.com Engineer IT Extended Team Maps & Flows John Smith john@john.com information Architect WXD Flow . . . . . . . . . . . . . . . . . . . . . . . . . 11 John Smith john@john.com information Architect WXD John Smith john@john.com information Architect WXD Pages 7/#887quot;&709:;<=>?0@@0A72)B*0CD7&)E 0&+')#* John Smith john@john.com information Architect WXD Change History 1. Product Category . . . . . . . . . . . . . . . . . 13 John Smith john@john.com information Architect WXD c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14 c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15 2. Product. . . . . . . . . . . . . . . . . . . . . . . 16 c3. Billboard . . . . . . . . . . . . . . . . . . . . 17 c4. Accordion. . . . . . . . . . . . . . . . . . . . 18 c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19 3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 20 3.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 21 3.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21 c6. Promo Code . . . . . . . . . . . . . . . . . . 22 4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23 c7. Credit History Check . . . . . . . . . . . . . . 24 c8. Shipping . . . . . . . . . . . . . . . . . . . . 25 Error Messaging . . . . . . . . . . . . . . . . . . 27 Version 1 Published February 24, 2009 Created by Nathan Curtis 1. Cover Page 2. Table of Contents 3. Change History 4. Reviewers Plans eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 /quot;7+')F70,quot;)7G A72)B*0Q.R7&')F72 N#quot;8+')F70:727+quot;&6 !quot;#R7&'0!-+* The ecommerce ow requires a range of Design Objectives Lift Order Conversions [Summary Point] The following objectives are formed as a result of design Introductory descriptive text about the context of the quotes Deliverables 6/8 6/15 6/22 6/29 7/6 1 1 Design Strategy updates based on formative user research collaboration, site analytics of the e-commerce process, and Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi 1. Lift order conversions Aliquam sagittis magna in felis egestas rutrum. Proin wisi libero, Decrease exit rate by answering key questions [Objective descriptionctet am etue magna commodolore vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies 2. Improve customer satisfaction and business requirements. user-centered feedback derived from interviews. commodo, ipsum sed pharetra gravida, orci magna rhoncus molor iriusting ero] leo dapibus ultricies. Improve user interface of complex customer decisions 3. Increase store exibility neque, id pulvinar odio lorem non turpis. Wireframes & Design Speci cation In an e ort to increase product marketing impact and Documentation of the interaction design, depicting the structure, social interactions, the team looks to improve marketing Enhance product displays via billboard photos & Project Scope Design Strategy behaviors, and functional requirements Approach billboards on product and category pages and enable Visual Design Comps carousels The project scope is limited to requirements formally product ratings. Additionally, customer service will Visual, high- delity mockups that clarify color, typography, and nal Final Report Review [Summary Point] Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam 2 identi ed by Product Marketing in: layout upon which presentation layer assets are created improve via inline click-to-chat sessions between customer erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Usability Test Script and representative. ProjectRH329.FallUpdates.Requirements.doc Nam consectetuer. [Objective bullet point] Prototype Improve Customer Satisfaction Briefs Interaction Design In addition, new business requirements will facilitate credit Moderate delity mockups used to assess design quality via usability 2 Target Audience Participants [Objective bullet point] testing with participants check across multiple audience types, promotion codes Wireframes Specs Usability Test Report The audiences for this documentation include: Enable customers to engage more deeply through: to enable discounts, and varied shipping options and Sed aliquam, nunc eget euismod ullamcorper: [Objective bullet point] A72)B*0C'quot;+'7BJ030:727+quot;&6 discounts. Draft 1 Final Draft 1 Draft 2 Assumptions, Constraints & Other Considerations Product Marketing: To understand and validate [Participant Type] (##) Real-time customer support All visual style, typography, and layout will be instantiated based on the realization of the user experience based on [Participant Type] (##) exisiting conventions requirements Customer ratings Components will be reused, particularly those for page shells and [Participant Type] (##) [Summary Point] Visual Design Engineering: Learn and respond to design treatments 3 existing page designs Clear Objectives [Participant Type] (##) Product taxonomy (including available product attributes and that must be implemented. classi cations) will remain unchanged for this release [Objective bullet point] [Participant Type] (##) Quality Assurance: Identify test cases and clarify Increase Store Flexibility Presentation Model requirements in detail. 3 [Participant Type] (##) [Objective bullet point] The experience will be built largely upon the existing design system Design Peers: Con rm and collaborate on a consensus foundation of page types & components. However, new components Broaden store capabilities to: [Objective bullet point] Usability Testing design solution across roles and page types will be de ned and design as necessary. Scripting O er varied discounts through promo codes [Objective bullet point] Handle consumer and business customers di erently Draft 1 [Summary Point] 4 Prototyping [Objective description ecte delenis niam, si. Ectet lorperil Draft 1 NOTE: This project plan illustrates design team activities el etum autpat loreros nonsectet am etue magna only; for the project’s complete plan, refer to the plan commodolore molor iriusting eroctet am etue magna produced by the project management team. commodolore molor iriusting ero] June July Today 5. Chapter (Strategy) 6. Creative Brief 7. Design Objectives 8. Research Results 9. Project Plan eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 !quot;#$ Home Search Results 789:;: 789:;: 789:;: 789:;: 789>;: 789>;: 789>;: )quot;.-$26 )quot;.-$26 )quot;.-$26 789<;: 789<;: 789<;: !quot; !quot; !quot; !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& 789=;: 789=;: 789=;: 789=;: ?9:;: #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) ?2quot;$C%0/ ;%'&/(L5;+.'(L ?9<;: ?9<;: 7%"(S ?9<;: 7%"(S()2%44*,+(S ;$%)+-/.5S-X+%G/4'+- 7%"(S(TN-%A0$/($./quot;+%-OU(S( )*33quot;V0./5(4/./quot;(A%#%-/*%,(2quot;,A-quot;&( ?9:;: TN-%A0$/($./quot;+%-OU ?9:;: ?9:;: *,$*(B#."/0(quot;-%3/*3(A%#%-(./5(Z-*0-quot;&( )2%44*,+(?.-/ TN-%A0$/(,."U ( 8*-3/(c."(j( ;quot;-%3/-0A(/./(;quot;#*/(.0/4./(#0&3.,( Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ c9:;> 0##."/(./*3(quot;33quot;A(&*,*3(quot;33*3*/(.#*/( R$(+GG$-0/4'+-) ( J.3/(c."(j( ;quot;#*V0*3*/W(;quot;#quot;3quot;,A-quot;(&.+,*&(*#*3&%A( R%0-(32%44*,+($.-/($%,/.*,3(:(*/quot;&6 >+3%5?/%4(P9Q ( *.&$%&&(%#%-quot;-./5( >+3%5?/%4(P9Q ( @;%+03(45F/G$C @A$/0.'-$C ( KAA-quot;33(j( N-%A0$/( N-*$quot;(4quot;-(*/quot;&( f0.,/*/O( L%/.# R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( TKB3/-.$/(Aquot;3$-*4/*%,( @A$/0.'-$5BC ( I$/quot;&(;%#%-quot;-(.quot;33*/(;0##.(1.$*#*V( ( (( 32%44*,+($.-/5 Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( 0*3$*4(quot;0(1.$*,+(quot;0(1.$*A0*4*/(*#(quot;,*3*3( @;%+03(45-/G$C( _(bquot;/.*#3 dTee5eeU( ( dTee5eeU 32%44*,+($.-/5 T)0B2quot;.A(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*(0/( ,0##.&(ii-*/(#0/(;0#40/(#.%-quot;($%,3quot;A(/./( ( ?*/O(j( T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( TN-%A0$/(Aquot;3$-*4/*%,U *,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 4-.quot;3/*3(.&(quot;/(#%-(*0-quot;-%($%-(3*&(.A*+,.( @;%+03(45F/G$C 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( ?+-4/(45='8E4#E/<$) $%,0&3.(,A*+,*&(quot;33quot;$/quot;(&.+,*3$*,$*( quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( ( )/./quot;(j( TKB3/-.$/(Aquot;3$-*4/*%,( quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( ?+-4/(45='8E4#E/<$) B#.(1.$*#(quot;0*4(quot;0+.*/(#%-(.&(;quot;#quot;3/%(Aquot;#( ( -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U quot;0*3(.#*3(A%#%-quot;-$*(/./5(Y%3(.A*4*/(quot;/W( ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( ( kZN(?%Aquot;(j( _(bquot;/.*#3 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU 303/%(A*.&W(;quot;,/(.&(.$*##.%-quot;&(ii-*#( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( 0/quot;/0quot;(1quot;0&(,%,(2quot;,/(0##04/./5( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( %4/*%,36 @;%+03(45F/G$C ( N2%,quot;(c0&Bquot;-(j(P Q(( G P$/%-5Q+%$ %4/*%,36 10054+5?/%4 TKB3/-.$/(Aquot;3$-*4/*%,( b0*3(.#*/W(;quot;-*#(0##.%-quot;&(;quot;-%3(,*B2( ( N-%&%/*%,(A*3$%0,/( gdTee5eeU ?E/45F+, Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U quot;/W(3quot;,/(.#*/(;quot;,*B2(quot;-*03$*#*/(./W(;quot;#( ?E/45F+, _(bquot;/.*#3 A%#%-(3quot;V0./(;0##.(.#*V0.&(;quot;,*3(quot;33*( ( )/./quot;(/.X(Pquot;3/*&./quot;AQ( dTee5eeU ?%$0'45A')4+%L5?E$(K((P!2O(A%([quot;(.3C(1%-(/2*3(*,1%-&./*%,]Q quot;Xquot;-%3/*quot;(Aquot;#*V0.&$%,(quot;Xquot;-$*A(0*3$*4( @D$/43%$05;%+03(4)C5 5555 @D$/43%$05;%+03(4)C5 5555 ?:<;:X< »( I&.*# ?:<;: quot;&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) c9:;< quot;#quot;,*&(.0/4./5 ( )2*44*,+(Pquot;3/*&./quot;AQ( dTee5eeU »( I&.*# »( ?.## ( ( ?+-)3G$% 93)'-$)) R$($-4.L5:'$,$05S4$G) »( ?.## »( 7.;quot;(3(?.##(R%0 »( 7.;quot;(3(?.##(R%0 »( !quot;#$%&'%()*+, 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC )-(. ^/./quot;(30&(-./0-(3quot;V0*A(0##quot;3(&*#(&*,/(.0A*/(quot;#*/(-./*(B#.B%--%;*/(quot;3/quot;&( ( !quot;#$%!&$'$(!)* ( )%$*.#()quot;$0-*/O(e(j( (G( (G( »( !quot;#$%&'%()*+,)-(. »( TN-%A0$/(c."U *&03.&(.3(A%##quot;3(quot;.(;%#04/.(quot;-*%--%(&.+,*3(quot;X(quot;*$*##.($*/.&W(V0.&W($%-( »( TN-%A0$/(c."U .0/(*43.4*quot;/(.B%5(KX*&(;quot;#*V0*3(quot;3/W(%A(V0%(Bquot;./(.4*$/%(/%/./0-(quot;,A*43035 T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( ( b./quot;(%1(m*-/2(j( (DDlbblRRRR ;%+($$054+5?E$(K+34 »( TN-%A0$/(c."U T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( 5 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 »( TN-%A0$/(c."U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U 4/.33*/.quot;(4#.B%-0&(-./.(;%#%-quot;W(;quot;,A*+,(*&*,$/./quot;&(3%#0/(4quot;##.B%-(-quot;&%A*3(0/( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ( b-*;quot;-h3(J*$quot;,3quot;(e(j( ( quot;/(%4/.3303A.quot;(quot;/(&.+,*3(&*#*+quot;,A*/W(quot;;quot;#*V0*(A%#04/.(/03A.,/(0-*B03(-quot;3/*0&(.3( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U (+D2030N-#P2 ?./quot;+%-O 4quot;#*+quot;,Aquot;&(-quot;&(quot;X4#*/./*.(V0*3(*,(,%B*3(*430,/quot;3(,quot;3/-04/.3(*,$*#(*3(V0.quot;(;%#%-quot;(,./( _(Jquot;.-,(D%-quot; (( J*$quot;,3quot;()/./quot;(j( T)/./quot;U .B%-quot;3quot;(V0.3*/(%A*43.(;quot;,*3*/.3(3quot;V0quot;(%$$03(quot;0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-quot;-%( ( &%A*/./(.3(quot;X(quot;X4#*V0*.,/5 ?:<;` !quot;#$%!&$'$(!)* 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ aquot;O[%-A3 T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( #E'<<'-8 IX4quot;-0&(V0*A0$**3(./*%-quot;3/W(30&(.#*B03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3(.$quot;-*%5(8*$*/( ( ( quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U !quot;#$%!&$'$(!)* 2.-0&V0*B03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.V0./03(V0.&(;quot;,A*/W(%4/./0&($%-quot;*035 7) 82(3.)'0)9quot;5#):1quot;66'0;)</#2)/$&/9.)#(= )(-2)21()3quot;.2)#(-(02) R%0h;quot;(.44#*quot;A(.(4-%&%/*%,($%Aquot;(/%(O%0-(40-$2.3quot;6 quot;+,)-'/()0quot;0)(/#-1'2/3)45quot;)-quot;#('53)45()%quot;$quot;#(#.6'2)/52)$/)/%)(.2()%quot;$(02) 4-*$quot;(A*34#.Oquot;A(%,(/2quot;*-(4-%A0$/(4.+quot;35 #32G'4 *$)4'-/4'+- ;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;X$quot;4/0-*(3%#04/./03W(/quot;(,*&*,(-quot;(.A(V0*(V0*(B#.0/5 7) Z/quot;&3(-quot;&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/quot;(;*3*/( TN-%&%/*%,($%Aquot;(Aquot;3$-*4/*%,U( IIV5*')(+3-4(( @#$(+-0/%L5D$/43%$)C R%0-(4-%A0$/3([*##(Bquot;(3quot;,/(/%(O%0-($-quot;A*/($.-A(B*##*,+(.AA-quot;33(1%-(3quot;$0-*/O(40-4%3quot;35 P!2O]Q5 c9<;: ?:<;` *+,-.+/0) c9:;> c9:;> c9:;> @;%+03(457L<$)C @;%+03(457L<$)C @;%+03(457L<$)C (Tb%$0",/(,."U Q$4E+05Y5;%'($ ( ( ( (Tb%$0",/(,."U )quot;#quot;$/(.(32*44*,+("/2%A(.,A($%3/(1%-(O%0-(%-Aquot;-(P#quot;.-,(&%-quot;Q6 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( (Tb%$0",/(,."U (<GA.O(P<(B03*,quot;33(A.O3Q(Pdee5eeQ ( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? ()/.,A.-A(^;quot;-,*+2/(P:(B03*,quot;33(A.OQ(Pdee5eeQ (Tb%$0",/(,."U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 9'..'-8 TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U ( ?.-A(LO4quot;(j( T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( -quot;A*/(?.-A(c0&Bquot;-(j( ? @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( ( )quot;$0-*/O(Zb(j( (P!2./(*3(/2*3]Q Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( IX4*-./*%,(b./quot;(j( (l( 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5quot;%0$% 789F;: ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( Wireflows E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? Product Category Product Cart Checkout Page Variations N/A 1. Single Photograph, No Items in Cart 1. Empty 1. Standard 2. Multiple Photos, Items in Cart 2. 1 Item 2. Business Credit Check, FREE Shipping 3. Many Items, with Promo Code applied Components c1. Contact Us c1. Contact Us c5. Promotion Code c6. Credit History Check c2. Mini-Cart c2. Mini-Cart c7. Shipping Options c3. Billboard c4. Accordion Chapters c5. Ratings 10. Chapter (Maps/Flows) 11. Wire ow eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation eCommerce [RH329] :: Design Speci cation Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com) !+B70O)'-7 "#!quot;#$%&'0/+'7B#quot;J $"#/#*'+&'012030/-)&45'#5/6+' $!quot;#()*)&+quot;' !quot;#!quot;#$%&' The product category page includes a video spotlight and a The product page includes details across four tabs, highlight Without Promo Code With Promo Code The Minicart is a Sidebar component that Variations 6. Have Us Call You Link 5. Product price Standard (with Click-to-chat) Non-interactive (no Click-to-Chat) 789:;: 789:;: A B 789>;: 789>;: )quot;.-$26 )quot;.-$26 789<;: 789<;: enables a user to view their carts contents, !quot; !quot; A. Standard (with Click-to-Chat # onclick: Navigate to the Have Us Call You page. ! Format all prices with commas for thousands !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& !quot;#$%"'()*+,(*,(%-($-quot;./quot;(.,(.$$%0,/(1%-(quot;*+2/32.4quot;35$%& range of featured product collections. features via a spotlight billboard, and provides calls-to-action Empty ?+-4/(45='8E4#E/<$) ?+-4/(45='8E4#E/<$) B. Non-interative (no Click-to-Chat) and two decimal point accuracy 1 >+3%5?/%4(P9Q >+3%5?/%4(P9Q prune undesired options, and proceed to 1 789=;: 789=;: Cart #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) 7. Worldwide O ces Link #$%&'($) 7%/'-'-8 *+,-.+/0) 9.+8 :'0$+) ;/<$%) =&$-4) 12+3456) C. Pop-in ! If the product has quantity > 1, then show a price ( ( ( ( checkout without having to navigate to ?9<;: D. Static per item in parentheses. # onclick: Navigate to the Worldwide O ces page. R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 7%"(S ?9<;: 2 7%"(S(TN-%A0$/($./quot;+%-OU(S( the shopping cart. ?9:;: ! If a product is discounted, include the original 32%44*,+($.-/5 32%44*,+($.-/5 TN-%A0$/($./quot;+%-OU 2 ?9:;: *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( New Components New Components TN-%A0$/(,."U 5 Clikc-to-Chat Y./quot;(/2*3(TZ/quot;&(/O4quot;U6( (P,%/(Oquot;/(-./quot;AQ 8. Close Button ( price as gray, struckthrough, and to the left of the %4/*%,36 %4/*%,36 The product category page will include the following Variations The product page includes the following new 12 N-%&%($%Aquot;6(@?+0$5-/G$C5 13 >+3%5?/%4(P9Q discounted price. The Click-to-Chat program enables customers to # onclick: Close the popin window, and return 1 1 >+3%5?/%4(P9Q 3 ( two new components: components: @A$/0.'-$C Empty cart: contact and have direct, online communication with R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( focus to the parent page. ( @A$/0.'-$5BC »( I&.*# 32%44*,+($.-/5 3 6. Remove product button ?E/45F+, R%0($0--quot;,/#O(2.;quot;(,%(*/quot;&3(*,(O%0-( A. Without promo code a support representative. The experience — beyond 32%44*,+($.-/5 T)0B2quot;.A(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*(0/( »( ?.## 1. c1. Mini-Cart 1. c1. Minicart T)0B2quot;.A(:(4%-*3(.0/(#.B%-quot;&(quot;./0-(3.quot;(4-%(V0*3(A*( B. With promo code *,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 9. Address the new trigger to open the window via the Contact # onclick: Remove the product from the shopping 0/(*,/W(3*,*(-quot;4quot;-*B03(*0,/(&.X*&4%3/(%A(V0quot;(;%#quot;33*/*3( 1 Item »( 7.;quot;(3(?.##(R%0 2 ?+-4/(45='8E4#E/<$) 2. c2. Contact Us 2. c2. Contact Us quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( 2 ?+-4/(45='8E4#E/<$) quot;/(quot;X4quot;#quot;3$*.(;%#%-*(/quot;&%##./*%3(.(;%#04/0-W($%,( >+3%5?/%4(P:Q( Us component — is already in place for the Support cart, and refresh the minicart display >+3%5?/%4(P:Q( ( -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U IA*/(?.-/ 7 The static address includes an location name, street IA*/(?.-/ »( I&.*# »( !quot;#$%&'%()*+,)-(. 3. c3. Billboard -quot;&4%-0,A*/(A%#%-(.-0&(.3(.#*/(quot;/0-*B035U 4 ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( 1 item in cart: site area. Please refer to that project’s documentation ( ( 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( address lines 1 & 2, City, State, ZIP Code, and phone »( ?.## These two components will be displayed, in that 4. c4. Accordion 5 *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( %4/*%,36 7. Edit cart link C. Without promo code 3 for background and requirements of the program. @;%+03(45-/G$C5 @;%+03(45-/G$C5 P$/%-5Q+%$ 6 %4/*%,36 number. 10054+5?/%4 »( 7.;quot;(3(?.##(R%0 order, at the top of the page’s sidebar, above existing 5. c5. Ratings 6 D. With promo code TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( ?E/45F+, # onclick: Navigate to the shopping cart page quot; Use the static address when contacting 4 Specs components to Find a Product and Downloads. »( !quot;#$%&'%()*+, ?E/45F+, )-(. 7 Elements &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U EightShapes directly is not preferred, or when @D$/43%$05;%+03(4)C5 5555 @D$/43%$05;%+03(4)C5 5555 ?:<;:X< »( I&.*# The c1. Minicart and c2. Contact Us components will dee5ee(HIIJII5 5 HIIJII quot;&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) 2+ items in cart: !+B72 8. Subtotal »( I&.*# »( ?.## ( ( the primary task is to cut and paste the address »( ?.## »( 7.;quot;(3(?.##(R%0 be displayed, in that order, at the top of the page’s ( ( E: Without promo code (in-page update) 1. Header »( 7.;quot;(3(?.##(R%0 »( !quot;#$%&'%()*+, ^/./quot;(30&(-./0-(3quot;V0*A(0##quot;3(&*#(&*,/(.0A*/(quot;#*/(-./*(B#.B%--%;*/(quot;3/quot;&( )-(. !quot;#$%!&$'$(!)* or send the company mail. ! Display the sum all product costs 8 )0B/%/.#6(HIIJII N-%&%($%Aquot;6(@?+0$5-/G$C5 sidebar, above any existing components. »( !quot;#$%&'%()*+,)-(. *&03.&(.3(A%##quot;3(quot;.(;%#04/.(quot;-*%--%(&.+,*3(quot;X(quot;*$*##.($*/.&W(V0.&W($%-( F: With promo code Pop-in Static C D ! Format all prices with commas for thousands .0/(*43.4*quot;/(.B%5(KX*&(;quot;#*V0*3(quot;3/W(%A(V0%(Bquot;./(.4*$/%(/%/./0-(quot;,A*43035 ! Enable publisher to update label on a per-page ( T?%,/quot;,/(K-*%(B#.(quot;.(A%#0&(quot;%3( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( 4 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U and two decimal point accuracy )0B/%/.#6(dee5ee(HIIJII5 (per-product) basis 4/.33*/.quot;(4#.B%-0&(-./.(;%#%-quot;W(;quot;,A*+,(*&*,$/./quot;&(3%#0/(4quot;##.B%-(-quot;&%A*3(0/( ^$$.quot;4quot;-*B03(.0/quot;,*quot;,*3(quot;;quot;,/W(30&( ;%+($$054+5?E$(K+34 ( 9 quot;/(%4/.3303A.quot;(quot;/(&.+,*3(&*#*+quot;,A*/W(quot;;quot;#*V0*(A%#04/.(/03A.,/(0-*B03(-quot;3/*0&(.3( .&(10+.5(Z/.(,%,quot;$/quot;&(V0quot;U ?./quot;+%-O ?+-4/(45='8E4#E/<$) ?+-4/(45='8E4#E/<$) 4quot;#*+quot;,Aquot;&(-quot;&(quot;X4#*/./*.(V0*3(*,(,%B*3(*430,/quot;3(,quot;3/-04/.3(*,$*#(*3(V0.quot;(;%#%-quot;(,./( 8 _(Jquot;.-,(D%-quot; Elements 9. Proceed to checkout button .B%-quot;3quot;(V0.3*/(%A*43.(;quot;,*3*/.3(3quot;V0quot;(%$$03(quot;0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-quot;-%( ( 2. Description ;%+($$054+5?E$(K+34 ( &%A*/./(.3(quot;X(quot;X4#*V0*.,/5 ( !quot;#$%!&$'$(!)* aquot;O[%-A3 T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( T8quot;./0-quot;(/*/#quot;(/2./( # onclick: Navigate to the checkout page ! Enable publisher to update description on a per- 8%-(3.#quot;3W(/-.*,*,+W(.,A(%/2quot;-(+quot;,quot;-.#( IX4quot;-0&(V0*A0$**3(./*%-quot;3/W(30&(.#*B03(quot;/(4quot;-%(*4*quot;,/(0#4.($%,quot;3/*3(.$quot;-*%5(8*$*/( TJ%$./*%,(c."U 9 quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U quot;X/quot;,A3(/[%(#*,quot;3U 1. Minicart header !quot;#$%!&$'$(!)* 2.-0&V0*B03(&%#%-quot;*$**3(-quot;(-quot;-0&(quot;.V0./03(V0.&(;quot;,A*/W(%4/./0&($%-quot;*035 page (per-product) basis *,V0*-*quot;3W($%,/.$/(03(;*.(/2quot;(1%##%[*,+( TKAA-quot;33(:U quot;+,)-'/()0quot;0)(/#-1'2/3)45quot;)-quot;#('53)45()%quot;$quot;#(#.6'2)/52)$/)/%)(.2()%quot;$(02) 10. Added to your cart message #32G'4 ;%#04/./quot;,*3(.3(&%#%-quot;*($/./quot;/(quot;X$quot;4/0-*(3%#04/./03W(/quot;(,*&*,(-quot;(.A(V0*(V0*(B#.0/5 quot; Limit to no more than three lines of text %4/*%,36 @#$(+-0/%L5D$/43%$)C T?*/OUW(T)/./quot;U(eeeee 2. Empty cart message 2+ Items quot; Minimize description variation across pages ! Display if the user has added an item to the c9<;: N2%,quot;6(PeeeQ(eeeGeeee ?:<;` *+,-.+/0) >+3%5?/%4(P>Q( >+3%5?/%4(P<Q( c9:;> c9:;> c9:;> IA*/(?.-/ ! If the cart contains no items, then show the IA*/(?.-/ quot; End description with “...options:” cart within the current page via the add-to-cart @;%+03(457L<$)C @;%+03(457L<$)C @;%+03(457L<$)C (Tb%$0",/(,."U ( ( ?E/45F+, Empty Cart Message; otherwise hide this ( ( ( (Tb%$0",/(,."U button. @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 789F;: @;%+03(45-/G$C5 ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( 100$054+5L+3%5(/%4M (Tb%$0",/(,."U 10 3. Chat Now Button message. TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? (Tb%$0",/(,."U TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 11. Other items in your cart message @;%+03(45-/G$C5 T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U # onclick: Open the existing click-to-chat window &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U »( I&.*# 3-6 Product TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C already available within the support section ! Display if other items were already in the cart dee5ee(HIIJII5 »( ?.## TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U ! Display a row in the mini-cart from every ( ! If (normal business hours) and (Click-to-chat is andthe user has added an item to the cart within Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U »( 7.;quot;(3(?.##(R%0 HIIJII T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U product in the cart, including the product name, @;%+03(45-/G$C(P<Q5 enabled for the product or product category), the current page via the add-to-cart button. ( »( !quot;#$%&'%()*+,)-(. @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( description, price, and remove button. then display the Chat Now button. Otherwise, TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( TKB3/-.$/(Aquot;3$-*4/*%,( 11 quot;4E$%5'4$G)5'-5L+3%5(/%4M &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U Yquot;4-quot;&(*A(&%#quot;3quot;A(quot;/0-U 12. Promo code hide this button. T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U dee5ee(HIIJII5Pdee5ee(4quot;-(*/quot;&Q 3. Product name @;%+03(45-/G$C5 ! If the user has applied a promo code to their ( TN-%A0$/(Aquot;3$-*4/*%,(cquot;$/*(B#.$quot;3(A%#%-( 4. Email Link # onclick: Navigate to the product page shopping cart, then show the promo code. N-%&%($%Aquot;6(@?+0$5-/G$C5 789F;: &%##./quot;&(A%#%-(&.*%,3quot;,*3(&.X*&%U ?%,/.$/3(@(8quot;quot;AB.$C(@(7quot;#4(@()*/quot;(D.4(( E(<99FG<99H(I*+2/)2.4quot;3(JJ?(K##(-*+2/3(-quot;3quot;-;quot;A5((Lquot;-&3(M(?%,A*/*%,3(@(N-*;.$O()/./quot;",/(@(?%%C*quot;(N%#*$O(@(L-.Aquot;&.-C3(%1(I*+2/)2.4quot;3(JJ? # onclick: Navigate to the Email Us page. ( HIIJII 4. Product description 13. Remove promo code button )0B/%/.#6(dee5ee(HIIJII5 Chunking ( 5. Call Link ! Limit to no more than two lines (~60 characters). )0B/%/.#6(HIIJII ! If the user has applied a promo code to their If a description exceeds 60 characters, truncate at # onclick: Navigate to the Call Us page. shopping cart, then show the remove promo ;%+($$054+5?E$(K+34 60 characters and follow with “....” code button. ;%+($$054+5?E$(K+34 # onclick: Remove the promo code from the shopping cart and refresh the minicart. Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State quot; Editorial ! Data Display: Required Recommended Required Recommended Required 12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page © EightShapes LLC Prepared for the IA Summit 2009, Memphis TN

$& What do they need? AUDIENCES Site Product Publisher Engineer QA Strategist Manager Design Editorial Design Spec Guidelines Strategy DESIGN Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

$' Where are the champions? A documentation system fails when there aren’t leaders that advocate and inspire. Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

%* Interested? You can now download the EightShapes Unify deliverable templates from unify.eightshapes.com. Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

%) Thank you! Wanna talk deliverables, components, EightShapes Unify, or other UX stuff? The Person The System Nathan Curtis EightShapes Unify nathan@eightshapes.com unify@eightshapes.com www.nathancurtis.com unify.eightshapes.com Twitter: nathanacurtis Twitter: 8SUnify Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC

http://unify.eightshapes.com	204
http://wireframes.tumblr.com	197
http://arquiteturadainformacaodigital.blogspot.com	139
http://arquiteturadainformacaodigital.blogspot.com.br	122
http://www.slideshare.net	4
http://apprentieweb.blogspot.com	4
http://www.brandonewoldt.com	4
http://www.techgig.com	3
http://toolbox.bswing.com	3
http://disole.wordpress.com	1
http://safe.tumblr.com	1
http://arquiteturadainformacaodigital.blogspot.pt	1

Unify Your Deliverables

by nathanacurtis on Mar 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 683

Statistics

Unify Your Deliverables — Presentation Transcript