Date post: | 20-Jan-2015 |
Category: |
Technology |
Upload: | nathanacurtis |
View: | 8,317 times |
Download: | 2 times |
U N I F Y Y O U R D E L I V E R A B L E S
T W I T T E R : @ 8 S U N I F Y
Prepared by Nathan Curtis for the IA Summit 2009, Memphis TN © EightShapes LLC
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The Doc System!
We use and teach teams systematic ways to create better documentation.
At it’s heart, the “doc system” is a set of templates + tools + techniques.
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
7%&"(S(TN-%A0$/($./"+%-OU(S(
TN-%A0$/(,.&"U
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
789F;:
?9<;:
?9:;:
?:<;:X<
?:<;`
^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035
\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5
IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)
;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5
!"#!"#$%&'
The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
New ComponentsThe product page includes the following new components:
1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings
The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.
1
2
5
3
4
! cation([email protected])
5 5 5 5
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
D'-05/5;%+03(4(?./"+%-O
a"O[%-A3
#32G'4
L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
*+,-.+/0)(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"
12+3456);/<$%) =&$-4)
(1%-("*+2/32.4"35$%&
)".-$26789>;:
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
c9<;:
New ComponentsThe product category page will include the following two new components:
1. c1. Mini-Cart 2. c2. Contact Us
These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.
The product category page includes a video spotlight and a range of featured product collections.
1
2
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$!"#()*)&+"'
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
>+3%5?/%4(P<Q( IA*/(?.-/
(
100$054+5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(
"4E$%5'4$G)5'-5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P>Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
Without Promo Code
Empty Cart
1 Item
2+ Items
With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
VariationsEmpty cart:A. Without promo codeB. With promo code
1 item in cart:C. Without promo codeD. With promo code
2+ items in cart:E: Without promo code (in-page update)F: With promo code
Elements1. Minicart header
2. Empty cart message ! If the cart contains no items, then show the
Empty Cart Message; otherwise hide this message.
3-6 Product ! Display a row in the mini-cart from every
product in the cart, including the product name, description, price, and remove button.
3. Product name # onclick: Navigate to the product page
4. Product description ! Limit to no more than two lines (~60 characters).
If a description exceeds 60 characters, truncate at 60 characters and follow with “....”
1
2
3 6
7
13
4
5
8
9
10
11
12
5. Product price ! Format all prices with commas for thousands
and two decimal point accuracy ! If the product has quantity > 1, then show a price
per item in parentheses. ! If a product is discounted, include the original
price as gray, struckthrough, and to the left of the discounted price.
6. Remove product button # onclick: Remove the product from the shopping
cart, and refresh the minicart display
7. Edit cart link # onclick: Navigate to the shopping cart page
8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands
and two decimal point accuracy
9. Proceed to checkout button # onclick: Navigate to the checkout page
10. Added to your cart message ! Display if the user has added an item to the
cart within the current page via the add-to-cart button.
11. Other items in your cart message ! Display if other items were already in the cart
andthe user has added an item to the cart within the current page via the add-to-cart button.
12. Promo code ! If the user has applied a promo code to their
shopping cart, then show the promo code.
13. Remove promo code button ! If the user has applied a promo code to their
shopping cart, then show the remove promo code button.
# onclick: Remove the promo code from the shopping cart and refresh the minicart.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
eCommerce [RH329] :: Design SpeciVersion 1 published June 26, 2009
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
@A$/0.'-$5NC
T)0B2".A(<(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
@A$/0.'-$5OC
T)0B2".A(>(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
$%"#,)--.#+"$
StandardA
Two FeaturesB
Feature CarouselC
1
2
3
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$&"#/#*'+&'012030/-)&45'#5/6+'
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee
Standard (with Click-to-chat)A
Pop-inC
Non-interactive (no Click-to-Chat)B
StaticD
VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static
Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.
Elements1. Header
! Enable publisher to update label on a per-page (per-product) basis
2. Description ! Enable publisher to update description on a per-
page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”
3. Chat Now Button # onclick: Open the existing click-to-chat window
already available within the support section ! If (normal business hours) and (Click-to-chat is
enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.
4. Email Link # onclick: Navigate to the Email Us page.
5. Call Link # onclick: Navigate to the Call Us page.
1
2
3
4
5 6
7
8
9
6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.
7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.
8. Close Button # onclick: Close the popin window, and return
focus to the parent page.
9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.
" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Rationale
ConsistencySpeedReuseand then, if you get more serious:collaboration, scale, portability, standard, credibility
"
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Wireframes!!!!"
#$%&'()*+,%- ./01%* 23415* 6718'*
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26789:;<
9%8'3:'(6/-;'<;341*(
8%-(3.#"3=(/-.*,*,+=(.,>(%/2"-(+","-.#(
*,?0*-*"3=($%,/.$/(03(;*.(/2"(1%##%@*,+(
%4/*%,36
9;3'(=%>
(» A&.*#
(» B.##
(» 7.;"(C3(B.##(D%0
(» !"#$%&'%()*+,)-(.
)9<;<
</-8(?8(=%>
C3"-,.&"(
E.33@%->(
(
(F"&"&G"-(&"(%,(/2*3($%&40/"-
( (</-8(?8
8%-+%/(H%0-6(C3"-,.&"I(E.33@%->I
=%'(@1'(3(A1B$15C
B-"./"(.,(.$$%0,/(1%-(.$$"33(/%(
"*+2/32.4"35$%&5
D%>8,%30*(JK%$0&",/(,.&"L
(JK%$0&",/(,.&"L
(JK%$0&",/(,.&"L
(JK%$0&",/(,.&"L
M9N;<
89<;<
?0./"&(;*>"&?0."(;%#%(*,$*(%&,*3(.0/("3("3/(;%#04/*%3(.#*?0*>(&.(.4"#"3/*%-.(>*3(-"($%-"&4%(--%;*>"G*/(.,*3/%/.&($03.&=(.4"#(
&*#*./03(.0>*/(?0*(*,;",*3$*>*/(;%#%-*%(-"4-"&("O4"#(";"#"3(";"#*/(0,/(10+.5(M.&(>03(.-*G03(>*/("/(.$"--%("/(0##%-4%-*.(>%#%-*.(/*%-"3">*3(
A,>*3*/./(&%#04/./(./",*2*/("/(#.&(,.&03/**3("/(0/(?0"(%>*(,%G*3(.$$0&(?0*(-"3/*."-%(%>*%(G#.,>*3$*>(&%#04/./"("%33*/(#.,>*(>0,/*.,(
>*/./"/("O4#.G%-(&%3/=(.0/(*,(-"-0&("/(;",*2*#*?0"(4%--0&(;%#04/.3(.>(0/(.-0&("0&(?0*($%,"/=(3."(4-./0-*3(3">(&.+,*3*/(>0,/5
P/./03>."(,"3/*.(3",*/*%,3">(?0*3(>%#"3"?0"(,*&03(.0/"&4%-0&(";"##.$"-*3(.3(>*(-"2",>*/("3("*$/%(*,*&03("/(?0."(.>("O$"4">(?0*3(
,%,(-"(,%,3"?0.3(>%#"3/=(3.&(1.$"-34("-"4">*/(;%#04/./"&(>*/=(/"&?0*G03.(>0,/(?0*3(>",*&(,%G*/(4%-*($03(&%>*3$*"/(?0.&(0/(4%-(
-"&?00,>."(%$$."5(Q;*/(%&&%#%(?0*3(.(,./*%5(R"&(>%#%--0&(3"?0."(;%#%-0&=(3%#0/"&4%3(*03(,*3(3"?0.&=(30&=(,03("/03=(?0."(&.(
,%3.&("/(-"4-./"&($%-4%3("33*(?0*>03(3*/(-"-"($%-(.0/(-"4"-"(4.(>*/("/(.0>*/(2.-0&("3/(;%#%-*3(/*3$*.&"/(%>(?0%>*3*(3*(*,*3(3*&("./*(*&*#(
&.O*&*#(#.$$./(;%#0/"&(-"&(".?0*.3(*,/*G03(*#*?0*(0/(".-0&(2*##",*(&*#*?0*(>"(,*&*=(.0>*3(*0-I
E./01%(F/',1GJS*>"%(>"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;"#",/*3/(.0/(10+.5(
C/(.0/(#*?0%>(&%>*/./"(*>(".?0"("%3(,0&?0*>(?00,/(*#*$(
/"&4">(?0./0-"(4"-1"-0&(10+.5(8"-L
U%-"(A*+2/)2.4"3(S*>"%3
E-*;.$H()/./"&",/(V(B%%W*"(E%#*$H(V(R-.>"&.-W3(%1(A*+2/)2.4"3(TTB
#5'/:,1(H/-;,/-;'*
/) JX-/*$#"(2*+2#*+2/L
/) JX-/*$#"(2*+2#*+2/L
/) JX-/*$#"(2*+2#*+2/L
/) JX-/*$#"(2*+2#*+2/L
()2.-"((( (A&.*#((( (E-*,/(((R"O/()*Y"6(#(#(#
!"
<157/:1* D%>8,%30* #$%&'()*F53/8/8- +,%- ./01%* 23415* 6718'*
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789<;<
789N;<
789Z;<
789:;<
B%,/.$/3(V(8"">G.$W(V(7"#4(V()*/"(U.4((
[(N99\]N99^(A*+2/)2.4"3(TTB(X##(-*+2/3(-"3"-;">5((R"-&3(_(B%,>*/*%,3(V(E-*;.$H()/./"&",/(V(B%%W*"(E%#*$H(V(R-.>"&.-W3(%1(A*+2/)2.4"3(TTB
@%&5(935'(`9a(
D%0($0--",/#H(2.;"(,%(*/"&3(*,(H%0-(
32%44*,+($.-/5
7%&"(b(JE-%>0$/($./"+%-HL(b(
JE-%>0$/(,.&"L
EH130,/81G
J)0G2".>(4%-*3(.0/(#.G%-"&("./0-(3."(4-%(?0*3(>*(0/(
*,/=(3*,*(-"4"-*G03(*0,/(&.O*&4%3/(%>(?0"(;%#"33*/*3(
"/("O4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-=($%,(
-"&4%-0,>*/(>%#%-(.-0&(.3(.#*/("/0-*G035L
#00('%(935'
"7157/1> F1:;(<41:* D%>8,%30*
F./"(/2*3(JP/"&(/H4"L6( (`,%/(H"/(-./">a
9%8'3:'(6/-;'<;341*(
8%-(3.#"3=(/-.*,*,+=(.,>(%/2"-(+","-.#(
*,?0*-*"3=($%,/.$/(03(;*.(/2"(1%##%@*,+(
%4/*%,36
9;3'(=%>
(» A&.*#
(» B.##
(» 7.;"(C3(B.##(D%0
(» !"#$%&'%()*+,)-(.
I13'&51*
E./01%(F/',1GJS*>"%(>"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;"#",/*3/(.0/(10+.5(
C/(.0/(#*?0%>(&%>*/./"(*>(".?0"("%3(,0&?0*>(?00,/(*#*$(
/"&4">(?0./0-"(4"-1"-0&(10+.5(8"-L
(» U%-"(A*+2/)2.4"3(S*>"%3
789\;<
B9N;<
B9<;<
B<N;<ON
B<N;c
Q/./"(30&(-./0-(3"?0*>(0##"3(&*#(&*,/(.0>*/("#*/(-./*(
G#.G%--%;*/("3/"&(*&03.&(.3(>%##"3(".(;%#04/.("-*%--%(
&.+,*3("O("*$*##.($*/.&=(?0.&=($%-(.0/(*43.4*"/(.G%5(XO*&(
;"#*?0*3("3/=(%>(?0%(G"./(.4*$/%(/%/./0-(",>*43035
C4/.33*/."(4#.G%-0&(-./.(;%#%-"=(;",>*+,(*&*,$/./"&(3%#0/(4"##.G%-(
-"&%>*3(0/("/(%4/.3303>."("/(&.+,*3(&*#*+",>*/=(";"#*?0*(>%#04/.(
/03>.,/(0-*G03(-"3/*0&(.3(4"#*+",>"&(-"&("O4#*/./*.(?0*3(*,(,%G*3(
*430,/"3(,"3/-04/.3(*,$*#(*3(?0."(;%#%-"(,./(.G%-"3"(?0.3*/(%>*43.(
;",*3*/.3(3"?0"(%$$03("0&(1.$$03=(?0*>0,/(#.,>*/(*>*%-"-%(&%>*/./(
.3("O("O4#*?0*.,/5
AO4"-0&(?0*>0$**3(./*%-"3/=(30&(.#*G03("/(4"-%(*4*",/(0#4.($%,"3/*3(
.$"-*%5(8*$*/(2.-0&?0*G03(&%#%-"*$**3(-"(-"-0&(".?0./03(?0.&(
;",>*/=(%4/./0&($%-"*035
"+,)-'0()1"1)(0#-2'304)56")-"#('64)56()%"$"#(#.7'3)063)$0)0%)(.3()
>%#",/(;%#04/./",*3(.3(&%#%-"*($/./"/("O$"4/0-*(3%#04/./03=(/"(,*&*,(
-"(.>(?0*(?0*(G#.0/5
8'13'96.3)0%)560303(4"%'3)'164)56().'4)(1%04:)630.)063)+6;0<)=(1'0.7)(#"##")"+,
3.,*3(>%#04/.3(;%#04/0-(&%>*3(,%G*3(.0>.(.&03.,>.&("330&(.3(0/(;%#0/("33
<5( *,0&(;%#04/.3*&*,(4#./0-(-"4/./"(4-%-",>*3(;",/(#.G%-*.3(&%>(?0%>(?0*(-"&4%-(.0/(#.G%-"2(","&4%3(>%#04*"(,>."4-.(/",>."33*/(2*/(
?0*3(&.O*&*,/(;%#04/."-0&(2*$*0&(3"?0%3.&("/(.>*/./0&(>%#04/.($03=(?0.&(;%
N5( #%-(.#*?0./0-I(AG*/*G03>.(,.&(-"*$/%(*3($%&&%#%-"(",/*0&(,*/./(&.(;%#0&=(0/(.>(?0"(>"G*3(>","/(?0.&(*,("/(2.-*."(4%-"$"--%-"(
;",>*.3(4"#",*3(>*($%-*.(;*>"(.34*$*.("O4#*?0(*G"-%--%("%3/%("33"?0.(3*,/03(.3(,
:5( "$/./(?0./"&(./(10+*/*.(?0%(%&,*&03=(?0%($%,3">*(?0*(0/"(>"33*&(2.-*%(/"&4%-"(4"-34"-0,>."("3"?0.3(4*$*>"G*3(?0.&=(303(,03(
0##.$"./*,($%&,*3(?0%3(-"&(1.$$04/.(*&03.4">(&.(;"#*/*.(,*2*$*(.>*%,3",*(>%#%-"-
Z5( %(*&.*%,($%,("/(>%#%-"(;"#"3$*#(*0&(;*>"(303(0,/(4%-"4"-0&(?0"(#.G(*4*/(?0*(/"&(#*.
(;%#"3$*./(>0$*#*?0*(%>(&*,;"-*G03("O("O$"3(;%#04/*.&(*&%>("*0&(.34*/(#.0/(10+*./0-=($%-*/(".(;%#%-"=(3">*/(.0/"&%#0&(2.-*G03(.4"-*%-(
-%;*/*3("/(.0/"&("/("/(.#*?0%($%,"3/=(0##.G(*,*&.(,./"3(>0$*",*&"(&%(;%#04/*(0&?0%>*(/*G035
U.+,.&(,*",/*G03("3/-0&($%,(,%3/=(*3("/=(".?0*3/(?0%(?0.&03."($0&(0/(>%#%-*(*&%#0&?(0.34*>0,/=(.0/(",*33*/(.$"3(>"#*?0"(>%#0&(
>($'-'7.046.)1'0.)6$$"#7"#'")"+,)-')'%6-')'$$'3)%"$"#()(64)61%(1%0)(-6$70)56'.)40;1')104:)56()(?-(.-'(1'0)56()56'96.)(1%')3(4)56')
;"#*.34*$*.3("/=(?0."(,%G*/(;%#0/",/(4#*/(0/(".?0"(-"3"(3*/(.$$0&=(.0/.("/("3$*.3("/("/(?0"($04/./*G03(?0%(G#.0>*/*.&($03/*(;%#%-4%-0&(
.34"-$2*##0/(#.G%-"($04/.34*3(?0"(.&(.$*(.3(&*=(3*($03.,>*3(&%3/%(&%>*(>%#%(>%#04/.%#",*"/(>%#%-0&(?0.&(?0."(4-."4">(&%(
G".?0.&=(%&,*2*/("#(&.+,*/*(0-*%-"*0,/(;%#04/.(>%#"$/"(*,03$*#*?0.&(>%#%-"=(30,/(?0"(,035
@%)63)0%'.)%'30()1"9'3(4)'46.)>"$")"+,)-36.:)-"44"%')%"$6730)>(#-2'-0()>"$64)56')%"$67'30)>($$09")#(-3(.3'64:).'4()16$$0).'3)>"$"#(2)
",*&%#%-.(*,/=($%,3"-0&(,*33*/(%&,*."($%,"$/./"33*(,./?0%(%&,*&(10+.5(P&03(3*/"&(>%#%-4%-"(;"#(*>*.(>"&(.G(*#*/*(%>*430&?0*($%,(-"&(
"3("/=(*&4%3(>*$*>0$*&(1.$$03=($03=(?0*($%,(,0##.0/(0##.G%-"-*%(>%#0/(?0"("3(&*,*3/(;%#04/./0-(3"$/"&(-.(?0*>"&?0"(;",>*/("33*(0/("%3(
$%-"-1"-*%5(C/(*>(".?0*>(&%#%-"&(10+*./0-I
E./01%(F/',1GJS*>"%(>"3$-*4/*%,(T.0/(*3*/*%($%&,*&.(;"#",/*3/(.0/(10+.5(
C/(.0/(#*?0%>(&%>*/./"(*>(".?0"("%3(,0&?0*>(?00,/(*#*$(
/"&4">(?0./0-"(4"-1"-0&(10+.5(8"-L
(» U%-"(A*+2/)2.4"3(S*>"%3
B%,/.$/3(V(8"">G.$W(V(7"#4(V()*/"(U.4((
[(N99\]N99^(A*+2/)2.4"3(TTB(X##(-*+2/3(-"3"-;">5((R"-&3(_(B%,>*/*%,3
<157/:1* D%>8,%30*F53/8/8-
!"#$%&"'(
789<;<
789N;<
789Z;<
7%&"(b()044%-/(b(J)044%-/(B./"+%-HL(b(
J)044%-/(R%4*$(R*/#"L
789\;<
B9N;<
B9<;<
Product PageB Support PageB
#
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
$
Wireframe Templates Setup
Styles
Layers
Layouts
Grids
1 Page
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Standard, “atomic” symbols:• Forms• Navigation• Icons• Ads• Text
%
Wireframe Elements
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 LibrariesSome teams even havestandard 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. DeliverableUnits / Size
Typography
Grid
PurposeDepict what a screen looks like Combine pictures & words to document design
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Deliverables!!!)!
http://semanticstudios.com/publications/semantics/000228.php
Plus:
Contracts
Proposals
Placards
Tri-folds
Offer Letters
Honey-Dos
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Common Deliverables)"
Strategy Specifications Persona
Mental Model Style Guide Comp Specs
Just a few of the kinds of deliverables we produce...
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):
1LetterLandscape
2LegalPortrait
3LetterPortrait
4TabloidLandscape
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 DocumentEvery deliverable should have a clearly evident title, author, and version.
Use text variables to set those values – across pages – right when you start a new document.
)&
Feature: Type > Text Variables > Define...
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
FEATURE:
Naming Your PagesPage titles are included on the master, and then you override it on each page.
It’s the only shortcutyou have to know:CTRL-SHFT-Click it.
That said, you wanna be a deliverable ninja? Then learn shortcuts!
)'
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
!"
Deliverable ElementsDo 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!%
7/#887"&709:;<=>?0@@0A72)B*0CD7&)E0&+')#*
Version 1Published February 24, 2009Created by Nathan Curtis
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
/"7+')F70,")7G
The ecommerce " ow requires a range of updates based on formative user research and business requirements.In an e# ort to increase product marketing impact and social interactions, the team looks to improve marketing billboards on product and category pages and enable product ratings. Additionally, customer service will improve via inline click-to-chat sessions between customer and representative.In addition, new business requirements will facilitate credit check across multiple audience types, promotion codes to enable discounts, and varied shipping options and discounts.
DeliverablesDesign StrategyAliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies leo dapibus ultricies. Wireframes & Design Speci! cationDocumentation of the interaction design, depicting the structure, behaviors, and functional requirementsVisual Design CompsVisual, high-$ delity mockups that clarify color, typography, and $ nal layout upon which presentation layer assets are createdUsability Test ScriptPrototypeModerate $ delity mockups used to assess design quality via usability testing with participantsUsability Test Report
Assumptions, Constraints & Other ConsiderationsAll visual style, typography, and layout will be instantiated based on exisiting conventionsComponents will be reused, particularly those for page shells and existing page designsProduct taxonomy (including available product attributes and classi$ cations) will remain unchanged for this release
Presentation ModelThe experience will be built largely upon the existing design system foundation of page types & components. However, new components and page types will be de$ ned and design as necessary.
Design Objectives1. Lift order conversions2. Improve customer satisfaction3. Increase store " exibility
Project ScopeThe project scope is limited to requirements formally identi$ ed by Product Marketing in:ProjectRH329.FallUpdates.Requirements.doc
Target AudienceThe audiences for this documentation include:
Product Marketing: To understand and validate the realization of the user experience based on requirements Engineering: Learn and respond to design treatments that must be implemented.Quality Assurance: Identify test cases and clarify requirements in detail.Design Peers: Con$ rm and collaborate on a consensus design solution across roles
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"#$
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
D'-05/5;%+03(4(?./"+%-O
a"O[%-A3
#32G'4
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
*+,-.+/0)(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@#$(+-0/%L5D$/43%$)C
7%&"(S
TN-%A0$/($./"+%-OU
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
@A$/0.'-$C
T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
P$/%-5Q+%$
789F;:
c9<;:c9:;> c9:;> c9:;>
?9<;:
?9:;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#
@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U
N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU
( N-%&%/*%,(A*3$%0,/( gdTee5eeU
( )/./"(/.X(P"3/*&./"AQ( dTee5eeU
( )2*44*,+(P"3/*&./"AQ( dTee5eeU
5 >+35</L5T$)4'G/4$0U5 H@IIJIIC
5;%+($$054+5?E$(K+34
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
789F;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
7%&"(S(TN-%A0$/($./"+%-OU(S(
TN-%A0$/(,.&"U
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
789F;:
?9<;:
?9:;:
?:<;:X<
?:<;`
^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035
\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5
IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)
;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5
789:;:
789=;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
?2"$C%0/?9:;:
W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%
;%'&/(L5;+.'(L
)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(
I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(
b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5
;$%)+-/.5S-X+%G/4'+-
( 8*-3/(c.&"(j(
( J.3/(c.&"(j(
( KAA-"33(j(( ( (
( ?*/O(j(
( )/./"(j(
( kZN(?%A"(j(
( N2%,"(c0&B"-(j(P Q(( G
9'..'-8
( ?.-A(LO4"(j(
(?-"A*/(?.-A(c0&B"-(j(
( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q
( IX4*-./*%,(b./"(j( (l(
789F;:
#E'<<'-8
*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( )%$*.#()"$0-*/O(e(j( (G( (G(
( b./"(%1(m*-/2(j( (DDlbblRRRR
( b-*;"-h3(J*$",3"(e(j(
(( J*$",3"()/./"(j( T)/./"U
?+-)3G$% 93)'-$))
?:<;:
?:<;`
Home Search Results
Page Variations
Components
N/A
c1. Contact Usc2. Mini-Cart
1. Single Photograph, No Items in Cart2. Multiple Photos, Items in Cart
c1. Contact Usc2. Mini-Cartc3. Billboardc4. Accordionc5. Ratings
1. Empty2. 1 Item3. Many Items, with Promo Code applied
c5. Promotion Code
1. Standard2. Business Credit Check, FREE Shipping
c6. Credit History Checkc7. Shipping Options
Product Category Product Cart Checkout
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
7%&"(S(TN-%A0$/($./"+%-OU(S(
TN-%A0$/(,.&"U
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
789F;:
?9<;:
?9:;:
?:<;:X<
?:<;`
^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035
\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5
IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)
;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5
!"#!"#$%&'
The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
New ComponentsThe product page includes the following new components:
1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings
The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.
1
2
5
3
4
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
%"'&"#/+"'H0I8D'J %"'!"#/+"'H0=K0L'782
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(,%(*/"&35(KAA(.,(*/"&(BO($#*$C*,+(/2"(nKAA(/%(?.-/o(B0//%,(%,(.,O(%1(O%0-(4-%A0$/(A*34#.O35
>"),)0%)/)6#"%5-2?).2/#2).1"66'0;)'0)"0()"+)"5#)-/2(;"#'(.@
(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6
N-%&%/*%,(?%A"( ( 1<<.L
789F;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#
@;%+03(45-/G$C( dTee5eeU( < ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U
@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U
@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U
N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU
( N-%&%/*%,(A*3$%0,/( gdTee5eeU
( )/./"(/.X(P"3/*&./"AQ( dTee5eeU
( )2*44*,+(P"3/*&./"AQ( dTee5eeU
5 >+35</L5T$)4'G/4$0U5 H@IIJIIC
5;%+($$054+5?E$(K+34
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
789F;:
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
C6)DD)*BH0&#*'M$
#E'<<'-8
*$)4'-/4'+-M
()",A(/%(&O(B*##*,+(.AA-"33
()",A(/%(.(.,%/2"-(.AA-"336
( KAA-"33(j(( ( (
( ?*/O(j(
( )/./"(j(
( kZN(?%A"(j(
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
#E'<<'-8
*$)4'-/4'+-M
()",A(/%(&O(B*##*,+(.AA-"33
()",A(/%(.(.,%/2"-(.AA-"33
Q$4E+05Y5;%'($M
DR==5"&$%-'8E45#E'<<'-8ZZZA0"(/%(/2"(.44#*"A(4-%&%/*%,($%A"(%1(T4-%&%/*%,($%A"(,.&"U5
Destination Options, Method OptionsD
Destination Options, FREE ShippingC
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
/6+*B70;)2'#"J
Version 1 :: June 26, 2009Initial design spec authored based on $ nal wireframes and design strategyInclusive of requirements for product category, product, cart, and checkout pages
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
N#"8+')F70:727+"&6
Introductory descriptive text about the context of the quotes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. ApproachNullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
ParticipantsSed aliquam, nunc eget euismod ullamcorper:
[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)
[Summary Point][Objective descriptionctet am etue magna commodolore molor iriusting ero]
[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point]
[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point][Objective bullet point]
[Summary Point][Objective description ecte delenis niam, si. Ectet lorperil el etum autpat loreros nonsectet am etue magna commodolore molor iriusting eroctet am etue magna commodolore molor iriusting ero]
1
2
3
4
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
&"#!"#$%&'0/+'7B#"J
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
D'-05/5;%+03(4(?./"+%-O
a"O[%-A3
#32G'4
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
*+,-.+/0)(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@#$(+-0/%L5D$/43%$)C
7%&"(S
TN-%A0$/($./"+%-OU
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
@A$/0.'-$C
T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
P$/%-5Q+%$
789F;:
c9<;:
c9:;> c9:;> c9:;>
?9<;:
?9:;:
New ComponentsThe product category page will include the following two new components:
1. c1. Mini-Cart 2. c2. Contact Us
These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.
The product category page includes a video spotlight and a range of featured product collections.
1
2
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$("#%&&#'()#*
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(.#*V0././0-](Y*/./5(^$$."4"-*B03U
(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(
.#*V0././0-](Y*/./5(^$$."4"-*B03U
(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(
.#*V0././0-](Y*/./5(^$$."4"-*B03U
(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"
5 !"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(D%-"(b"/.*#3(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
("#/67&4#%'789:;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
?2"$C%0/?9:;:
W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%
;%'&/(L5;+.'(L
)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(
I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(
b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5
;$%)+-/.5S-X+%G/4'+-
( 8*-3/(c.&"(j(
( J.3/(c.&"(j(
( KAA-"33(j(( ( (
( ?*/O(j(
( )/./"(j(
( kZN(?%A"(j(
( N2%,"(c0&B"-(j(P Q(( G
9'..'-8
( ?.-A(LO4"(j(
(?-"A*/(?.-A(c0&B"-(j(
( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q
( IX4*-./*%,(b./"(j( (l(
789F;:
#E'<<'-8
*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( )%$*.#()"$0-*/O(e(j( (G( (G(
( b./"(%1(m*-/2(j( (DDlbblRRRR
( b-*;"-h3(J*$",3"(e(j(
(( J*$",3"()/./"(j( T)/./"U
?+-)3G$% 93)'-$))
?:<;:
?:<;`
1
2
New ComponentsThe product category page will include the following new/updated components:
1. c6. Credit history check2. c7. Shipping options
These two components will be displayed, in that order, between the personal information and billing sections of the checkout page.
The checkout page enables a customer to provide personal and billing information to purchase one or more products.
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
A72)B*0C'"+'7BJ030:727+"&6
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
(+D2030N-#P2
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$!"#()*)&+"'
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
>+3%5?/%4(P<Q( IA*/(?.-/
(
100$054+5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(
"4E$%5'4$G)5'-5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P>Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
Without Promo Code
Empty Cart
1 Item
2+ Items
With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
VariationsEmpty cart:A. Without promo codeB. With promo code
1 item in cart:C. Without promo codeD. With promo code
2+ items in cart:E: Without promo code (in-page update)F: With promo code
Elements1. Minicart header
2. Empty cart message ! If the cart contains no items, then show the
Empty Cart Message; otherwise hide this message.
3-6 Product ! Display a row in the mini-cart from every
product in the cart, including the product name, description, price, and remove button.
3. Product name # onclick: Navigate to the product page
4. Product description ! Limit to no more than two lines (~60 characters).
If a description exceeds 60 characters, truncate at 60 characters and follow with “....”
1
2
3 6
7
13
4
5
8
9
10
11
12
5. Product price ! Format all prices with commas for thousands
and two decimal point accuracy ! If the product has quantity > 1, then show a price
per item in parentheses. ! If a product is discounted, include the original
price as gray, struckthrough, and to the left of the discounted price.
6. Remove product button # onclick: Remove the product from the shopping
cart, and refresh the minicart display
7. Edit cart link # onclick: Navigate to the shopping cart page
8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands
and two decimal point accuracy
9. Proceed to checkout button # onclick: Navigate to the checkout page
10. Added to your cart message ! Display if the user has added an item to the
cart within the current page via the add-to-cart button.
11. Other items in your cart message ! Display if other items were already in the cart
andthe user has added an item to the cart within the current page via the add-to-cart button.
12. Promo code ! If the user has applied a promo code to their
shopping cart, then show the promo code.
13. Remove promo code button ! If the user has applied a promo code to their
shopping cart, then show the remove promo code button.
# onclick: Remove the promo code from the shopping cart and refresh the minicart.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
%"#/+"'
PurposeThe shopping cart serves as the hub of selected items through an online store experience, and the key page from which the user can continue through to checkout in a familiar way.
For this project, the shopping cart serves as the primary location to apply and manage a promotion code. Here, users can:
Add a promo code whether or not the cart contains any itemsRemove an applied promotion codeLearn about promotion codesNavigate to as a hub for promo code application (such as from a promo banner elsewhere on the site or via paid search and print advertising)
Promo & Cart RationaleThe shopping cart serves as a persistent and visible destination within the shopping experience, where users can manage their overall order, discern price impacts, and consider their order from a high level.
Unchanged Components1. Header 2. Breadcrumbs 3. Page Title 4. Page Message 5. Cart Table Header 6. Cart Item(s) 7. Cart Subtotal & Update
Updated Component8. Cart Summary
New Component9. Cart Promo Codes
Unchanged Components (cont’d)10. About the Shopping Cart 11. Recommendations 12. Recently Viewed Items 13. Footer
The shopping cart summarizes all items that the user intends to purchase, displays aggregate pricing, and leads to checkout.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#
@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U
N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU
( N-%&%/*%,(A*3$%0,/( gdTee5eeU
( )/./"(/.X(P"3/*&./"AQ( dTee5eeU
( )2*44*,+(P"3/*&./"AQ( dTee5eeU
5 >+35</L5T$)4'G/4$0U5 H@IIJIIC
5;%+($$054+5?E$(K+34
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
789F;:
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
1
2
3
4
5
6
7
9
13
11
12
10
8
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$)"#+,)--)*.
#E'<<'-8
*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
#E'<<'-8
*$)4'-/4'+-
( KAA-"33(j(( ( (
( ?*/O(j(
( )/./"(j(
( kZN(?%A"(j(
Q$4E+05Y5;%'($M
N[0/L5#E'<<'-85X+%5HIIJII1%-(.##(40-$2.3"3(&.A"(/2-%0+2(/2"(T$%&4.,O(,.&"U(3044%-/(4-%+-.&
Destination Fixed, Method OptionsA
Destination Entry, Method FixedB
Alternative shipping options are personalized by previous product selection, experience context, and business rules based on cart composition.
Destination Options1. Constrained (see Figure A)
The cart product combination requires that the products are sent to the personal information that serves as the billing address
2. Custom (see Figure B)3. Options (see Figures C & D)
User can select to reuse billing address or enter an alternative address
Method Options1. FREE (see Figure D)2. Fixed (see Figure B)3. Options (see Figure A)
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
O+.-70#G0/#*'7*'2
Change History. . . . . . . . . . . . . . . . . . . . . 3Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4
Design Strategy & ResearchCreative Brief . . . . . . . . . . . . . . . . . . . . . . 6Design Objectives . . . . . . . . . . . . . . . . . . . 7Formative Research. . . . . . . . . . . . . . . . . . . 8Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9
Maps & FlowsFlow . . . . . . . . . . . . . . . . . . . . . . . . . 11
Pages1. Product Category . . . . . . . . . . . . . . . . . 13
c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15
2. Product. . . . . . . . . . . . . . . . . . . . . . . 16c3. Billboard . . . . . . . . . . . . . . . . . . . . 17c4. Accordion. . . . . . . . . . . . . . . . . . . . 18c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19
3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 203.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 213.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21c6. Promo Code . . . . . . . . . . . . . . . . . . 22
4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23c7. Credit History Check . . . . . . . . . . . . . . 24c8. Shipping . . . . . . . . . . . . . . . . . . . . 25Error Messaging . . . . . . . . . . . . . . . . . . 27
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
A72)B*0Q.R7&')F72
The following objectives are formed as a result of design collaboration, site analytics of the e-commerce process, and user-centered feedback derived from interviews.
Lift Order ConversionsDecrease exit rate by answering key questionsImprove user interface of complex customer decisionsEnhance product displays via billboard photos & carousels
Improve Customer SatisfactionEnable customers to engage more deeply through:
Real-time customer supportCustomer ratings
Increase Store FlexibilityBroaden store capabilities to:
O# er varied discounts through promo codesHandle consumer and business customers di# erently
1
2
3
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
!+B72
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
@A$/0.'-$5NC
T)0B2".A(<(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
@A$/0.'-$5OC
T)0B2".A(>(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
$%"#,)--.#+"$
StandardA
Two FeaturesB
Feature CarouselC
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
VariationsA. StandardB. Two FeaturesC. Feature Carousel
Elements1. Feature headline
" Limit headlines to one line, do not wrap " Follow brand guidelines for voice and tone
2. Feature description " Limit descriptions to four lines; optimally
descriptions span no more than two lines
3. Add to cart button # Add the item to the shopping cart; if the item is
already in the shopping cart, the increment the item quantity by one.
Add the item to the in-page mini-cart if not already included.Refresh minicart calculation including subtotalTransition the minicart item using a yellow fade to connote the cart’s change in statusStay on the current page
4. Feature image " Use a product photography if possible " Avoid inspirational photographs of people
unless directly interacting with the product. In such cases, focus/crop photographs to focus on the product.
5. Feature option image ! If more than one feature is available within the
1
2
4
5
6
3
billboard, then display a thumbnail associated with each feature to the right of the feature image.
! If the image applies to the current displayed feature, then highlight the image (such as with a larger stroke weight as in Figure 3).
# onclick: Display the selected feature headline, description, and photograph within the billboard
6. Feature carousel navigation ! If more than three features are included within
the billboard, display feature carousel navigation above and below the three feature option images.
# onclick: Rotate thumbnail images in the direction selected by 1 (do not rotate “pages” of feature option images).
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$*"#/'#0#12#(3
;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6
N-%&%/*%,(?%A"( ( 1<<.L
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
;%+G+4'+-5?+0$(L2"(4-%&%/*%,($%A"(O%0h;"(.44#*"A(A%"3(,%/(&./$2(.($0--",/(4-%&%/*%,5(N#".3"(-"",/"-(/2"($%A"(.,A(/-O(.+.*,5
N-%&%/*%,(?%A"( T$%A"(*,("--%-U ( 1<<.L
The promo code application enables users to enter a textual promo code to receive discounts and premium o# ers.
VariationsA. Default (no code applied)B. Applied codeC. Error
Elements1. Header
2. Introduction
3. Text box ! Limit entry to no more than 10 characters
4. Apply button # onclick
If the text box is empty, then display an error messageValidate the promo code applied, based on table X.If the promo code is valid, refresh the Promo Code to re" ect the applied code (see $ gure B), and refresh the shopping cart inline to re" ect any applicable savings.
5. Description & discount percentage
6. Remove code button # onclick
Remove the applied promo codeRefresh the Promo Code component to the no code applied state (refer to $ gure A).Refresh the shopping cart to remove any promo-code based discounts applied.
7. Error message
Default (no code applied)A
Applied codeB
ErrorC
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
789:;:
?2"$C%0/?9:;:
;$%)+-/.5S-X+%G/4'+-
( 8*-3/(c.&"(j( (8*-3/(,.&"(*3(-"V0*-"A
( J.3/(c.&"(j( ?0-/*3
( KAA-"33(j( :<>(I#&()/-""/
+,$-$!./!0!1-234$5!6.),!%27-!088-$//!/735.//.2'9!:4$0/$!(!44!.'!044!-$;7.-$8!
088-$//!(!$48/9!
I""#"0(722+B)*B
Checkout page with error messageA
ConventionsThe error messaging presentation rules for the Checkout page do not change with this release.
New MessagesThe following additional validations are to be added based on new data collection:
ID Event Condition Message
1 onblur Social Security Number (any $ eld) contains a non numeric character
Social security number contains a nonnumeric character
2 onblur Date of birth is nonempty and not formatted as MM/DD/YYYY
Date of birth is not formatted correctly
3 onblur Date of birth is less than 18 years from today’s date
Date of birth re" ects that you are not old enough to purchase a product from this website
4 onblur Tax ID (either $ eld) is nonempty and contains a nonnumeric character
Tax ID contains a nonnumeric character
5 onblur ZIP Code is nonempty and is not a $ ve digit numeric string
ZIP code is not formatted correctly
6 onsubmit Social security number is empty Social security number is required
7 onsubmit Date of birth is empty Date of Birth is required
8 onsubmit Drivers License Number is empty Drivers Licence Number is required
9 onsubmit Tax ID is empty Tax ID is required
10 onsubmit Company name is empty Company Name is required
11 onsubmit Custom address is selected and address is empty
Address is required
12 onsubmit Custom address is selected and City is empty
City is required
13 onsubmit Custom address is selected and ZIP Code is empty
ZIP Code is required
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
:7F)7P7"2
Reviewer Email Address Role Group
Core TeamJohn Smith [email protected] Information Architect UXD
Jane Brown [email protected] Visual Deisgner UXD
Adam Morris [email protected] Design Technologist WXD
Samantha March [email protected] Product Manager Mktg
Dan Ayers [email protected] Engineer IT
Extended TeamJohn Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
7/207/137/66/296/226/156/8
JulyJuneToday
!"#R7&'0!-+*
Interaction Design
Design Strategy
Visual Design
Usability TestingScripting
Wireframes Specs Revisions
Prototyping
Testing Report
Draft 1 Final Draft 1 Draft 2
Final Report
Draft 1
Draft 1
Draft 1
Final
Final Final
Final
Final
Review
NOTE: This project plan illustrates design team activities only; for the project’s complete plan, refer to the plan produced by the project management team.
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$&"#/#*'+&'012030/-)&45'#5/6+'
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee
Standard (with Click-to-chat)A
Pop-inC
Non-interactive (no Click-to-Chat)B
StaticD
VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static
Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.
Elements1. Header
! Enable publisher to update label on a per-page (per-product) basis
2. Description ! Enable publisher to update description on a per-
page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”
3. Chat Now Button # onclick: Open the existing click-to-chat window
already available within the support section ! If (normal business hours) and (Click-to-chat is
enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.
4. Email Link # onclick: Navigate to the Email Us page.
5. Call Link # onclick: Navigate to the Call Us page.
1
2
3
4
5 6
7
8
9
6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.
7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.
8. Close Button # onclick: Close the popin window, and return
focus to the parent page.
9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.
" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$+"#:+')*B2
Y./"(/2*3(TZ/"&(/O4"U6( (P>5=(%0/(%1(`(3/.-3Q
Y./"(/2*3(TZ/"&(/O4"U6( (7%--",A%03'
Y./"(/2*3(TZ/"&(/O4"U6( (N%%-
Y./"(/2*3(TZ/"&(/O4"U6( (8.*-
Y./"(/2*3(TZ/"&(/O4"U6( (p%%A
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
Y./"(/2*3(TZ/"&(/O4"U6( (IX$"##",/'
Y./"(/2*3(TZ/"&(/O4"U6( ().;"A
Not Yet Rated
Hovered & Levels
Click & Save
Applied Ratings
The product rating component enables users to view and apply a rating to the displayed product.
VariationsAa. StandardB. Two FeaturesC. Feature Carousel
Elements1. Rating Label
" Include a speci$ c label of what is being rated, generally by “type”. For example, include “product”, “article”, or “post.”
" Do not label the speci$ c item, since the rating is adjacent to the item title anyway.
2. Rating Stars # onhover: Highlight all stars to the left of and
including the current star, connoting that a rating would be applied equivalent to the currently hovered star. Also update the Rating Messaging to re" ect the level of the current star.
# onclick: Save the applied rating, and once saved, exchange the level (such as “Excellent”) with “Saved.” Do not transition to an applied rating after this (until the user would reload the page), but instead sustain the user’s applied rating.
3. Rating Messaging ! If the item has not yet been rated, show “(not yet
rated)”.If the item is being rated (a star is being hovered), then display the associated rating level.If the item has been rated, display the average out of total possible stars (refer to “Applied Ratings” $ gure).
" Use a common and meaningful spectrum of rating levels, such as Horrendous, Poor, Fair, Good, and Excellent.
" Use levels consistent with the tone of the brand.
A
1 2 3
B
C
D
E
F
G
H
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$,"#/"7$)'0;)2'#"J0/67&4
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( )%$*.#()"$0-*/O(e(j( (G( (G(
( b./"(%1(m*-/2(j( (DDlbblRRRR
( b-*;"-h3(J*$",3"(e(j(
(( J*$",3"()/./"(j( T)/./"U
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( L.X(Zb(e(j( (G(
( ?%&4.,O(c.&"(j(
?%$0'45A')4+%L5?E$(K
)*,$"(O%0(.-"(40-$2.3*,+(/2"3"(4-%A0$/3(1%-(B03*,"33(03"W(O%0-(B03*,"33([*##(B"(#*.B#"(1%-(/2*3(40-$2.3"(.,A(,%($-"A*/(2*3/%-O($2"$C(*3(-"V0*-"A5
1%$5L+35<3%(E/)'-85X+%5<$%)+-/.53)$5'-)4$/0\I,/"-(4"-3%,.#(*,1%-&./*%,(*,3/".A(_
?+-)3G$%
93)'-$))
93)'-$))
?+-)3G$%
?:<;:
?:<;:
?:<;`
?:<;`
Consumer optionA
Business optionB
Business (! xed)C
1
2
11
3
4
5
6
7
8
9
10
1. Cover Page
5. Chapter (Strategy)
2. Table of Contents
6. Creative Brief
3. Change History
7. Design Objectives
4. Reviewers
8. Research Results 9. Project Plan
10. Chapter (Maps/Flows) 11. Wire"ow
12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component 18. Component
19. Annotated Component 20. Chunked Page 21. Page Variations 22. Annotated Component 23. Chunked Page 24. Annotated Component
25. Annotated Component 26. Component Variations 27. Copy Table & Sample
Collaborative outline Co-authored document
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Standardize a deliverable! What’s with the XML?
!&
Automating Starting Points
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
!'
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Table of ContentsProducing a TOC is simple: Select “Table of Contents...” and click “OK.”You can even create other predefined indices too!
* All page titles are consistently styled as 1st level, 2nd level (indented), No TOC (omitted), chapter titles (bold), or as an auto-numbered variation.
!(
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Publishing Deliverables"*
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Print VersionThe Black Bar is dead. Long live the Black Bar.
When you PDF, the Black Bar appears, but when you send it to a printer, the bar is hidden. Automagically.
")
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
8 Customize it!Not everyone loves orange (why I don’t know).Customize deliverable templates easily with:
"!
BackgroundLogo
Type
AnnotationColor
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The system is...
TEMPL ATES
""
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The System Is...Templates34
Deliverables
Templates
Elements Pages
Pages Elements
Templates
Components
Wireframes
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The Template Landscape"$
Templates
Elements Pages
Comps
Components
Deliverables
Pages Elements
Templates
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Zipping It UpThe system of templates, libraries, and other documentation is delivered as a ZIP file.
"%
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The system is...
TOOLS
"&
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Why InDesign?"'
Our surveys reveal that Visio and Omnigraffle are the two most popular tools in the IA community. We work in InDesign because:
1. Cross platform
2. Most modular (snippets, linked files including PDFs)
3. Powerful styles (type, objects, tables, TOC, etc)
4. UX “Designers” include more than just IAs!
http://www.nathancurtis.com/2009/02/06/why-indesign/
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
WIREFRAMESIllustrator
Combining Tools"(
WIREFRAMESInDesign
DELIVERABLESInDesign
COMPSPhotoshop
PROTOTYPESFireworks
!"
WIREFRAMES & COMPSFireworks
COPYInCopy
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Tools by Discipline#*
VisualDesigner
InformationArchitect
“Design”
ContentStrategist
Deliverables
(Wireframes) (Comps) (Copy)
SameTemplates!
SameStyles, Grids, etc..
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The system is...
TECHNIQUES
#)
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
You’ve got to work hard to scale that wall, usually with help.
And not just help from me, but from each other.
#"http://www.flickr.com/photos/fenris/2651905163/sizes/l/
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
10:47:20 AM Nathan Curtis: The other key areas of InDesign to familiarize yourself with for flows are (a) the Stroke palette (line weight, style, start/end shapes like arrows, etc) and (b) the Direct Selection tool (A) to manipulate segments of a path (ie, connector)10:47:41 AM [User]: wish me luck10:47:58 AM [User]: right now i am grateful for your pointers but feeling pretty much like i need a week to learn this tool10:48:03 AM [User]: and it aint gonna happen10:48:20 AM Nathan Curtis: all of this is covered in the 5 minute Flow video, which is half the time of our IM session ;)
##
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
1. Don’t let them snap and come unglued:Encourage users to produce visualizationsartifacts with other software when it makes sense(e.g., use Visio or Omnigraffle for a flow or concept model, then place the PDF in an InDesign deliverable)
2. Be realistic about tool switching costs, but also communicate benefits and rationale
3. Teach through multiple channels (documents, websites, training videos, brownbags, reviews)
4. Provide starting points and samples
#$
Lessons Abound
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Assignment:Annotate three screenshots provided, using 1-2 deliverable pages.
Results:Wildly different layouts, editorial style, details, and assumed audiences. For our unfortunate readers, it’s empathy time.But there’s hope!
#%
Massive Frame? A table!A table!
Art in middle? Specs by element
Visual flow! Little structure
Homework
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Outlining#&
eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected]) 17 of 27
!"#$%&'(#)*+
!"#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.)
#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)
&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)
-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)1+
!"#$%&'();)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)2+
!"#$%&'()<)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$!"##$%&'(
StandardA
Two FeaturesB
Feature CarouselC
eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected]) 17 of 27
!"#$%&'(#)*+
!"#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.)
#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)
&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)
-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)1+
!"#$%&'();)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)2+
!"#$%&'()<)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$!"##$%&'(
StandardA
Two FeaturesB
Feature CarouselC
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
Elements1. Feature headline
2. Feature description
3. Add to cart button
4. Feature image
5. Feature option image
6. Feature carousel navigation
1
2
4
5
6
3
eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected]) 17 of 27
!"#$%&'(#)*+
!"#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.)
#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)
&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)
-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)1+
!"#$%&'();)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)2+
!"#$%&'()<)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$!"##$%&'(
StandardA
Two FeaturesB
Feature CarouselC
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
Elements1. Feature headline
" Length " Brand
2. Feature description " Length
3. Add to cart button # onclick
4. Feature image " Photo types " Photo selection
5. Feature option image ! Thumbnails ! Highlight
# onclick
6. Feature carousel navigation ! More than 3?
# onclick
1
2
4
5
6
3
eCommerce [RH329] :: Design Speci!cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"#$%&'(#)*+
!"#$%&'()*)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)3#./)(.)
#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0),()3#&)7,1&//.0./)
&0)&6+&1&/8.')7,1,-.)0&2,11'0.,/)')7,1#+0#-5)8,4)
-&2+,-#4(.0)(,1,-)'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)1+
!"#$%&'();)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$%&'(#)2+
!"#$%&'()<)+,-./)'#0)1'$,-&2)&'0#-)/'&)+-,)
3#./)(.)#0).405)/.4.)-&+&-.$#/).#40)2'6.2+,/0)
,()3#&)7,1&//.0./)0#-5)8,4)-&2+,-#4(.0)(,1,-)
'-#2)'/)'1.0)&0#-.$#/9:
,%%)-.)/$0-
!"#$!"##$%&'(
StandardA
Two FeaturesB
Feature CarouselC
Display: Required Recommended Optional || Spec Type:
The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
VariationsA. StandardB. Two FeaturesC. Feature Carousel
Elements1. Feature headline
! Limit headlines to one line, do not wrap ! Follow brand guidelines for voice and tone
2. Feature description ! Limit descriptions to four lines; optimally
descriptions span no more than two lines
3. Add to cart button " Add the item to the shopping cart; if the item is
already in the shopping cart, the increment the item quantity by one.
Add the item to the in-page mini-cart if not already included.Refresh minicart calculation including subtotalTransition the minicart item using a yellow fade to connote the cart’s change in statusStay on the current page
4. Feature image ! Use a product photography if possible ! Avoid inspirational photographs of people
unless directly interacting with the product. In such cases, focus/crop photographs to focus on the product.
5. Feature option image # If more than one feature is available within the
1
2
4
5
6
3
billboard, then display a thumbnail associated with each feature to the right of the feature image.
# If the image applies to the current displayed feature, then highlight the image (such as with a larger stroke weight as in Figure 3).
" onclick: Display the selected feature headline, description, and photograph within the billboard
6. Feature carousel navigation # If more than three features are included within
the billboard, display feature carousel navigation above and below the three feature option images.
" onclick: Rotate thumbnail images in the direction selected by 1 (do not rotate “pages” of feature option images).
1. Placed & mark figures
2. Mark elements
3. Identify properties 4. Fill in details
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
7/#887"&709:;<=>?0@@0A72)B*0CD7&)E0&+')#*
Published February 24, 2009Created by Nathan Curtis
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
/"7+')F70,")7G
The ecommerce " ow requires a range of updates based on formative user research and business requirements.In an e# ort to increase product marketing impact and social interactions, the team looks to improve marketing billboards on product and category pages and enable product ratings. Additionally, customer service will improve via inline click-to-chat sessions between customer and representative.In addition, new business requirements will facilitate credit check across multiple audience types, promotion codes to enable discounts, and varied shipping options and discounts.
DeliverablesDesign StrategyAliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies leo dapibus ultricies. Wireframes & Design Speci! cationDocumentation of the interaction design, depicting the structure, behaviors, and functional requirementsVisual Design CompsVisual, high-$ delity mockups that clarify color, typography, and $ nal layout upon which presentation layer assets are createdUsability Test ScriptPrototypeModerate $ delity mockups used to assess design quality via usability testing with participantsUsability Test Report
Assumptions, Constraints & Other ConsiderationsAll visual style, typography, and layout will be instantiated based on exisiting conventionsComponents will be reused, particularly those for page shells and existing page designsProduct taxonomy (including available product attributes and classi$ cations) will remain unchanged for this release
Presentation ModelThe experience will be built largely upon the existing design system foundation of page types & components. However, new components and page types will be de$ ned and design as necessary.
Design Objectives1. Lift order conversions2. Improve customer satisfaction3. Increase store " exibility
Project ScopeThe project scope is limited to requirements formally identi$ ed by Product Marketing in:ProjectRH329.FallUpdates.Requirements.doc
Target AudienceThe audiences for this documentation include:
Product Marketing: To understand and validate the realization of the user experience based on requirements Engineering: Learn and respond to design treatments that must be implemented.Quality Assurance: Identify test cases and clarify requirements in detail.Design Peers: Con$ rm and collaborate on a consensus design solution across roles
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"#$
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
D'-05/5;%+03(4(?./"+%-O
a"O[%-A3
#32G'4
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
*+,-.+/0)(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@#$(+-0/%L5D$/43%$)C
7%&"(S
TN-%A0$/($./"+%-OU
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
@A$/0.'-$C
T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
P$/%-5Q+%$
789F;:
c9<;:
c9:;> c9:;> c9:;>
?9<;:
?9:;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#
@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U
N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU
( N-%&%/*%,(A*3$%0,/( gdTee5eeU
( )/./"(/.X(P"3/*&./"AQ( dTee5eeU
( )2*44*,+(P"3/*&./"AQ( dTee5eeU
5 >+35</L5T$)4'G/4$0U5 H@IIJIIC
5;%+($$054+5?E$(K+34
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
789F;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
7%&"(S(TN-%A0$/($./"+%-OU(S(
TN-%A0$/(,.&"U
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
789F;:
?9<;:
?9:;:
?:<;:X<
?:<;`
^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035
\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5
IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)
;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5
789:;:
789=;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
?2"$C%0/?9:;:
W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%
;%'&/(L5;+.'(L
)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(
I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(
b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5
;$%)+-/.5S-X+%G/4'+-
( 8*-3/(c.&"(j(
( J.3/(c.&"(j(
( KAA-"33(j(( ( (
( ?*/O(j(
( )/./"(j(
( kZN(?%A"(j(
( N2%,"(c0&B"-(j(P Q(( G
9'..'-8
( ?.-A(LO4"(j(
(?-"A*/(?.-A(c0&B"-(j(
( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q
( IX4*-./*%,(b./"(j( (l(
789F;:
#E'<<'-8
*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( )%$*.#()"$0-*/O(e(j( (G( (G(
( b./"(%1(m*-/2(j( (DDlbblRRRR
( b-*;"-h3(J*$",3"(e(j(
(( J*$",3"()/./"(j( T)/./"U
?+-)3G$% 93)'-$))
?:<;:
?:<;`
Home Search Results
Page Variations
Components
N/A
c1. Contact Usc2. Mini-Cart
1. Single Photograph, No Items in Cart2. Multiple Photos, Items in Cart
c1. Contact Usc2. Mini-Cartc3. Billboardc4. Accordionc5. Ratings
1. Empty2. 1 Item3. Many Items, with Promo Code applied
c5. Promotion Code
1. Standard2. Business Credit Check, FREE Shipping
c6. Credit History Checkc7. Shipping Options
Product Category Product Cart Checkout
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
7%&"(S(TN-%A0$/($./"+%-OU(S(
TN-%A0$/(,.&"U
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
789F;:
?9<;:
?9:;:
?:<;:X<
?:<;`
^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035
\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5
IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)
;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5
!"#!"#$%&'
The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
New ComponentsThe product page includes the following new components:
1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings
The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.
1
2
5
3
4
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
%"'&"#/+"'H0I8D'J %"'!"#/+"'H0=K0L'782
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(,%(*/"&35(KAA(.,(*/"&(BO($#*$C*,+(/2"(nKAA(/%(?.-/o(B0//%,(%,(.,O(%1(O%0-(4-%A0$/(A*34#.O35
>"),)0%)/)6#"%5-2?).2/#2).1"66'0;)'0)"0()"+)"5#)-/2(;"#'(.@
(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU(» TN-%A0$/($./"+%-OU
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6
N-%&%/*%,(?%A"( ( 1<<.L
789F;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#
@;%+03(45-/G$C( dTee5eeU( < ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U
@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U
@;%+03(45-/G$C( dTee5eeU(H@IIJIIC( : ( (dTee5eeU(H@IIJIICTN-%A0$/(A"3$-*4/*%,U
N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU
( N-%&%/*%,(A*3$%0,/( gdTee5eeU
( )/./"(/.X(P"3/*&./"AQ( dTee5eeU
( )2*44*,+(P"3/*&./"AQ( dTee5eeU
5 >+35</L5T$)4'G/4$0U5 H@IIJIIC
5;%+($$054+5?E$(K+34
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
789F;:
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
C6)DD)*BH0&#*'M$
#E'<<'-8
*$)4'-/4'+-M
#E'<<'-8
*$)4'-/4'+-M
()",A(/%(&O(B*##*,+(.AA-"33
()",A(/%(.(.,%/2"-(.AA-"33
Q$4E+05Y5;%'($M
DR==5"&$%-'8E45#E'<<'-8ZZZA0"(/%(/2"(.44#*"A(4-%&%/*%,($%A"(%1(T4-%&%/*%,($%A"(,.&"U5
Destination Options, FREE ShippingC
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
/6+*B70;)2'#"J
Version 1 :: June 26, 2009Initial design spec authored based on $ nal wireframes and design strategyInclusive of requirements for product category, product, cart, and checkout pages
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
N#"8+')F70:727+"&6
Introductory descriptive text about the context of the quotes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. ApproachNullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
ParticipantsSed aliquam, nunc eget euismod ullamcorper:
[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)
[Summary Point][Objective descriptionctet am etue magna commodolore molor iriusting ero]
[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point]
[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point][Objective bullet point]
[Summary Point][Objective description ecte delenis niam, si. Ectet lorperil el etum autpat loreros nonsectet am etue magna commodolore molor iriusting eroctet am etue magna commodolore molor iriusting ero]
1
2
3
4
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
&"#!"#$%&'0/+'7B#"J
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
D'-05/5;%+03(4(?./"+%-O
a"O[%-A3
#32G'4
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
*+,-.+/0)(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@#$(+-0/%L5D$/43%$)C
7%&"(S
TN-%A0$/($./"+%-OU
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
@A$/0.'-$C
T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
P$/%-5Q+%$
789F;:
c9<;:
c9:;> c9:;> c9:;>
?9<;:
?9:;:
New ComponentsThe product category page will include the following two new components:
1. c1. Mini-Cart 2. c2. Contact Us
These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.
The product category page includes a video spotlight and a range of featured product collections.
1
2
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$("#%&&#'()#*
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(.#*V0././0-](Y*/./5(^$$."4"-*B03U
(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(
.#*V0././0-](Y*/./5(^$$."4"-*B03U
(TZ/"&(L*/#"U( TZ/"&(b"3$-*4/*%,(
.#*V0././0-](Y*/./5(^$$."4"-*B03U
(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"
5 !"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(D%-"(b"/.*#3(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
@#324'4.$CT?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-]U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
("#/67&4#%'789:;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
?2"$C%0/?9:;:
W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%
;%'&/(L5;+.'(L
)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(
I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(
b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5
;$%)+-/.5S-X+%G/4'+-
( 8*-3/(c.&"(j(
( J.3/(c.&"(j(
( KAA-"33(j(( ( (
( ?*/O(j(
( )/./"(j(
( kZN(?%A"(j(
( N2%,"(c0&B"-(j(P Q(( G
9'..'-8
( ?.-A(LO4"(j(
(?-"A*/(?.-A(c0&B"-(j(
( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q
( IX4*-./*%,(b./"(j( (l(
789F;:
#E'<<'-8
*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( )%$*.#()"$0-*/O(e(j( (G( (G(
( b./"(%1(m*-/2(j( (DDlbblRRRR
( b-*;"-h3(J*$",3"(e(j(
(( J*$",3"()/./"(j( T)/./"U
?+-)3G$% 93)'-$))
?:<;:
?:<;`
1
2
New ComponentsThe product category page will include the following new/updated components:
1. c6. Credit history check2. c7. Shipping options
These two components will be displayed, in that order, between the personal information and billing sections of the checkout page.
The checkout page enables a customer to provide personal and billing information to purchase one or more products.
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
A72)B*0C'"+'7BJ030:727+"&6
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
(+D2030N-#P2
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$!"#()*)&+"'
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
>+3%5?/%4(P<Q( IA*/(?.-/
(
100$054+5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(
"4E$%5'4$G)5'-5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P>Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
Without Promo Code
Empty Cart
1 Item
2+ Items
With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
VariationsEmpty cart:A. Without promo codeB. With promo code
1 item in cart:C. Without promo codeD. With promo code
2+ items in cart:E: Without promo code (in-page update)F: With promo code
Elements1. Minicart header
2. Empty cart message ! If the cart contains no items, then show the
Empty Cart Message; otherwise hide this message.
3-6 Product ! Display a row in the mini-cart from every
product in the cart, including the product name, description, price, and remove button.
3. Product name # onclick: Navigate to the product page
4. Product description ! Limit to no more than two lines (~60 characters).
If a description exceeds 60 characters, truncate at 60 characters and follow with “....”
1
2
3 6
7
13
4
5
8
9
10
11
12
5. Product price ! Format all prices with commas for thousands
and two decimal point accuracy ! If the product has quantity > 1, then show a price
per item in parentheses. ! If a product is discounted, include the original
price as gray, struckthrough, and to the left of the discounted price.
6. Remove product button # onclick: Remove the product from the shopping
cart, and refresh the minicart display
7. Edit cart link # onclick: Navigate to the shopping cart page
8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands
and two decimal point accuracy
9. Proceed to checkout button # onclick: Navigate to the checkout page
10. Added to your cart message ! Display if the user has added an item to the
cart within the current page via the add-to-cart button.
11. Other items in your cart message ! Display if other items were already in the cart
andthe user has added an item to the cart within the current page via the add-to-cart button.
12. Promo code ! If the user has applied a promo code to their
shopping cart, then show the promo code.
13. Remove promo code button ! If the user has applied a promo code to their
shopping cart, then show the remove promo code button.
# onclick: Remove the promo code from the shopping cart and refresh the minicart.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
%"#/+"'
PurposeThe shopping cart serves as the hub of selected items through an online store experience, and the key page from which the user can continue through to checkout in a familiar way.
For this project, the shopping cart serves as the primary location to apply and manage a promotion code. Here, users can:
Add a promo code whether or not the cart contains any itemsRemove an applied promotion codeLearn about promotion codesNavigate to as a hub for promo code application (such as from a promo banner elsewhere on the site or via paid search and print advertising)
Promo & Cart RationaleThe shopping cart serves as a persistent and visible destination within the shopping experience, where users can manage their overall order, discern price impacts, and consider their order from a high level.
Unchanged Components1. Header 2. Breadcrumbs 3. Page Title 4. Page Message 5. Cart Table Header 6. Cart Item(s) 7. Cart Subtotal & Update
Updated Component8. Cart Summary
New Component9. Cart Promo Codes
Unchanged Components (cont’d)10. About the Shopping Cart 11. Recommendations 12. Recently Viewed Items 13. Footer
The shopping cart summarizes all items that the user intends to purchase, displays aggregate pricing, and leads to checkout.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#
@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U
N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU
( N-%&%/*%,(A*3$%0,/( gdTee5eeU
( )/./"(/.X(P"3/*&./"AQ( dTee5eeU
( )2*44*,+(P"3/*&./"AQ( dTee5eeU
5 >+35</L5T$)4'G/4$0U5 H@IIJIIC
5;%+($$054+5?E$(K+34
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
789F;:
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
1
2
3
4
5
6
7
9
13
11
12
10
8
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$)"#+,)--)*.
#E'<<'-8
*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
#E'<<'-8
*$)4'-/4'+-
Destination Fixed, Method OptionsA
Alternative shipping options are personalized by previous product selection, experience context, and business rules based on cart composition.
Destination Options1. Constrained (see Figure A)
The cart product combination requires that the products are sent to the personal information that serves as the billing address
2. Custom (see Figure B)3. Options (see Figures C & D)
User can select to reuse billing address or enter an alternative address
Method Options
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
O+.-70#G0/#*'7*'2
Change History. . . . . . . . . . . . . . . . . . . . . 3Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4
Design Strategy & ResearchCreative Brief . . . . . . . . . . . . . . . . . . . . . . 6Design Objectives . . . . . . . . . . . . . . . . . . . 7Formative Research. . . . . . . . . . . . . . . . . . . 8Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9
Maps & FlowsFlow . . . . . . . . . . . . . . . . . . . . . . . . . 11
Pages1. Product Category . . . . . . . . . . . . . . . . . 13
c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15
2. Product. . . . . . . . . . . . . . . . . . . . . . . 16c3. Billboard . . . . . . . . . . . . . . . . . . . . 17c4. Accordion. . . . . . . . . . . . . . . . . . . . 18c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19
3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 203.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 213.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21c6. Promo Code . . . . . . . . . . . . . . . . . . 22
4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23c7. Credit History Check . . . . . . . . . . . . . . 24c8. Shipping . . . . . . . . . . . . . . . . . . . . 25Error Messaging . . . . . . . . . . . . . . . . . . 27
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
A72)B*0Q.R7&')F72
The following objectives are formed as a result of design collaboration, site analytics of the e-commerce process, and user-centered feedback derived from interviews.
Lift Order ConversionsDecrease exit rate by answering key questionsImprove user interface of complex customer decisionsEnhance product displays via billboard photos & carousels
Improve Customer SatisfactionEnable customers to engage more deeply through:
Real-time customer supportCustomer ratings
Increase Store FlexibilityBroaden store capabilities to:
O# er varied discounts through promo codesHandle consumer and business customers di# erently
1
2
3
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
!+B72
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
@A$/0.'-$5NC
T)0B2".A(<(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
@A$/0.'-$5OC
T)0B2".A(>(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3(/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
$%"#,)--.#+"$
StandardA
Two FeaturesB
Feature CarouselC
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
VariationsA. StandardB. Two FeaturesC. Feature Carousel
Elements1. Feature headline
" Limit headlines to one line, do not wrap " Follow brand guidelines for voice and tone
2. Feature description " Limit descriptions to four lines; optimally
descriptions span no more than two lines
3. Add to cart button # Add the item to the shopping cart; if the item is
already in the shopping cart, the increment the item quantity by one.
Add the item to the in-page mini-cart if not already included.Refresh minicart calculation including subtotalTransition the minicart item using a yellow fade to connote the cart’s change in statusStay on the current page
4. Feature image " Use a product photography if possible " Avoid inspirational photographs of people
unless directly interacting with the product. In such cases, focus/crop photographs to focus on the product.
5. Feature option image ! If more than one feature is available within the
1
2
4
5
6
3
billboard, then display a thumbnail associated with each feature to the right of the feature image.
! If the image applies to the current displayed feature, then highlight the image (such as with a larger stroke weight as in Figure 3).
# onclick: Display the selected feature headline, description, and photograph within the billboard
6. Feature carousel navigation ! If more than three features are included within
the billboard, display feature carousel navigation above and below the three feature option images.
# onclick: Rotate thumbnail images in the direction selected by 1 (do not rotate “pages” of feature option images).
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$*"#/'#0#12#(3
;%+G+4'+-5?+0$(p%/(.(4-%&%/*%,($%A"](K44#O(O%0-(4-%&%/*%,($%A"(2"-"(/%(3.;"(%,(O%0-(40-$2.3"(/%A.O6
N-%&%/*%,(?%A"( ( 1<<.L
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
;%+G+4'+-5?+0$(L2"(4-%&%/*%,($%A"(O%0h;"(.44#*"A(A%"3(,%/(&./$2(.($0--",/(4-%&%/*%,5(N#".3"(-"",/"-(/2"($%A"(.,A(/-O(.+.*,5
N-%&%/*%,(?%A"( T$%A"(*,("--%-U ( 1<<.L
The promo code application enables users to enter a textual promo code to receive discounts and premium o# ers.
VariationsA. Default (no code applied)B. Applied codeC. Error
Elements1. Header
2. Introduction
3. Text box ! Limit entry to no more than 10 characters
4. Apply button # onclick
If the text box is empty, then display an error messageValidate the promo code applied, based on table X.If the promo code is valid, refresh the Promo Code to re" ect the applied code (see $ gure B), and refresh the shopping cart inline to re" ect any applicable savings.
5. Description & discount percentage
6. Remove code button # onclick
Remove the applied promo codeRefresh the Promo Code component to the no code applied state (refer to $ gure A).Refresh the shopping cart to remove any promo-code based discounts applied.
7. Error message
Default (no code applied)A
Applied codeB
ErrorC
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
789:;:
?2"$C%0/?9:;:
;$%)+-/.5S-X+%G/4'+-
( 8*-3/(c.&"(j( (8*-3/(,.&"(*3(-"V0*-"A
( J.3/(c.&"(j( ?0-/*3
( KAA-"33(j( :<>(I#&()/-""/
+,$-$!./!0!1-234$5!6.),!%27-!088-$//!/735.//.2'9!:4$0/$!(!44!.'!044!-$;7.-$8!
088-$//!(!$48/9!
I""#"0(722+B)*B
Checkout page with error messageA
ConventionsThe error messaging presentation rules for the Checkout page do not change with this release.
New MessagesThe following additional validations are to be added based on new data collection:
ID Event Condition Message
1 onblur Social Security Number (any $ eld) contains a non numeric character
Social security number contains a nonnumeric character
2 onblur Date of birth is nonempty and not formatted as MM/DD/YYYY
Date of birth is not formatted correctly
3 onblur Date of birth is less than 18 years from today’s date
Date of birth re" ects that you are not old enough to purchase a product from this website
4 onblur Tax ID (either $ eld) is nonempty and contains a nonnumeric character
Tax ID contains a nonnumeric character
5 onblur ZIP Code is nonempty and is not a $ ve digit numeric string
ZIP code is not formatted correctly
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
:7F)7P7"2
Reviewer Email Address Role Group
Core TeamJohn Smith [email protected] Information Architect UXD
Jane Brown [email protected] Visual Deisgner UXD
Adam Morris [email protected] Design Technologist WXD
Samantha March [email protected] Product Manager Mktg
Dan Ayers [email protected] Engineer IT
Extended TeamJohn Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
7/207/137/66/296/226/156/8
JulyJuneToday
!"#R7&'0!-+*
Interaction Design
Design Strategy
Visual Design
Usability TestingScripting
Wireframes Specs Revisions
Prototyping
Testing Report
Draft 1 Final Draft 1 Draft 2
Final Report
Draft 1
Draft 1
Draft 1
Final
Final Final
Final
Final
Review
NOTE: This project plan illustrates design team activities only; for the project’s complete plan, refer to the plan produced by the project management team.
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$&"#/#*'+&'012030/-)&45'#5/6+'
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee
Standard (with Click-to-chat)A
Pop-inC
Non-interactive (no Click-to-Chat)B
StaticD
VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static
Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.
Elements1. Header
! Enable publisher to update label on a per-page (per-product) basis
2. Description ! Enable publisher to update description on a per-
page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”
3. Chat Now Button # onclick: Open the existing click-to-chat window
already available within the support section ! If (normal business hours) and (Click-to-chat is
enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.
4. Email Link # onclick: Navigate to the Email Us page.
5. Call Link # onclick: Navigate to the Call Us page.
1
2
3
4
5 6
7
8
9
6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.
7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.
8. Close Button # onclick: Close the popin window, and return
focus to the parent page.
9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.
" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$+"#:+')*B2
Y./"(/2*3(TZ/"&(/O4"U6( (P>5=(%0/(%1(`(3/.-3Q
Y./"(/2*3(TZ/"&(/O4"U6( (7%--",A%03'
Y./"(/2*3(TZ/"&(/O4"U6( (N%%-
Y./"(/2*3(TZ/"&(/O4"U6( (8.*-
Y./"(/2*3(TZ/"&(/O4"U6( (p%%A
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
Y./"(/2*3(TZ/"&(/O4"U6( (IX$"##",/'
Y./"(/2*3(TZ/"&(/O4"U6( ().;"A
Not Yet Rated
Hovered & Levels
Click & Save
Applied Ratings
The product rating component enables users to view and apply a rating to the displayed product.
VariationsAa. StandardB. Two FeaturesC. Feature Carousel
Elements1. Rating Label
" Include a speci$ c label of what is being rated, generally by “type”. For example, include “product”, “article”, or “post.”
" Do not label the speci$ c item, since the rating is adjacent to the item title anyway.
2. Rating Stars # onhover: Highlight all stars to the left of and
including the current star, connoting that a rating would be applied equivalent to the currently hovered star. Also update the Rating Messaging to re" ect the level of the current star.
# onclick: Save the applied rating, and once saved, exchange the level (such as “Excellent”) with “Saved.” Do not transition to an applied rating after this (until the user would reload the page), but instead sustain the user’s applied rating.
3. Rating Messaging ! If the item has not yet been rated, show “(not yet
rated)”.If the item is being rated (a star is being hovered), then display the associated rating level.If the item has been rated, display the average out of total possible stars (refer to “Applied Ratings” $ gure).
" Use a common and meaningful spectrum of rating levels, such as Horrendous, Poor, Fair, Good, and Excellent.
" Use levels consistent with the tone of the brand.
A
1 2 3
B
C
D
E
F
G
H
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$,"#/"7$)'0;)2'#"J0/67&4
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( )%$*.#()"$0-*/O(e(j( (G( (G(
( b./"(%1(m*-/2(j( (DDlbblRRRR
( b-*;"-h3(J*$",3"(e(j(
(( J*$",3"()/./"(j( T)/./"U
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( L.X(Zb(e(j( (G(
( ?%&4.,O(c.&"(j(
?%$0'45A')4+%L5?E$(K
)*,$"(O%0(.-"(40-$2.3*,+(/2"3"(4-%A0$/3(1%-(B03*,"33(03"W(O%0-(B03*,"33([*##(B"(#*.B#"(1%-(/2*3(40-$2.3"(.,A(,%($-"A*/(2*3/%-O($2"$C(*3(-"V0*-"A5
1%$5L+35<3%(E/)'-85X+%5<$%)+-/.53)$5'-)4$/0\I,/"-(4"-3%,.#(*,1%-&./*%,(*,3/".A(_
?+-)3G$%
93)'-$))
93)'-$))
?+-)3G$%
?:<;:
?:<;:
?:<;`
?:<;`
Consumer optionA
Business optionB
Business (! xed)C
1
2
11
3
4
5
6
7
8
9
10
The credit history check enables the business to validate that a customer is credit worthy to make ongoing payments for a subscription.
VariationsA. Consumer optionB. Business optionC. Business $ xed
Elements1. Header
2. Tabs # onclick: Toggle to the alternative selection
(between Consumer in $ gure A and Business in $ gure B)
3. Social security number
4. Date of birth
5. Drivers license number
6. License state
7. Tax ID
8. Company name
9. Single option message
10. Alternative link # onclick: Switch display to enable both business
and consumer credit history data entry (as displayed in $ gure A).
11. Why? link # onclick: Display W02v3 Information Balloon
within basic description of why credit history information is collected
Cover Page
Chapter (Strategy)
2. Table of Contents
6. Creative Brief
3. Change History
7. Design Objectives
4. Reviewers
8. Research Results 9. Project Plan
10. Chapter (Maps/Flows) 11. Wire"ow
12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page 17. Annotated Component 18. Component
19. Annotated Component 20. Chunked Page 21. Page Variations 22. Annotated Component 23. Chunked Page 24. Annotated Component
The system is...
ARTIFACTS
#'
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
#(
Discovery Design Document
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
$*
Where are the wireframes?You can’t skip too many steps in cultural evolution. Don’t try to overlay wireframe systems in a culture where the archetype story is “we don’t use wireframes yet since that one time we did, an engineer built an app using that design because he didn’t know any better.”
1 2 3 4 5
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The system is...
STANDARDS
$)
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
“Creates formulaic design and removes creative potentialby reusing existing elements.”
$!
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
“Creates formulaic starting points and focuses creative attentionby 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
$$
7/#887"&709:;<=>?0@@0A72)B*0CD7&)E0&+')#*
Version 1Published February 24, 2009Created by Nathan Curtis
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
/"7+')F70,")7G
The ecommerce " ow requires a range of updates based on formative user research and business requirements.In an e# ort to increase product marketing impact and social interactions, the team looks to improve marketing billboards on product and category pages and enable product ratings. Additionally, customer service will improve via inline click-to-chat sessions between customer and representative.In addition, new business requirements will facilitate credit check across multiple audience types, promotion codes to enable discounts, and varied shipping options and discounts.
DeliverablesDesign StrategyAliquam sagittis magna in felis egestas rutrum. Proin wisi libero, vestibulum eget, pulvinar nec, suscipit ut, mi. Integer in arcu ultricies leo dapibus ultricies. Wireframes & Design Speci! cationDocumentation of the interaction design, depicting the structure, behaviors, and functional requirementsVisual Design CompsVisual, high-$ delity mockups that clarify color, typography, and $ nal layout upon which presentation layer assets are createdUsability Test ScriptPrototypeModerate $ delity mockups used to assess design quality via usability testing with participantsUsability Test Report
Assumptions, Constraints & Other ConsiderationsAll visual style, typography, and layout will be instantiated based on exisiting conventionsComponents will be reused, particularly those for page shells and existing page designsProduct taxonomy (including available product attributes and classi$ cations) will remain unchanged for this release
Presentation ModelThe experience will be built largely upon the existing design system foundation of page types & components. However, new components and page types will be de$ ned and design as necessary.
Design Objectives1. Lift order conversions2. Improve customer satisfaction3. Increase store " exibility
Project ScopeThe project scope is limited to requirements formally identi$ ed by Product Marketing in:ProjectRH329.FallUpdates.Requirements.doc
Target AudienceThe audiences for this documentation include:
Product Marketing: To understand and validate the realization of the user experience based on requirements Engineering: Learn and respond to design treatments that must be implemented.Quality Assurance: Identify test cases and clarify requirements in detail.Design Peers: Con$ rm and collaborate on a consensus design solution across roles
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"#$
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
D'-05/5;%+03(4(?./"+%-O
a"O[%-A3
#32G'4
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
*+,-.+/0)(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@#$(+-0/%L5D$/43%$)C
7%&"(S
TN-%A0$/($./"+%-OU
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
@A$/0.'-$C
T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
P$/%-5Q+%$
789F;:
c9<;:
c9:;> c9:;> c9:;>
?9<;:
?9:;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
7%&"(S()2%44*,+(S
)2%44*,+(?.-/
R$($-4.L5:'$,$05S4$G)((» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U(» TN-%A0$/(c.&"U
R$(+GG$-0/4'+-)(
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
@;%+03(45F/G$CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-U_(b"/.*#3
?9<;:
?9:;:
c9:;<
c9:;>
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
R%0-(32%44*,+($.-/($%,/.*,3(:(*/"&6
12+3454E$5#E+<<'-85?/%4(7) 82(3.)'0)9"5#):1"66'0;)</#2)/$&/9.)#(=)(-2)21()3".2)#(-(02)
4-*$"(A*34#.O"A(%,(/2"*-(4-%A0$/(4.+"357) Z/"&3(-"&.*,(*,(O%0-()2%44*,+(?.-/(1%-(%,#O(/2*3(3*/"(;*3*/(P!2O]Q5
N-%A0$/( N-*$"(4"-(*/"&( f0.,/*/O( L%/.#
@;%+03(45-/G$C( dTee5eeU( ( dTee5eeUTN-%A0$/(A"3$-*4/*%,U
N-%A0$/(30B/%/.#( ( 6<0/4$ ( dTee5eeU
( N-%&%/*%,(A*3$%0,/( gdTee5eeU
( )/./"(/.X(P"3/*&./"AQ( dTee5eeU
( )2*44*,+(P"3/*&./"AQ( dTee5eeU
5 >+35</L5T$)4'G/4$0U5 H@IIJIIC
5;%+($$054+5?E$(K+34
;%+G+4'+-5?+0$(R%0h;"(.44#*"A(.(4-%&%/*%,($%A"(/%(O%0-(40-$2.3"6
TN-%&%/*%,($%A"(A"3$-*4/*%,U( IIV5*')(+3-4((
789F;:
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
7%&"(S(TN-%A0$/($./"+%-OU(S(
TN-%A0$/(,.&"U
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
789F;:
?9<;:
?9:;:
?:<;:X<
?:<;`
^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035
\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5
IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)
;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5
789:;:
789=;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
?2"$C%0/?9:;:
W5R$43%-54+5#E+<<'-85?/%4 #32G'45>+3%5"%0$%
;%'&/(L5;+.'(L
)*33"V0./5(\4/./"(A%#%-/*%,(2",A-"&(*,$*(B#.&"/0("-%3/*3(A%#%-(./5(Z-*0-"&(;"-%3/-0A(/./(;"#*/(.0/4./(#0&3.,(0##.&"/(./*3("33"A(&*,*3("33*3*/(.#*/(;"#*V0*3*/W(;"#"3",A-"(&.+,*&(*#*3&%A(*.&$%&&(%#%-"-./5(
I$/"&(;%#%-"-(."33*/(;0##.(1.$*#*V(0*3$*4("0(1.$*,+("0(1.$*A0*4*/(*#(",*3*3(,0##.&(ii-*/(#0/(;0#40/(#.%-"($%,3"A(/./(4-."3/*3(.&("/(#%-(*0-"-%($%-(3*&(.A*+,.($%,0&3.(,A*+,*&("33"$/"(&.+,*3$*,$*(B#.(1.$*#("0*4("0+.*/(#%-(.&(;"#"3/%(A"#("0*3(.#*3(A%#%-"-$*(/./5(Y%3(.A*4*/("/W(303/%(A*.&W(;",/(.&(.$*##.%-"&(ii-*#(0/"/0"(1"0&(,%,(2",/(0##04/./5(
b0*3(.#*/W(;"-*#(0##.%-"&(;"-%3(,*B2("/W(3",/(.#*/(;",*B2("-*03$*#*/(./W(;"#(A%#%-(3"V0./(;0##.(.#*V0.&(;",*3("33*("X"-%3/*"(A"#*V0.&$%,("X"-$*A(0*3$*4("#",*&(.0/4./5
;$%)+-/.5S-X+%G/4'+-
( 8*-3/(c.&"(j(
( J.3/(c.&"(j(
( KAA-"33(j(( ( (
( ?*/O(j(
( )/./"(j(
( kZN(?%A"(j(
( N2%,"(c0&B"-(j(P Q(( G
9'..'-8
( ?.-A(LO4"(j(
(?-"A*/(?.-A(c0&B"-(j(
( )"$0-*/O(Zb(j( (P!2./(*3(/2*3]Q
( IX4*-./*%,(b./"(j( (l(
789F;:
#E'<<'-8
*$)4'-/4'+-R%0-(4-%A0$/3([*##(B"(3",/(/%(O%0-($-"A*/($.-A(B*##*,+(.AA-"33(1%-(3"$0-*/O(40-4%3"35
Q$4E+05Y5;%'($)"#"$/(.(32*44*,+(&"/2%A(.,A($%3/(1%-(O%0-(%-A"-(P#".-,(&%-"Q6
(<GA.O(P<(B03*,"33(A.O3Q((Pdee5eeQ
()/.,A.-A(^;"-,*+2/(P:(B03*,"33(A.OQ(Pdee5eeQ
?%$0'45A')4+%L5?E$(K((P!2O(A%(["(.3C(1%-(/2*3(*,1%-&./*%,]Q
( )%$*.#()"$0-*/O(e(j( (G( (G(
( b./"(%1(m*-/2(j( (DDlbblRRRR
( b-*;"-h3(J*$",3"(e(j(
(( J*$",3"()/./"(j( T)/./"U
?+-)3G$% 93)'-$))
?:<;:
?:<;`
Home Search Results
Page Variations
Components
N/A
c1. Contact Usc2. Mini-Cart
1. Single Photograph, No Items in Cart2. Multiple Photos, Items in Cart
c1. Contact Usc2. Mini-Cartc3. Billboardc4. Accordionc5. Ratings
1. Empty2. 1 Item3. Many Items, with Promo Code applied
c5. Promotion Code
1. Standard2. Business Credit Check, FREE Shipping
c6. Credit History Checkc7. Shipping Options
Product Category Product Cart Checkout
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
7%&"(S(TN-%A0$/($./"+%-OU(S(
TN-%A0$/(,.&"U
@A$/0.'-$5BC
T)0B2".A(:(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
10054+5?/%4
"&$%&'$, D$/43%$) 7$(E5#<$() *+,-.+/0)
Y./"(/2*3(TZ/"&(/O4"U6( (P,%/(O"/(-./"AQ
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"#$%!&$'$(!)*
T?%,/",/(K-*%(B#.(".(A%#0&("%3(.-$2*$/03(A*3$*/*%-0&(.#*V0././0-](Y*/./5(^$$."4"-*B03(.0/",*",*3(";",/W(30&(.&(10+.5(Z/.(,%,"$/"&(V0"U_(J".-,(D%-"(
!"#$%!&$'$(!)*
!"#$%!&$'$(!)*
789F;:
?9<;:
?9:;:
?:<;:X<
?:<;`
^/./"(30&(-./0-(3"V0*A(0##"3(&*#(&*,/(.0A*/("#*/(-./*(B#.B%--%;*/("3/"&(*&03.&(.3(A%##"3(".(;%#04/.("-*%--%(&.+,*3("X("*$*##.($*/.&W(V0.&W($%-(.0/(*43.4*"/(.B%5(KX*&(;"#*V0*3("3/W(%A(V0%(B"./(.4*$/%(/%/./0-(",A*43035
\4/.33*/."(4#.B%-0&(-./.(;%#%-"W(;",A*+,(*&*,$/./"&(3%#0/(4"##.B%-(-"&%A*3(0/("/(%4/.3303A."("/(&.+,*3(&*#*+",A*/W(";"#*V0*(A%#04/.(/03A.,/(0-*B03(-"3/*0&(.3(4"#*+",A"&(-"&("X4#*/./*.(V0*3(*,(,%B*3(*430,/"3(,"3/-04/.3(*,$*#(*3(V0."(;%#%-"(,./(.B%-"3"(V0.3*/(%A*43.(;",*3*/.3(3"V0"(%$$03("0&(1.$$03W(V0*A0,/(#.,A*/(*A*%-"-%(&%A*/./(.3("X("X4#*V0*.,/5
IX4"-0&(V0*A0$**3(./*%-"3/W(30&(.#*B03("/(4"-%(*4*",/(0#4.($%,"3/*3(.$"-*%5(8*$*/(2.-0&V0*B03(&%#%-"*$**3(-"(-"-0&(".V0./03(V0.&(;",A*/W(%4/./0&($%-"*035"+,)-'/()0"0)(/#-1'2/3)45")-"#('53)45()%"$"#(#.6'2)/52)$/)/%)(.2()%"$(02)
;%#04/./",*3(.3(&%#%-"*($/./"/("X$"4/0-*(3%#04/./03W(/"(,*&*,(-"(.A(V0*(V0*(B#.0/5
!"#!"#$%&'
The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action.
Display: Required
New ComponentsThe product page includes the following new components:
1. c1. Minicart 2. c2. Contact Us3. c3. Billboard4. c4. Accordion5. c5. Ratings
The c1. Minicart and c2. Contact Us components will be displayed, in that order, at the top of the page’s sidebar, above any existing components.
1
2
5
3
4
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
/6+*B70;)2'#"J
Version 1 :: June 26, 2009Initial design spec authored based on $ nal wireframes and design strategyInclusive of requirements for product category, product, cart, and checkout pages
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
N#"8+')F70:727+"&6
Introductory descriptive text about the context of the quotes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. ApproachNullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer.
ParticipantsSed aliquam, nunc eget euismod ullamcorper:
[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)[Participant Type] (##)
[Summary Point][Objective descriptionctet am etue magna commodolore molor iriusting ero]
[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point]
[Summary Point][Objective bullet point][Objective bullet point][Objective bullet point][Objective bullet point]
[Summary Point][Objective description ecte delenis niam, si. Ectet lorperil el etum autpat loreros nonsectet am etue magna commodolore molor iriusting eroctet am etue magna commodolore molor iriusting ero]
1
2
3
4
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
&"#!"#$%&'0/+'7B#"J
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
@D$/43%$05;%+03(4)C5 5 5 5 5(
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
T8"./0-"(/*/#"(/2./("X/",A3(/[%(#*,"3U
D'-05/5;%+03(4(?./"+%-O
a"O[%-A3
#32G'4
?%,/.$/3(@(8""AB.$C(@(7"#4(@()*/"(D.4((E(<99FG<99H(I*+2/)2.4"3(JJ?(K##(-*+2/3(-"3"-;"A5((L"-&3(M(?%,A*/*%,3(@(N-*;.$O()/./"&",/(@(?%%C*"(N%#*$O(@(L-.A"&.-C3(%1(I*+2/)2.4"3(JJ?
*+,-.+/0)(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
(Tb%$0&",/(,.&"U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@;%+03(457L<$)C(
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@*$)4'-/4'+-CTKB3/-.$/(A"3$-*4/*%,(Y"4-"&(*A(&%#"3"A("/0-UT?.##(/%(.$/*%,U
@#$(+-0/%L5D$/43%$)C
7%&"(S
TN-%A0$/($./"+%-OU
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
!"
#$%&'($) *+,-.+/0) 12+3456)7%/'-'-8 9.+8 :'0$+) ;/<$%) =&$-4)
!"#$%&"'()*+,(*,(%-($-"./"(.,(.$$%0,/(1%-("*+2/32.4"35$%&
)".-$26
789:;:
789<;:
789=;:
789>;:
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
@A$/0.'-$C
T)0B2".A(4%-*3(.0/(#.B%-"&("./0-(3."(4-%(V0*3(A*(0/(*,/W(3*,*(-"4"-*B03(*0,/(&.X*&4%3/(%A(V0"(;%#"33*/*3("/("X4"#"3$*.(;%#%-*(/"&%##./*%3(.(;%#04/0-W($%,(-"&4%-0,A*/(A%#%-(.-0&(.3(.#*/("/0-*B035U
P$/%-5Q+%$
789F;:
c9<;:
c9:;> c9:;> c9:;>
?9<;:
?9:;:
New ComponentsThe product category page will include the following two new components:
1. c1. Mini-Cart 2. c2. Contact Us
These two components will be displayed, in that order, at the top of the page’s sidebar, above existing components to Find a Product and Downloads.
The product category page includes a video spotlight and a range of featured product collections.
1
2
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
A72)B*0C'"+'7BJ030:727+"&6
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
(+D2030N-#P2
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$!"#()*)&+"'
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5
>+3%5?/%4(P9Q(R%0($0--",/#O(2.;"(,%(*/"&3(*,(O%0-(32%44*,+($.-/5(N-%&%($%A"6(@?+0$5-/G$C5
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P:Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
>+3%5?/%4(P<Q( IA*/(?.-/
(
100$054+5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII(
"4E$%5'4$G)5'-5L+3%5(/%4M
@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%UHIIJII()0B/%/.#6(HIIJII
;%+($$054+5?E$(K+34
>+3%5?/%4(P>Q( IA*/(?.-/
(@;%+03(45-/G$C5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5(@;%+03(45-/G$C(P<Q5TN-%A0$/(A"3$-*4/*%,(c"$/*(B#.$"3(A%#%-(&%##./"&(A%#%-(&.*%,3",*3(&.X*&%Udee5ee(HIIJII5Pdee5ee(4"-(*/"&Q(N-%&%($%A"6(@?+0$5-/G$C5()0B/%/.#6(dee5ee(HIIJII5
;%+($$054+5?E$(K+34
Without Promo Code
Empty Cart
1 Item
2+ Items
With Promo Code The Minicart is a Sidebar component that enables a user to view their carts contents, prune undesired options, and proceed to checkout without having to navigate to the shopping cart.
VariationsEmpty cart:A. Without promo codeB. With promo code
1 item in cart:C. Without promo codeD. With promo code
2+ items in cart:E: Without promo code (in-page update)F: With promo code
Elements1. Minicart header
2. Empty cart message ! If the cart contains no items, then show the
Empty Cart Message; otherwise hide this message.
3-6 Product ! Display a row in the mini-cart from every
product in the cart, including the product name, description, price, and remove button.
3. Product name # onclick: Navigate to the product page
4. Product description ! Limit to no more than two lines (~60 characters).
If a description exceeds 60 characters, truncate at 60 characters and follow with “....”
1
2
3 6
7
13
4
5
8
9
10
11
12
5. Product price ! Format all prices with commas for thousands
and two decimal point accuracy ! If the product has quantity > 1, then show a price
per item in parentheses. ! If a product is discounted, include the original
price as gray, struckthrough, and to the left of the discounted price.
6. Remove product button # onclick: Remove the product from the shopping
cart, and refresh the minicart display
7. Edit cart link # onclick: Navigate to the shopping cart page
8. Subtotal ! Display the sum all product costs ! Format all prices with commas for thousands
and two decimal point accuracy
9. Proceed to checkout button # onclick: Navigate to the checkout page
10. Added to your cart message ! Display if the user has added an item to the
cart within the current page via the add-to-cart button.
11. Other items in your cart message ! Display if other items were already in the cart
andthe user has added an item to the cart within the current page via the add-to-cart button.
12. Promo code ! If the user has applied a promo code to their
shopping cart, then show the promo code.
13. Remove promo code button ! If the user has applied a promo code to their
shopping cart, then show the remove promo code button.
# onclick: Remove the promo code from the shopping cart and refresh the minicart.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
O+.-70#G0/#*'7*'2
Change History. . . . . . . . . . . . . . . . . . . . . 3Reviewers. . . . . . . . . . . . . . . . . . . . . . . . 4
Design Strategy & ResearchCreative Brief . . . . . . . . . . . . . . . . . . . . . . 6Design Objectives . . . . . . . . . . . . . . . . . . . 7Formative Research. . . . . . . . . . . . . . . . . . . 8Project Plan. . . . . . . . . . . . . . . . . . . . . . . 9
Maps & FlowsFlow . . . . . . . . . . . . . . . . . . . . . . . . . 11
Pages1. Product Category . . . . . . . . . . . . . . . . . 13
c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14c2. Minicart. . . . . . . . . . . . . . . . . . . . . 15
2. Product. . . . . . . . . . . . . . . . . . . . . . . 16c3. Billboard . . . . . . . . . . . . . . . . . . . . 17c4. Accordion. . . . . . . . . . . . . . . . . . . . 18c5. Ratings . . . . . . . . . . . . . . . . . . . . . 19
3. Cart. . . . . . . . . . . . . . . . . . . . . . . . . 203.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 213.v2. Cart, 2+ Items. . . . . . . . . . . . . . . . . 21c6. Promo Code . . . . . . . . . . . . . . . . . . 22
4. Checkout. . . . . . . . . . . . . . . . . . . . . . 23c7. Credit History Check . . . . . . . . . . . . . . 24c8. Shipping . . . . . . . . . . . . . . . . . . . . 25Error Messaging . . . . . . . . . . . . . . . . . . 27
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
A72)B*0Q.R7&')F72
The following objectives are formed as a result of design collaboration, site analytics of the e-commerce process, and user-centered feedback derived from interviews.
Lift Order ConversionsDecrease exit rate by answering key questionsImprove user interface of complex customer decisionsEnhance product displays via billboard photos & carousels
Improve Customer SatisfactionEnable customers to engage more deeply through:
Real-time customer supportCustomer ratings
Increase Store FlexibilityBroaden store capabilities to:
O# er varied discounts through promo codesHandle consumer and business customers di# erently
1
2
3
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
!+B70O)'-7
!+B72
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
:7F)7P7"2
Reviewer Email Address Role Group
Core TeamJohn Smith [email protected] Information Architect UXD
Jane Brown [email protected] Visual Deisgner UXD
Adam Morris [email protected] Design Technologist WXD
Samantha March [email protected] Product Manager Mktg
Dan Ayers [email protected] Engineer IT
Extended TeamJohn Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
John Smith [email protected] information Architect WXD
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
7/66/296/226/156/8
JulyJuneToday
!"#R7&'0!-+*
Interaction Design
Design Strategy
Visual Design
Usability TestingScripting
Wireframes Specs
Prototyping
Draft 1 Final Draft 1 Draft 2
Final Report
Draft 1
Draft 1
Review
NOTE: This project plan illustrates design team activities only; for the project’s complete plan, refer to the plan produced by the project management team.
eCommerce [RH329] :: Design Speci! cationVersion 1 published June 26, 2009 by Nathan Curtis ([email protected])
$&"#/#*'+&'012030/-)&45'#5/6+'
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
?E/45F+,
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(8%-(3.#"3W(/-.*,*,+W(.,A(%/2"-(+","-.#(*,V0*-*"3W($%,/.$/(03(;*.(/2"(1%##%[*,+(%4/*%,36
(» I&.*#(» ?.##(» 7.;"(\3(?.##(R%0(» !"#$%&'%()*+,)-(.
?+-4/(45='8E4#E/<$)(TJ%$./*%,(c.&"UTKAA-"33(:UT?*/OUW(T)/./"U(eeeeeN2%,"6(PeeeQ(eeeGeeee
Standard (with Click-to-chat)A
Pop-inC
Non-interactive (no Click-to-Chat)B
StaticD
VariationsA. Standard (with Click-to-ChatB. Non-interative (no Click-to-Chat)C. Pop-inD. Static
Clikc-to-ChatThe Click-to-Chat program enables customers to contact and have direct, online communication with a support representative. The experience — beyond the new trigger to open the window via the Contact Us component — is already in place for the Support site area. Please refer to that project’s documentation for background and requirements of the program.
Elements1. Header
! Enable publisher to update label on a per-page (per-product) basis
2. Description ! Enable publisher to update description on a per-
page (per-product) basis " Limit to no more than three lines of text " Minimize description variation across pages " End description with “...options:”
3. Chat Now Button # onclick: Open the existing click-to-chat window
already available within the support section ! If (normal business hours) and (Click-to-chat is
enabled for the product or product category), then display the Chat Now button. Otherwise, hide this button.
4. Email Link # onclick: Navigate to the Email Us page.
5. Call Link # onclick: Navigate to the Call Us page.
1
2
3
4
5 6
7
8
9
6. Have Us Call You Link # onclick: Navigate to the Have Us Call You page.
7. Worldwide O" ces Link # onclick: Navigate to the Worldwide O! ces page.
8. Close Button # onclick: Close the popin window, and return
focus to the parent page.
9. AddressThe static address includes an location name, street address lines 1 & 2, City, State, ZIP Code, and phone number.
" Use the static address when contacting EightShapes directly is not preferred, or when the primary task is to cut and paste the address or send the company mail.
Display: Required Recommended Optional || Spec Type: ! Behavior ! State " Editorial ! Data
1. Cover Page
5. Chapter (Strategy)
2. Table of Contents
6. Creative Brief
3. Change History
7. Design Objectives
4. Reviewers
8. Research Results 9. Project Plan
10. Chapter (Maps/Flows) 11. Wire"ow
12. Chapter (Pages) 13. Chunked Page 14. Annotated Component 15. Annotated Component 16. Chunked Page
Cover
Chunking
Chapters
TOC
Change History
Clear ObjectivesBriefs
Wireflows
Specs
Plans
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The system is...
PEOPLE!!! !
$%
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
$&
Design
Strategy
Editorial
Guidelines
Design
Spec
Product
Manager
Site
StrategistPublisher Engineer QA
AUDIENCES
DESIGN
What do they need?
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
A documentation system fails when there aren’t leaders that advocate and inspire.
$'
Where are the champions?
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
The system is...
$(
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
You can now download the EightShapes Unify deliverable templates from unify.eightshapes.com.
%*
Interested?
Prepared for the IA Summit 2009, Memphis TN © EightShapes LLC
Thank you!
Wanna talk deliverables, components, EightShapes Unify, or other UX stuff?
The PersonNathan [email protected]: nathanacurtis
%)
The SystemEightShapes [email protected]: 8SUnify