ecommerce [RH329] :: Design Specification Version 1 Published February 27, 2009 Created by Nathan Curtis

Transcription

1 Version 1 Published February 27, 2009 Created by Nathan Curtis

2 2 of 27 Table of Contents Change History Reviewers Design Strategy & Research Creative Brief Design Objectives Formative Research Project Plan Maps & Flows Flow Pages 1. Product Category c1. Contact Us & Click-to-Chat c2. Minicart Product c3. Billboard c4. Accordion c5. Ratings Cart v1. Cart, Empty v2. Cart, 2+ Items c6. Promo Code Checkout c7. Credit History Check c8. Shipping Error Messaging

3 3 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

4 4 of 27 Reviewers Reviewer Address Role Group Core Team John Smith Information Architect UXD Jane Brown Visual Deisgner UXD Adam Morris Design Technologist WXD Samantha March Product Manager Mktg Dan Ayers Engineer IT Extended Team John Smith information Architect WXD John Smith information Architect WXD John Smith information Architect WXD John Smith information Architect WXD John Smith information Architect WXD

5 5 of 27 Page Title Design Strategy & Research

6 6 of 27 Creative Brief The ecommerce flow requires a range of updates based on formative user research and business requirements. 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. In addition, new business requirements will facilitate credit check across multiple audience types, promotion codes to enable discounts, and varied shipping options and discounts. Design Objectives 1. Lift order conversions 2. Improve customer satisfaction 3. Increase store flexibility Project Scope The project scope is limited to requirements formally identified by Product Marketing in: ProjectRH329.FallUpdates.Requirements.doc Target Audience The 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: Confirm and collaborate on a consensus design solution across roles Deliverables 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 Assumptions, Constraints & Other Considerations 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 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. 1 Lift Order Conversions Decrease exit rate by answering key questions Improve user interface of complex customer decisions Enhance product displays via billboard photos & carousels 2 Improve Customer Satisfaction Enable customers to engage more deeply through: Real-time customer support Customer ratings 3 Increase Store Flexibility Broaden store capabilities to: Offer varied discounts through promo codes Handle consumer and business customers differently

8 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. 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. Participants Sed 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] 4 [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 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 Specs Revisions Draft 1 Final Draft 1 Draft 2 Final Visual Design Draft 1 Final Usability Testing Scripting Draft 1 Prototyping Final Testing Report Final 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. Draft 1 Final June Today July

10 10 of 27 Page Title Maps & Flows

11 HF01v1 HF04v1 C02v1 C01v1 N01v3 N01v3 N01v3 HF06v1 HF02v1 HF03v1 N02v1 HF01v1 HF04v1 C02v1 C01v1 C12v1x2 C12v5 HF06v1 HF02v1 HF03v1 HF01v1 HF04v1 C02v1 C01v1 HF06v1 HF02v1 HF03v1 N01v3 N01v2 HF01v1 HF04v1 C12v1 C12v5 C12v1 C12v5 HF06v1 HF02v1 HF03v1 ecommerce [RH329] :: Design Specification 11 of 27 Flow Home Search Results Welcome! Sign in or create an account for eightshapes.com Search: GO Welcome! Sign in or create an account for eightshapes.com Search: GO Welcome! Sign in or create an account for eightshapes.com Search: GO Welcome! Sign in or create an account for eightshapes.com Search: GO Home > Training Blog Videos Papers Events Services Downloads About Us [Product category] [Headline] [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.] Learn More [Featured Products] [Secondary Features] [Product Types] [Featured Products] [Product Types] [Product Types] Your Cart (0) You currently have no items in your shopping cart. Contact EightShapes For sales, training, and other general inquiries, Your Cart contact (1) us via the following options: [Product Chat Now description Necti blaces dolor $##.##» » Subtotal: Call $##.##» Have Us Call You» Worldwide Offi ces Find a Product Contact Category EightShapes For Your sales, Cart training, (2) and other general inquiries, contact us via the following options: Keywords Added to your cart: Chat Now mollatem Submit dolor maionsenis maximo]» $##.## » Call Downloads» Other Have items Us Call in You your cart:» [Product [Document Worldwide name] name] Offi ces [Product [Document description name] Necti blaces dolor mollatem [Document dolor name] maionsenis maximo] $##.## [Document name] Subtotal: $##.## Training Blog Videos Papers Events Services Downloads About Us Home > [Product category] > (not yet rated) Your Cart (0) Horrendous! Your Cart (0) You currently have no items your shopping cart. [Headline 1] You currently have no items in your Poor shopping cart. Promo code: [Code [Subhead name] 1 poris aut laborem eatur sae pro quis di Contact EightShapes ut int, sini reperibus iunt maximpost od que volessitis et expelescia volori temollatios a voluptur, con Fair Contact EightShapes For sales, training, remporundit and other general dolor arum as alit eturibus.] inquiries, Your Cart contact (1) us via the following For sales, training, and other general options: inquiries, contact us via the following Good Your Cart (1) options: Add to Cart» [Product description Necti blaces dolor» mollatem Call dolor maionsenis maximo] Chat [Product Now» $##.## Have Us $##.## Call You Excellent! description Necti blaces dolor» Worldwide Offi ces Overview Features Tech Specs Downloads $##.## Promo code: [Code name]» Saved» Call Subtotal: $##.## Subtotal: $##.## Otate $##.## sum ratur sequid ulles mil mint audit» Have Us Call You [Headline 2] [Key elit rati Benefit] blaborrovit estem imusam as dolles ea volupta eriorro magnis ex eicilla citam, quam, cor» Worldwide Offi ces Proceed aut [Subhead to ipsapiet Checkout 2 abo. poris Axim aut laborem veliquis eatur est, od sae quo pro [Key beat Benefit] apicto totatur Rate this endipsus. [Item type]: [Content Ario (3.4 bla out ea dolum of 5 stars) eos [Subtitle] archictus discitiorum aliquatatur? Ritat. [Content Ario bla ea dolum Uptassitae quis di ut plaborum int, sini reperibus rata volore, iunt vendign maximpost iminctatem solut pellabor remodis ut Occaeperibus autenienis event, sum eos archictus discitiorum od que volessitis tur, con remporundit dolor Contact EightShapes et optassusdae et magnis miligendit, eveliqui dolupta [Key tusdant Benefit] uribus restium as am fuga. Ita nonectem que] aliquatatur?] peligendem arum as alit rem eturibus.] explitatia quis in nobis ipsuntes nestruptas incil is quae volore nat» Learn More Contact» EightShapes Learn More [Location Your Cart Name] aborese quasit odipsa venisitas seque occus eum faccus, quidunt landit idiorero (3) [Address 1] moditat Add to as Cart ex expliquiant. For Your [Key sales, training, Cart Benefit] and other general (2) [City], [Product [State] name] ##### inquiries, contact us via the following Phone: [Product (###) description ###-#### Experum quiduciis atiorest, sum alibus et pero ipient ulpa conestis acerio. Ficit Necti blaces dolor options: harumquibus moloreiciis re rerum eaquatus quam vendit, optatum coreius. Added [Key to Benefit] your cart: offi ciae non earchitam quo coreium que dolorerspit aut la ad este dolent $##.## $##.## Chat [Product Nowname] voluptatenis as molorei ctatet excepturi soluptatus, te nimin re ad qui qui blaut. (2)» $##.## » Call [Headline 3] $##.## $##.## ($##.## per item)» Other Have Us items Call You in your cart: [Item Title] [Item Description [Content Ario bla ea dolum eos» [Content Worldwide Offi ces [Product Ario name] bla ea dolum eos Promo code: [Code [Subhead Contacts name] 3 poris aut laborem eatur sae pro Feedback Help Site Map aliquatatur? Ritat. archictus discitiorum aliquatatur? Ritat. archictus [Product discitiorum description aliquatatur? Necti blaces Ritat. dolor quis di ut int, sini reperibus iunt maximpost EightShapes LLC All rights reserved. Terms & Occaeperibus] Conditions Privacy Statement Occaeperibus Cookie Policy autenienis Trademarks event, of sum EightShapes Occaeperibus LLC mollatem dolor autenienis maionsenis event, maximo] sum Subtotal: $##.## od $##.## que volessitis tur, con remporundit dolor am fuga. Ita nonectem que] am $##.## fuga. Ita nonectem que] arum as alit eturibus.] [Item Title] [Item Description» Learn More» More Details aliquatatur? Ritat. Subtotal: $##.## Occaeperibus] Add to Cart [Item Title] [Item Description [Content Ario bla ea dolum eos aliquatatur? Ritat. archictus discitiorum aliquatatur? Ritat. Occaeperibus] Occaeperibus autenienis event, sum am fuga. Ita nonectem que]» Learn More Training Blog Videos Papers Events Services Downloads About Us Home > Shopping > Shopping Cart Your shopping cart contains 1 item: Your Cart (0) Product Price per item Quantity Total You currently have no items in your shopping cart. $[##.##] $[##.##] [Product description] Promo code: [Code name] Contact EightShapes For sales, training, and other Product general subtotal Update $[##.##] inquiries, contact us via the following Your Cart (1) options: Promotion discount $[##.##]» State tax (estimated) $[##.##]» Call» Have Us Call You $##.## $##.## Shipping (estimated) $[##.##]» Worldwide Offi ces Got a promotion code? Apply your promotion code here to Promo code: [Code name] save on your purchase today: You pay (estimated) $[##.##] Subtotal: $##.## $##.## Apply Contact EightShapes [Location Name] Your Cart (3) [Address 1] [City], [State] ##### Phone: (###) ###-#### You ve applied a promotion code to your purchase: mollatem dolor maionsenis [Promotion maximo] code description] ##% Discount $##.## $##.## About the Shopping Cart Items in your Shopping Cart always refl ect the most recent price displayed on their product pages. Items remain in your Shopping Cart for only this site visit (Why?). (2) $##.## $##.## ($##.## per item) Contacts Promotion Feedback Code Help Site Map Promo code: [Code name] EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC The promotion code you ve applied does not match a current Subtotal: $##.## promotion. $##.## Please reenter the code and try again. Proceed Promotion to Checkout Code [code in error] Apply Recommendations Recently Viewed Items [Product Name]» Details [Product Name]» Details [Product Name]» Details C01v1 Checkout Services Training Downloads Blog Videos Papers Events About Us Privacy Policy Personal Information Sissequat. Uptate dolortion hendrem inci blametu erostis dolor at. Iriurem First Name * verostrud tat velit autpat lumsan ullamet atis essed minis essisit alit Last Name * veliquisit, velesendre magnim ilismod iamcomm olorerat. Address * Ectem volorer aessit vulla faciliq uiscip eu facing eu faciduipit il enisis City * nullam zzrit lut vulput laore consed tat praestis am et lor iurero cor sim adigna State * conumsa ndignim essecte magniscinci bla facil euip eugait lor am velesto del ZIP Code * euis alis dolorerci tat. Ros adipit et, susto diam, vent am acillaorem zzril utetue feum non hent ulluptat. Phone Number * ( ) - Duis alit, veril ullaorem veros nibh et, sent alit venibh eriuscilit at, vel dolor sequat vulla aliquam venis essi Credit History Check (Why do we ask for this information?) exerostie deliquamcon exercid uiscip Consumer Business elenim autpat. Social Security # * - - Date of Birth * MM/DD/YYYY Driver s License # * License State * [State] Shipping Destination Credit History Check (Why do we ask for this information?) Your products will be sent to your credit card billing address for security purposes. Consumer Business Tax ID # * - Method & Price Select Company a shipping Name method * and cost for your order (learn more): 2-day (2 business days) ($##.##) Standard Overnight (1 business day) ($##.##) Billing Credit History Check 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? Destination Enter personal Security information ID * instead (What» is this?) Expiration Address Date * / Shipping Destination: Send to my billing address Send to a another address Method & Price: FREE Overnight Shipping!!! due to the applied promotion code of [promotion code name]. Shipping Destination: Send to my billing address Send to a another address: Contacts Feedback Help Site Map EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC City * «Return to Shopping Cart Submit Your Order State * Address * City * ZIP Code * State * Contacts Feedback Help Site Map EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC ZIP Code * Method & Price: 2-day Shipping for $##.## for all purchases made through the [company name] support program Product Category Product Cart Checkout Method & Price Select a shipping method and cost for your order (learn more): 2-day (2 business days) ($##.##) Standard Overnight (1 business day) ($##.##) Page Variations N/A Components 1. Single Photograph, No Items in Cart 2. Multiple Photos, Items in Cart 1. Empty 2. 1 Item 3. Many Items, with Promo Code applied 1. Standard 2. Business Credit Check, FREE Shipping c1. Contact Us c2. Mini-Cart c1. Contact Us c2. Mini-Cart c3. Billboard c4. Accordion c5. Ratings c5. c6. Credit History Check c7. Shipping Options

12 12 of 27 Page Title Pages

13 13 of Product Category HF01v1 HF04v1 HF02v1 Welcome! Sign in or create an account for eightshapes.com Services Training Downloads Blog Videos Papers Events About Us HF03v1 Search: GO The product category page includes a video spotlight and a range of featured product collections. C02v1 Home > C01v1 [Product category] [Headline] [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.] Learn More [Featured Products] [Featured Products] 1 Your Cart (0) You currently have no items in your shopping cart. 2 Contact EightShapes For sales, training, and other general inquiries, Your Cart contact (1) us via the following options: [Product Chat Now description Necti blaces dolor $##.##» » Subtotal: Call $##.##» Have Us Call You» Worldwide Offi ces New Components The product category page will include the following two new components: Your Cart (0) You currently have no items in your shopping cart. 1. c1. Mini-Cart 2. c2. Contact Us Promo code: [Code name] Contact EightShapes For sales, training, and other general inquiries, Your Cart contact (1) us via the following options: 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.» [Product description Necti blaces dolor» mollatem Call dolor maionsenis maximo]» $##.## Have Us $##.## Call You» Worldwide Offi ces Promo code: [Code name] Subtotal: $##.## $##.## [Product Types] [Secondary Features] [Product Types] N01v3 N01v3 N01v3 [Product Types] Find a Product Contact Category EightShapes For Your sales, Cart training, (2) and other general inquiries, contact us via the following options: Keywords Added to your cart: Chat Now mollatem Submit dolor maionsenis maximo]» $##.## N02v1» Call Downloads» Other Have items Us Call in You your cart:» [Product [Document Worldwide name] name] Offi ces [Product [Document description name] Necti blaces dolor mollatem [Document dolor name] maionsenis maximo] $##.## [Document name] Subtotal: $##.## Contact EightShapes [Location Your Cart Name] (3) [Address 1] [City], [Product [State] name] ##### Phone: [Product (###) description ###-#### Necti blaces dolor $##.## $##.## (2) $##.## $##.## ($##.## per item) Promo code: [Code name] Subtotal: $##.## $##.## HF06v1 Contacts Feedback Help Site Map EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC

14 14 of 27 c1. Contact Us & Click-to-Chat A C Standard (with Click-to-chat) Contact EightShapes For sales, training, and other general inquiries, contact us via the following options: Chat Now» » Call» Have Us Call You» Worldwide Offi ces Pop-in Contact EightShapes For sales, training, and other general inquiries, contact us via the following options: Chat Now» » Call» Have Us Call You» Worldwide Offi ces 8 9 B D Non-interactive (no Click-to-Chat) Contact EightShapes For sales, training, and other general inquiries, contact us via the following options:» » Call» Have Us Call You» Worldwide Offi ces Static Contact EightShapes [Location Name] [Address 1] [City], [State] ##### Phone: (###) ###-#### Variations A. Standard (with Click-to-Chat B. Non-interative (no Click-to-Chat) C. Pop-in D. Static Clikc-to-Chat 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 project s documentation for background and requirements of the program. Elements 1. Header 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. 6. Have Us Call You Link onclick: Navigate to the Have Us Call You page. 7. Worldwide Offices Link onclick: Navigate to the Worldwide Offices page. 8. Close Button onclick: Close the popin window, and return focus to the parent page. 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. 4. Link onclick: Navigate to the Us page. 5. Call Link onclick: Navigate to the Call Us page. Display: Required Recommended Optional Spec Type: Behavior State Editorial Data

15 15 of 27 c2. Minicart Empty Cart 1 Item 2+ Items 1 2 Without Promo Code Your Cart (0) You currently have no items in your shopping cart. Your Cart (1) $##.## Subtotal: $##.## 9 Your Cart (2) Added to your cart: $##.## Other items in your cart: $##.## Subtotal: $##.## 7 With Promo Code Your Cart (0) You currently have no items in your shopping cart. 12 Promo code: [Code name] Your Cart (1) $##.## $##.## Promo code: [Code name] Subtotal: $##.## $##.## Your Cart (3) $##.## $##.## (2) $##.## $##.## ($##.## per item) Promo code: [Code name] Subtotal: $##.## $##.## 13 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. Variations Empty cart: A. Without promo code B. With promo code 1 item in cart: C. Without promo code D. With promo code 2+ items in cart: E: Without promo code (in-page update) F: With promo code Elements 1. 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 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

16 16 of Product HF01v1 HF04v1 HF02v1 Welcome! Sign in or create an account for eightshapes.com Services Training Downloads Blog Videos Papers Events About Us HF03v1 Search: GO The product page includes details across four tabs, highlights key features via a spotlight billboard, and provides calls-to-action. 3 C02v1 Home > [Product category] > C01v1 [Headline 1] [Subhead 1 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.] C12v1x2 Add to Cart (not yet rated) Horrendous! Overview Features Tech Specs Downloads Saved Otate sum ratur sequid ulles mil mint audit [Headline 2] [Key elit rati Benefit] blaborrovit estem imusam as dolles ea volupta eriorro magnis ex eicilla citam, quam, cor aut (3.4 out of 5 stars) [Subhead ipsapiet 2 abo. poris Axim aut laborem veliquis eatur est, od sae quo pro [Key beat Benefit] apicto totatur endipsus. [Content Ario bla ea dolum eos archictus discitiorum aliquatatur? Ritat. quis di ut int, sini reperibus iunt maximpost 4 Uptassitae plaborum rata volore, vendign iminctatem solut pellabor remodis ut Occaeperibus autenienis event, sum et od optassusdae que volessitis et magnis tur, con miligendit, remporundit eveliqui dolor dolupta [Key tusdant Benefit] uribus restium as am fuga. Ita nonectem que] peligendem arum as alit rem eturibus.] explitatia quis in nobis ipsuntes nestruptas incil is quae volore nat» Learn More aborese quasit odipsa venisitas seque occus eum faccus, quidunt landit idiorero moditat Add to as Cart ex expliquiant. Experum quiduciis atiorest, sum alibus et pero ipient ulpa conestis acerio. Ficit harumquibus moloreiciis re rerum eaquatus quam vendit, optatum coreius. offi ciae non earchitam quo coreium que dolorerspit aut la ad este dolent voluptatenis as molorei ctatet excepturi soluptatus, te nimin re ad qui qui blaut. 5 Poor Fair Good Excellent! Your Cart (0) You currently have no items in your shopping cart. 2 Contact EightShapes For sales, training, and other general inquiries, contact us via the following Your Cart (1) options: Chat [Product Nowdescription Necti blaces dolor» $##.## » Call» Subtotal: Have Us $##.## Call You» Worldwide Offi ces [Subtitle] [Content Ario bla ea dolum eos archictus discitiorum aliquatatur?] Contact» EightShapes Learn More For Your [Key sales, training, Cart Benefit] and other general inquiries, contact (2) us via the following options: Added [Key to Benefit] your cart: Chat [Product Nowname] C12v5» $##.## [Headline 3]» Call» Other Have Us items Call You in your cart: [Item Title] [Item Description [Content Ario bla ea dolum eos» [Content Worldwide [Product Ario Offi name] bla ces ea dolum eos HF06v1[Subhead 3 poris aut laborem eatur sae pro Contacts Feedback Help Site Map aliquatatur? Ritat. archictus discitiorum aliquatatur? Ritat. archictus [Product discitiorum description aliquatatur? Necti blaces Ritat. dolor quis di ut int, sini reperibus iunt maximpost EightShapes LLC All rights reserved. Terms & Occaeperibus] Conditions Privacy Statement Occaeperibus Cookie Policy autenienis Trademarks event, of sum EightShapes Occaeperibus LLC mollatem dolor autenienis maionsenis event, maximo] sum od que volessitis tur, con remporundit dolor am fuga. Ita nonectem que] am $##.## fuga. Ita nonectem que] arum as alit eturibus.] [Item Title] [Item Description» Learn More» More Details aliquatatur? Ritat. Subtotal: $##.## Occaeperibus] Add to Cart [Item Title] [Item Description aliquatatur? Ritat. Occaeperibus] [Content Ario bla ea dolum eos archictus discitiorum aliquatatur? Ritat. Occaeperibus autenienis event, sum am fuga. Ita nonectem que]» Learn More 1 New Components The product page includes the following new components: Your Cart (0) You currently have no items in your shopping cart. 1. c1. Minicart 2. c2. Contact Us 3. c3. Billboard Promo code: [Code name] Contact EightShapes For sales, training, and other general inquiries, Your 4. contact Cart c4. Accordion us via the following (1) options: [Product 5. c5. name] Ratings» » Call» Have Us Call You $##.## $##.##» Worldwide Offi ces Promo code: [Code name] 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. Subtotal: $##.## $##.## Contact EightShapes [Location Name] Your Cart (3) [Address 1] [City], [State] ##### Phone: (###) ###-#### $##.## $##.## (2) $##.## $##.## ($##.## per item) Promo code: [Code name] Subtotal: $##.## $##.## Display: Required Recommended Optional Spec Type: Behavior State Editorial Data

17 17 of 27 c3. Billboard [Headline 1] [Subhead 1 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.] A Add to Cart Standard [Headline 2] [Subhead 2 poris aut laborem eatur sae pro quis di ut int, sini reperibus iunt maximpost od que volessitis tur, con remporundit dolor arum as alit eturibus.] Add to Cart 4 5 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. Variations A. Standard B. Two Features C. Feature Carousel Elements 1. 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 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). B Two Features [Headline 3] [Subhead 3 poris aut laborem eatur sae pro quis di ut int, sini reperibus iunt maximpost od que volessitis tur, con remporundit dolor arum as alit eturibus.] Add to Cart 6 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 cart s change in status Stay on the current page C Feature Carousel 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 Optional Spec Type: Behavior State Editorial Data

18 18 of 27 c4. Accordion [Content Ario bla ea dolum eos archictus discitiorum aliquatatur? Ritat. Occaeperibus autenienis event, sum am fuga. Ita nonectem que]» Learn More [Subtitle] [Content Ario bla ea dolum eos archictus discitiorum aliquatatur?]» Learn More [Item Title] [Item Title] [Item Title] [Item Description aliquatatur? Ritat. Occaeperibus] [Item Description aliquatatur? Ritat. Occaeperibus] [Item Description aliquatatur? Ritat. Occaeperibus] [Content Ario bla ea dolum eos archictus discitiorum aliquatatur? Ritat. Occaeperibus autenienis event, sum am fuga. Ita nonectem que]» Learn More [Content Ario bla ea dolum eos archictus discitiorum aliquatatur? Ritat. Occaeperibus autenienis event, sum am fuga. Ita nonectem que]» Learn More [Content Ario bla ea dolum eos archictus discitiorum aliquatatur? Ritat. Occaeperibus autenienis event, sum am fuga. Ita nonectem que]» More Details

19 19 of 27 c5. Ratings Not Yet Rated A (not yet rated) The product rating component enables users to view and apply a rating to the displayed product. Hovered & Levels B Horrendous! Variations Aa. Standard B. Two Features C. Feature Carousel C Poor Elements 1. Rating Label Click & Save D E F G Fair Good Excellent! Saved 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 user s applied rating. Applied Ratings H (3.4 out of 5 stars) 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 20 of Cart 1 HF01v1 HF04v1 HF02v1 Welcome! Sign in or create an account for eightshapes.com Services Training Downloads Blog Videos Papers Events About Us HF03v1 Search: GO The shopping cart summarizes all items that the user intends to purchase, displays aggregate pricing, and leads to checkout C02v1 Home > Shopping > C01v1 Shopping Cart Your shopping cart contains 1 item: Product Price per item Quantity Total $[##.##] $[##.##] [Product description] Product subtotal Update $[##.##] Got a promotion code? Apply your promotion code here to save on your purchase today: Apply You ve applied a promotion code to your purchase: [Promotion code description] ##% Discount 8 Promotion discount $[##.##] State tax (estimated) $[##.##] Shipping (estimated) $[##.##] You pay (estimated) $[##.##] About the Shopping Cart Items in your Shopping Cart always refl ect the most recent price displayed on their product pages. Items remain in your Shopping Cart for only this site visit (Why?). HF06v1 13 Contacts Promotion Feedback Code Help Site Map EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC The promotion code you ve applied does not match a current promotion. Please reenter the code and try again. 10 N01v3 N01v2 Recommendations [Product Name]» Details [Product Name]» Details [Product Name]» Details Recently Viewed Items Purpose 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. 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 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. Unchanged Components 1. Header 2. Breadcrumbs 3. Page Title 4. Page Message 5. Cart Table Header 6. Cart Item(s) 7. Cart Subtotal & Update Updated Component 8. Cart Summary New Component 9. Cart Promo Codes Unchanged Components (cont d) 10. About the Shopping Cart 11. Recommendations 12. Recently Viewed Items 13. Footer [code in error] Apply Display: Required Recommended Optional Spec Type: Behavior State Editorial Data

21 21 of 27 3.v1. Cart, Empty 3.v2. Cart, 2+ Items HF01v1 HF02v1 Welcome! Sign in or create an account for eightshapes.com HF03v1 Search: GO HF01v1 HF02v1 Welcome! Sign in or create an account for eightshapes.com HF03v1 Search: GO HF04v1 HF04v1 Services Training Downloads Blog Videos Papers Events About Us Services Training Downloads Blog Videos Papers Events About Us C02v1 Home > Shopping > C01v1 Shopping Cart Your shopping cart contains no items. Add an item by clicking the Add to Cart button on any of your product displays. To find a product, start shopping in one of our categories:» [Product category]» [Product category]» [Product category]» [Product category]» [Product category] Got a promotion code? Apply your promotion code here to save on your purchase today: Apply HF06v1 About the Shopping Cart Items in your Shopping Cart always refl ect the most recent price displayed on their product pages. Items remain in your Shopping Cart for only this site visit (Why?). Contacts You ve applied Feedback a promotion Help Site code Map to your purchase: EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC [Promotion code description] ##% Discount N01v3 N01v2 Recommendations [Product Name]» Details [Product Name]» Details [Product Name]» Details Recently Viewed Items C02v1 Home > Shopping > C01v1 Shopping Cart Your shopping cart contains 1 item: Product Price per item Quantity Total $[##.##] 2 $[##.##] [Product description] $[##.##] $[##.##] 1 $[##.##] $[##.##] [Product description] $[##.##] $[##.##] 1 $[##.##] $[##.##] [Product description] Product subtotal Update $[##.##] Got a promotion code? Apply your promotion code here to save on your purchase today: Apply Promotion discount $[##.##] State tax (estimated) $[##.##] Shipping (estimated) $[##.##] You pay (estimated) $[##.##] N01v3 Recommendations [Product Name]» Details [Product Name]» Details [Product Name]» Details N01v2 Recently Viewed Items The promotion code you ve applied does not match a current promotion. Please reenter the code and try again. [code in error] Apply You ve applied a promotion code to your purchase: [Promotion code description] ##% Discount About the Shopping Cart Items in your Shopping Cart always refl ect the most recent price displayed on their product pages. Items remain in your Shopping Cart for only this site visit (Why?). HF06v1 Contacts Promotion Feedback Code Help Site Map EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC The promotion code you ve applied does not match a current promotion. Please reenter the code and try again. [code in error] Apply

22 22 of 27 c6. Promo Code Got a promotion code? Apply your promotion code here to save on your purchase today: 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 A Default (no code applied) You ve applied a promotion code to your purchase: Elements 1. Header 2. Introduction 3. Text box Limit entry to no more than 10 characters B C [Promotion code description] Applied code ##% Discount The promotion code you ve applied does not match a current promotion. Please reenter the code and try again. [code in error] Apply Error 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 23 of Checkout 1 HF01v1 HF04v1 C01v1 Checkout HF02v1 Welcome! Sign in or create an account for eightshapes.com Services Training Downloads Blog Videos Papers Events About Us Personal Information First Name * Last Name * Address * City * State * ZIP Code * Phone Number * ( ) - Credit History Check (Why do we ask for this information?) C12v1 Consumer Business HF03v1 Search: GO Privacy Policy 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. 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. 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. The checkout page enables a customer to provide personal and billing information to purchase one or more products. 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. Social Security # * - - Date of Birth * MM/DD/YYYY Driver s License # * License State * [State] C12v5 2 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 Tax ID # * - Method & Price Select Company a shipping Name method * and cost for your order (learn more): 2-day (2 business days) ($##.##) C12v5 Standard Overnight (1 business day) ($##.##) Shipping Destination: Send to my billing address Send to a another address Method & Price: FREE Overnight Shipping!!! due to the applied promotion code of [promotion code name]. Billing Credit History Check 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? Destination Enter personal Security information ID * instead (What» is this?) Expiration Address Date * / City * «Return to Shopping Cart Submit Your Order State * Shipping Destination: Send to my billing address Send to a another address: Address * City * ZIP Code * State * Contacts Feedback Help Site Map EightShapes LLC All rights reserved. Terms & Conditions Privacy Statement Cookie Policy Trademarks of EightShapes LLC ZIP Code * HF06v1 Method & Price: 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): 2-day (2 business days) ($##.##) Standard Overnight (1 business day) ($##.##)

24 24 of 27 c7. Credit History Check A 7 8 Credit History Check (Why do we ask for this information?) C12v1 Consumer Business Social Security # * - - Date of Birth * MM/DD/YYYY Driver s License # * License State * [State] C12v5 Consumer option Credit History Check (Why do we ask for this information?) C12v1 C12v5 Consumer Business Tax ID # * - Company Name * 11 The credit history check enables the business to validate that a customer is credit worthy to make ongoing payments for a subscription. Variations A. Consumer option B. Business option C. Business fixed Elements 1. Header 2. Tabs 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 9 10 B Business option Credit History Check Since you are purchasing these products for business use, your business will be liable for this purchase and no credit history check is required. Are you purchasing for personal use instead? Enter personal information instead» 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 figure A). C Business (fixed) 11. Why? link Î Î onclick: Display W02v3 Information Balloon within basic description of why credit history information is collected

25 25 of 27 c8. Shipping A Shipping Destination Your products will be sent to your credit card billing address for security purposes. Method & Price Select a shipping method and cost for your order (learn more): 2-day (2 business days) ($##.##) Standard Overnight (1 business day) ($##.##) Destination Fixed, Method Options Shipping Destination Address * City * State * ZIP Code * Alternative shipping options are Shipping personalized by previous product selection, experience context, and Destination: business rules based on cart composition. Send to my billing address Destination Send to a another Options address 1. Constrained (see Figure A) The cart product combination requires Method that & Price: the products are sent to the FREE personal Overnight information Shipping!!! that serves as the due to billing the applied address promotion code of [promotion code name]. 2. Custom (see Figure B) 3. Options (see Figures C & D) User can select to reuse billing address or enter an alternative address Shipping Method Options Destination: 1. Send FREE to my (see billing Figure address D) Send to a another address: 2. Fixed (see Figure B) 3. Options Address (see* Figure A) City * State * ZIP Code * B Method & Price: 2-day Shipping for $##.## for all purchases made through the [company name] support program Destination Entry, Method Fixed Method & Price Select a shipping method and cost for your order (learn more): 2-day (2 business days) ($##.##) Standard Overnight (1 business day) ($##.##)

26 26 of 27 Shipping, cont d Shipping Destination: Send to my billing address Send to a another address Method & Price: FREE Overnight Shipping!!! due to the applied promotion code of [promotion code name]. C Destination Options, FREE Shipping Shipping Destination: Send to my billing address Send to a another address: Address * City * State * ZIP Code * Method & Price Select a shipping method and cost for your order (learn more): 2-day (2 business days) ($##.##) Standard Overnight (1 business day) ($##.##) D Destination Options, Method Options

27 27 of 27 Error Messaging HF01v1 HF04v1 C01v1 Checkout Credit History Check (Why do we ask for this information?) C12v1 Consumer Business Social Security # * - - Conventions Search: HF02v1 Welcome! Sign in or create an account The for error eightshapes.com messaging presentation rules for the Checkout page do not change GO with this release. New Messages Services Training Downloads Blog Videos Papers Events About Us The following additional validations Privacy are to be Policy added based on new data collection: There is a problem with your address submission. Please fill in all required ID Event Condition Sissequat. Uptate dolortion Message hendrem address fields. inci blametu erostis dolor at. Iriurem 1 onblur Social Security Number verostrud (any field) tat contains velit autpat Social lumsan security number contains a a non numeric character ullamet atis essed minis nonnumeric essisit alit character Personal Information 2 onblur Date of birth is nonempty veliquisit, and velesendre not magnim Date of birth ilismod is not formatted correctly formatted as MM/DD/YYYY iamcomm olorerat. First Name * First name is required 3 onblur Date of birth is less than 18 years from Date of birth reflects that you are not Ectem volorer aessit vulla faciliq today s date old enough to purchase a product from Last Name * Curtis uiscip eu facing eu faciduipit il enisis this website nullam zzrit lut vulput laore consed tat Address * 123 Elm Street 4 onblur Tax ID (either field) praestis nonempty am and et lor iurero Tax cor ID sim contains adigna a nonnumeric character contains a nonnumeric conumsa character ndignim essecte magniscinci bla facil euip eugait lor am velesto del A Checkout page with error message 5 onblur ZIP Code is nonempty and is not a five digit ZIP code is not formatted correctly City * Washington numeric string euis alis dolorerci tat. Ros adipit et, susto diam, vent am acillaorem zzril 6 onsubmit Social security number utetue is empty feum non hent ulluptat. Social security number is required State * District of Columbia 7 onsubmit Date of birth is empty Date of Birth is required ZIP Code * onsubmit Duis alit, veril ullaorem veros nibh Drivers License Number is empty Drivers Licence Number is required et, sent alit venibh eriuscilit at, vel Phone Number * ( 212 ) onsubmit Tax ID is empty dolor sequat vulla aliquam Tax ID venis required essi 10 onsubmit Company name is empty exerostie deliquamcon exercid Company uiscip Name is required elenim autpat. 11 onsubmit Custom address is selected and address is Address is required empty HF03v1 12 onsubmit Custom address is selected and City is empty 13 onsubmit Custom address is selected and ZIP Code is empty City is required ZIP Code is required Date of Birth * MM/DD/YYYY C12v5 Driver s License # * License State * [State] Shipping Shipping