BF Guide Implementation Discovery

bigfish

BF Guide Implementation Discovery.doc

Last Updated: 16-Apr-2013

TABLE OF CONTENTS

1Modification History

2Introduction

2.1Purpose

2.2General Guidelines

3User Interface Definitions

3.1Assumptions

3.2Site Width

3.3Colors

3.4Fonts

3.5Basic Styles

3.6Other Visual Assets

3.7Social Media

3.8Site Header

3.9Shopping Cart

3.10Site Search

3.11Mailing List

3.12Site Footer

3.13Static Pages

4Images Sizes, Scaling and Ratios

4.1Product Images Explained

4.2Images: Height and Width

5Categories and Products

5.1Category and Product Facets

5.2Category List Page (CLP)

5.3UI: Category List Page (CLP)

5.4Product List Page (PLP)

5.5UI: Product List Page (PLP)

5.6Product Detail Page (PDP)

5.7UI: Product Detail Page (PDP)

5.8Facets

5.9Site Search

6My Account Considerations

6.1Standard User Profile

6.2Optional User Profile

7Check Out Considerations

7.1General

7.2Promotions

7.3Shipping Charges

7.4Taxes

7.5Credit Cards

7.6Store Pickup

8Ratings and Reviews

8.1Setup

8.2Write Review

8.3Review Ages

8.4Review Captions

9Other Configurations

9.1SEO

9.2Formats

9.3Countries

9.4Currency

9.5Contact Us Reasons

9.6Titles

9.7Store Locator

9.8Inventory

9.9Password Strength

10System Parameters: Client to Complete

10.1How to Implement

10.2Email

10.3Google Analytics

11System Parameters: Technical

11.1Technical

11.2Sitemap

12Labels and Captions

12.1How to Implement

12.2Client Specific

13Email

13.1Notes

13.2Email Settings

13.3Modifying Email Configuration and Content

13.4Registration Notification (New Customer)

13.5Update Customer Information Notification

13.6Forgot Password Reminder Notification

13.7Order Confirmation Notification

13.8Order Change Notification (Status Changed)

13.9Order Complete (Status Changed)

13.10Abandoned Cart Notification

13.11Review Product Notification

13.12Request Catalog

13.13Contact Us Notification

13.14Mailing List Notification

13.15Schedule Job Notification

14Text Messaging

14.1Support Text Messaging?

14.2Clickatell Settings

14.3Text Message Content

15Mobile Consideration

16Div Sequencing

16.1Sequenced Pages

17Technical Configuration

17.1Product Store

17.2Product Store Catalog

17.3Product Store Website

1 Modification History

Date / Who / Comments
6-Mar-13 / Solveda / Initial
16-Apr-13 / Solveda / Added “Basic Styles” section for UI. Added section for “Text Messaging”

2 Introduction

2.1 Purpose

 This document is intended to manage the initial UI Discovery process

 By following the steps outlined in this document it will be significantly clearer and easier to ramp-up quickly and get your project started and on-track from the initial stages

2.2 General Guidelines

 Where appropriate there is a column named “Client Response”, this is the response to the specific requirement

 The column “BF Guide” provides either a textual description or possible responses

 Responses can also include comments, either for the specific response, or as a general note within the section

3 User Interface Definitions

3.1 Assumptions

 It is assumed that these specifications will be supplemented with additional UI assets:

• Visual Mock-ups, prepared either by Solveda or the client
• URLs to sites that are contain features or layouts that are preferred
• Any other visual asset that will assist in defining the visual requirements

 It is further assumed that the specifications in this document will dictate layouts and designs unless specifically noted:

• For example: if a URL is provided noting some preference and the site indicated has a width of 1000 pixels – the response in the “Site Width” section will override any such details

3.2 Site Width

Choose One: / Select One / Comment
960 pixels, recommended
1024 pixels
Other, please specify

 Note that the Site Width is used throughout the site

 It will impact decisions on how content spots are displayed within your site:

• Home Page:

• BigFish simply lays out Home Page spots one after the other and allows the browser to “wrap” the imagery if it will exceed the Site Width
• So, if your Site Width is set to 960px, you may have any number of spots but the cumulative width should always be in multiples of 960px
• Example: two images with a width of 480 px each; three images with a width of 320px each, etc.
• When the images wrap, the next set should also have a cumulative width in multiples of 960px
• Example: four images with a width of 480 px each would display two images in the first row, and two images in the second row

• Category List (CLP) and Product List Page (PLP) spots

3.3 Colors

Colors to Include / RGB / Comment
Primary
Secondary
Seconday
Secondary
Colors to Avoid, if any / RGB / Comment

3.4 Fonts

Fonts to Include / Font Face / Size / Comment
Primary
Secondary
Seconday
Secondary
TIP / Fonts should limited to no more then three types. One primary font will be used site wide and extra fonts may be used for occasional areas to attract more focus.
Please detail what you find appealing in any examples you provide.

3.5 Basic Styles

 Guidelines:

• For all button visuals please modify the Font, Font Size, and Colors as you want the button to appear within your implementation

• Alternatively, please indicate if additional UI assets, existing site, reference / competitors sites, wire-frames or mock-ups illustrate button styling

• Override the example responses with the required styling

3.5.1 Headings

Styling Attribute / Client Response
<H1> Heading / Example of the <H1> Primary Heading
<H2> Heading / Example of the <H2> Primary Heading
<H3> Heading / Example of the <H3> Primary Heading
<H4> Heading / Example of the <H4> Primary Heading
<H5> Heading / Only if Required
<H6> Heading / Only if Required

3.5.2 Buttons

 ACTION BUTTON

• Checkout: add coupon code
• My Account: add new address;
• My Account: “Continue” buttons to save account changes
• Registration: Sign in
• Contact-Us: submitting a request
• Request Catalog: submitting a request

Normal / Hover Over
Action / Action

 POSITIVE BUTTON

• Checkout: the “Continue” button

Normal / Hover Over
Positive / Positive

 NEGATIVE BUTTON

• Checkout: the “Back” button to return to the prior screen
• My Account: any “Back” button, to effectively cancel the change

Normal / Hover Over
Negative / Negative

 UPDATE BUTTON

• Checkout: updating Qty ordered in Cart
• My Account: updating an address

Normal / Hover Over
Update / Update

 DELETE BUTTON

• Checkout: removing an Item from the Cart
• Delete – delete-address; remove-item-in-cart

Normal / Hover Over
Delete / Delete

 SUBMIT ORDER

• Checkout: primary “Submit Order” button

Normal / Hover Over
Submit Order / Submit Order

 PDP BUTTONS

• Add To Cart: active and inactive versions
• Add to Wishlist: active and inactive versions

Active / Inactive
Add to Cart / Add to Cart
Active / Inactive
Add to Wishlist / Add to Wishlist

3.6 Other Visual Assets

 Please provide any of the following assets to help in designing your site:

• Logos, existing or new
• Letterhead
• Online Examples, either from your existing site or another site. Consider things you like and dislike

3.7 Social Media

To include on every page / Client Response / BF Guide / Comment
Facebook? / Yes or No
Twitter? / Yes or No
Dig? / Yes or No
Other, specify / Yes or No

3.8 Site Header

 This is the main set of links that run across the top of the page

 There are many out-of-the-box options already available

 Remember that you can include any number of external links, or links to static pages

 Indicate the sequence running from left to right

Standard / Seq / Include? / Caption
(if diff) / Comment
Home
Contact Us
Request Catalog
Store Locator
Wish List
My Account
Sign In
External and Static Pages (Caption) / Seq / URL (indicate full URL, or “static page”)

3.9 Shopping Cart

 This is the imagery and text that will appear in every page, typically in the “header” section, showing a summary of what’s in the cart

 The Lightbox is a gadget that can be implemented, on hover, it will display a drop-down of the cart items

Option / Client Response / BF Guide
Included? / Yes or No
Label / “Cart”, “Bag” or something else?
Units? / “Items”, “Units” or something else?
Show number of items in cart? / Yes or no
Show monetary amount in cart? / Yes or no
Lightbox? / Yes or No

 Implementation Notes:

• Admin -> Content -> Site Info

• Impacts the content of SI_HEADER_CONTENT

• The Lightbox is implemented in the CSS files

3.10 Site Search

Option / Client Response / BF Guide
Included? / Yes or No
Default text / Example: What are you looking for?
Button / Indicate text button, magnifying glass, or other

 Implementation Notes:

• Admin -> Content -> Site Info

• Impacts the content of SI_HEADER_CONTENT

3.11 Mailing List

Option / Client Response / BF Guide
Included? / Yes or No
Button, or prompt for email? / See GMH live for an example

 Implementation Notes:

• Admin -> Content -> Site Info
• Impacts the content of SI_MAILING_LIST

3.12 Site Footer

 The Site Footer is typically a columnar content spot that reinforces the products for sale, and includes links to Static pages

Caption / URL

 Implementation Notes:

• Admin -> Content -> Site Info

• Impacts the content of SI_FOOTER_CONTENT

3.13 Static Pages

Page / Comment
Privacy Policy
Delivery Policy
Refund Policy
Terms and Conditions
Warranty Info
FAQ
Careers

 This list will act as a reminder of the static pages that need to be actioned as content in the Admin Module

 Use the comments to indicate if the content is available on the existing site

 Implementation Notes:

• Admin -> Content -> Static Pages

4 Images Sizes, Scaling and Ratios

4.1 Product Images Explained

 Any BigFish solution will have many product images at both the Category and Product level

 It is very important to note that images are sized (height and width) using very specific parameters, see below.

 Equally important is to understand how original images may be resized based on these parameters, and how the “scaling” will impact the quality of the image when displayed in your site

 For example:

• Assume the standard default image on the main Product Detail Page (PDP) has a height of 400 pixels and a width of 300 pixels
• The ideal image size would be exactly 400 * 300
• However, if this is not available for any reason then images must be sized to the same “scale”
• In this scale there is a scale of 4:3, so an image with a height of 500 pixels and a width of 375 pixels will still look great because if has the same 4:3 scale

TIP / A scaling of 4:3 happens to be very convenient because most digital cameras will take photographs using this scale. So, if in doubt this is probably a great place to start!

4.2 Images: Height and Width

 The following parameters are used to size all images

Parameter / Description / Value
IMG_SIZE_PLP_H / Height of PLP Image
IMG_SIZE_PLP_W / Width of PLP Image
IMG_SIZE_PDP_REG_H / Height of PDP Image
IMG_SIZE_PDP_REG_W / Width of PDP Image
IMG_SIZE_PDP_THUMB_H / Height of PDP Additional Image
IMG_SIZE_PDP_THUMB_W / Width of PDP Additional Image
IMG_SIZE_PDP_POPUP_H / Height of PDP Popup Image
IMG_SIZE_PDP_POPUP_W / Width of PDP Popup Image
IMG_SIZE_CART_H / Height of Shopping Cart Image
IMG_SIZE_CART_W / Width of Shopping Cart Image
IMG_SIZE_WISHLIST_H / Height of Wishlist Image
IMG_SIZE_WISHLIST_W / Width of Wishlist Image
IMG_SIZE_PLP_CAT_H / Height of PLP Category Image
IMG_SIZE_PLP_CAT_W / Width of PLP Category Image
IMG_SIZE_REVIEW_H / Height of Submit Review Image
IMG_SIZE_REVIEW_W / Width of Submit Review Image
IMG_SIZE_COMPLEMENT_H / Height of the PDP Complement Image
IMG_SIZE_COMPLEMENT_W / Width of PDP Complement Image
IMG_SIZE_ACCESSORY_H / Height of the PDP Accessory Image
IMG_SIZE_ACCESSORY_W / Width of PDP Accessory Image
IMG_SIZE_RECENT_H / Height of PDP Recent Image
IMG_SIZE_RECENT_W / Width of PDP Recent Image
IMG_SIZE_PDP_VIDEO_H / Height of PDP Video
IMG_SIZE_PDP_VIDEO_W / Width of PDP Video
IMG_SIZE_PDP_VIDEO_360_H / Height of PDP Video 360
IMG_SIZE_PDP_VIDEO_360_W / Width of PDP Video 360
IMG_SIZE_PLP_SWATCH_H / Height of PLP Swatch, leave blank or zero if no resizing should take place.
IMG_SIZE_PLP_SWATCH_W / Height of PLP Swatch, leave blank or zero if no resizing should take place.
IMG_SIZE_PDP_SWATCH_H / Height of PDP Swatch, leave blank or zero if no resizing should take place.
IMG_SIZE_PDP_SWATCH_W / Width of PDP Swatch, leave blank or zero if no resizing should take place.
IMG_SIZE_PROF_MFG_H / Height of Manufacturer Profile Logo Image
IMG_SIZE_PROF_MFG_W / Width of Manufacturer Profile Logo Image
IMG_SIZE_PDP_MFG_H / Height of Manufacturer image that can be placed on Quicklook or PDP
IMG_SIZE_PDP_MFG_W / Width of Manufacturer image that can be placed on Quicklook or PDP

5 Categories and Products

5.1 Category and Product Facets

 Facets are built via the “Features” that describe your products

 Features can be “selectable”.

• These are features that change the exact SKU being purchased, like “Size and “Color”

 Features can also be “descriptive”.

• These features do not change the SKU being selected but rather describe the product in more specific detail, such as “Material” or “Brand”.
• “Descriptive” features automatically become eligible to become facets, rather than descriptive text

Option / Client Response / BF Guide
Show Facet Result Counts / Yes or No
Use collapse / expand feature / Yes or No

5.2 Category List Page (CLP)

Option / Client Response / BF Guide
# Categories per Row / Number

5.3 UI: Category List Page (CLP)

Option / Client Response / BF Guide
List CLP Attributes (UI) / Image
Category Name

* Implemented in DIV-Sequencing

5.4 Product List Page (PLP)

Option / Client Response / BF Guide / Technical Notes
# Products per Row / number / CSS
# Products per Page / Number / CSS, PLP_NUM_ITEMS_PER_PAGE
Quicklook
Active? / Yes or No / QUICKLOOK_ACTIVE
Delay in milliseconds, before Quicklook prompt image is displayed / Number / QUICK_DELAY_MS
Allow inline zoom feature? / Yes or No / QUICKLOOK_IMG_ZOOM_ACTIVE_FLAG
Sort Options / PLP_AVAILABLE_SORT
Best Selling / Yes or No
Highest Rated / Yes or No
Price High to Low / Yes or No
Price Low to High / Yes or No
Most Viewed / Yes or No, Page views
Most Popular (??) / Yes or No, Based on Sales.
Name Ascending
Name Descending
Default Sort Option / Pick one from above / PLP_DEFAULT_SORT
Include “Show All” / Yes or no

 Advanced Options, to be discussed if appropriate

• PLP_FACET_GROUP_VARIANT_MATCH
• PLP_FACET_GROUP_VARIANT_PDP_MATCH
• PLP_FACET_GROUP_VARIANT_SWATCH_IMG
• CLP_HIDE_SUB_CATEGORIES

5.5 UI: Product List Page (PLP)

Option / Client Response / BF Guide
List PLP Attributes (UI) / Image
Product Name
List Price
Online Price
Rating Stars
% Savings

* Implemented in DIV-Sequencing

5.6 Product Detail Page (PDP)

Option / Client Response / BF Guide / Technical Notes
Min Qty for “Add to Cart” / number / PDP_QTY_MIN
Max Qty for “Add to Cart” / Number / PDP_QTY_MAX
WishList? / Yes or No / PDP_WISHLIST_ACTIVE_FLAG
Inline Image Zoom for “see larger image” / Inline zoom, see larger, or none / PDP_IMG_ZOOM_ACTIVE_FLAG
Display “Recently Viewed” / Yes or No / PDP_RECENT_VIEW_MAX, CSS styling and DIV-Sequencing
Accessories? / Yes or No / Discussion required, CSS styling, DIV sequencing and data load implications
Complements? / Yes or No / Discussion required, CSS styling, DIV sequencing and data load implications
Money threshold, show LIST price only if savings are equal or greater than … / Number / PRODUCT_MONEY_THRESHOLD
Pct threshold, show LIST price only if savings are equal or greater than … / Number / PRODUCT_PCT_THRESHOLD

 Advanced Options, to be discussed if appropriate

• PDP_FACET_GROUP_VARIANT_SWATCH_IMG
• PDP_FACET_GROUP_VARIANT_MATCH
• PDP_ALT_IMG_SCROLLER_ACTIVE
• PDP_ALT_IMG_SCROLLER_VERTICAL
• PDP_ALT_IMG_SCROLLER_IMAGES

5.7 UI: Product Detail Page (PDP)

Option / Client Response / BF Guide
List PLP Attributes (UI) / Image
Product Name
List Price
Online Price
Rating Stars
% Savings
Long Description
Ingredients
Reviews
Manufacturer

• Implemented in DIV-Sequencing

5.8 Facets

Parameter / Description / Client Response / BF Guide
FACET_VALUE_MIN / Number of facet values to show; see less/More / e.g. 5
FACET_VALUE_MAX / Max Number of facet values to show / e.g. 99
FACET_CAT_ON_PLP / Display categories as a facet group on the PLP page true or false / e.g. TRUE
FACET_SHOW_ITEM_CNT / Determines whether the facets show the number of items in parenthesis / e.g. TRUE
FACET_PRICE_ROUND / Control the number of decimal places to be displayed in the listed prices / e.g. 0

 Advanced Options, to be discussed if appropriate

• FACET_GROUP_VARIANT_MATCH

 Implementation Notes:

• Site level defaults defined above
• Override by category in Admin -> Manage SOLR Config

5.9 Site Search

Parameter / Description / Client Response / BF Guide
SEARCH_DEFAULT_TEXT / The default value displayed in the Search entry box. For example: What are you looking? / E.g. What are you looking for?
SEARCH_NO_ENTRY_ERROR / The error message text to be displayed when no search criteria is entered / e.g. Please enter a search phrase in the text box and click on the Search icon.
SEARCH_FACET_GROUP_INCLUDE / The comma separated list of Facet Groups that should be included after a Site Search. Parameter FACET_CAT_ON_PLP will control if the Shop-by-Category is displayed. Parameter. / e.g. COLOR, SIZE

6 My Account Considerations

6.1 Standard User Profile

 All BigFish implementations have a standard Registration process that will prompt for certain attributes

 See spec “BF Customer Account Management” for complete details

6.2 Optional User Profile

Option / Description / Client Response Include? Yes/No
Title / Drop-down containing titles
Gender / Drop-Down containing Male or Female
Date of Birth
(Short Form, US Format) / Day and Month only
Date of Birth
(Long Form, US Format) / Day, Month and Year
Date of Birth
(Short Form, UK Format) / Day and Month only
Date of Birth
(Long Form, UK Format) / Day, Month and Year

 Technical:

• Inclusion of these attributes is managed via the DIV-Sequencing strategy
• Titles, if included, are maintained in Admin -> Tools -> Lookup Data

7 Check Out Considerations

7.1 General

Option / Client Response / BF Guide / Technical
Guest checkout allowed? / Yes or No / CHECKOUT_AS_GUEST
Single page or multi-step checkout? / Single or Multi / CHECKOUT_SINGLE_PAGE
Checkout Options
Credit Card / Yes or No
Paypal / Yes or No / CHECKOUT_ALLOW_PAYPAL
Google Checkout / Yes or No / CHECKOUT_ALLOW_GOOGLE
EBS / Yes or No / CHECKOUT_ALLOW_EBS
Cash on Delivery / CHECKOUT_ALLOW_COD
Keep CC details on file for use for a subsequent purchase? / Yes or No / CHECKOUT_KEEP_PAYMENT_METHODS
When customer is viewing the cart, the “continue” button can direct to the Home Page, last Product or last Category page / Home, Product or Category / CHECKOUT_CONTINUE_SHOPPING_LINK

 Shipping / Delivery Options

 Credit Card Gateway

 Credit Card Configuration

7.2 Promotions

Option / Client Response / BF Guide / Technical
Offer Promo Code entry on View Cart page? / Yes or No / DIV Sequencing
Offer Promo Code entry on Order Summary / Yes or No / DIV Sequencing
Only allow ONE Promo Code to be applied? / Yes or No / CHECKOUT_PROMO_MANUAL_ONE_ONLY

7.3 Shipping Charges

Option / Client Response / BF Guide / Technical
Do Shipping Charges apply? / Yes or No / CHECKOUT_DELIVERY
Carrier / Method / Sequence / Flat Price
e.g. USPS / Ground (5-9 days) / 01 / $5.95
e.g. USPS / Express (1-4 days) / 02 / $7.95

 Consider advanced features

• CHECKOUT_CART_DEFAULT_SHIP_METHOD
• CHECKOUT_REMOVE_SHIP_COST_EST

7.4 Taxes

Option / Client Response / BF Guide / Technical
Taxes included in price and should not be displayed? / Yes or No / CHECKOUT_SUPPRESS_TAX_IF_ZERO
US State Taxes / List states where Tax applies / Setup Tax rates as appropriate

7.5 Credit Cards

 Used in the final check-out page for payment

 Maintained in Admin Module -> Lookup Data -> Credit Cards

Standard / Seq / Include? / Caption
(if diff) / Comment
American Express / 01
Discover / 02
MasterCard / 03
Visa / 04
Carte Blanche
Diners Club
En Route
JCB
Solo
Switch
Universal Air Travel
Visa Electron
Custom / Seq / Comment
Option / Client Response / BF Guide / Technical
Require verification code? / Yes or No / CHECKOUT_CC_VERIFICATION_REQ
Checkout Options
Credit Card / Yes or No
Paypal / Yes or No / CHECKOUT_ALLOW_PAYPAL
Google Checkout / Yes or No / CHECKOUT_ALLOW_GOOGLE
EBS / Yes or No / CHECKOUT_ALLOW_EBS
Cash on Delivery / Yes or No / CHECKOUT_ALLOW_COD

 Implementation Notes:

• Admin -> Lookup Data -> Credit Cards

7.6 Store Pickup

Option / Client Response / BF Guide / Technical
Store Pickup Active? / Yes or No / CHECKOUT_STORE_PICKUP
Checkout Payment Required? / Yes or No / CHECKOUT_STORE_CC_REQ

8 Ratings and Reviews

8.1 Setup

Option / Client Response / BF Guide / Technical Notes
Ratings and Reviews Active? / Yes or No / REVIEW_METHOD
Auto approve reviews? / Yes or No / REVIEW_AUTO_APPROVE
Show on PLP / Yes or No / REVIEW_SHOW_ON_PLP, CSS Styling and DIV-Sequencing
Send Review prompt email after items have shipped? / Yes or No / REVIEW_SEND_EMAIL
#days after shipped-date / Number / EMAIL_REVIEW_SHP_DYS
Review as Guest or force customer to login? / Guest or Login / REVIEW_AS_GUEST

8.2 Write Review