Ecommerce (Rh329) :: Design Specification: Published February 27, 2009 Created by Nathan Curtis

eCommerce [RH329] :: Design Specification
Version 1
Published February 27, 2009
Created by Nathan Curtis
Version 1 published June 26, 2009 by Nathan Curtis (nathan@8shapes.com)
Table of Contents
Change History . . . . . . . . . . . . . . . . . . . . 3
Reviewers . . . . . . . . . . . . . . . . . . . . . . . 4
Design Strategy & Research

Creative Brief . . . . . . . . . . . . . . . . . . . . . . 6
Design Objectives . . . . . . . . . . . . . . . . . . . 7
Formative Research . . . . . . . . . . . . . . . . . . 8
Project Plan . . . . . . . . . . . . . . . . . . . . . . 9
Maps & Flows

Flow . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Pages
1. Product Category . . . . . . . . . . . . . . . . . . 13
c1. Contact Us & Click-to-Chat . . . . . . . . . . . 14
c2. Minicart . . . . . . . . . . . . . . . . . . . . . 15
2. Product . . . . . . . . . . . . . . . . . . . . . . . 16
c3. Billboard . . . . . . . . . . . . . . . . . . . . . 17
c4. Accordion . . . . . . . . . . . . . . . . . . . . 18
c5. Ratings . . . . . . . . . . . . . . . . . . . . . . 19
3. Cart . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.v1. Cart, Empty . . . . . . . . . . . . . . . . . . 21
3.v2. Cart, 2+ Items . . . . . . . . . . . . . . . . . 21
c6. Promo Code . . . . . . . . . . . . . . . . . . . 22
4. Checkout . . . . . . . . . . . . . . . . . . . . . . 23
c7. Credit History Check . . . . . . . . . . . . . . . 24
c8. Shipping . . . . . . . . . . . . . . . . . . . . . 25
Error Messaging . . . . . . . . . . . . . . . . . . . 27
2 of 27
Change History
Version 1 :: June 26, 2009

Initial design spec authored based on final wireframes and design

strategy
Inclusive of requirements for product category, product, cart, and
checkout pages
3 of 27
4 of 27
Reviewers
Reviewer
Email Address
Role
Group
John Smith
john@8shapes.com
Information Architect
UXD
Jane Brown
jane@8shapes.com
Visual Deisgner
UXD
Adam Morris
adam@8shapes.com
Design Technologist
WXD
Samantha March
sam@8shapes.com
Product Manager
Mktg
Dan Ayers
dan@8shapes.com
Engineer
IT
John Smith
john@john.com
information Architect
WXD
John Smith
john@john.com
WXD
John Smith
john@john.com
WXD
John Smith
john@john.com
WXD
John Smith
john@john.com
WXD
Core Team
Extended Team
Page Title
Design Strategy & Research
5 of 27
6 of 27
Creative Brief
The ecommerce flow requires a range of
updates based on formative user research
and business requirements.
Design Objectives
1. Lift order conversions
Deliverables

2. Improve customer satisfaction
In an effort 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.
3. Increase store flexibility
In addition, new business requirements will facilitate credit

check across multiple audience types, promotion codes
to enable discounts, and varied shipping options and
discounts.
Target Audience
Project Scope
The project scope is limited to requirements formally
identified by Product Marketing in:
ProjectRH329.FallUpdates.Requirements.doc
Design Strategy
Aliquam 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 Specification
Documentation of the interaction design, depicting the structure,
behaviors, and functional requirements
Visual Design Comps
Visual, high-fidelity mockups that clarify color, typography, and final
layout upon which presentation layer assets are created
Usability Test Script
Prototype
Moderate fidelity mockups used to assess design quality via usability
testing with participants
Usability Test Report
The audiences for this documentation include:
Product Marketing: To understand and validate

the realization of the user experience based on
requirements
Assumptions, Constraints & Other Considerations
Engineering: Learn and respond to design treatments

that must be implemented.
Quality Assurance: Identify test cases and clarify
requirements in detail.
Design Peers: Confirm and collaborate on a consensus
design solution across roles
All visual style, typography, and layout will be instantiated based on

exisiting conventions
Components will be reused, particularly those for page shells and
existing page designs
Product taxonomy (including available product attributes and
classifications) will remain unchanged for this release
Presentation Model
The experience will be built largely upon the existing design system
foundation of page types & components. However, new components
and page types will be defined and design as necessary.
7 of 27
Design Objectives
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 Conversions

Decrease exit rate by answering key questions
Improve user interface of complex customer decisions
Enhance product displays via billboard photos &
carousels
Improve Customer Satisfaction

Enable customers to engage more deeply through:
Real-time customer support
Customer ratings
Increase Store Flexibility

Broaden store capabilities to:
Offer varied discounts through promo codes
Handle consumer and business customers differently
8 of 27
Formative Research
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.
[Summary Point]
[Objective descriptionctet am etue magna commodolore
molor iriusting ero]
Approach
Nullam 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.
[Summary Point]
[Objective bullet point]
Participants
Sed aliquam, nunc eget euismod ullamcorper:
[Participant Type] (##)
[Summary 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]
9 of 27
Project Plan
6/8
6/15
6/22
6/29
7/6
7/13
7/20
Design Strategy
Final Report Review
Interaction Design
Wireframes
Draft 1
Specs
Final
Revisions
Draft 1
Draft 2
Final
Visual Design
Draft 1
Usability Testing
Scripting
Testing
Draft 1
Final
Prototyping
Draft 1 Final
NOTE: This project plan illustrates design team activities

only; for the projects complete plan, refer to the plan
produced by the project management team.
June
July
Today
Final
Report
Final
Page Title
Maps & Flows
10 of 27
11 of 27
Flow
Home
Search Results
HF01v1
HF01v1
HF01v1
HF03v1
Search:
HF02v1
GO
Training
Downloads
Blog
Videos
Papers
Events
Training
Downloads
Blog
Videos
Papers
Events
Home >
[Headline]
You currently have no items in your

shopping cart.
[Subhead poris aut laborem eatur sae pro quis di ut

int, sini reperibus iunt maximpost od que volessitis
et expelescia volori temollatios a voluptur, con
remporundit dolor arum as alit eturibus.]
[Featured Products]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Featured Products]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Secondary Features]
N01v3
N01v3
[Product Types]

shopping cart.
[Headline 1]
ut int, sini reperibus iunt maximpost od que volessitis

Contact EightShapes
For sales, training, and other general

inquiries,
contact
Your Cart
(1)us via the following
Edit Cart
options:
dolor arum as alit eturibus.]

For sales, training,remporundit
and other general
inquiries,
contact(1)
us via the following
Your Cart
Edit Cart
options:
[Product name]
Chat Now
[Product
description Necti blaces dolor
mollatem dolor maionsenis maximo]
$##.##
Email
Subtotal:
Call $##.##
Have Us Call You
Worldwide Ofces
Proceed to Checkout
[Product name] Add to Cart

[Product
Email description Necti blaces dolor
mollatem
Call
dolor maionsenis maximo]
$##.##
Have Us
Call You
$##.##
C12v1x2
Worldwide Ofces
Overview
Features
Promo code: [Code name]
Find a Product
N01v3
[Product Types]
[Product Types]
[Destination]
[Abstract description
Reprem id molesed etur]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
For
sales,
training,
Your
Cart
(2) and other general
Edit Cart
inquiries, contact us via the following
Keywords
options:
Added to your cart:
[Product name]
Chat Now
[Product description Necti blaces dolor
Submit dolor maionsenis maximo]
mollatem
$##.##
Email
Call
N02v1
Downloads
Other
Haveitems
Us Callin
You
your cart:
[Product
Worldwide
Ofces
[Document
name]
name]
[Product
description
[Document
name] Necti blaces dolor
mollatem
dolor
maionsenis maximo]
[Document
name]
$##.##
[Document name]
Subtotal: $##.##
Proceed to Checkout
Videos
Events
About Us
Search:
HF02v1
GO
Papers
Tech Specs
Rate this [Item type]:
Horrendous!
Your Cart (0)
Your Cart (0)
Poor

shopping cart.

[Product name]
shopping cart.
[Product description]
Fair
Good
Excellent!
Downloads
[Headline 2]
elit rati
blaborrovit
estem
Subtotal: $##.##Otate
$##.##sum ratur sequid ulles mil mint audit
[Key
Bene
t]
imusam as dolles ea volupta eriorro magnis ex eicilla citam, quam, cor
aut
veliquis eatur
est, od
quo
beatBene
apicto totatur
endipsus.
[Item type]:
Proceed
to ipsapiet
Checkout
[Key
t]Rate this
[Subhead
2 abo.
porisAxim
aut laborem
sae
pro
quis di ut plaborum
int, sini reperibus
maximpost
Uptassitae
rata volore,iunt
vendign
iminctatem solut pellabor remodis ut
[Keytusdant
Bene
t] restium as
odoptassusdae
que volessitis
tur, con
remporundit
et
et magnis
miligendit,
eveliquidolor
dolupta
uribus
Contact EightShapes
arum as alit
eturibus.]
peligendem
rem
explitatia quis in nobis ipsuntes nestruptas incil is quae volore nat
aborese quasit odipsa venisitas seque occus eum faccus, quidunt landit idiorero
[Location
Name](3)
Your Cart
Edit Cart
moditat
ex expliquiant.
[Address 1]
Add toasCart
[City],
[State]
#####
[Product
name]
Experum quiduciis atiorest, sum alibus et pero ipient ulpa conestis acerio. Ficit
Phone:
(###)
###-####
[Product
description
Necti blaces dolor
harumquibus moloreiciis re rerum eaquatus quam vendit, optatum coreius.
ofciae non earchitam quo coreium que dolorerspit aut la ad este dolent
$##.## $##.##
voluptatenis as molorei ctatet excepturi soluptatus, te nimin re ad qui qui blaut.
Saved
[Key Benet]
of 5 stars)
[Content Ario(3.4
bla out
ea dolum
eos
archictus discitiorum aliquatatur? Ritat.
Occaeperibus autenienis event, sum
am fuga. Ita nonectem que]
Learn More
[Key Benet]
[Key Benet]
Checkout
Services
Training
Downloads
Blog
Videos
Papers
Recommendations
Price per item
Contact EightShapes

Your Cart (1)
Edit Cart
options:
For sales, training, and otherProduct

generalsubtotal
Your Cart (1)
Edit Cart
options:
[Product name]
Chat
Now
[Product
$##.##
Email
Call
Subtotal:
Have Us$##.##
Call You
[Key Bene
t]
Worldwide Ofces
Proceed to Checkout
[Subtitle]
[Content Ario bla ea dolum
eos archictus discitiorum
aliquatatur?]
Learn More
Contact EightShapes
[Product name]
Email
Call
Have Us Call You
Promotion Code
$##.## $##.##
Worldwide Ofces
Got a promotion code? Apply your promotion code here to
save on your purchase today:
For [Key
sales, training,
Beneand
t] other general
Your Cart
Edit Cart
inquiries,
contact(2)
options:
[Location Name]
Your Cart (3)
Cart
Promotion Edit
Code
[Address 1]
[City], [State] #####
[Product name]Youve applied a promotion code to your purchase:
Phone: (###) ###-####
mollatem dolor maionsenis
[Promotion maximo]
code description]
##% Discount
$##.## $##.##
[Key to
Bene
Added
your t]
cart:
[Headline 3]
[Key Benet]
Subtotal: $##.## $##.##

Promotion Code
Quantity
$[##.##]
Update
$[##.##]
Promotion discount
$[##.##]
State tax (estimated)
$[##.##]
Shipping (estimated)
$[##.##]
You pay (estimated)
$[##.##]
Apply
Proceed to Checkout
Proceed to Checkout
Address *
[Product Name]
Details
N01v2
State *
ZIP Code *
Phone Number * (
Credit History Check

C12v1
Consumer
Recently Viewed Items
Duis alit, veril ullaorem veros nibh

et, sent alit venibh eriuscilit at, vel
dolor sequat vulla aliquam venis essi
exerostie deliquamcon exercid uiscip
elenim autpat.
(Why do we ask for this information?)
Business
Social Security # *
[Product Name]
[Product Name]
[Product Name]
[Product Name]
Date of Birth *
MM/DD/YYYY
Drivers License # *
Contact EightShapes
License State * [State]

C12v5
About the Shopping Cart

Items in your Shopping Cart always reect the most recent
price displayed on their product pages.
Items remain in your Shopping Cart for only this site visit
(Why?).
[Product name] (2)

$##.## $##.##
($##.## per item)
HF06v1
Contacts
| Feedback
| Help | Site Map
Promotion
Code
2006-2009
Promo code: [Code
name] EightShapes LLC All rights reserved. Terms & Conditions | Privacy Statement | Cookie Policy | Trademarks of EightShapes LLC
The promotion code youve applied does not match a current
Subtotal: $##.##promotion.
$##.## Please reenter the code and try again.
Proceed
to Checkout
Promotion
Code [code in error]
Ectem volorer aessit vulla faciliq

uiscip eu facing eu faciduipit il enisis
nullam zzrit lut vulput laore consed tat
praestis am et lor iurero cor sim adigna
conumsa ndignim essecte magniscinci
bla facil euip eugait lor am velesto del
euis alis dolorerci tat. Ros adipit et,
susto diam, vent am acillaorem zzril
utetue feum non hent ulluptat.
City *
[Product Name]
Details
About Us
Sissequat. Uptate dolortion hendrem

inci blametu erostis dolor at. Iriurem
verostrud tat velit autpat lumsan
ullamet atis essed minis essisit alit
veliquisit, velesendre magnim ilismod
iamcomm olorerat.
Last Name *
[Product Name]
Details
Total
$[##.##]
Events
Privacy Policy
First Name *
N01v3
Contact EightShapes
[Product
Chat
Nowname]
[Product name] (2)
$##.##
Email
C12v5
[Product description
Necti blaces dolor
Call
[Key Benet]
[Key Benet]
[Key Benet]
Other
Have Us
Call You
items
in your cart:
$##.## $##.## ($##.## per item)
[Content
Worldwide
Of
[Content Ario bla ea dolum eos
[Item Title] [Item Description
Ario
bla ces
ea dolum eos
[Product
name]
[Subhead
3 poris aut laborem eatur sae pro
Promo code:HF06v1
[Code
name]
aliquatatur? Ritat.
archictus
[Productdiscitiorum
descriptionaliquatatur?
Necti blacesRitat.
dolor
Contacts
| Feedback | Help | Site Map
quis di ut int, sini reperibus iunt maximpost
autenienis
event,
autenienis
event,
sum
mollatem dolor
maionsenis
maximo]
2006-2009 EightShapes LLC All rights reserved. Terms &Occaeperibus]
Conditions | Privacy StatementOccaeperibus
| Cookie Policy
| Trademarks
ofsum
EightShapesOccaeperibus
LLC
Subtotal: $##.##od
$##.##
que volessitis tur, con remporundit dolor
am
fuga. Ita nonectem que]
$##.##
Learn More
More Details
arum as alit eturibus.]
aliquatatur? Ritat.
Subtotal: $##.##
Proceed to Checkout
Occaeperibus]
[Key Benet]
[Key Benet]
Add to Cart
Proceed to Checkout
[Key Benet]
aliquatatur? Ritat.
Occaeperibus]
[Key Benet]
Learn More
[Key Benet]
[Key Benet]
Product
GO
Welcome! Sign in or create an account for eightshapes.com

HF04v1
C01v1
Personal Information
Shopping Cart
(not yet rated)
Your shopping cart contains 1 item:
Contact EightShapes
Contact
Category EightShapes
Blog
C01v1
Your Cart (0)
Promo code: [Code

name] 1 poris aut laborem eatur sae pro quis di
[Subhead
Learn More
Downloads
Home > Shopping >
C01v1
[Product name]
Your Cart (0)
Training
C02v1
C02v1
Home > [Product category] >
[Product category]
Services
About Us
C02v1
C01v1
HF03v1
Search:

HF04v1
Services
About Us
HF02v1
GO

HF04v1
Services
HF01v1
HF03v1
HF03v1
Search:
HF02v1

HF04v1
Apply
Shipping
Shipping
Destination
Credit History Check (Why do we ask for this information?)
C12v1
Your
products will be sent to your credit card billing address for security purposes.
Consumer
Business
Destination:
Send to my billing address
Send to a another address
Tax ID # *
Method & Price
Select
a shipping
method
and cost for your order (learn more):
Company
Name
*
2-day (2 business days) ($##.##)
C12v5
Standard Overnight (1 business day) ($##.##)
Method & Price:
FREE Overnight Shipping!!!
due to the applied promotion code of [promotion code name].
Billing
Card Type *
Since you are purchasing these products for business use, your business will be liable
Shipping
for this purchase and no credit history check is required.
Credit Card Number *
Are you purchasing for personal use instead?

Security
ID *
(Whatis this?)
Destination
Enter personal
information
instead
[Key Benet]
Expiration
Date *
Address
HF06v1
Contacts | Feedback | Help | Site Map

2006-2009 EightShapes LLC All rights reserved. Terms & Conditions | Privacy Statement | Cookie Policy | Trademarks of EightShapes LLC
City *
Return to Shopping Cart
State *
Shipping
Destination:
Send to a another address:
Address *
Submit Your Order
City *
ZIP Code *
State *
ZIP Code *
HF06v1
Method & Price:
Product Category
2-day Shipping for $##.##
for all purchases made through the [company name] support program
Method & Price

Select a shipping method and cost for your order (learn more):
Product
Cart
Checkout
1. Single Photograph, No Items in Cart
1. Empty
1. Standard
2. Multiple Photos, Items in Cart
2. 1 Item
2. Business Credit Check, FREE Shipping
Page Variations
N/A
3. Many Items, with Promo Code applied
Components
c1. Contact Us
c1. Contact Us
c2. Mini-Cart
c2. Mini-Cart
c3. Billboard
c4. Accordion
c5. Ratings
c5. Promotion Code
c6. Credit History Check

c7. Shipping Options
Page Title
Pages
12 of 27
13 of 27
1. Product Category
The product category page includes a video spotlight and a
range of featured product collections.
HF01v1
HF03v1
Search:
HF02v1
GO
HF04v1
Services
Training
Downloads
Blog
Videos
Papers
Events
About Us
C02v1
Home >
C01v1
[Product category]
New Components
1
[Headline]
[Subhead poris aut laborem eatur sae pro quis di ut
int, sini reperibus iunt maximpost od que volessitis
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
HF06v1

shopping cart.

inquiries,
contact
Your Cart
(1)us via the following
Edit Cart
options:
[Product name]
Chat Now
[Product
$##.##
Email
Subtotal:
Call $##.##
Have Us Call You
Worldwide Ofces
Proceed to Checkout
[Featured Products]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
N01v3
[Product Types]

shopping cart.
two new components:

1. c1. Mini-Cart
2. c2. Contact Us
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Feature title that

extends two lines]
[Secondary Features]
N01v3
TheCart
product
Your
(0) category page will include the following
2 Contact EightShapes
Learn More
[Featured Products]
Your Cart (0)
N01v3
[Product Types]
[Product Types]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
[Destination]
[Call to action]
Find a Product
Contact EightShapes

inquiries,
contact(1)
Your Cart
Edit Cart
options:
These two components will be displayed, in that

order, at the top of the pages sidebar, above existing
components to Find a Product and Downloads.
[Product name]
Email description Necti blaces dolor
[Product
Call
mollatem
dolor maionsenis maximo]
Have Us
Call You
$##.##
$##.##
Worldwide Ofces
Subtotal: $##.## $##.##
Proceed to Checkout
Contact
Category EightShapes
Contact EightShapes
For
sales,
training,
Your
Cart
(2) and other general
Edit Cart
Keywords
options:
[Location
Name](3)
Your Cart
Edit Cart
[Address 1]
[City],
[State]
#####
[Product
name]
Phone:
(###)
###-####Necti blaces dolor
[Product
description
$##.## $##.##
Added to your cart:
[Product name]
Chat Now
Submit dolor maionsenis maximo]
mollatem
$##.##
Email
Call
N02v1
Downloads
Other
Haveitems
Us Callin
You
your cart:
[Product
Worldwide
Ofces
[Document
name]
name]
[Product
description
[Document
name] Necti blaces dolor
mollatem
dolor
maionsenis maximo]
[Document
name]
$##.##
[Document name]
Subtotal: $##.##

Proceed to Checkout
[Product name] (2)

$##.## $##.## ($##.## per item)
Subtotal: $##.## $##.##
Proceed to Checkout
14 of 27
c1. Contact Us & Click-to-Chat

Standard (with Click-to-chat)
Non-interactive (no Click-to-Chat)
Contact EightShapes
Contact EightShapes

options:

options:
Chat Now
4
5
6
7
Email
Call
Have Us Call You
Worldwide Ofces
Contact EightShapes
options:
Chat Now
Email
Call
Have Us Call You
Worldwide Ofces
6. Have Us Call You Link
A. Standard (with Click-to-Chat

B. Non-interative (no Click-to-Chat)
C. Pop-in
D. Static
onclick: Navigate to the Have Us Call You page.
Clikc-to-Chat
8. Close Button
The 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 projects documentation
for background and requirements of the program.
onclick: Close the popin window, and return

focus to the parent page.
7. Worldwide Offices Link

onclick: Navigate to the Worldwide Offices page.
Elements
Pop-in
Email
Call
Have Us Call You
Worldwide Ofces
Variations
Static
Contact EightShapes
8
9
[Location Name]
[Address 1]
Phone: (###) ###-####
1. Header
9. Address
The 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.
Enable publisher to update label on a per-page

(per-product) basis
2. Description
Enable publisher to update description on a perpage (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.
Display:
Required
Recommended
Optional || Spec Type: Behavior State Editorial Data
15 of 27
c2. Minicart
Without Promo Code
Empty
Cart
With Promo Code
Your Cart (0)
Your Cart (0)

shopping cart.

shopping cart.
12
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.
13
Variations
Empty cart:
A. Without promo code
B. With promo code
1 Item
Your Cart (1)
Edit Cart 7
[Product name]
4
5 $##.##
8
Edit Cart
[Product name]
$##.## $##.##
Subtotal: $##.##
9
Your Cart (1)
onclick: Remove the product from the shopping

cart, and refresh the minicart display
1 item in cart:
C. Without promo code
D. With promo code
7. Edit cart link

onclick: Navigate to the shopping cart page
2+ items in cart:
E: Without promo code (in-page update)
F: With promo code
8. Subtotal
Display the sum all product costs
Format all prices with commas for thousands
and two decimal point accuracy
Elements
Proceed to Checkout
9. Proceed to checkout button

onclick: Navigate to the checkout page
1. Minicart header
2+ Items
Your Cart (2)

10
Edit Cart
Added to your cart:

[Product name]
$##.##
11
Other items in your cart:

[Product name]
$##.##
Subtotal: $##.##
Proceed to Checkout
Your Cart (3)
10. Added to your cart message
2. Empty cart message

Edit Cart
[Product name]
$##.## $##.##
[Product name] (2)
$##.## $##.## ($##.## per item)
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
Subtotal: $##.## $##.##
Proceed to Checkout
5. Product price
Display if the user has added an item to the

cart within the current page via the add-to-cart
button.
If the cart contains no items, then show the

Empty Cart Message; otherwise hide this
message.
11. Other items in your cart 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
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
onclick: Navigate to the product page
If the user has applied a promo code to their

shopping cart, then show the promo code.
Subtotal: $##.## $##.##
4. Product description
13. Remove promo code button
Limit to no more than two lines (~60 characters).

If a description exceeds 60 characters, truncate at
60 characters and follow with ....
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.
Proceed to Checkout
Display:
Required
Recommended
16 of 27
2. Product
The product page includes details across four tabs, highlights key
features via a spotlight billboard, and provides calls-to-action.
HF01v1
HF03v1
Search:
HF02v1
GO
HF04v1
Services
Training
Downloads
Blog
Videos
Papers
Events
About Us
C02v1
Home > [Product category] >

C01v1
[Product name]
[Headline 1]
[Subhead 1 poris aut laborem eatur sae pro quis di
Add to Cart
C12v1x2
Overview
Features
[Headline 2]
Tech Specs
(not yet rated)
Horrendous!
Poor
Fair
Good
Excellent!
Downloads
Otate sum ratur sequid ulles mil mint audit

elit rati
blaborrovit
estem
[Key
Bene
t]
imusam as dolles ea volupta eriorro magnis ex eicilla citam, quam, cor
aut
ipsapiet
veliquis eatur
est, od
quo
beatBene
apicto totatur
endipsus.
[Item type]:
[Key
t]Rate this
[Subhead
2 abo.
porisAxim
aut laborem
sae
pro
quis di ut plaborum
int, sini reperibus
maximpost
Uptassitae
rata volore,iunt
vendign
iminctatem solut pellabor remodis ut
[Keytusdant
Bene
t] restium as
odoptassusdae
que volessitis
tur, con
remporundit
et
et magnis
miligendit,
eveliquidolor
dolupta
uribus
arum as alit
eturibus.]
peligendem
rem
explitatia quis in nobis ipsuntes nestruptas incil is quae volore nat
aborese quasit odipsa venisitas seque occus eum faccus, quidunt landit idiorero
moditat
ex expliquiant.
Add toasCart
Experum quiduciis atiorest, sum alibus et pero ipient ulpa conestis acerio. Ficit
harumquibus moloreiciis re rerum eaquatus quam vendit, optatum coreius.
ofciae non earchitam quo coreium que dolorerspit aut la ad este dolent
voluptatenis as molorei ctatet excepturi soluptatus, te nimin re ad qui qui blaut.
Saved
[Key Benet]
of 5 stars)
[Content Ario(3.4
bla out
ea dolum
eos
Learn More
[Key Benet]
[Key Benet]
New Components
2 Contact EightShapes
Your Cart (1)
Edit Cart
options:
[Product name]
Chat
Now
[Product
$##.##
Email
Call
Subtotal:
Have Us$##.##
Call You
[Key Bene
t]
Worldwide Ofces
Proceed to Checkout
[Subtitle]
aliquatatur?]
Learn More
Contact EightShapes
For [Key
sales, training,
Beneand
t] other general
Your Cart
Edit Cart
inquiries,
contact(2)
options:
[Key to
Bene
Added
your t]
cart:
[Headline 3]
[Key Benet]
Your
Cart (0)
components:

shopping cart.
[Product
Chat
Nowname]
$##.##
Email
C12v5
Call
[Key Benet]
[Key Benet]
[Key Benet]
Other
Have Us
Call You
items
in your cart:
[Content
Worldwide
Of
Ario
bla ces
ea dolum eos
[Product
name]
HF06v1[Subhead 3 poris aut laborem eatur sae pro
archictus
aliquatatur? Ritat.
[Productdiscitiorum
descriptionaliquatatur?
Necti blacesRitat.
dolor
autenienis
event,
autenienis
event,
sum
mollatem dolor
maionsenis
maximo]
2006-2009 EightShapes LLC All rights reserved. Terms &Occaeperibus]
Conditions | Privacy StatementOccaeperibus
| Cookie Policy
| Trademarks
ofsum
EightShapesOccaeperibus
LLC
od que volessitis tur, con remporundit dolor
am
fuga. Ita nonectem que]
$##.##
Learn More
More Details
aliquatatur? Ritat.
Subtotal: $##.##
Occaeperibus]
[Key Benet]
[Key Benet]
Add to Cart
Proceed to Checkout
[Key Benet]
aliquatatur? Ritat.
Occaeperibus]
[Key Benet]
Learn More
[Key Benet]
[Key Benet]
The product page includes the following new
1 Your Cart (0)

shopping cart.
1. c1. Minicart
2. EightShapes
c2. Contact Us
Contact
3. c3. Billboard
4. c4. Accordion
5. c5.
Ratings
[Product
name]

Your Cart (1)
Edit Cart
options:
Email
Call
Have Us Call You
$##.## $##.##
Worldwide Ofces
The c1. Minicart and c2. Contact Us components will

be displayed, in that order, at the top of the pages
sidebar,
above
Subtotal:
$##.##
$##.## any existing components.
Proceed to Checkout
Contact EightShapes
[Location Name]
Your Cart (3)
Edit Cart
[Address 1]
[Product name]
Phone: (###) ###-####
$##.## $##.##
[Product name] (2)
$##.## $##.## ($##.## per item)
Subtotal: $##.## $##.##
Proceed to Checkout
[Key Benet]
Display:
Required
Recommended
17 of 27
c3. Billboard
4
1
2
The Billboard component presents a large

scale image and headline at the top of the
page, sets the tone and voice of a product
or topic, and provides a call to action to
purchase if necessary.
[Headline 1]
[Subhead 1 poris aut laborem eatur sae pro quis di
Variations
A. Standard
B. Two Features
C. Feature Carousel
Add to Cart
Standard
[Headline 2]
Two Features
[Headline 3]
[Subhead 3 poris aut laborem eatur sae pro
Add to Cart
Feature Carousel
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).
Elements
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
Add to Cart
6. Feature carousel navigation
1. Feature headline
[Subhead 2 poris aut laborem eatur sae pro

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
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
subtotal
Transition the minicart item using a yellow
fade to connote the carts change in status
Stay 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
Display:
Required
Recommended
18 of 27
c4. Accordion
[Key Benet]
[Key Benet]
[Key Benet]
[Key Benet]
[Item Title]
[Item Description
aliquatatur? Ritat.
Occaeperibus]
[Item Title]
[Item Description
aliquatatur? Ritat.
Occaeperibus]
[Item Title]
[Item Description
aliquatatur? Ritat.
Occaeperibus]
[Key Benet]
[Key Benet]
[Key Benet]
Learn More
[Key Benet]
[Subtitle]
aliquatatur?]
Learn More
[Key Benet]
[Key Benet]
[Key Benet]
[Key Benet]
[Key Benet]
[Key Benet]

Learn More
[Key Benet]
Learn More
[Key Benet]

More Details
[Key Benet]
[Key Benet]
[Key Benet]
[Key Benet]
19 of 27
c5. Ratings
1
(not yet rated)
The product rating component enables

users to view and apply a rating to the
displayed product.
Not Yet Rated
Hovered & Levels
Horrendous!
Aa. Standard
B. Two Features
C. Feature Carousel
Poor
Elements
Variations
1. Rating Label
D
Fair
Good
Excellent!
Click & Save
Saved
Applied Ratings
(3.4 out of 5 stars)
Include a specific label of what is being rated,

generally by type. For example, include
product, article, or post.
Do not label the specific 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 reflect 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 users 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 figure).
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.
20 of 27
3. Cart
The shopping cart summarizes all items that the user intends to
purchase, displays aggregate pricing, and leads to checkout.
HF01v1
HF03v1
Search:
HF02v1
GO
HF04v1
Services
Training
Downloads
Blog
Videos
Papers
Events
About Us
C02v1
Home > Shopping >

C01v1
Shopping Cart
Product
N01v3
Recommendations
Price per item
[Product name]
$[##.##]
Quantity
Update
Promotion discount
Promotion Code
$[##.##]
$[##.##]
You pay (estimated)
$[##.##]
Proceed to Checkout
N01v2
[Product Name]
[Product Name]
[Product Name]
[Product Name]
10
9
Promotion Code
Youve applied a promotion code to your purchase:

(Why?).
[Promotion code description]
13
##% Discount
HF06v1
Contacts
| Feedback
| Help | Site Map
Promotion
Code
promotion. Please reenter the code and try again.
Promotion Code [code in error]
Purpose
Unchanged Components
The 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.
1.
2.
3.
4.
5.
6.
7.
For this project, the shopping cart serves as the

primary location to apply and manage a promotion
code. Here, users can:
[Product Name]
Details
$[##.##]
Apply
[Product Name]
Details
$[##.##]
Promotion Code
[Product Name]
Details
Total
$[##.##]
Product subtotal
11
12
Updated Component
Add a promo code whether or not the cart

contains any items
Remove an applied promotion code
Learn about promotion codes
Navigate 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 Rationale

The 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.
Header
Breadcrumbs
Page Title
Page Message
Cart Table Header
Cart Item(s)
Cart Subtotal & Update
8. Cart Summary
New Component
9. Cart Promo Codes
Unchanged Components (contd)
10.
11.
12.
13.

Recommendations
Footer
Apply
Display:
Required
Recommended
21 of 27
3.v1. Cart, Empty
3.v2. Cart, 2+ Items

HF01v1
HF01v1
HF03v1
HF03v1
Search:
HF02v1
GO
HF04v1
HF04v1
Services
Training
Downloads
Blog
Videos
Papers
Events
Training
Downloads
Blog
Videos
Papers
Events
Home > Shopping >

C01v1
C01v1
Shopping Cart
N01v3
Your shopping cart contains no items. Add an item by clicking the Add to Cart button on any of your product displays.
Recommendations
Shopping Cart
[Product category]
[Product category]
[Product category]
[Product category]
[Product category]


(Why?).
Apply
Price per item
[Product name]
$[##.##]
[Product name]
[Product Name]
Details
[Product name]
$[##.##] $[##.##]
$[##.##] $[##.##]
$[##.##]
[Product Name]
Details
$[##.##] $[##.##]
[Product Name]
Details
$[##.##] $[##.##]
[Product Name]
Details
Quantity
Total
N01v2
N01v2
[Product Name]
[Product Name]
[Product Name]
[Product Name]
Promotion Code
HF06v1
Recommendations
Product
[Product Name]
Details
Promotion Code
N01v3
[Product Name]
Details
To nd a product, start shopping in one of our categories:
Youve applied
a promotion
code
to your purchase:
Contacts
| Feedback
| Help | Site
Map
##% Discount
Update
Product subtotal
Promotion discount
$[##.##]
$[##.##]
Promotion Code
$[##.##]

$[##.##]
You pay (estimated)
$[##.##]
Promotion Code
[Product Name]
[Product Name]
[Product Name]
[Product Name]
Apply
Proceed to Checkout
Promotion Code
About Us
C02v1
Home > Shopping >
Promotion Code
Services
About Us
C02v1
Search:
HF02v1
GO
Apply
Promotion Code
##% Discount
HF06v1

(Why?).
Contacts
| Feedback
| Help | Site Map
Promotion
Code
Apply
22 of 27
c6. Promo Code

Promotion Code
Promotion Code
A
Apply
The promo code application enables users

to enter a textual promo code to receive
discounts and premium offers.
Variations
A. Default (no code applied)
B. Applied code
C. Error
Elements
Default (no code applied)
1. Header
2. Introduction
Promotion Code
3. Text box

B
##% Discount
Applied code
Promotion Code
C
Error
Apply
Limit entry to no more than 10 characters

4. Apply button
onclick
If the text box is empty, then display an error
message
Validate the promo code applied, based on
table X.
If the promo code is valid, refresh the Promo
Code to reflect the applied code (see figure
B), and refresh the shopping cart inline to
reflect any applicable savings.
5. Description & discount percentage
6. Remove code button
onclick
Remove the applied promo code
Refresh the Promo Code component to the
no code applied state (refer to figure A).
Refresh the shopping cart to remove any
promo-code based discounts applied.
7. Error message
23 of 27
4. Checkout
HF01v1
HF03v1
Search:
HF02v1
GO

HF04v1
C01v1
Services
Checkout
Training
Downloads
Blog
Videos
Papers
Sissequat. Uptate dolortion hendrem

verostrud tat velit autpat lumsan
ullamet atis essed minis essisit alit
veliquisit, velesendre magnim ilismod
iamcomm olorerat.
First Name *
Last Name *
Address *

praestis am et lor iurero cor sim adigna
conumsa ndignim essecte magniscinci
bla facil euip eugait lor am velesto del
utetue feum non hent ulluptat.
City *
State *
ZIP Code *
Phone Number * (

C12v1
Consumer

dolor sequat vulla aliquam venis essi
exerostie deliquamcon exercid uiscip
elenim autpat.
Business
Social Security # *
Date of Birth *
MM/DD/YYYY
Drivers License # *
C12v5
About Us
Privacy Policy
Events
The checkout page enables a customer to provide personal and

billing information to purchase one or more products.
Shipping
Shipping
Destination
Credit History Check (Why do we ask for this information?)
C12v1
Your
products will be sent to your credit card billing address for security purposes.
Consumer
Business
Destination:
Tax ID # *
Method & Price
Select
a shipping
method
and cost for your order (learn more):
Company
Name
*
C12v5
Method & Price:
Billing
Card Type *
Shipping
Credit Card Number *

Security
ID *
(Whatis this?)
Destination
Enter personal
information
instead
Expiration
Date *
Address
Destination:
City *
Return to Shopping Cart
State *
Shipping
Address *
Submit Your Order
City *
ZIP Code *
State *
ZIP Code *
HF06v1
Method & Price:
Method & Price

New Components
The product category page will include the following
new/updated components:
1. c6. Credit history check
2. c7. Shipping options
These two components will be displayed, in that
order, between the personal information and billing
sections of the checkout page.
24 of 27
c7. Credit History Check

11
C12v1
Consumer
Business
Social Security # *
Date of Birth *
Drivers License # *
MM/DD/YYYY
A. Consumer option
B. Business option
C. Business fixed
Elements
2. Tabs
Consumer option
C12v1
Consumer
Business
Tax ID # *
Company Name *
C12v5
Variations
1. Header
C12v5
The credit history check enables the

business to validate that a customer is
credit worthy to make ongoing payments
for a subscription.
Business option
onclick: Toggle to the alternative selection

(between Consumer in figure A and Business in
figure 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
10

Enter personal information instead
onclick: Switch display to enable both business

and consumer credit history data entry (as
displayed in figure A).
Business (fixed)
11. Why? link

onclick: Display W02v3 Information Balloon
within basic description of why credit history
information is collected
25 of 27
c8. Shipping
Alternative shipping options are
Shipping
Shipping
personalized by previous product
Destination
Your products will be sent to your credit card billing address for security purposes.
business rules based on cart composition.

Destination:
Destination
Options
Send to a another
address
selection, experience context, and
Method & Price

A
Destination Fixed, Method Options
1. Constrained (see Figure A)

The cart product combination requires
Method
& Price:
that
the products are sent to the
FREEpersonal
Overnight
Shipping!!!
information
that serves as the
due to billing
the applied
promotion code of [promotion code name].
address
2. Custom (see Figure B)
3. Options (see Figures C & D)
User can select to reuse billing address
or enter an alternative address
Shipping
Shipping
Destination
Destination:
Send
to my
billing
address
1.
FREE
(see
Figure
D)
Method Options
Address *
City *
2. Fixed (see Figure B)
Address
3. Options
(see*Figure A)
State *
City *
ZIP Code *
State *
ZIP Code *
Method & Price:
B
Destination Entry, Method Fixed
Method & Price

Shipping, contd
Shipping
Destination:
Method & Price:

C
Destination Options, FREE Shipping
Shipping
Destination:
Address *
City *
State *
ZIP Code *
Method & Price

D
Destination Options, Method Options
26 of 27
27 of 27
Error Messaging
Conventions
HF01v1
HF03v1
Search:
HF02v1
The for
error
messaging presentation rules for the Checkout page do not change
with this
GO
Welcome! Sign in or create an account
eightshapes.com
release.
HF04v1
C01v1
Services
Checkout
Training
Downloads
Blog
New Messages Papers

Videos
First Name *
First name is required
Address * 123 Elm Street
Checkout page with error message

City * Washington
State * District of Columbia

ZIP Code * 20007
Phone Number * ( 212 ) 555 - 1212

C12v1
Event
onblur
onblur
onblur
onblur
onblur
onsubmit
onsubmit
onsubmit
onsubmit
10
onsubmit
11
onsubmit
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
Business
Social Security # *
Date of Birth *
MM/DD/YYYY
Drivers License # *
C12v5
Shipping
Sissequat. Uptate dolortion

hendrem
Message
Social Security Number
(any field)
security number contains a
verostrud
tatcontains
velit autpatSocial
lumsan
a non numeric character
ullamet atis essed minisnonnumeric
essisit alitcharacter
veliquisit,
magnim
ilismod
Date of birth is nonempty
and velesendre
not
Date of birth
is not formatted correctly
iamcomm olorerat.
formatted as MM/DD/YYYY
ID
Last Name * Curtis
Consumer
About Us
The following additional validations Privacy

are to bePolicy
added based on new data collection:
There is a problem with your address submission. Please ll in all required

address elds.
Events
Shipping
Condition
Date of birth is less than 18 years from

Date of birth reflects that you are not
todays date
old enough to purchase a product from
this website
Tax ID (either field) ispraestis
nonempty
contains
a nonnumeric character
amand
et lor iureroTax
corIDsim
adigna
contains a nonnumeric
character
conumsa
ndignim essecte magniscinci
blaand
facil
euipa five
eugait
velesto
del
ZIP Code is nonempty
is not
digitlor am
ZIP code
is not
formatted correctly
numeric string
Social security number
is empty
Social security number is required
utetue
feum non hent ulluptat.
Date of birth is empty
Date of Birth is required
Drivers License Number is empty
Drivers Licence Number is required
Tax ID is empty
Tax ID
is required
dolor sequat vulla aliquam
venis
essi
exerostie
deliquamcon
exercid
Company name is empty
Companyuiscip
Name is required
elenim autpat.
Custom address is selected and address is
Address is required
empty

Ecommerce (Rh329) :: Design Specification: Published February 27, 2009 Created by Nathan Curtis

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ecommerce (Rh329) :: Design Specification: Published February 27, 2009 Created by Nathan Curtis

Uploaded by

Copyright:

Available Formats

eCommerce [RH329] :: Design Specification