NightBreeze Inc – Pre-Cooling Systems

Last Updated: May 2, 2023

NightBreeze.io – Helping pre-cool homes…naturally.

Cooling your home is made easy with the pre-cooling system from NightBreeze, Inc.  (https://nightbreeze.io). Located in Davis, CA, NightBreeze is creating a system to economically pre-cool your home while reducing peak demand for utilities.

This website was originally designed in 2022. In 2023, we performed a light update on the website to adjust content and structure to focus more on manufactures than utilities.

Website Features

The redesigned NightBreeze, by Abaton Consulting – Website Design and Support, has a number of features that will support marketing and outreach activities.

Homepage Components

The NightBreeze website uses the traditional “hero image” layout with the hero image at the top of the page and additional information and navigation elements on the page.

NightBreeze homepage hero image using a client provided image.

The hero image and other images on the website were sourced from multiple location. Free online image catalogs such as unsplash.com, pexels.com were used for some of the images. Other royalty-free images were purchased from resources such as shutterstock.com. All images were selected and provided by the client. Having the client own the rights to website images is more convenient when the client needs the images for other marketing purposes.

The homepage includes two large navigation elements. What makes these navigation elements unique is that they are half-page elements that communicate the benefits of the NightBreeze cooling system. One navigation element contains icons and text relevant to manufacturers and utilities while the other element is focused towards residential customers.

Customer provided icons were assembled into specialty navigation sections with links to manufacturer information and residential information.

The icon and text elements are white and the rest of the image is transparent using the PNG file format. This allows us to switch navigation element backgrounds without having to edit the original graphics. Website look and feel can be updated to match the business plans.

Website Navigation

To assist in getting website visitors to product information, a global footer navigation element is implemented. Each link in the footer links to a specific section using fragment identifiers. When a visitor click on the link, the appropriate page is served and the page scrolls down to the matching identifier.

NightBreeze global footer navigation elements used to quickly access sections of the NightBreeze website.

The ‘global’ navigation element appears at the bottom of every webpage. As a global element, it can be updated on one page and changes appear across all pages.

Logo Update

The NightBreeze icon logo was provided by the client. Abaton Consulting updated the icon logo with text to create a combination mark to be used on the website.

Abaton Consulting updated the NightBreeze icon mark by adding the text and creating a combination mark.

Mobile First/Responsive Website

The NightBreeze, Inc. website is a “mobile first responsive” design. The design is developed to render well first on a mobile device and then modified to render well on desktop devices. This makes both website and desktop versions fast and beautiful.

Responsive Website Design Elements

The website was developed using Divi from Elegant Themes. Divi is an excellent builder and performs well. More importantly, it excels at developing a responsive website designs. The NightBreeze site is a mobile-first website that performs well on mobile phones, tablets, and desktop devices.

Divi, from Elegant Themes, is used to create custom design elements on the NightBreeze website.

Embedded Video

Video is a great addition to a website. It is a compelling way to tell a story and provides and opportunity to better engage with customers.

The video is hosted at Vimeo and embedded on the For Residents page. Using an external video streaming service and embedding is a great way to maximize video replay performance without impacting web hosting capabilities.

Customer provided Vimeo video embedded on the website provides information about the NightBreeze product.

Website Wireframe

Abaton Consulting was provided a wireframe to serve as a guide in website development. A wireframe and instructions were provided for each page.

The process of wireframing improves communications and reduces the time from development to deployment.

NightBreeze provided framework concept used for website design purposes.

Project Summary

This was a fantastic project to work on. From design to deployment only took two weeks. This is because all parties involved in the process we ready and prepared for their respective components the project.