Front-end Development & Web Redesign

Reimagining the Herberger Institute Homepage

Overview

Project Introduction

About the Project

The Herberger Institute for Design and the Arts at Arizona State University is one of the largest comprehensive design and arts colleges in the nation, spanning six schools and two museums across four cities and online. The Institute’s existing homepage no longer reflected its evolving identity or clearly guided users to school resources.

Summary

Client:

Role:

Team

Herberger Institute

Front-end development & design

Drupal, HTML/CSS/JS, Figma, Adobe Illustrator

Adam Hunt (Creative Designer)

Tools:

Phase I

Approach and Strategy

Problem Statement

The existing landing page had not been significantly updated in many years and exhibited several usability and engagement issues.

There is no clear pathway to guide users to school resources

Static visual content that failed to capture attention and there was no strong call to action

Objectives

To address these challenges, the project focused on:‍

  • Bringing the Institute’s updated visual identity to life
  • Improving the clarity of content hierarchy and navigation
  • Highlighting student voices and work
  • Conducting a comprehensive audit to inform design decisions

Solution

The final outcome was a fully redesigned homepage that:‍

  • Clearly communicates the Institute’s mission and scope
  • Highlights student work and voices
  • Features intuitive paths into individual schools and program content
  • Utilizes visual elements that feel cohesive with the new brand
  • The redesign improved user engagement and transformed the landing page from a pass-through stop into a meaningful entry point.

Phase II

Configuration and Structuring

Audit & Research

A full audit of the existing site identified key issues:

  • Average time on the landing page was low (users spent about 36 seconds)
  • Users weren’t engaging with visual content
  • There was no clear call to action or navigational focus

These key observations helped guide the restructuring of content and reevaluating visual assets.

Strategy & Iteration

Using insights from analytics and audit results, I revised the content structure to:

  • Emphasize the Institute’s schools as primary destinations
  • Improve scan-ability through clearer hierarchy and layout
  • Explore visual motifs (like brand shapes) to create cohesion across sections
Multiple iterations refined layout, color usage, and visual components to balance attractiveness with usability.

Design
Process

Working within the constraints of the existing Drupal CMS, the design was translated into a flexible, modern homepage using HTML/CSS/JS enhancements that:

  • Reinforced the brand without overwhelming school-level content
  • Increased visual engagement without detracting from the site’s core purpose
  • Improved accessibility and readability

Final Design & Implementation

After deployment, the redesigned landing page demonstrated measurable improvements:

  • Increase in average time on page (from ~36 seconds to ~46 seconds)
  • Enhanced user engagementClearer pathways to deeper exploration of schools and programs
  • The homepage now effectively supports discovery across the Institute’s ecosystem while serving as a compelling introduction.

Final Product

View the live website