BluWater Website Project Overview

Background

The following is the design and content for a new website to be launched at This is a new website as there is currently nothing existing there.

Platform: Please use Wordpress.

Notes:

  • Make all pages and templates easily editable
  • Use responsive development so that this will appear on mobile website as well.
  • This will NOT be an eCommerce site at launch.

Please see below for the Site Map and detailed designs and instructions.

Login Info for Hosting and URL Domain

User: Pioneerh2o

Pw: Genesis2

Site Map

OVERALL STYLE (CSS)

Size of website: 1000 pixels

Main Font:

Sui Generis – Regular

Secondary Font:

Helvetica – Regular

Page Title:

Sui Generis – Regular – 36pt

H1 (Header 1 Title):

Sui Generis – Regular – 24pt

H2 (Sub-Header):

Sui Generis – Regular – 16pt

Regular Content:

Helvetica – Regular – 16pt

Color Scheme

Light Blue:

#48D9FF

R: 72 G: 217 B: 255

Dark Blue:

#0054A6

R: 0 G: 84 B: 166

Orange:

#FF7500

R: 255 G: 117 B: 0

Dark Grey

#333333

R: 51 G: 51 B: 51

Light Grey

#999999

R: 153 G: 153 B: 153

Button Format (i.e. for actions such as “Request Password”): Please use the buttons as formatted in art files. Upon hover over button, please make the button darker blue

Navigation

  • Please note that all navigation items will have a drop-down that should appear upon hover as outlined in the site map above with 2 exceptions.
  • Exception 1: the “overview” pages should be accessible from primary navigation, and there should be no “Overview” in the drop-down. For example, in the case of “Systems”, if the user hovers on Systems, the drop-down will have 1) Isis, 2) Ozone, 3) Natural Mineral Purification, and 4) Genesis. The user can get to the Overview page by clicking on “Systems”
  • Exception 2: the drop-down for Support should only have 2 drop-downs: 1) Warranty Registration and 2) Dealer Login; the other pages in the Support section will only be available from deeper pages

NOTE ON CONTENT

Some of the psds have content, and other content is missing. Please insert the content in the psds, and we will supplement with the additional content by utilizing the templates that you create. Similarly some images are already in the psds, and you should use them. However, the others, we will insert once you have provided templates.

HOME PAGE (BluWater_Home.psd)

Please follow the style of the home page design. Note that upon hover on a specific image, please use the effect as you will see in each of the layers. Specifically, each image has a hover layer. Only one hover should appear on the website at one time (i.e. wherever the user mouse is)

Image Links should link as follows:

What's In Your Spa? –Link to Systems page

Check Out Our Products –Link to Products page

What Others Are Saying –Link to Testimonials page

To learn more about our products & technology, Contact Us–Link to Contact Us Page

Meet the Mind –Link to Meet the Mind page

Text below the images should be in a format that is easily editable.

Systems Page (BluWater_Systems.psd)

Please follow the format as outlined in the psd. Please use this same template format for the Products Page as well.

You will see that there are 3 boxes which each feature 1 system.

Links: Each “View system” link should link to the detailed System Page

Products Page (BluWater_Products.psd)

Please follow the same format as the Systems page.

Note that on the Product landing page, the orange links should read “View Product” instead of “View System”

System Detail Pages (BluWater_SystemsDetail.psd)

Please use breadcrumbs on all pages as outlined in the psds.

Please create a standard template in which the following elements are standardized for all systems, and for all products. In addition, you will note that all other pages follow the same format with the exception that the System and Products are the only ones that have 4 image thumbnails in the image section in the upper left.

Template

  • Main Image in upper left
  • In System and Product pages, there are also 4 image thumbnails below. The first thumbnail will be the one featured as the main image. When user clicks any of the 4 thumbnail images, the clicked on thumbnail will be featured in the main image area.
  • In System and Product pages, when user clicks on the main image, that image will display in an overlay as highlighted in BluWater_SystemsZoom.psd. User should be able to click out of the zoom by clicking on the “X” in the upper right. The arrows should transition to the prior or next image. However, on all other pages that are not system or product pages, the user should NOT be able to click on the main image and therefore, no Zoom would be available.
  • Accordingly, in the template, please enable us to upload 3 image sizes: a main image size (274x274), a thumbnail image size (84x84), and a Zoom image size (450x450). Note that the Sparxoo team will upload all images once functionality is enabled.
  • CONTENT
  • The first line of text on the blue background should be “Page Title”
  • The short blurb of text on the blue background should be enabled as “Short-Form Content” (this is H2 in the style guide)
  • The first line of text on the grey background should be the H1 (or “Header 1 Title”
  • Below the Header 1 Title, there should be the main text area
  • STANDARD SYSTEM AND PRODUCT LINKS
  • After the main text area, there should be an area of enabled links. Please enable admin to enter in the title of the section, (i.e. “Section Title: The Technology”
  • Upon click, the arrow should expand content, and upon content expansion, the arrow should be turned down (instead of to the right). In addition, if you are able to add to the template the ability for us to insert a pdf, then we would upload the pdf which could be referenced in the Dealer Dashboard (see below)
  • Please see (BluWater_SystemDetailsExpand.psd) for example
  • The “Owner’s Manual PDF Download button should enable user to open pdf. Please enable template such that admin can input pdf in the back-end
  • REPLACEMENT PRODUCTS
  • Please enable admin to input up to 3 thumbnail images (84x84) along with the product name. We would then enable a link of both the image and name so that user can click to go to the correct system / product page.

Product Detail Pages (BluWater_SystemDetail.psd)

Please use the exact same format as the SystemDetail page. The only difference is that the breadcrumb will say “Products” instead of “Systems”

About Pages

Per the notes above, the About and Contact pages will follow the same general template format as the System Detail and Product Detail pages. The most significant difference is that we will only have a main image and no additional image functionality. Also, we will NOT have the added product & system links to pdf documents.

Our team will insert all content.

Contact Page

Again, this uses the same general format as the About page. We would like you to insert all content on this page, as there is more customization on colors, images, and font treatments in the content. Note that in the upper right, we have the Facebook, Twitter, and LinkedIn icons. These should link to:

Facebook:

Twitter:

LinkedIn:

Upon click on Email addresses, please have email client open and pre-fill the email address

Domestic and International Sales

Info about our Products

Place and Order

Customer Service

Technical Support

Warranty Information

As a part of developing the contact page, please create a section of Distributors in which admin can enter in logo image, company name, linkable web address, and phone number. Please have a box for admin to check “US” or “Canada”, and please have them displayed in alphabetical order under the correct section “US Distributors” or “Canadian Distributors”. Please enable admin to add more of these.

Dealer Login Page

Please enable a “Dealer Login” series of pages that is password protected. We just want a simple Wordpress password protected page, in which there is one password that everyone uses. The sequence of pages is as follows:

  1. Dealer Login Page (this is the page that user is directed to upon clicking “Dealer Login” from the Support drop-down in navigation)
  2. Again, please enable this so that one universal password enables the user to access “Dealer Dashboard” page
  3. User has 2 choices on this page
  4. 1) User can request password => please link user to “Request Password Page”
  5. 2) User can insert password and click “Login” … upon successful password entry, user is taken to Dealer Dashboard. If they are not successful, user gets error message … please format in DealerLoginIncorrect.psd
  1. Request Password Page: User must fill out form.
    In the “I am a” drop down, the 4 options should be: Technician, Dealer, Distributor, OEM.
    Upon filling out form, user clicks “Request Password” and an email is sent to with the information.
    Upon submission, user is taken to “Request Sent” page, see psd: BluWater_RequestPasswordThankYou
  1. Dealer Dashboard Page: Please see psd BluWater_DealerDashboard and create this as a template.
    In the top portion, to the right of Dealer Dashboard, these should be built as anchor links that take user immediately down the screen to the target section
    Under each product and system, we would like the admin to be able to embed a video or an image and insert a list of linksto pdfs that are available. These correspond to the same content that is under specific product detail and system detail pages. Ideally, you can add a field in the product detail / system detail page that enables us to add text, video, image and a pdf. Then the pdf would be available via link in this section.

Warranty Registration Page (BluWater_WarrantyRegistration.psd and BluWater_WarrantySubmitted.psd)

Make all fields that have a * required; all others are optional.

Enable optional check boxes for “I purchased it as an option” and “The system was on the spa pool”

Select Your Product Dropdown: please enable the following choices:

Genesis

Isis

P-15

P-50

Boss

Custom

At the bottom of the registration form, just above “Submit Registration”, please insert a “Captcha” form so that we can limit robots / spam

Please enable contact form in which user submits information to

Upon submission, please roll-over to a “Registration Submitted” page.

Newsletter Page

Please set up the newsletter page, such that user can enter in information and it is automatically connected into the client’s newsletter provider using Constant Contact.

Login Info for the company’s Constant Contact account:

User: bluwatertechnology

Pw: Genesis2

We would like this automated; however, if this is difficult, please let us know, and we can devise another way to enable user to subscribe to newsletter and enter all information.

Footer

Link: Please link each footer link to the correct page. Please link all text “Website Design by Sparxoo Agency” related to Sparxoo to