Civiliair Engineers Company Website Visual Redesign

Overview

I redesigned the CivilAir Engineers website to address usability and accessibility issues while enhancing overall performance. Using Google Lighthouse, I assessed the site’s SEO, best practices, and accessibility, uncovering areas for improvement. I then planned my design to boost these metrics, creating a more user-friendly and efficient experience.

My Role

Lead designer

Visual designer

User research

Content Mangement

Platforms

iOS

Android

Web

Year

2024

Problems

The CivilAir Engineers website suffers from significant usability and accessibility issues, as revealed through manual testing and Google Lighthouse audits. These assessments highlighted critical areas needing improvement, including poor navigation, low accessibility scores, and suboptimal SEO, which hinder user experience and site performance.

A screenshot of a digital interface showing a color contrast checker window overlaying a webpage. The webpage belongs to CivilAir Engineers PLLC, with a slogan about being vision driven and a description of the firm's mission and contact information. The contrast checker displays three sets of sliders for text and background lightness, along with contrast ratios and compliance indicators.

Screenshot of a webpage showing SEO analysis results for civilaire.com/markets-and-services, including scores, issues, and guidance for improvement.

Opportunity

Redesigning the CivilAir Engineers website can address key usability, accessibility, and performance issues identified through testing.

Goals

Improve Accessibility: Ensure the website meets WCAG 2.1 standards.

Measure: Achieve a Google Lighthouse accessibility score of 90+ and conduct user testing with diverse audiences.

Enhance Usability: Create intuitive navigation and streamline user interactions.

Measure: Increase task completion rates and reduce time-on-task in usability tests.

Boost Performance: Optimize loading times and mobile responsiveness.

Measure: Achieve a Google Lighthouse performance score of 90+ and monitor reduced bounce rates.

Strengthen SEO: Improve visibility and search rankings.

Measure: Achieve a Google Lighthouse SEO score of 90+ and track organic traffic growth.

Our goal is to improve the CivilAir Engineers website’s accessibility, usability, performance, and SEO, measured by higher Lighthouse scores and user engagement.

Redesign

With these goals in mind, I began redesigning the website to address the identified issues and enhance overall user experience. The five major changes made were their color palette, navigation, portfolio layout, adding alternative text tags to images, and adding multiple points for contact.

White downward arrow on a dark background

An aerial view of a highway interchange with looping ramps and surrounding buildings, overlaid with the text "Vision Driven. Planned to Succeed. Designed to Exceed." and a call-to-action button labeled "Contact Us" on the homepage of CivilAir Engineers PLLC website.

PageSpeed Insights report showing high performance score of 98 for a desktop website. The report includes metrics such as first contentful paint at 0.4 seconds, largest contentful paint at 1.2 seconds, total blocking time 0 ms, and speed index 0.6 seconds. A screenshot of a website with the tagline "Vision Driven, Planned to Succeed, Designed to Exceed" is displayed alongside.

Screenshot of CivilAir Engineers PLLC website showcasing past road construction projects with aerial photos of highway and intersection development.

White downward arrow on dark gray background.

A webpage section titled 'Clients and Projects' with four columns. Each column has a grayscale abstract art image and an orange 'Learn More' button. The columns are labeled: 'Port of Moses Lake' with 'Engineering Service', 'Paine Field' with 'Engineering Services', 'Lynnwood Lightrail' with 'Client Representative', and 'WSDOT Transit' with 'Staff Augmentation'.

PageSpeed Insights report showing an accessibility score of 96 for a desktop website, with sections on names and labels, additional items to manually check, and passed audits.

Website homepage for CivilAir Engineers PLLC, showing services divided into three categories with images: Airports, Municipal, and General. Categories list services like planning, design, traffic engineering, and construction management.

White downward arrow on a dark gray background.

A webpage titled 'Services' lists civil engineering services in three columns: Engineering, Municipal, and Airport. Each column contains icons and descriptions of related services, with a dark background and white and orange text.

Results

Civilair Engineers' website redesign achieved Google Lighthouse scores over 90 in accessibility, performance, SEO, and best practices. Navigation improvements streamlined access to the project portfolio and contact features, enhancing user experience.