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+' $!\"#()*)&+\"' !\"#!\"#$%&' $%\"#,)--.#+\"$ 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>;: )\".-$26 )\".-$26 789<;: enables a user to view their carts contents, !\" !\" A. Standard (with Click-to-Chat # onclick: Navigate to the Have Us Call You page. ! Format all prices with commas for thousands (1%-(\"*+2/32.4\"35$%& !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"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)0B2\".A(:(4%-*3(.0/(#.B%-\"&(\"./0-(3.\"(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--\",/#O(2.;\"(,%(*/\"&3(*,(O%0-( R%0($0--\",/#O(2.;\"(,%(*/\"&3(*,(O%0-( 0/(*,/W(3*,*(-\"4\"-*B03(*0,/(&.X*&4%3/(%A(V0\"(;%#\"33*/*3( 8%-(3.#\"3W(/-.*,*,+W(.,A(%/2\"-(+\",\"-.#( 8%-(3.#\"3W(/-.*,*,+W(.,A(%/2\"-(+\",\"-.#( ?9<;: 2 7%&\"(S(TN-%A0$/($./\"+%-OU(S( the shopping cart. ! If a product is discounted, include the original 32%44*,+($.-/5 32%44*,+($.-/5 \"/(\"X4\"#\"3$*.(;%#%-*(/\"&%##./*%3(.(;%#04/0-W($%,( 2 ?9:;: *,V0*-*\"3W($%,/.$/(03(;*.(/2\"(1%##%[*,+( *,V0*-*\"3W($%,/.$/(03(;*.(/2\"(1%##%[*,+( New Components New Components TN-%A0$/(,.&\"U 5 Clikc-to-Chat Y./\"(/2*3(TZ/\"&(/O4\"U6( (P,%/(O\"/(-./\"AQ -\"&4%-0,A*/(A%#%-(.-0&(.3(.#*/(\"/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-%&%($%A\"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--\",/#O(2.;\"(,%(*/\"&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--\",/#O(2.;\"(,%(*/\"&3(*,(O%0-( A. Without promo code a support representative. The experience — beyond 32%44*,+($.-/5 »( ?.## 1. c1. Mini-Cart 1. c1. Minicart T)0B2\".A(:(4%-*3(.0/(#.B%-\"&(\"./0-(3.\"(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*,*(-\"4\"-*B03(*0,/(&.X*&4%3/(%A(V0\"(;%#\"33*/*3( 1 Item »( 7.;\"(\\3(?.##(R%0 2 ?+-4/(45='8E4#E/<$) 2. c2. Contact Us 2. c2. Contact Us 2 ?+-4/(45='8E4#E/<$) \"/(\"X4\"#\"3$*.(;%#%-*(/\"&%##./*%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&.*# »( !\"#$%&'%()*+,)-(. 3. c3. Billboard -\"&4%-0,A*/(A%#%-(.-0&(.3(.#*/(\"/0-*B035U 4 ( 8%-(3.#\"3W(/-.*,*,+W(.,A(%/2\"-(+\",\"-.#( 1 item in cart: site area. Please refer to that project’s documentation ( ( 8%-(3.#\"3W(/-.*,*,+W(.,A(%/2\"-(+\",\"-.#( *,V0*-*\"3W($%,/.$/(03(;*.(/2\"(1%##%[*,+( address lines 1 & 2, City, State, ZIP Code, and phone »( ?.## These two components will be displayed, in that 4. c4. Accordion 5 *,V0*-*\"3W($%,/.$/(03(;*.(/2\"(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.;\"(\\3(?.##(R%0 order, at the top of the page’s sidebar, above existing 5. c5. Ratings 6 D. With promo code TN-%A0$/(A\"3$-*4/*%,(c\"$/*(B#.$\"3(A%#%-( TN-%A0$/(A\"3$-*4/*%,(c\"$/*(B#.$\"3(A%#%-( ?E/45F+, # onclick: Navigate to the shopping cart page \" Use the static address when contacting 4 components to Find a Product and Downloads. »( !\"#$%&'%()*+, ?E/45F+, )-(. 7 Elements &%##./\"&(A%#%-(&.*%,3\",*3(&.X*&%U &%##./\"&(A%#%-(&.*%,3\",*3(&.X*&%U EightShapes directly is not preferred, or when T)0B2\".A(<(4%-*3(.0/(#.B%-\"&(\"./0-(3.\"(4-%( 5555 ?:<;:X< »( I&.*# The c1. Minicart and c2. Contact Us components will dee5ee(HIIJII5 5 HIIJII \"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) 2+ items in cart: 8. Subtotal »( I&.*# »( ?.## V0*3(A*(0/(*,/W(3*,*(-\"4\"-*B03(*0,/(&.X*&4%3/( the primary task is to cut and paste the address »( ?.## »( 7.;\"(\\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.;\"(\\3(?.##(R%0 »( !\"#$%&'%()*+, ^/./\"(30&(-./0-(3\"V0*A(0##\"3(&*#(&*,/(.0A*/(\"#*/(-./*(B#.B%--%;*/(\"3/\"&( %A(V0\"(;%#\"33*/*3(/0-W($%,(-\"&4%-0,A*/(A%#%-( )-(. !\"#$%!&$'$(!)* or send the company mail. ! Display the sum all product costs 8 )0B/%/.#6(HIIJII N-%&%($%A\"6(@?+0$5-/G$C5 sidebar, above any existing components. »( !\"#$%&'%()*+,)-(. *&03.&(.3(A%##\"3(\".(;%#04/.(\"-*%--%(&.+,*3(\"X(\"*$*##.($*/.&W(V0.&W($%-( F: With promo code Pop-in Static .-0&(.3(.#*/(\"/0-*B035U C D ! Format all prices with commas for thousands .0/(*43.4*\"/(.B%5(KX*&(;\"#*V0*3(\"3/W(%A(V0%(B\"./(.4*$/%(/%/./0-(\",A*43035 ! Enable publisher to update label on a per-page ( T?%,/\",/(K-*%(B#.(\".(A%#0&(\"%3( T8\"./0-\"(/*/#\"(/2./( 4 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 \"X/\",A3(/[%(#*,\"3U and two decimal point accuracy )0B/%/.#6(dee5ee(HIIJII5 (per-product) basis \\4/.33*/.\"(4#.B%-0&(-./.(;%#%-\"W(;\",A*+,(*&*,$/./\"&(3%#0/(4\"##.B%-(-\"&%A*3(0/( ^$$.\"4\"-*B03(.0/\",*\",*3(\";\",/W(30&( ;%+($$054+5?E$(K+34 ( 10054+5?/%4 9 \"/(%4/.3303A.\"(\"/(&.+,*3(&*#*+\",A*/W(\";\"#*V0*(A%#04/.(/03A.,/(0-*B03(-\"3/*0&(.3( .&(10+.5(Z/.(,%,\"$/\"&(V0\"U ?./\"+%-O ?+-4/(45='8E4#E/<$) ?+-4/(45='8E4#E/<$) 4\"#*+\",A\"&(-\"&(\"X4#*/./*.(V0*3(*,(,%B*3(*430,/\"3(,\"3/-04/.3(*,$*#(*3(V0.\"(;%#%-\"(,./( 8 _(J\".-,(D%-\" Elements 9. Proceed to checkout button .B%-\"3\"(V0.3*/(%A*43.(;\",*3*/.3(3\"V0\"(%$$03(\"0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-\"-%( ( 2. Description ;%+($$054+5?E$(K+34 ( &%A*/./(.3(\"X(\"X4#*V0*.,/5 ( !\"#$%!&$'$(!)* a\"O[%-A3 Two Features T8\"./0-\"(/*/#\"(/2./( # onclick: Navigate to the checkout page B ! Enable publisher to update description on a per- 8%-(3.#\"3W(/-.*,*,+W(.,A(%/2\"-(+\",\"-.#( IX4\"-0&(V0*A0$**3(./*%-\"3/W(30&(.#*B03(\"/(4\"-%(*4*\",/(0#4.($%,\"3/*3(.$\"-*%5(8*$*/( TJ%$./*%,(c.&\"U 9 \"X/\",A3(/[%(#*,\"3U 1. Minicart header !\"#$%!&$'$(!)* 2.-0&V0*B03(&%#%-\"*$**3(-\"(-\"-0&(\".V0./03(V0.&(;\",A*/W(%4/./0&($%-\"*035 page (per-product) basis *,V0*-*\"3W($%,/.$/(03(;*.(/2\"(1%##%[*,+( TKAA-\"33(:U \"+,)-'/()0\"0)(/#-1'2/3)45\")-\"#('53)45()%\"$\"#(#.6'2)/52)$/)/%)(.2()%\"$(02) 10. Added to your cart message #32G'4 ;%#04/./\",*3(.3(&%#%-\"*($/./\"/(\"X$\"4/0-*(3%#04/./03W(/\"(,*&*,(-\"(.A(V0*(V0*(B#.0/5 \" Limit to no more than three lines of text %4/*%,36 T?*/OUW(T)/./\"U(eeeee 2. Empty cart message 2+ Items \" Minimize description variation across pages ! Display if the user has added an item to the @A$/0.'-$5OC c9<;: N2%,\"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*/(?.-/ \" 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)0B2\".A(>(4%-*3(.0/(#.B%-\"&(\"./0-(3.\"(4-%( @*$)4'-/4'+-C 789F;: @;%+03(45-/G$C5 ?%,/.$/3(@(8\"\"AB.$C(@(7\"#4(@()*/\"(D.4(( 100$054+5L+3%5(/%4M (Tb%$0&\",/(,.&\"U 10 3. Chat Now Button message. TKB3/-.$/(A\"3$-*4/*%,( V0*3(A*(0/(*,/W(3*,*(-\"4\"-*B03(*0,/(&.X*&4%3/( E(<99FG<99H(I*+2/)2.4\"3(JJ?(K##(-*+2/3(-\"3\"-;\"A5((L\"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./\"&\",/(@(?%%C*\"(N%#*$O(@(L-.A\"&.-C3(%1(I*+2/)2.4\"3(JJ? (Tb%$0&\",/(,.&\"U TN-%A0$/(A\"3$-*4/*%,(c\"$/*(B#.$\"3(A%#%-( Y\"4-\"&(*A(&%#\"3\"A(\"/0-U 11. Other items in your cart message @;%+03(45-/G$C5 %A(V0\"(;%#\"33*/*3(/0-W($%,(-\"&4%-0,A*/(A%#%-( T?.##(/%(.$/*%,U # onclick: Open the existing click-to-chat window &%##./\"&(A%#%-(&.*%,3\",*3(&.X*&%U »( I&.*# 3-6 Product TN-%A0$/(A\"3$-*4/*%,(c\"$/*(B#.$\"3(A%#%-( .-0&(.3(.#*/(\"/0-*B035U @*$)4'-/4'+-C already available within the support section ! Display if other items were already in the cart dee5ee(HIIJII5 »( ?.## TKB3/-.$/(A\"3$-*4/*%,( &%##./\"&(A%#%-(&.*%,3\",*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 Y\"4-\"&(*A(&%#\"3\"A(\"/0-U »( 7.;\"(\\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. ( »( !\"#$%&'%()*+,)-(. @*$)4'-/4'+-C TN-%A0$/(A\"3$-*4/*%,(c\"$/*(B#.$\"3(A%#%-( description, price, and remove button. then display the Chat Now button. Otherwise, TKB3/-.$/(A\"3$-*4/*%,( 11 \"4E$%5'4$G)5'-5L+3%5(/%4M &%##./\"&(A%#%-(&.*%,3\",*3(&.X*&%U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U 12. Promo code hide this button. Feature Carousel T?.##(/%(.$/*%,U C dee5ee(HIIJII5Pdee5ee(4\"-(*/\"&Q 3. Product name @;%+03(45-/G$C5 ! If the user has applied a promo code to their ( TN-%A0$/(A\"3$-*4/*%,(c\"$/*(B#.$\"3(A%#%-( 4. Email Link # onclick: Navigate to the product page shopping cart, then show the promo code. N-%&%($%A\"6(@?+0$5-/G$C5 &%##./\"&(A%#%-(&.*%,3\",*3(&.X*&%U L-.A\"&.-C3(%1(I*+2/)2.4\"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 \" Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State \" Editorial ! Data Display: Optional || Spec Type: ! Behavior ! State \" 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

\" 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:;< )\".-$26 )\".-$26 789N;< 789N;< !\" !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"35$%& !\"#$%&\"'( !\" !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"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$/($./\"+%-HL(b( )9<;< B9N;< B9<;< 7%&\"(b()044%-/(b(J)044%-/(B./\"+%-HL(b( JE-%>0$/(,.&\"L 9%8'3:'(6/-;'<;341* #5'/:,1(H/-;,/-;'* F./\"(/2*3(JP/\"&(/H4\"L6( (`,%/(H\"/(-./\">a B9<;< J)044%-/(R%4*$(R*/#\"L ( /) JX-/*$#\"(2*+2#*+2/L 8%-(3.#\"3=(/-.*,*,+=(.,>(%/2\"-(+\",\"-.#( /) JX-/*$#\"(2*+2#*+2/L *,?0*-*\"3=($%,/.$/(03(;*.(/2\"(1%##%@*,+( 8'13'96.3)0%)560303(4\"%'3)'164)56().'4)(1%04:)630.)063)+6;0<)=(1'0.7)(#\"##\")\"+, @%&5(935'(`9a /) JX-/*$#\"(2*+2#*+2/L %4/*%,36 3.,*3(>%#04/.3(;%#04/0-(&%>*3(,%G*3(.0>.(.&03.,>.&(\"330&(.3(0/(;%#0/(\"33 ( EH130,/81G /) JX-/*$#\"(2*+2#*+2/L D%0($0--\",/#H(2.;\"(,%(*/\"&3(*,(H%0-( <5( *,0&(;%#04/.3*&*,(4#./0-(-\"4/./\"(4-%-\",>*3(;\",/(#.G%-*.3(&%>(?0%>(?0*(-\"&4%-(.0/(#.G%-\"2 9;3'(=%> 32%44*,+($.-/5 ?0*3(&.O*&*,/(;%#04/.\"-0&(2*$*0&(3\"?0%3.&(\"/(.>*/./0&(>%#04/.($03=(?0.&(;% J)0G2\".>(4%-*3(.0/(#.G%-\"&(\"./0-(3.\"(4-%(?0*3(>*(0/( N5( #%-(.#*?0./0-I(AG*/*G03>.(,.&(-\"*$/%(*3($%&&%#%-\"(\",/*0&(,*/./(&.(;%#0&=(0/(.>(?0\"(>\"G*3( *,/=(3*,*(-\"4\"-*G03(*0,/(&.O*&4%3/(%>(?0\"(;%#\"33*/*3( »( A&.*# ;\",>*.3(4\"#\",*3(>*($%-*.(;*>\"(.34*$*.(\"O4#*?0(*G\"-%--%(\"%3/%(\"33\"?0.(3*,/03(.3(, »( B.## \"/(\"O4\"#\"3$*.(;%#%-*(/\"&%##./*%3(.(;%#04/0-=($%,( 9%8'3:'(6/-;'<;341* »( 7.;\"(C3(B.##(D%0 -\"&4%-0,>*/(>%#%-(.-0&(.3(.#*/(\"/0-*G035L ( :5( \"$/./(?0./\"&(./(10+*/*.(?0%(%&,*&03=(?0%($%,3\">*(?0*(0/\"(>\"33*&(2.-*%(/\"&4%-\"(4\"-34\"-0, »( !\"#$%&'%()*+,)-(. 8%-(3.#\"3=(/-.*,*,+=(.,>(%/2\"-(+\",\"-.#( 0##.$\"./*,($%&,*3(?0%3(-\"&(1.$$04/.(*&03.4\">(&.(;\"#*/*.(,*2*$*(.>*%,3\",*(>%#%-\"- *,?0*-*\"3=($%,/.$/(03(;*.(/2\"(1%##%@*,+( Z5( %(*&.*%,($%,(\"/(>%#%-\"(;\"#\"3$*#(*0&(;*>\"(303(0,/(4%-\"4\"-0&(?0\"(#.G(*4*/(?0*(/\"&(#*. %4/*%,36 89<;< #00('%(935' </-8(?8(=%> (;%#\"3$*./(>0$*#*?0*(%>(&*,;\"-*G03(\"O(\"O$\"3(;%#04/*.&(*&%>(\"*0&(.34*/(#.0/(10+*./0-=($%-*/(\".(;% 9;3'(=%> -%;*/*3(\"/(.0/\"&(\"/(\"/(.#*?0%($%,\"3/=(0##.G(*,*&.(,./\"3(>0$*\",*&\"(&%(;%#04/*(0&?0%>*(/*G035 B<N;<ON C3\"-,.&\"( \"7157/1> I13'&51* F1:;(<41:* D%>8,%30* »( A&.*# »( B.## E.33@%->( »( 7.;\"(C3(B.##(D%0 Q/./\"(30&(-./0-(3\"?0*>(0##\"3(&*#(&*,/(.0>*/(\"#*/(-./*( ( »( !\"#$%&'%()*+,)-(. G#.G%--%;*/(\"3/\"&(*&03.&(.3(>%##\"3(\".(;%#04/.(\"-*%--%( (F\"&\"&G\"-(&\"(%,(/2*3($%&40/\"- &.+,*3(\"O(\"*$*##.($*/.&=(?0.&=($%-(.0/(*43.4*\"/(.G%5(XO*&( ;\"#*?0*3(\"3/=(%>(?0%(G\"./(.4*$/%(/%/./0-(\",>*43035 </-8(?8 ( ( C4/.33*/.\"(4#.G%-0&(-./.(;%#%-\"=(;\",>*+,(*&*,$/./\"&(3%#0/(4\"##.G%-( -\"&%>*3(0/(\"/(%4/.3303>.\"(\"/(&.+,*3(&*#*+\",>*/=(\";\"#*?0*(>%#04/.( 8%-+%/(H%0-6(C3\"-,.&\"I(E.33@%->I /03>.,/(0-*G03(-\"3/*0&(.3(4\"#*+\",>\"&(-\"&(\"O4#*/./*.(?0*3(*,(,%G*3( E./01%(F/',1G *430,/\"3(,\"3/-04/.3(*,$*#(*3(?0.\"(;%#%-\"(,./(.G%-\"3\"(?0.3*/(%>*43.( =%'(@1'(3(A1B$15C ;\",*3*/.3(3\"?0\"(%$$03(\"0&(1.$$03=(?0*>0,/(#.,>*/(*>*%-\"-%(&%>*/./( JS*>\"%(>\"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;\"#\",/*3/(.0/(10+.5( .3(\"O(\"O4#*?0*.,/5 C/(.0/(#*?0%>(&%>*/./\"(*>(\".?0\"(\"%3(,0&?0*>(?00,/(*#*$( B-\"./\"(.,(.$$%0,/(1%-(.$$\"33(/%( /\"&4\">(?0./0-\"(4\"-1\"-0&(10+.5(8\"-L \"*+2/32.4\"35$%&5 AO4\"-0&(?0*>0$**3(./*%-\"3/=(30&(.#*G03(\"/(4\"-%(*4*\",/(0#4.($%,\"3/*3( U%-\"(A*+2/)2.4\"3(S*>\"%3 .$\"-*%5(8*$*/(2.-0&?0*G03(&%#%-\"*$**3(-\"(-\"-0&(\".?0./03(?0.&( ;\",>*/=(%4/./0&($%-\"*035 M9N;< D%>8,%30* \"+,)-'0()1\"1)(0#-2'304)56\")-\"#('64)56()%\"$\"#(#.7'3)063)$0)0%)(.3() E./01%(F/',1G ()2.-\"((( (A&.*#((( (E-*,/(((R\"O/()*Y\"6(#(#(# >%#\",/(;%#04/./\",*3(.3(&%#%-\"*($/./\"/(\"O$\"4/0-*(3%#04/./03=(/\"(,*&*,( (JK%$0&\",/(,.&\"L JS*>\"%(>\"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;\"#\",/*3/(.0/(10+.5( -\"(.>(?0*(?0*(G#.0/5 C/(.0/(#*?0%>(&%>*/./\"(*>(\".?0\"(\"%3(,0&?0*>(?00,/(*#*$( (JK%$0&\",/(,.&\"L (.#*?0*>(&.(.4\"#\"3/*%-.(>*3(-\"($%-\"&4%(--%;*>\"G*/(.,*3/%/.&($03.&=(.4\"#( E./01%(F/',1G /\"&4\">(?0./0-\"(4\"-1\"-0&(10+.5(8\"-L (JK%$0&\",/(,.&\"L \"3(\";\"#*/(0,/(10+.5(M.&(>03(.-*G03(>*/(\"/(.$\"--%(\"/(0##%-4%-*.(>%#%-*.(/*%-\"3\">*3( JS*>\"%(>\"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;\"#\",/*3/(.0/(10+.5( »( U%-\"(A*+2/)2.4\"3(S*>\"%3 (JK%$0&\",/(,.&\"L C/(.0/(#*?0%>(&%>*/./\"(*>(\".?0\"(\"%3(,0&?0*>(?00,/(*#*$( /\"&4\">(?0./0-\"(4\"-1\"-0&(10+.5(8\"-L *(,%G*3(.$$0&(?0*(-\"3/*.\"-%(%>*%(G#.,>*3$*>(&%#04/./\"(\"%33*/(#.,>*(>0,/*.,( »( U%-\"(A*+2/)2.4\"3(S*>\"%3 U.+,.&(,*\",/*G03(\"3/-0&($%,(,%3/=(*3(\"/=(\".?0*3/(?0%(?0.&03.\"($0&(0/(>%#%-*(*&%#0&?(0.34 (;%#04/.3(.>(0/(.-0&(\"0&(?0*($%,\"/=(3.\"(4-./0-*3(3\">(&.+,*3*/(>0,/5 >($'-'7.046.)1'0.)6$$\"#7\"#'\")\"+,)-')'%6-')'$$'3)%\"$\"#()(64)61%(1%0)(-6$70)56'.)40;1')104:)56() \"&4%-0&(\";\"##.$\"-*3(.3(>*(-\"2\",>*/(\"3(\"*$/%(*,*&03(\"/(?0.\"(.>(\"O$\"4\">(?0*3( B<N;c ;\"#*.34*$*.3(\"/=(?0.\"(,%G*/(;%#0/\",/(4#*/(0/(\".?0\"(-\"3\"(3*/(.$$0&=(.0/.(\"/(\"3$*.3(\"/(\"/(?0\"($04/. /\"&(>*/=(/\"&?0*G03.(>0,/(?0*3(>\",*&(,%G*/(4%-*($03(&%>*3$*\"/(?0.&(0/(4%-( .34\"-$2*##0/(#.G%-\"($04/.34*3(?0\"(.&(.$*(.3(&*=(3*($03.,>*3(&%3/%(&%>*(>%#%(>%#04/.%#\",*\"/(> %--0&(3\"?0.\"(;%#%-0&=(3%#0/\"&4%3(*03(,*3(3\"?0.&=(30&=(,03(\"/03=(?0.\"(&.( G\".?0.&=(%&,*2*/(\"#(&.+,*/*(0-*%-\"*0,/(;%#04/.(>%#\"$/\"(*,03$*#*?0.&(>%#%-\"=(30,/(?0\"(,035 \"4\"-\"(4.(>*/(\"/(.0>*/(2.-0&(\"3/(;%#%-*3(/*3$*.&\"/(%>(?0%>*3*(3*(*,*3(3*&(\"./*(*&*#( @%)63)0%'.)%'30()1\"9'3(4)'46.)>\"$\")\"+,)-36.:)-\"44\"%')%\"$6730)>(#-2'-0()>\"$64)56')%\"$67'30)>( 789\\;< 0&(2*##\",*(&*#*?0*(>\"(,*&*=(.0>*3(*0-I B%,/.$/3(V(8\"\">G.$W(V(7\"#4(V()*/\"(U.4(( \",*&%#%-.(*,/=($%,3\"-0&(,*33*/(%&,*.\"($%,\"$/./\"33*(,./?0%(%&,*&(10+.5(P&03(3*/\"&(>%#%-4%- [(N99\\]N99^(A*+2/)2.4\"3(TTB(X##(-*+2/3(-\"3\"-;\">5((R\"-&3(_(B%,>*/*%,3(V(E-*;.$H()/./\"&\",/(V(B%%W*\"(E%#*$H(V(R-.>\"&.-W3(%1(A*+2/)2.4\"3(TTB \"3(\"/=(*&4%3(>*$*>0$*&(1.$$03=($03=(?0*($%,(,0##.0/(0##.G%-\"-*%(>%#0/(?0\"(\"3(&*,*3/(;%#04/./0-(3 $%-\"-1\"-*%5(C/(*>(\".?0*>(&%#%-\"&(10+*./0-I 789\\;< B%,/.$/3(V(8\"\">G.$W(V(7\"#4(V()*/\"(U.4(( E-*;.$H()/./\"&\",/(V(B%%W*\"(E%#*$H(V(R-.>\"&.-W3(%1(A*+2/)2.4\"3(TTB [(N99\\]N99^(A*+2/)2.4\"3(TTB(X##(-*+2/3(-\"3\"-;\">5((R\"-&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

)\" 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

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

!% 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'#\"J :7F)7P7\"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/#887\"&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 /\"7+')F70,\")7G A72)B*0Q.R7&')F72 N#\"8+')F70:727+\"&6 !\"#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'\"+'7BJ030:727+\"&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 !\"#$ Home Search Results 789:;: 789:;: 789:;: 789:;: 789>;: 789>;: 789>;: )\".-$26 )\".-$26 )\".-$26 789<;: 789<;: 789<;: !\" !\" !\" !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"35$%& !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"35$%& !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"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) ?2\"$C%0/ ;%'&/(L5;+.'(L ?9<;: ?9<;: 7%&\"(S ?9<;: 7%&\"(S()2%44*,+(S 7%&\"(S(TN-%A0$/($./\"+%-OU(S( ;$%)+-/.5S-X+%G/4'+- )*33\"V0./5(\\4/./\"(A%#%-/*%,(2\",A-\"&( ?9:;: TN-%A0$/($./\"+%-OU ?9:;: ?9:;: *,$*(B#.&\"/0(\"-%3/*3(A%#%-(./5(Z-*0-\"&( )2%44*,+(?.-/ TN-%A0$/(,.&\"U ( 8*-3/(c.&\"(j( ;\"-%3/-0A(/./(;\"#*/(.0/4./(#0&3.,( Y./\"(/2*3(TZ/\"&(/O4\"U6( (P,%/(O\"/(-./\"AQ c9:;> 0##.&\"/(./*3(\"33\"A(&*,*3(\"33*3*/(.#*/( R$(+GG$-0/4'+-) R%0-(32%44*,+($.-/($%,/.*,3(:(*/\"&6 ( J.3/(c.&\"(j( ;\"#*V0*3*/W(;\"#\"3\",A-\"(&.+,*&(*#*3&%A( >+3%5?/%4(P9Q ( *.&$%&&(%#%-\"-./5( >+3%5?/%4(P9Q ( @;%+03(45F/G$C @A$/0.'-$C ( KAA-\"33(j( N-%A0$/( N-*$\"(4\"-(*/\"&( f0.,/*/O( L%/.# R%0($0--\",/#O(2.;\"(,%(*/\"&3(*,(O%0-( TKB3/-.$/(A\"3$-*4/*%,( @A$/0.'-$5BC ( I$/\"&(;%#%-\"-(.\"33*/(;0##.(1.$*#*V( ( (( 32%44*,+($.-/5 Y\"4-\"&(*A(&%#\"3\"A(\"/0-U R%0($0--\",/#O(2.;\"(,%(*/\"&3(*,(O%0-( 0*3$*4(\"0(1.$*,+(\"0(1.$*A0*4*/(*#(\",*3*3( @;%+03(45-/G$C( dTee5eeU( ( dTee5eeU _(b\"/.*#3 32%44*,+($.-/5 T)0B2\".A(4%-*3(.0/(#.B%-\"&(\"./0-(3.\"(4-%(V0*3(A*(0/( ,0##.&(ii-*/(#0/(;0#40/(#.%-\"($%,3\"A(/./( ( ?*/O(j( T)0B2\".A(:(4%-*3(.0/(#.B%-\"&(\"./0-(3.\"(4-%(V0*3(A*( TN-%A0$/(A\"3$-*4/*%,U *,/W(3*,*(-\"4\"-*B03(*0,/(&.X*&4%3/(%A(V0\"(;%#\"33*/*3( 4-.\"3/*3(.&(\"/(#%-(*0-\"-%($%-(3*&(.A*+,.( @;%+03(45F/G$C 0/(*,/W(3*,*(-\"4\"-*B03(*0,/(&.X*&4%3/(%A(V0\"(;%#\"33*/*3( ?+-4/(45='8E4#E/<$) $%,0&3.(,A*+,*&(\"33\"$/\"(&.+,*3$*,$*( \"/(\"X4\"#\"3$*.(;%#%-*(/\"&%##./*%3(.(;%#04/0-W($%,( ( )/./\"(j( TKB3/-.$/(A\"3$-*4/*%,( \"/(\"X4\"#\"3$*.(;%#%-*(/\"&%##./*%3(.(;%#04/0-W($%,( ?+-4/(45='8E4#E/<$) B#.(1.$*#(\"0*4(\"0+.*/(#%-(.&(;\"#\"3/%(A\"#( ( -\"&4%-0,A*/(A%#%-(.-0&(.3(.#*/(\"/0-*B035U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U -\"&4%-0,A*/(A%#%-(.-0&(.3(.#*/(\"/0-*B035U \"0*3(.#*3(A%#%-\"-$*(/./5(Y%3(.A*4*/(\"/W( 8%-(3.#\"3W(/-.*,*,+W(.,A(%/2\"-(+\",\"-.#( ( ( kZN(?%A\"(j( _(b\"/.*#3 6<0/4$ ( N-%A0$/(30B/%/.#( ( dTee5eeU 303/%(A*.&W(;\",/(.&(.$*##.%-\"&(ii-*#( *,V0*-*\"3W($%,/.$/(03(;*.(/2\"(1%##%[*,+( 8%-(3.#\"3W(/-.*,*,+W(.,A(%/2\"-(+\",\"-.#( 0/\"/0\"(1\"0&(,%,(2\",/(0##04/./5( %4/*%,36 *,V0*-*\"3W($%,/.$/(03(;*.(/2\"(1%##%[*,+( @;%+03(45F/G$C ( N2%,\"(c0&B\"-(j(P Q(( G P$/%-5Q+%$ %4/*%,36 10054+5?/%4 TKB3/-.$/(A\"3$-*4/*%,( ( N-%&%/*%,(A*3$%0,/( gdTee5eeU b0*3(.#*/W(;\"-*#(0##.%-\"&(;\"-%3(,*B2( ?E/45F+, Y\"4-\"&(*A(&%#\"3\"A(\"/0-U \"/W(3\",/(.#*/(;\",*B2(\"-*03$*#*/(./W(;\"#( ?E/45F+, _(b\"/.*#3 ( )/./\"(/.X(P\"3/*&./\"AQ( dTee5eeU A%#%-(3\"V0./(;0##.(.#*V0.&(;\",*3(\"33*( ?%$0'45A')4+%L5?E$(K((P!2O(A%([\"(.3C(1%-(/2*3(*,1%-&./*%,]Q @D$/43%$05;%+03(4)C5 5555 @D$/43%$05;%+03(4)C5 5555 \"X\"-%3/*\"(A\"#*V0.&$%,(\"X\"-$*A(0*3$*4( »( I&.*# ?:<;:X< ?:<;: \"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0) c9:;< \"#\",*&(.0/4./5 »( I&.*# ( )2*44*,+(P\"3/*&./\"AQ( dTee5eeU »( ?.## ( ( ?+-)3G$% 93)'-$)) R$($-4.L5:'$,$05S4$G) »( 7.;\"(\\3(?.##(R%0 »( ?.## »( !\"#$%&'%()*+,)-(. ^/./\"(30&(-./0-(3\"V0*A(0##\"3(&*#(&*,/(.0A*/(\"#*/(-./*(B#.B%--%;*/(\"3/\"&( »( 7.;\"(\\3(?.##(R%0 5 >+35</L5T$)4'G/4$0U5 H@IIJIIC ( !\"#$%!&$'$(!)* ( )%$*.#()\"$0-*/O(e(j( (G( (G( »( !\"#$%&'%()*+,)-(. »( TN-%A0$/(c.&\"U *&03.&(.3(A%##\"3(\".(;%#04/.(\"-*%--%(&.+,*3(\"X(\"*$*##.($*/.&W(V0.&W($%-( »( TN-%A0$/(c.&\"U .0/(*43.4*\"/(.B%5(KX*&(;\"#*V0*3(\"3/W(%A(V0%(B\"./(.4*$/%(/%/./0-(\",A*43035 T?%,/\",/(K-*%(B#.(\".(A%#0&(\"%3( ;%+($$054+5?E$(K+34 ( b./\"(%1(m*-/2(j( (DDlbblRRRR T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( »( TN-%A0$/(c.&\"U 5 .-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5( D'-05/5;%+03(4 \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U »( TN-%A0$/(c.&\"U \\4/.33*/.\"(4#.B%-0&(-./.(;%#%-\"W(;\",A*+,(*&*,$/./\"&(3%#0/(4\"##.B%-(-\"&%A*3(0/( ^$$.\"4\"-*B03(.0/\",*\",*3(\";\",/W(30&( ( b-*;\"-h3(J*$\",3\"(e(j( ( \"/(%4/.3303A.\"(\"/(&.+,*3(&*#*+\",A*/W(\";\"#*V0*(A%#04/.(/03A.,/(0-*B03(-\"3/*0&(.3( .&(10+.5(Z/.(,%,\"$/\"&(V0\"U (+D2030N-#P2 ?./\"+%-O 4\"#*+\",A\"&(-\"&(\"X4#*/./*.(V0*3(*,(,%B*3(*430,/\"3(,\"3/-04/.3(*,$*#(*3(V0.\"(;%#%-\"(,./( _(J\".-,(D%-\" (( J*$\",3\"()/./\"(j( T)/./\"U .B%-\"3\"(V0.3*/(%A*43.(;\",*3*/.3(3\"V0\"(%$$03(\"0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-\"-%( ( &%A*/./(.3(\"X(\"X4#*V0*.,/5 ?:<;` !\"#$%!&$'$(!)* 12+3454E$5#E+<<'-85?/%4 ;%+G+4'+-5?+0$ a\"O[%-A3 T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( T8\"./0-\"(/*/#\"(/2./( #E'<<'-8 IX4\"-0&(V0*A0$**3(./*%-\"3/W(30&(.#*B03(\"/(4\"-%(*4*\",/(0#4.($%,\"3/*3(.$\"-*%5(8*$*/( ( ( \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U \"X/\",A3(/[%(#*,\"3U !\"#$%!&$'$(!)* 2.-0&V0*B03(&%#%-\"*$**3(-\"(-\"-0&(\".V0./03(V0.&(;\",A*/W(%4/./0&($%-\"*035 7) 82(3.)'0)9\"5#):1\"66'0;)</#2)/$&/9.)#(= )(-2)21()3\".2)#(-(02) R%0h;\"(.44#*\"A(.(4-%&%/*%,($%A\"(/%(O%0-(40-$2.3\"6 \"+,)-'/()0\"0)(/#-1'2/3)45\")-\"#('53)45()%\"$\"#(#.6'2)/52)$/)/%)(.2()%\"$(02) 4-*$\"(A*34#.O\"A(%,(/2\"*-(4-%A0$/(4.+\"35 #32G'4 *$)4'-/4'+- ;%#04/./\",*3(.3(&%#%-\"*($/./\"/(\"X$\"4/0-*(3%#04/./03W(/\"(,*&*,(-\"(.A(V0*(V0*(B#.0/5 7) Z/\"&3(-\"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/\"(;*3*/( TN-%&%/*%,($%A\"(A\"3$-*4/*%,U( IIV5*')(+3-4(( @#$(+-0/%L5D$/43%$)C R%0-(4-%A0$/3([*##(B\"(3\",/(/%(O%0-($-\"A*/($.-A(B*##*,+(.AA-\"33(1%-(3\"$0-*/O(40-4%3\"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 )\"#\"$/(.(32*44*,+(&\"/2%A(.,A($%3/(1%-(O%0-(%-A\"-(P#\".-,(&%-\"Q6 789F;: @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C ?%,/.$/3(@(8\"\"AB.$C(@(7\"#4(@()*/\"(D.4(( 789F;: ?%,/.$/3(@(8\"\"AB.$C(@(7\"#4(@()*/\"(D.4(( (Tb%$0&\",/(,.&\"U (<GA.O(P<(B03*,\"33(A.O3Q(Pdee5eeQ ( TKB3/-.$/(A\"3$-*4/*%,( TKB3/-.$/(A\"3$-*4/*%,( TKB3/-.$/(A\"3$-*4/*%,( E(<99FG<99H(I*+2/)2.4\"3(JJ?(K##(-*+2/3(-\"3\"-;\"A5((L\"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./\"&\",/(@(?%%C*\"(N%#*$O(@(L-.A\"&.-C3(%1(I*+2/)2.4\"3(JJ? E(<99FG<99H(I*+2/)2.4\"3(JJ?(K##(-*+2/3(-\"3\"-;\"A5((L\"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./\"&\",/(@(?%%C*\"(N%#*$O(@(L-.A\"&.-C3(%1(I*+2/)2.4\"3(JJ? ()/.,A.-A(^;\"-,*+2/(P:(B03*,\"33(A.OQ(Pdee5eeQ (Tb%$0&\",/(,.&\"U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C 9'..'-8 TKB3/-.$/(A\"3$-*4/*%,( TKB3/-.$/(A\"3$-*4/*%,( TKB3/-.$/(A\"3$-*4/*%,( Y\"4-\"&(*A(&%#\"3\"A(\"/0-U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U ( ?.-A(LO4\"(j( T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( -\"A*/(?.-A(c0&B\"-(j( ? @*$)4'-/4'+-C @*$)4'-/4'+-C @*$)4'-/4'+-C TKB3/-.$/(A\"3$-*4/*%,( TKB3/-.$/(A\"3$-*4/*%,( TKB3/-.$/(A\"3$-*4/*%,( ( )\"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q Y\"4-\"&(*A(&%#\"3\"A(\"/0-U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U Y\"4-\"&(*A(&%#\"3\"A(\"/0-U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U T?.##(/%(.$/*%,U ( IX4*-./*%,(b./\"(j( (l( 789F;: ?%,/.$/3(@(8\"\"AB.$C(@(7\"#4(@()*/\"(D.4(( E(<99FG<99H(I*+2/)2.4\"3(JJ?(K##(-*+2/3(-\"3\"-;\"A5((L\"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./\"&\",/(@(?%%C*\"(N%#*$O(@(L-.A\"&.-C3(%1(I*+2/)2.4\"3(JJ? W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5\"%0$% 789F;: ?%,/.$/3(@(8\"\"AB.$C(@(7\"#4(@()*/\"(D.4(( E(<99FG<99H(I*+2/)2.4\"3(JJ?(K##(-*+2/3(-\"3\"-;\"A5((L\"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./\"&\",/(@(?%%C*\"(N%#*$O(@(L-.A\"&.-C3(%1(I*+2/)2.4\"3(JJ? 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 &\"#!\"#$%&'0/+'7B#\"J $&\"#/#*'+&'012030/-)&45'#5/6+' $!\"#()*)&+\"' !\"#!\"#$%&' $%\"#,)--.#+\"$ $(\"#%&&#'()#* 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>;: )\".-$26 )\".-$26 !\"#$%!&$'$(!)* !\"#$%!&$'$(!)* !\"#$%!&$'$(!)* 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, !\" A. Standard (with Click-to-Chat # onclick: Navigate to the Have Us Call You page. ! Format all prices with commas for thousands !\" !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"35$%& !\"#$%&\"'()*+,(*,(%-($-\"./\"(.,(.$$%0,/(1%-(\"*+2/32.4\"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?%,/\",/(K-*%(B#.(\".(A%#0&(\"%3(

Unify Your Deliverables

0 comments

Notes on slide 1

27 Favorites & 1 Event

Unify Your Deliverables - Presentation Transcript