BluWater Website Project Overview
Background
The following is the design and content for a new website to be launched at
www.BluWaterTechnology.com. 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
www.NetworkSolutions.com
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
o The first line of text on the blue background should be “Page Title”
o The short blurb of text on the blue background should be enabled as
“Short-Form Content” (this is H2 in the style guide)
o The first line of text on the grey background should be the H1 (or
“Header 1 Title”
o Below the Header 1 Title, there should be the main text area
STANDARD SYSTEM AND PRODUCT LINKS
o 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”
o 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)
o Please see (BluWater_SystemDetailsExpand.psd) for example
o 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
o 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: https://www.facebook.com/pages/BluWaterTechnology/473167219398996?fref=ts
Twitter: https://twitter.com/BluTecH2O
LinkedIn: www.linkedin.com/company/bluwater-technology
Upon click on Email addresses, please have email client open and pre-fill the email
address
Domestic and International Sales sales@bluwatertechnology.com
Info about our Products info@bluwatertechnology.com
Place and Order orders@bluwatertechnology.com
Customer Service info@bluwatertechnology.com
Technical Support blutech@bluwatertechnology.com
Warranty Information warranty@bluwatertechnology.com
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)
a. Again, please enable this so that one universal password enables the
user to access “Dealer Dashboard” page
b. User has 2 choices on this page
i. 1) User can request password => please link user to “Request
Password Page”
ii. 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
2. 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
dealerlogin@bluwatertechnology.com with the information.
Upon submission, user is taken to “Request Sent” page, see psd:
BluWater_RequestPasswordThankYou
3. 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 links to 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
warranty@bluwatertechnology.com
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 http://www.Sparxoo.com