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

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

 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

3.4 Fonts

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

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

 POSITIVE BUTTON

• Checkout: the “Continue” button

 NEGATIVE BUTTON

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

 UPDATE BUTTON

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

 DELETE BUTTON

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

 SUBMIT ORDER

• Checkout: primary “Submit Order” button

 PDP BUTTONS

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

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

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

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

 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

 Implementation Notes:

• Admin -> Content -> Site Info

• Impacts the content of SI_HEADER_CONTENT

3.11 Mailing List

 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

 Implementation Notes:

• Admin -> Content -> Site Info

• Impacts the content of SI_FOOTER_CONTENT

3.13 Static Pages

 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

4.2 Images: Height and Width

 The following parameters are used to size all images

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

5.2 Category List Page (CLP)

5.3 UI: Category List Page (CLP)

* Implemented in DIV-Sequencing

5.4 Product List Page (PLP)

 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)

* Implemented in DIV-Sequencing

5.6 Product Detail Page (PDP)

 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)

• Implemented in DIV-Sequencing

5.8 Facets

 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

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

 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

 Shipping / Delivery Options

 Credit Card Gateway

 Credit Card Configuration

7.2 Promotions

7.3 Shipping Charges

 Consider advanced features

• CHECKOUT_CART_DEFAULT_SHIP_METHOD
• CHECKOUT_REMOVE_SHIP_COST_EST

7.4 Taxes

7.5 Credit Cards

 Used in the final check-out page for payment

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

 Implementation Notes:

• Admin -> Lookup Data -> Credit Cards

7.6 Store Pickup

8 Ratings and Reviews

8.1 Setup

8.2 Write Review