Bluefin Functional Specification for Bluefin’s Modules September 23, 2013

— Pancentric Digital // Functional Specification - Bluefin

1

– Contents Introduction ................................................................................................................................................................................ 3 Main Navigation / Header .......................................................................................................................................................... 4 Breadcrumb trail ......................................................................................................................................................................... 4 Hero Carousel ............................................................................................................................................................................. 5 Product Search ............................................................................................................................................................................ 5 News Module – V1 ...................................................................................................................................................................... 6 Related Products ......................................................................................................................................................................... 7 Meet the team ............................................................................................................................................................................. 8 Related Links .............................................................................................................................................................................. 9 Current Vacancies ....................................................................................................................................................................... 9 Featured Facts ............................................................................................................................................................................ 11 Testimonials ............................................................................................................................................................................... 11 Product Links ............................................................................................................................................................................. 11 Featured Content .......................................................................................................................................................................12 Latest News – V2 .......................................................................................................................................................................12 Content Accordion .....................................................................................................................................................................13 Category Landing Header ..........................................................................................................................................................13 Downloads ................................................................................................................................................................................. 14 Get a quote v1 Call to action ..................................................................................................................................................... 14 Google Directions (tbc) ............................................................................................................................................................. 14 Content Share.............................................................................................................................................................................15 Featured News Item ...................................................................................................................................................................15 News Preview .............................................................................................................................................................................15 Job Page – Preview Job ............................................................................................................................................................ 16 Call us today .............................................................................................................................................................................. 16 Product comparison ................................................................................................................................................................... 17 Request Call Back....................................................................................................................................................................... 17 Nav List ..................................................................................................................................................................................... 18

— Pancentric Digital // Functional Specification - Bluefin

2

Introduction The purpose of this functional specification is to in detail explain the functionality of each module that could be used throughout the sites. This document should be used throughout the build process and aims to answer the basic questions of the expected functionality of all the modules throughout the sites. This also provides key stakeholders with a guide as to what they can expect the functionality of each of the modules to offer.

— Pancentric Digital // Functional Specification - Bluefin

3

Main Navigation / Header

The main navigation / header consists of: 

Site Logo



Level 0 navigational items



Level 1 navigational items



Site search

Please refer to the individual site architectures for reference of level 0 and level 1 navigational items. 

The dropdown navigation will work as follows:



When a user rolls over the level one item, level two items will display.



When a user rolls over the level two item, level three items then display. Level two items should show selected throughout this flow.



When a user rolls over a level three item they are then presented with that product information / snapshot and can then navigate to that page.

See Figure 1.1.below. Figure 1.1 – Dropdown navigation example

Users can also click on the level one items which will take them to that category landing page.

Breadcrumb trail

The breadcrumb trail should be consistent and visible across all sites. This should sit below the main navigation.

— Pancentric Digital // Functional Specification - Bluefin

4

Hero Carousel



The hero carousel can be applied across all level 1 and level 2 pages.



The carousel should have a minimum of 3 and a maximum of 5 slides



Rotation should be at around 3-5 seconds (this can change)



When a user clicks on the call to action from the carousel they should be taken to relevant page



When a user rolls over the carousel the rotating should pause until the user rolls out



Carousel should rotate automatically up until the user decides to click on the controls to manually control

If the admin only uses one image then the controls should be hidden and one static image displayed.

Product Search

The product search is designed to sit on homepages in order to simplify the user’s journey and experience of finding a product / service to meet their needs quickly and effectively. It is originally thought that the product search would appear on the group, professions, sport and BSM sites. The popular products get updated with the user’s results when they start typing their search query. The results from the query will be displayed once the user has click the search button. The product search should only query products on the site and not all content. Users looking for specific content should use the main global search in the main navigation / header.

— Pancentric Digital // Functional Specification - Bluefin

5

Popular products is to be changed to “Explore” and are chosen by the site admins and they are manually inserted. The order in which they appear should also be set manually.

News Module – V1

Scroll Controls These scroll controls allows the user to scroll through up to 5 latest news stories. Header, Date and Excerpt Each news story should dynamically pull through this content from the news pages. The information that is pulled into here should be the news article header, date and the excerpt which should be no more than 100 characters. The feed should be presented in date order with the most recent first in the list. Call to action When a user clicks on the “continue reading” button they should be taken to that news page where they will be able to continue reading the full article. All News The “All News” button will take users to the general news page, where they will be presented with all the latest articles.

— Pancentric Digital // Functional Specification - Bluefin

6

Related Products The related products will be manually added by site admins. Users will be able to add the products via the site tree.

Product Image Related products in this list should display the image that relates to that product category. Product Title Product name will be displayed Product Description The product description excerpt should be displayed here. This should be ideally no more than 80 – 100 characters. Find out more When a user clicks on “find out more” they will be taken to that product page

— Pancentric Digital // Functional Specification - Bluefin

7

Meet the team Site admins will be able to add “team members” to specific pages using this module. Admins will be able to create “team profiles” for this module.

Profile Photo The profile photo will appear here. Employee name and location The employee name and location should be pulled through from the meet the team modular page. The location should that of which the employee works. Excerpt Bio excerpt should appear here and should not exceed 100 characters.

— Pancentric Digital // Functional Specification - Bluefin

8

Related Links

. Related Links should be automatically generated which would be dependent on the page this is applied to. For example if I was on the “Dom Care” then the related links would be the other level 3 categories.

Current Vacancies

Current vacancies should pull the latest 5 jobs from the careers section of the site. Scroll Controls These scroll controls allows the user to scroll through up to 5 latest news stories. Job Title and location The job title and job location should be pulled through to here.

— Pancentric Digital // Functional Specification - Bluefin

9

Job Excerpt The job excerpt should be pulled into here. The excerpt should not exceed 100 characters and should not cut off through a word. This will avoid embarrassing words possibly being presented here. View Position When a user clicks on the “View Position” button they will be taken the full job description page. View all Vacancies When a user clicks on “View all Vacancies” they will be taken to the careers section of the site. When this module is applied to a “job” specific page – the module should only show jobs in that location. For example: If I was viewing a job in London, the Current Vacancies module to the right would be showing the top 5 jobs in London only and not “all” jobs available.

— Pancentric Digital // Functional Specification - Bluefin

10

Featured Facts

Featured Facts module can be used to pull out key and engaging fact to help promote the values of Bluefin. This should be used a Fact Module only and should not be used to add lengthy amounts of copy. Site Admins should be able to change the background colour of this module by choosing from colours from palette.

Testimonials

The testimonial widget will allow site admins to create up to 3 testimonials per widget which should rotate automatically until the user uses the scroll controls, as seen above. A minimum of 1 of and maximum of 3 is required.

Product Links

The product links appear on level one and two pages displaying level two or three categories retrospectively. These product links will be generated from the site architectures.

— Pancentric Digital // Functional Specification - Bluefin

11

Featured Content

The featured content module would typically be placed on the homepage. The copy inside these modules should promote other areas of the site that would be of interest to users. The “Find out More” button will take users to that content area that is being referenced.

Latest News – V2

This latest news module should automatically pull through the latest news story title, date and excerpt. This module would typically be placed on the homepage.

— Pancentric Digital // Functional Specification - Bluefin

12

Content Accordion

The Content Accordion Should be used on content pages which require the content to be split into bite sized chunks of information. Accordions are a good way to manage pages which have a lot of content and that need breaking into manageable chunks of information. There are two variables for the way this can behave: 1)

On page load the accordion is closed

2)

On page load the first item is open

When a user opens one tab the other will close meaning that the content stays manageable and digestible for the user. When this module is applied to a content page it should be restricted to allow only 3 accordions. If applied to the FAQs page is should be unlimited.

Category Landing Header

The Category Landing Header sits on the level 2 pages. This should be used to explain in more detail about that category. If a user clicks on the” learn more” button the content to the right would expand and show the further content. This “learn more” button is optional to display and should only display if more content is viewable.

— Pancentric Digital // Functional Specification - Bluefin

13

Downloads

This module should be used to display files that can be downloaded. The module should display: 

File type



File name



File Size

Get a quote v1 Call to action

This module is used at the bottom of content pages and should relate specifically to that page. When a user clicks on the “Get a Quote” button they will be taken to the quote form, where they will be able to submit their request.

Google Directions (tbc)

This module is TBC. This would be used initially to sit on the find our offices pages. Functionality and process needs approving. Further investigation should be carried out in the sprint.

— Pancentric Digital // Functional Specification - Bluefin

14

Content Share

The share module will appear at the end of article, news, press type pages, although this isn’t limited to those pages. When users click share they will be presented with all social channels they are available to share on. This will then post the page title and link to that page on that social platform.

Featured News Item

Featured news Item will appear on the news landing page. The featured Item is determined by date., most recent appears here. Title, date and excerpt are all pulled dynamically from the post / article page. When a user clicks on “Read More” they will be taken to that article page. Admins can also overwrite the “featured” news item with a Static News Article. This would be done to promote a certain topic or piece of news for a longer period of time.

News Preview

The News Preview module sits on the news homepage. These modules should be automatically generated from the article pages and positioned in date order. Starting with the newest first.

— Pancentric Digital // Functional Specification - Bluefin

15

When a user clicks on “Read More” they will be taken to the full article page. The following should be pulled here: 

News / Article title



Date of article



Excerpt from article



Read more button

Job Page – Preview Job

On the Careers / job page a list of “preview jobs” module will be displayed. This module will be generated from the job detail page and should contain: 

Job Title



Location



Closing date



Job Excerpt



View Details

Call us today

Strong call to action to get users to call and make an enquiry. When a user clicks “get in touch” they will be taken to the contact page. This module could also be changed to “Find your nearest office” with the call to action going to the office page.

— Pancentric Digital // Functional Specification - Bluefin

16

Product comparison

The product comparison table is used on “Boiler Plus”. This will be used to demonstrate and show the available products available to buy. They should show key information about each of the available products and then give the user the ability find out more or continue to buy the product.

Request Call Back Note: All forms are being built using the form builder. This means that all fields and options are available to change.

The request a call back form should collect, first name, telephone, email address and could contain additional field for best time to call. When a user clicks “Request Callback” the user should be presented with a confirmation message.

— Pancentric Digital // Functional Specification - Bluefin

17

Nav List

The Nav List would be used on content pages where sub pages exist. This should be used as right hand navigation. This module is designed to help users navigate pages with ease. This shouldn’t be used on product pages.

— Pancentric Digital // Functional Specification - Bluefin

18