Modernizing The New School's family of university websites was a persistent challenge for the interactive team during my years at the institution, and on the heels of the visual branding update by Pentagram in 2015, I was tasked to revisit the school-wide website navigational structure, a major linchpin in this process.

While universities typically have the burden of providing a lot of information and levels of engagement for diverse audiences, they tend to specialize in one core academic theme. However, as a venerated institution trying to establish it's brand in the modern era as a singular entity comprised of several leading universities with a robust, interdisciplinary academic ecosystem, The New School's web presence was having difficulty funneling the various target audiences and stakeholders seamlessly into the appropriate user journeys while maintaining a sense of sovereignty and cohesion.

Internally known as "The Hat", this bar was in place before my tenure at the university and sat on top of the earliest incarnation of the websites in the responsive era. It served to facilitate a means for users to apply, search the entire network of schools, and direct them around the university-wide landscape boasting an "Information for" menu drop-down button that featured targeted links for each audience type (students, prospective students, parents, admissions, faculty, administration, staff etc.).

While this was a step in the right direction to connect the schools under The New School parent umbrella and functioned well enough in a mobile configuration, it was discovered through subsequent analytics that the majority of users either tuned out the hat entirely, or if they did engage with it, the information dense options presented an unclear hierarchy as they conflated The New School university wide navigation options with those that were school specific.

Additionally, the spatial volume of "the hat", coupled with the internal site navigation (which converted into button blocks on mobile), AND Pentagram's stacked logo system pushed content uncomfortably far down the average mobile device screen of the era and exacerbated the information density issue in a visual sense.

Knowing that the majority of our audience engages with our information heavy sites on mobile devices with limited real estate, I took a deep dive into the UX and information architecture of the school-wide navigational options using a strong mobile first approach in my design explorations, focusing on the simplification of the site's navigational IA and scaling that simplicity back up to the desktop configurations.

By emphasizing the hamburger icon and making it a singular point of entry into the site's navigational offerings, I challenged the various administrative stakeholders' initial concerns about the removal of the hat and some of it's superfluous options, and their fear that a few users would not recognize its utility, by positing that the hamburger in fact provides a familiar semiotic anchor that the savvy, mobile user majority would recognize and intuitively engage. As my explorations evolved, the focus moved towards fleshing out a drill down menu experience:

The navigation's final implementation on mobile utilizes the drill down menu with a breadcrumb trail fixed to the top that economizes the vertical space and helps users find their bearings in the constricted mobile space. This orientation also adds another tier of links for the site navigation above the apply call to actions. The burger coupled with the search icon, creates an combination of iconography and functionality that at once feels current, simple, intuitive and invites unfettered exploration deep into the site. After clicking the hamburger icon to trigger the opening of the overlapping navigation module, users are then greeted with the search bar consolidated within at the very top of the screen, featuring a school specific contextual search prompt in the field. This is followed by a hierarchy of information with contextual, site specific calls to action links at the top, and New School university wide links in the middle and bottom tiers, featuring University Links (utilities and links targeted to specific audiences inherited from the Information For button in the Hat) and a portal to the homepages of all the schools that comprise the university (elevated from the footer) respectively.

The desktop navigation implementation slides in and overlaps the page from the right side of browser. This space gives the school the flexibility to place the requisite apply and request information calls to action links here to open room for more content in the Curated Content Tier at their discretion.

After several presentations and iterative refinement, my work ultimately resulted in a clean, easy to use, but fully-featured navigational system for all The New School's core audiences that affords a persistent, university-wide cohesion, and a modern and sophisticated visual and experiential sensibility to the craft of our sites.

As the internet landscape and the functional needs of The New School's web presence constantly evolve, this endeavor in tandem with the Tiers of Engagement, ushered the university's web infrastructure into the modern digital age, keeping the "New" in The New School, and I'm elated that I had a leading role in igniting and influencing these major steps forward and providing the school a strong platform from which to continue it's digital evolution.