Metric web design web development hERO

Case Study

Metric Website Design & Development

Industry
Civil & Transportation Engineering
Location
Miami, Florida
Launched
2022
Platform
WordPress & Beaver Builder

Services

Metric logo

The Client

Metric Engineering is a civil and transportation engineering firm headquartered in Miami, Florida, with offices and field offices across Florida, Texas, Louisiana and Colorado. Its engineers, inspectors and planners work with transportation agencies on construction engineering and inspection, PD&E studies, roadway design, traffic operations and emergency management, and the firm runs its own TTC/MOT and CTQP training programs.

The Challenge

Metric Engineering's previous website was a fixed-width, hand-coded site from the mid-2010s: a small slider, a short list of service lines and a dark block of welcome text signed by the founders. It said little about the scale of the firm, which works for transportation agencies across Florida and beyond, from construction inspection and traffic operations centers to PD&E studies and emergency management.

The firm needed a site that could carry a large body of work. Prospective clients needed to see the projects, agencies needed to understand each service line, and job seekers needed a reason to apply. All of it had to be easy for Metric's own team to update as projects wrapped up, offices opened and new people joined.

Metric website after the Fluid22 redesign
Metric website before the redesign
↔
Before (November 2019)After

Drag to compare Metric’s previous homepage with the site we built.

Our Approach

We organized the site around the four questions visitors bring to an engineering firm: who you are, what you do, what you've built and how to join you. Company, Services, Careers and Training & Certifications became clear mega menus, and every page closes with the same short contact form, so a lead or a candidate can reach the right person from wherever they are.

We built it on WordPress with Beaver Builder, with projects, offices and news managed as structured content rather than one-off pages, and we wrote the copy for the service and company pages. The design pairs aerial photography of Metric's roadways with the firm's blue, navy and yellow, giving a technical subject a confident, modern look. Alongside the public site, our team also built an internal employee portal for Metric's staff.

Metric website, inner page

What We Built

The new site puts Metric's work, people and offices front and center. Choose a feature to see it on the live site.

  • Every project Metric wants to show lives in one portfolio with a search box and filters for each service, from CEI and ITS CEI to PD&E, Roadway and EMS. Agencies can go straight to the kind of work they're hiring for.

    Metric: Searchable project portfolio

The Results

projects in the searchable portfolio
41projects in the searchable portfolio
offices and field offices on the locator map
17offices and field offices on the locator map
service lines, each with its own page
12service lines, each with its own page
city guides for job seekers
3city guides for job seekers

A firm that looks its size

Large aerial photography, a clean grid of service cards and bold project imagery replace the old fixed-width layout. The site now gives agencies the same impression of scale and capability that Metric's project list does.

Past work, easy to find

Agencies don't have to take Metric's word for it. The project portfolio, filterable by service and linked from every service page, lets them see relevant past work, clients and budgets before they ever pick up the phone.

A stronger recruiting tool

Benefits, open positions, city guides and training programs give candidates a full picture of life at Metric. Every page ends with a contact form that includes a Careers option, so interest turns into a conversation.

Easy for Metric's team to run

Projects, offices and news posts are structured content on a current WordPress and Beaver Builder stack. Metric's staff can publish a new project, add an office or announce a new hire on their own, and it shows up everywhere it belongs.

“Fluid22 has been instrumental in the success of our business! They have been there through every step of the web development process creating a site that is not only user-friendly, functional and beautiful, but also easy to access on the back end as a website manager. They also created our internal employee portal which has been a great success and invaluable to our communications with our staff of over 350+ employees. Thank you to Chance, Preston and the rest of the Fluid22 team for your amazing service!”

Metric logo
Adriana Leopardi
Metric Engineering
Read the review on Google

Want a website that works this hard for you?

Tell us where you want your business to go. A senior member of our team will get back to you right away.

Designed for Every Screen

Metric website, full page
Metric website on mobile

The Brand

Color Palette

#007dbf
#edf0f3
#ffcc33
#a1b5c2
#ffffff
#001738

Typography

Metric brand typography

In our clients' own words

Schedule Project Discussion