Designing the UI for ISU Community School of the Arts Website

UI Design for a Standalone Educational Platform

The Indiana State University (ISU) Community School of the Arts (CSA) needed a visually engaging, standalone website to serve as a digital hub for its classes, lessons, and camps. Unlike ISU’s main website, this platform required a unique, user-friendly interface that made it easy for visitors to browse and filter programs based on type and age group.

As the UI designer, my role was to apply ISU’s brand identity to an existing wireframe while ensuring that the interface remained clear, engaging, and easy to navigate within the project’s time constraints.

The Challenge

Limited Design Time – With only five hours allocated for the first round of homepage design, efficiency was key.
Applying Brand Identity to an Independent Website – The design needed to align with ISU’s “More to Blue” branding while allowing CSA to stand out as a separate entity.
Filtering Complexity – The site required color-coded filters to help users easily distinguish between Classes, Lessons, and Camps, along with additional icons for age groups (Adults, Teens, Children).
Maintaining UX Integrity – Since the wireframes were already approved, my focus was strictly on UI design rather than restructuring the layout.

My Role & Approach

Applying ISU's Branding to the UI

Used ISU’s gray background from the previous site for brand consistency while keeping flexibility for a solid background option if needed.
Designed FPO (For Position Only) sections for the CTA and footer, ensuring minimal time spent on undefined areas while allowing for future refinements.

Visual Design for Program Filters

Implemented a color-coded system to differentiate offerings:
Designed hover effects to create an interactive and engaging browsing experience.

Simplifying Age Group Filters with Icons

Instead of overwhelming users with additional colors, I introduced icon-based filtering for Adults, Teens, and Children.
Used preliminary placeholders for icons to gauge stakeholder feedback before refining the artwork further.

Sidebar Flexibility for Future Content

Created a dedicated space for Latest News & Events, referencing previous ISU designs for visual consistency.
Ensured the sidebar could accommodate dynamic content, such as special events, testimonials, or past class highlights.

Sponsorship & Footer Placement

Allocated space for sponsor logos at the bottom of the homepage to provide visibility without interfering with the primary user journey.

Relevance in My Portfolio

This project highlights my ability to:

Work within existing wireframes to apply polished UI design efficiently
Translate brand identity into a digital interface while maintaining usability
Design intuitive filtering systems to enhance content discovery
Balance creative flexibility with time and scope constraints

Though I did not design the UX structure, this case study showcases my expertise in UI execution, branding application, and scalable design systems—all essential skills for digital platforms across education, non-profits, and community-driven initiatives.

Designing the UI for ISU Community School of the Arts Website

UI Design for a Standalone Educational Platform

As the UI designer, my role was to apply ISU’s brand identity to an existing wireframe while ensuring that the interface remained clear, engaging, and easy to navigate within the project’s time constraints.

The Challenge

Limited Design Time – With only five hours allocated for the first round of homepage design, efficiency was key.

Applying Brand Identity to an Independent Website – The design needed to align with ISU’s “More to Blue” branding while allowing CSA to stand out as a separate entity.

Filtering Complexity – The site required color-coded filters to help users easily distinguish between Classes, Lessons, and Camps, along with additional icons for age groups (Adults, Teens, Children).

Maintaining UX Integrity – Since the wireframes were already approved, my focus was strictly on UI design rather than restructuring the layout.

My Role & Approach

Applying ISU's Branding to the UI

Used ISU’s gray background from the previous site for brand consistency while keeping flexibility for a solid background option if needed.

Designed FPO (For Position Only) sections for the CTA and footer, ensuring minimal time spent on undefined areas while allowing for future refinements.

Visual Design for Program Filters

Implemented a color-coded system to differentiate offerings:

Designed hover effects to create an interactive and engaging browsing experience.

Simplifying Age Group Filters with Icons

Instead of overwhelming users with additional colors, I introduced icon-based filtering for Adults, Teens, and Children.

Used preliminary placeholders for icons to gauge stakeholder feedback before refining the artwork further.

Sidebar Flexibility for Future Content

Created a dedicated space for Latest News & Events, referencing previous ISU designs for visual consistency.

Ensured the sidebar could accommodate dynamic content, such as special events, testimonials, or past class highlights.

Sponsorship & Footer Placement

Allocated space for sponsor logos at the bottom of the homepage to provide visibility without interfering with the primary user journey.

Relevance in My Portfolio

This project highlights my ability to:

Work within existing wireframes to apply polished UI design efficiently

Translate brand identity into a digital interface while maintaining usability

Design intuitive filtering systems to enhance content discovery

Balance creative flexibility with time and scope constraints

Though I did not design the UX structure, this case study showcases my expertise in UI execution, branding application, and scalable design systems—all essential skills for digital platforms across education, non-profits, and community-driven initiatives.