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, ensure accessibility across devices, and create a flexible design system.
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, ensure accessibility across devices, and create a flexible design system.
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, ensure accessibility across devices, and create a flexible design system.
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 Illini Orange, clear application CTAs, and news stories that build credibility. Interactive components such as the scroll-triggered image scroller and card carousel help users explore campus life and the surrounding community in a modern, engaging, and accessible way.
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.
Image scroller
The image scroller showcases prestige stats alongside student imagery to keep prospective students impressed and immersed in what their lives could look like at Illinois. 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.
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.