C+H Construction
This project shows how good design solves real problems. It was built to be fast, clear, and easy to use.
Project Details
My Role
Designer and developer
Timeline
May 2026-June 2026
Client
C+H Construction
Overview
C + H Construction is a nuclear and government building contractor who needed a website to help expand their client base. However, they are very limited on what they can say about their clients and their process because of the nature of their work.
The problem
To come off as professional and trustworthy despite the lack of information listed on their projects
Our solution
To focus on the users having a good experience because of the intentionally unique design
Preparing to Design
The company I worked for follows the StoryBrand framework for website content. After my team finalizes the site structure and writes the copy, they format it into a wireframe using Relume. I import that wireframe and begin my magic.
Getting to know their brand
By this point, I’ve already met with the client and have a sense of who they are and which design directions they’d appreciate. I spend 20-30 minutes reviewing any brand material they’ve provided, sites they listed they admire, and their competitors.
Setting up variables
I start by taking the client’s brand colors and building a color scale. These are my primitive colors, which I use in order to decide typography, background, and button colors. This system streamlines my design process and keeps my color choices in check.
Designing Three Directions
Because there was so much weight placed on the design of the website, the client wanted to choose from three different directions.
Option 1
Bold, strong, and large in scale, reflecting their speciality in nuclear construction.
Option 2
Inspired by blueprints, leaning into technical side of the process.
Option 3
Smooth and calming, meant to reassure visitors that the client is a trustworthy partner who can guide the process.
Designing Wireframes
The client went with Option 2. They loved the line work design and blueprint feel. I finish the rest of the design within Figma.
Import into Webflow
Once the design was finished, I imported the Relume wireframes into Webflow and rebuilt them to match the Figma design.
Why not use AI?
I considered the Figma-to-Webflow plugin or using the Webflow MCP, but I’ve never been fully satisfied with the results. I’d rather spend the time transferring the design correctly the first time than double-check every detail an AI or plugin might have missed.
Class structure
I follow Finsweet's Client First method of naming and structuring classes. This system makes global changes easy and gives me the clarity to sift through classes and quickly spot issues in the structure.
Responsive design
If a section is more complex or likely to be tricky at other breakpoints, I design its responsive version right after building it. Otherwise, I wait until every section on the page is finished, then make the whole page responsive at once.
Pain Point
A lack of testimonials
Given the security level of their work, testimonials were not an option. Instead, we turned their list of core values into a mind-map-style design to help establish trust.
Final Design
This was the first project where the client had zero revisions after seeing the design. I credit this to the amount of communication throughout the process and the preparation beforehand.
About
What I do
Problem Solver
Uncovering the problem
The goal of any design project is to solve a problem. Whether that’s updating a homepage to increase conversions, creating a landing page to inform about a product, or simply make something more beautiful. But to find the most effective solution, you have to find out what the true problem is.
Designer
Organize information
My passion always lies with design. I thrive on the feeling of taking chaos and organizing it into something beautiful and functional.
Friend
Work as a team
Being skillful can only take you so far. I believe that getting to know your team is a key component to finding the solution to your problem.
Let's Connect
