Illinois.edu
ui design
component design
prototyping
The University of Illinois Urbana-Champaign’s website, which serves over 2.3 million users annually, was redesigned to shift from a prestige-focused experience to one centered on prospective students.
Our goals were to simplify navigation, strengthen storytelling through interactive design, ensure accessibility across devices, and create a flexible system that supports varied content needs across departments.
Illinois.edu
ui design
component design
prototyping
The University of Illinois Urbana-Champaign’s website, which serves over 2.3 million users annually, was redesigned to shift from a prestige-focused experience to one centered on prospective students.
Our goals were to simplify navigation, strengthen storytelling through interactive design, ensure accessibility across devices, and create a flexible system that supports varied content needs across departments.
Illinois.edu
ui design
component design
prototyping
The University of Illinois Urbana-Champaign’s website, which serves over 2.3 million users annually, was redesigned to shift from a prestige-focused experience to one centered on prospective students.
Our goals were to simplify navigation, strengthen storytelling through interactive design, ensure accessibility across devices, and create a flexible system that supports varied content needs across departments.
Illinois.edu
ui design
component design
prototyping
The University of Illinois Urbana-Champaign’s website, which serves over 2.3 million users annually, was redesigned to shift from a prestige-focused experience to one centered on prospective students.
Our goals were to simplify navigation, strengthen storytelling through interactive design, ensure accessibility across devices, and create a flexible system that supports varied content needs across departments.
homepage
The redesigned homepage centers prospective students through bold use of Illinois orange, clear application CTAs, and news stories that build credibility. I introduced interactive components like a scroll-triggered image scroller to highlight prestige stats alongside student imagery and a card carousel to help users explore campus life and the surrounding community—all designed to feel modern, engaging, and accessible.
Primary page tempalte
We anticipated six primary pages that needed a consistent and engaging look across the site. These pages were designed to be more dynamic and visually rich than secondary pages, with a fun and approachable feel. I created a hero format featuring a cutout student overlaid on a campus background to appeal more to incoming students. Additionally, we developed a custom links section and showcased highlight stats in a subtle but impactful way.
homepage
The redesigned homepage centers prospective students through bold use of Illinois orange, clear application CTAs, and news stories that build credibility. I introduced interactive components like a scroll-triggered image scroller to highlight prestige stats alongside student imagery and a card carousel to help users explore campus life and the surrounding community—all designed to feel modern, engaging, and accessible.
Primary page tempalte
We anticipated six primary pages that needed a consistent and engaging look across the site. These pages were designed to be more dynamic and visually rich than secondary pages, with a fun and approachable feel. I created a hero format featuring a cutout student overlaid on a campus background to appeal more to incoming students. Additionally, we developed a custom links section and showcased highlight stats in a subtle but impactful way.
Component Design
As a lead designer on this project, I independently designed 13 internal pages and multiple complex components. All were thoroughly reviewed for accessibility, designed for all screen sizes, and prepared for developer handoff.
Card Carousel
To introduce the Champaign-Urbana community to prospective students, I designed an interactive, accessible card carousel for the homepage. The flip-card feature reveals key campus areas with details and map links. An interactive prototype is below.
To introduce the Champaign-Urbana community to prospective students, I designed an interactive, accessible card carousel for the homepage. The flip-card feature reveals key campus areas with details and map links. I collaborated with developers to prototype the component with a focus on performance and responsiveness.
To introduce the Champaign-Urbana community to prospective students, I designed an interactive, accessible card carousel for the homepage. The flip-card feature reveals key campus areas with details and map links. I collaborated with developers to prototype the component with a focus on performance and responsiveness.
Mega Menu Navigation
To improve site navigation and help users quickly find important information, I designed a simple mega menu. Developed for campus-wide use, the menu organizes key sections clearly and supports easy access to subpages without overwhelming users.
Desktop:
Mobile:
Horizontal image scroller
I designed a horizontal image scroller to showcase key prestige stats alongside dynamic student imagery. The scroll-triggered animation ties horizontal movement to vertical scroll, creating a smooth, intuitive interaction that adds visual rhythm, re-engages user attention, and brings energy and interest to the page.
Horizontal image scroller
To appeal to prospective students, I designed a horizontal image scroller to showcase key prestige stats alongside student imagery. The scroll-triggered animation ties horizontal movement to vertical scroll, creating a smooth, intuitive interaction that adds visual rhythm, re-engages user attention, and brings energy and interest to the page.
Primary page tempalte
We anticipated six primary pages that needed a consistent and engaging look across the site. These pages were designed to be more dynamic and visually rich than secondary pages, with a fun and approachable feel. I created a hero format featuring a cutout student overlaid on a campus background to appeal more to incoming students. Additionally, we developed a custom links section and showcased highlight stats in a subtle but impactful way.
the fun stuff
404 Graphic
We aimed for a fun, lighthearted 404 graphic. I created this illustration of Altgeld, a historic campus building currently undergoing construction.
To introduce the Champaign-Urbana community to prospective students, I designed an interactive, accessible card carousel for the homepage. The flip-card feature reveals key campus areas with details and map links. I collaborated with developers to prototype the component with a focus on performance and responsiveness.
To introduce the Champaign-Urbana community to prospective students, I designed an interactive, accessible card carousel for the homepage. The flip-card feature reveals key campus areas with details and map links. I collaborated with developers to prototype the component with a focus on performance and responsiveness.
To introduce the Champaign-Urbana community to prospective students, I designed an interactive, accessible card carousel for the homepage. The flip-card feature reveals key campus areas with details and map links. I collaborated with developers to prototype the component with a focus on performance and responsiveness.
Component Design
As a lead designer on this project, I independently designed 13 internal pages and multiple complex components. All were thoroughly reviewed for accessibility, designed for all screen sizes, and prepared for developer handoff.
Card Carousel
To introduce the Champaign-Urbana community to prospective students, I designed an interactive, accessible card carousel for the homepage. The flip-card feature reveals key campus areas with details and map links. I collaborated with developers to prototype the component with a focus on performance and responsiveness.
Mega Menu Navigation
To improve site navigation and help users quickly find important information, I designed a simple mega menu. Developed for campus-wide use, the menu organizes key sections clearly and supports easy access to subpages without overwhelming users.
Desktop:
Mobile:
Horizontal image scroller
I designed a horizontal image scroller to showcase key prestige stats alongside dynamic student imagery. The scroll-triggered animation ties horizontal movement to vertical scroll, creating a smooth, intuitive interaction that adds visual rhythm, re-engages user attention, and brings energy and interest to the page.