IDOT Website Modernization

Modernization of the Illinois Department of Transportation’s website to improve content structure, mobile responsiveness, and statewide public accessibility.

Client
IDOT


Role: UI/UX Designer,
Front-End Developer

Tools: Figma, AEM, HTML, CSS,
JavaScript


IDOT’s legacy website was outdated and hard to navigate, especially for mobile users accessing permits, updates, and forms. I redesigned its structure, streamlined user flows, and developed reusable AEM components to improve accessibility and content management.


Goals:

  • Improve information hierarchy

  • Ensure mobile responsiveness

  • Achieve WCAG 2.1 compliance

  • Reduce click depth and confusion

Problem & Challenges

The old IDOT website suffered from scattered content, inconsistent page layouts, and poor accessibility for citizens using assistive technologies, such as screen readers. Key services and documents were buried under multiple clicks, and the navigation structure lacked a clear hierarchy, making it time-consuming for users to find what they needed.

Mobile users, in particular, faced issues with non-responsive layouts, small text, and outdated UI components that didn’t adapt well to different devices. Additionally, there were no reusable design standards in place, which resulted in visual inconsistencies across pages and made content updates more complex and prone to errors for the internal team.

Sitemap

Created new sitemaps and reorganized the website’s content structure in Figma to streamline navigation for citizens, businesses, and contractors accessing key services.

Mapped out top-level categories and subpages to reduce redundant links and dead ends.

Worked closely with content strategists and stakeholders to ensure that the new hierarchy reflected real user journeys and priority tasks, like permits, road closures, and project updates.

Organizational chart with categories: Travel & Maps, Doing Business, Procurement, Programs & Projects, Forms & Reports, Careers, each with subcategories.

Wireframes

Sketched low-fidelity wireframes to test layout ideas for a mobile-first design approach, ensuring the most important information was prioritized on smaller screens.

The wireframes focused on simplifying page layouts, defining clear content blocks, and visualizing how users would navigate between sections with fewer clicks.

A website or presentation template with sections labeled Header, Left Navigation, Main Content titled 'Innovative Project Delivery' with three circular icons labeled 'Round Icon Card', a section titled 'Doing Business' with dropdown menus, and a Footer at the bottom.
A business plan template with sections titled Header, Innovative Project Delivery, three circular icon cards labeled 'Round Icon Card', sections with lines for writing, a segment labeled Doing Business with three drop-down menus labeled 'Lore Ipsum', and Footer.
Template for a meeting agenda titled 'Interagency Council on Bikeways' with sections for 'Statute,' 'Get Involved,' and 'Meetings,' and placeholders for text. Header and footer sections are marked, with a faded mountain graphic near the top.
A wireframe of a webpage for the Interagency Council on Bikeways (ICB) with a header, middle section with a placeholder image and lines representing text, dropdown menus for 'Statute,' 'Meetings,' and 'Get Involved,' and a footer.

Hi-Fidelity Mockup

Three smartphones displaying Illinois Department of Transportation (IDOT) website pages. The first phone shows employment opportunities and safe routes to school; the second displays travel resources like aviation, highways, public transportation, safety, trails, and waterways; the third shows permit and sales marketplace options for bridge information, change orders, and crash data.

Built detailed mockups for the homepage, key forms, and alerts pages — fully responsive and WCAG compliant to ensure usability for all citizens.

Designed clean layouts with clear visual hierarchy, consistent typography, and accessible color contrasts.

By prototyping real user flows, I was able to conduct quick feedback sessions and iterate on design details before handoff to development, saving time and reducing rework.