Connecticut Department of Transportation
Project overview
Company
State of Connecticut

Product Owner
State of Connecticut

Date
2023
My Role

User Research
Information Architecture
Product Design

Design Tools

Figma
Miro
Adobe Photoshop

UX Deliverables

User Research
Competitive Analysis
Information Architecture
Site Map design
Low fidelity Wireframe
High Fidelity Mockup Design

Introduction

As part of the “Don’t wait in line, get online” campaign the State of Connecticut is looking to create a unified experience across all digital assets. This project involved redesigning the Connecticut Department of Transportation’s website.
The DOT is a large and important agency and manages services including traffic, highways, bridges and public transportation.

Design Problem

The current design of the of the DOT site is not meeting the current needs of citizens of Connecticut. Focusing on delivering services to users based on their intentions how do you redesign the user experience and website user interface?

Design Process

The design process started with secondary user research and UX audit of the current website

User Research

Identify the types of people who visit the CTDOT site, their interests and needs. Since this was a design challenge a lot of assumptions were made after doing the competitive analysis with other state DOTs.

Competitive Analysis

Competitive research and analysis is a crucial step when designing any public facing web site. It helps you understand the existing market for your service and also leads to better insights from user research. Another advantage is that it helps to uncover gaps in the competition’s services which can lead to developing profitable key differentiators.
The following State DOTs were reviewed:

  • New York State DOT
  • CalTrans
  • GeorgiaDOT
  • Texas DOT
Competitive Research Findings

To efficiently structure website content, it is crucial to identify the most sought-after information or services by users. Recognizing the popularity of specific content or services is key, particularly for information-rich websites where users must easily locate relevant information. Therefore, establishing a well-thought-out taxonomy is essential.

Ensuring consistency between navigation labels and page titles is vital. For instance, linking “Traveling in Connecticut” to “Travel resources” creates a cohesive user experience. Similarly, aligning categories like “Transit,” “Bus,” “Train,” and “Ferry” with corresponding labels such as “Public Transportation Links” enhances user comprehension.

The “How Do I?” section appears confusing due to the inclusion of various information categories. To improve clarity, it is advisable to categorize items like news alerts, job searches, and traffic alerts under their respective sections, enhancing user understanding and navigation.

Information Architecture

Creating a site map for the current Connecticut DOT site allowed me understand the strengths and weaknesses compared to the similar sites. It also helped in identifying the gaps in the site’s UX design. Consequently, I was able to determine which areas need improvement and design a solution that would better meet user needs.

Connecticut DOT-sitemap

Low Fidelity Wireframes

After analyzing the information architecture and research findings, a low fidelity wireframe was designed

Connecticut DOT Wireframe
Connecticut DOT-sitemap

High Fidelity UI Mockup

A few sample UI mockup screen designs can be seen below. Expedia’s brand colors and design language have been adapted to create a familiar yet different user experience.

Connecticut DOT Mockup

Credits and Sources
Photography

Figma – Unsplash plugin