Professional Brand Update

BlueWater Solutions Group is a civil engineering firm, providing pipeline assessment and improvements all across the United States and Canada. They needed a simple logo that reflected their industry and could easily be printed in a one-color format. As engineers, they didn’t want a design that contradicted the technical nature of their company. In researching brand appearance across other related engineering firms, we determined that a simple typographic logo would be ideal. Along with brand guidelines, branded collateral included business cards, letter head, envelopes and, most recently, a new website.

Improved Online Presence

After completing BlueWater’s logo and business collateral, I encouraged the company to consider a new website to further the development of their improved brand image. The original website had a poorly designed landing page, an illegible company profile page and a contact page. Its mobile responsive features were dysfunctional and the site lacked information about the company’s services.

Website Strategy and Planning

In preparation for designing BlueWater’s new website, I met with the client and they laid out their services relating to pipeline management, especially water and wastewater infrastructures. They explained their website audience would consist mostly of utilities and publics works managers, looking specifically for water or wastewater services. However, other potential clients would want information about specific field services or engineering consulting. Additionally, BlueWater is at the forefront of emerging technology for the utilities industry, so it was important to feature their innovations and how the technologies relate to the various infrastructure services.

User-friendly Site Structure and Navigation

The challenge, from a navigation perspective, was that some services overlap for both water and wastewater, while others are specific to one type of utility. In addition, the featured technologies fall under various field services, engineering consulting, water and wastewater categories. In essence, their services can’t be sorted into easy categories as the categories would overlap in some ways, but not in others.

So, to develop a navigational structure, allowing visitors to quickly access the content they seek, I configured a list of all the content pages that would exist on the site. I organized the content of this list and drafted a sitemap, outlining a structural hierarchy and the ways in which a visitor could navigate between pages on the site.

From the sitemap, I developed a wireframe to dictate content placement such that internal linking was extremely accessible, mimicking the sitemap outline. Once the wireframe was approved by the client, I designed a fully-branded website mockup. After making changes based on client feedback, I worked in WordPress to develop the site.

Featuring Key Content

A couple of the website’s key features are the featured projects map and the upcoming events list, both of which are accessible on the homepage. BlueWater Solutions Group is actively involved in the utilities and engineering communities. Because of this, they attend multiple conferences each year, typically presenting and setting up their trade show booth. It is important for site visitors to access information about upcoming conferences and events, not only to encourage attendance, but also because it asserts BlueWater’s extensive industry credentials.

In addition, since BlueWater is a company that works on a national level, it was important to feature some of their past projects across the United States, explaining the experience they have in providing the various services they offer. On the homepage, I created a map with markers for each of the featured projects. Clicking on these markers will direct visitors to a page with information about the project and the specific services that were rendered.

Desktop-first Design

Unlike the bulk of many modern websites, BlueWater’s clients are primarily office-based, using computers rather than mobile devices to access the website. Because of this, the design is ultimately optimized for larger screens. However, due to the site’s complexity, it was a challenge to ensure that the design always looked and functioned optimally on mobile devices.