ICC Houston
Website Redesign

Working with ICC

During my internship, I was the sole UX designer responsible for the site review, information architecture, and prototypes. I worked directly with school leadership and a development team in Bangalore.

The project covered the main school website and its relationship to the preschool website. The design also needed to support content updates by school staff.

Reviewing the existing site

The original navigation included links such as Classes/Registration and Faculty/Staff. My review focused on how these pages were grouped and how families would move between program information and registration.

Related content appeared across both websites, while registration forms were presented as text links. These became specific areas to address in the proposed structure and page layouts.

Original website and proposed homepage design in Figma.

What school staff wanted to change

I interviewed three staff members about the website and their priorities for the redesign.

• Principal

  "The site should feel professional and modern — I'd like it to be closer to St. John's School."

• Vice Principal

  "We need to clearly separate the three programs so parents don't confuse them."

• Registrar

  "Registration info needs to be much clearer — maybe a tab layout would help."

Two parent scenarios guided the page designs:

Defining the relationship between the websites

The proposed structure kept icc-houston.org as the main destination, with contextual links to iccschooltx.org for preschool information. Both domains remained in use.

I mapped the page hierarchy in Figma to show where content belonged and where visitors would move between the sites.

View the information architecture in Figma

Information architecture showing the main website, labeled ICC_1, and the preschool website, labeled ICC_2.

Navigation and page design

Decision 01

Grouping the main navigation

I organized the proposed navigation into Home, About, Classes, News, and Other Info. Sidebar links grouped related pages within each section.

This structure gave school information and class content defined places in the navigation.

Original navigation.

Proposed navigation in Figma.

Decision 02

Separating program information

The designs used program-specific views for Saturday School, Elementary School, and Pre School.

The controls followed each page’s layout: horizontal program options on About and Locations, and sidebar choices on Classes. Families could select a program before reading its details.

Program options in the About page proposal.

Decision 03

Making registration options explicit

On the homepage, I placed a registration call to action directly below the hero. The Classes page proposal brought registration information near the top, with three labeled buttons:

• Download course and tuition information.
• Returning students registration form.
• New students registration form.

The labels explained what each button would open.

Registration call to action below the homepage hero.

Course information and registration buttons in the Classes page proposal.

Decision 04

Linking gallery previews to full albums

The gallery design used photo previews with “See All Photos” links to albums in the school’s Google Drive. The plan was for staff to maintain the full albums there while the website displayed a smaller selection.

Decision 05

Showing locations by program

The Locations prototype paired program tabs with space for address details and a map preview. An “Open in Google Maps” link provided a route to the map service.

Locations prototype with placeholder content, program tabs, and a map preview.

Decision 06

Establishing shared visual styles

I defined a color palette and text hierarchy for use across the pages, including bilingual headings and buttons. The palette combined navy and teal with orange and yellow accents.

Color palette and bilingual interface elements from the Figma design.

Reviewing the designs and handing them off

The Figma work developed from page wireframes into detailed visual designs. I reviewed the key pages and flows with the client before handing them to the development team.

View the designs in Figma

Homepage, Classes, Gallery, and FAQ wireframes.

View the WordPress implementation

Saved screenshots of the Classes and Faculty pages from the WordPress implementation.

Feedback on the WordPress implementation

The development team built a WordPress version from the design. Client adjustments and theme constraints led to differences in the navigation and some page layouts.

The project lead shared the following feedback on that version and described a later proposal to rebuild the site:

"The feedback from the principal, along with the response from parents, has been positive. The layout and information on the new site are much clearer and more concise than before — people can easily find what they need. The principal also finds it straightforward to access the backend and make updates herself."

"When I met with the principal at the end of January, she mentioned that a new parent happens to be a web developer and could rebuild the site in a different language to add a membership and parent registration feature. That was outside the scope of our original plan — WordPress isn't well-suited for that kind of membership management anyway. It would be an entirely new project."

— Project Lead, ICC Houston

Working within the project’s constraints

Content arrived in stages, and the existing website needed to remain available during registration. I had to account for these constraints while preparing the designs and coordinating the handoff across time zones.

Next Steps

Parent usability testing remained a next step. I would use the two original scenarios to observe whether families could select the appropriate program and reach the correct registration form, noting where they hesitated or needed help.

The design work in this project was done without AI tools. The text of this case study was edited with AI assistance; the content and conclusions are mine.