Website Redesign: Construction

The Project

Three Rivers Corporation is a major design/build construction company in Mid-Michigan. Their portfolio of innovative and sustainably constructed buildings presented a fun challenge for building a new company site.

The design involved two main goals: maximize the visual appeal of their projects and cover all the major building sectors the company serves. The first led to a gallery-first approach, with a large image area anchoring each page. The second demanded a careful consideration of navigation and adopting multiple routes to help users access the most important content.

Zachary created a responsive, mobile-first layout for the complete redesign for Three Rivers Corporation. In order to feature large-format images of the client’s design/build portfolio and retain a clear hierarchy of information, this anchor-left, ragged-right approach to columns proved to be highly adaptable while retaining a consistent look and user experience throughout the entire website.

Stakeholder Interviews

I posed questions during our intake with clients to better understand the problem this project was attempting to solve. My questions centered on understanding user goals, the context of use, and pain points around the current experience.

I identified the following primary user groups:

Prospective Clients: Project stakeholders who specialize in scope, budget and use. They would primarily be focusing on projects within their own sector, and the size, scope, and use of each project.

Prospective Subcontractors. Experts in one area of specialization, they would primarily be focusing on services offered (and therefore needed) and seek examples of projects that demonstrated these services.

Competitor Analysis

I conducted a competitor analysis to better understand the landscape and for design inspiration. The analysis involved other Michigan-based general contractors for large construction projects. I also researched several national companies in similar sectors.

This research was shared with the product owners to show opportunities for gaining an edge in our approach – this in turn helped shape the information architecture and design.

Wireframes

Through the wireframe process, I established a clear hierarchy of information that could be reflected in the layout. I chose a classic inverted pyramid, which led to the idea of multiple columns that would “flex” across breakpoints.

I worked closely with the development team to determine technical feasibility. The result was top level content anchoring to the top and left, supporting content flowing to the right and down on scroll.

Responsiveness

In order to feature large-format images of the client’s design/build portfolio and retain a clear hierarchy of information, this anchor-left, ragged-right approach to columns proved to be highly adaptable while retaining a consistent look and user experience throughout the entire website.