Next Phase Roofing and Construction is a commercial contractor with established expertise across churches, schools, and other commercial properties. We’ve partnered with Next Phase over the past five years on various design projects, from their initial website build through a sweeping series of brochures and marketing collateral. Their website was already fairly extensive, but after five years of brand evolution and building an impressive project portfolio, their digital presence was begging for a refresh.
Next Phase hired us to redesign their website, implement an evolved design system, update messaging, and build a streamlined user experience that showcases their quality and depth of expertise. The new website provides a dynamic digital experience that speaks directly to commercial clients and reinforces Next Phase as a trusted partner for complex roofing projects.
Project Scope
- Branding
- Design System
- Copywriting
- Web Design
- WordPress Development
Website
Objective
Elevate Next Phase's website to implement a new design system that matches their level of craftsmanship and expertise. Refine messaging to speak directly to commercial clients—property owners, managers, churches, and schools—while leveraging their extensive asset library to demonstrate capability across a variety of property types and roof systems.
The story we set out to tell was the same one Next Phase tells their clients: not all roofing solutions are created equal. The site needed to demonstrate that Next Phase has the capabilities to match any need—regardless of roof type, property type, or project size. The redesign built on Next Phase's latest brand evolution, which had begun to take shape in their printed materials and brochures. This was a key opportunity to implement the refined identity into their website, layering in updated typography, tone of voice, and visuals.
The color scheme and logo remained the same, honoring the brand they’ve been building over the years. To complement the logo, we selected a bolder, sharper typeface, Overpass, to visually reinforce Next Phase's sharp craftsmanship and bold approach to any type of building application, no matter how complex the job.
Copywriting was a critical component of this project. Commercial clients have different concerns than residential customers—they need a partner who understands project structure, timelines, and the unique demands of churches, schools, and commercial properties. We streamlined and refined the messaging to be direct, digestible, and focused on the specific needs of these audiences—moving away from generic marketing language toward expertise-driven communication.
Rather than following the typical commercial contractor website playbook, we created an experience that felt more like a high-quality digital brochure. Generous negative space, high-quality imagery, and thoughtful layout choices elevated the experience beyond what's common in the industry.
Homepage scrollthrough, showcasing the functionality where a video plays when hovering over a static image.
We leveraged Next Phase's extensive asset library—years of documentation from projects of all scales showing the before, during, and after phases across dozens of properties. These images demonstrate capability far more effectively than words alone. As part of the project scope, we produced all of the hero videos displayed across the website.
The roofing material pages feature an "image sequence", where a background video plays and text boxes reveal themselves as a visitor scrolls down the page.
Animation and interaction were designed to enhance storytelling without requiring active engagement. We implemented scrolling-based image sequences that transform as the user scrolls, static images that transform into video clips upon hovering, and dynamic visual moments as users navigate the site. Pinned elements, subtle shape animations, and smooth transitions make the site feel alive without hiding information behind accordions or requiring clicks to access content.
A scrollthrough of the Roof Replacement page showcases the tailored copy crafted to specifically speak to commercial clients.
Performance considerations shaped the final implementation. The original vision included higher frame rates for image sequences, but we optimized for practical performance while maintaining visual impact. Extensive QA and spacing refinements ensured smooth interactions for all the animated elements across a broad range of devices and browsers, particularly on pages using pinned scrolling techniques.
The result is a website that pushes creative boundaries while remaining on-brand, appropriate for the target audience, and true to Next Phase's relationship-building approach.
The About page is one of our favorites—the pinned "Why Next Phase?" section was a fun web development challenge to work through.
The new Next Phase website delivers an elevated, editorial-style experience that matches the precision of their work. By combining refined messaging, extensive project imagery, and thoughtful interactive design, the new website reinforces Next Phase as an established expert in commercial roofing. It functions as both a marketing tool and a digital brochure that showcases their expertise while providing a clean, professional, mature design system that speaks directly to the needs of commercial clients.
