Project

National Humanities Center is an independent institute offering fellowship programs for advanced studies in the humanities. They had approached Postlight to help them redesign their Wordpress website by focusing on building out a more advanced search feature as well as more curated collections. Their main goal was to allow users to easily discover the plethora of resources offered by the Center.

please note: due to Covid-19, some process is missing from this case study due to it’s location

Onboarding Onto the Project

The priority for NHC was to upgrade the discoverability of their site, not only by reconceptualizing the search functionality but by overhauling the entire experience to allows users to browse and find content and resources on their own. Their current site at the time put a lot of effort on the user to locate the information they may be coming to the site to find. 

When a user landed on the homepage, there was no immediate way for them to get their bearings on the site to decide where to start diving in. There was a huge auto-rotating hero container that took up a large amount of real estate, dwarfing the main navigation. The secondary navigation was given more visual prominence at the very top of the page. Once the user could locate the main navigation below the logo, they would have to hover over to open up large menus with a large list and no real context as to what was beyond. The Search functionality was hidden, only appearing when they scrolled in the fixed nav bar at the top of the screen or in the footer once the user scrolled all the way down to the bottom of the page. It was clear that UX was going to play a vital role in the rehaul.

NAVIGATION

In the inherited designs, I felt that the design of the feature wasn’t going far enough to evolve the site redesign. My goal for navigation was to focus on it as a key experience of the site, allowing the user to be able to not only easily navigate to the content they were primarily seeking but to also high-level information in a way to allow them to scan other areas that might pique their interest. I drew inspiration from websites such as Hong Kong coffee shop Noc Coffee Co, Swiss e-commerce site Arkis and Equfin, a financial holdings company based out of Cyprus. All three sites evoke focused navigation experiences, allotting space, and interaction to help drive and navigate the user’s time on the site. By leveraging sidebar navigation, the information was always available for the user to be able to access, as well as serve as a wayfinding tool for the user to always know where they were on the site. I also married the two navigation sections into one to give a more focused sense of direction.

Search

Search functionality was going to be the linchpin in getting the client to buy into the new direction as it was the one element of the redesign they were the most invested in. As previously mentioned, on the site they had, it felt that there was not a lot of importance given to the search experience, which may have left the user feeling a bit off-putting. In the inherited designs, there were three different approaches being offered, but none of them felt (to me) like a focused experience for a user. Here, I drew upon my time as a graduate student and all of the research I had to do. I couldn’t think of one search experience that stood out to me, and after doing a new round of research, I noticed that not a lot has changed in the world of academic search engine experiences. Academic search experiences utilize filter functionality heavily to allow users to dig deeper into their research. I looked to the UX pattern of full-screen search experiences, such as Obachan, Japanese homeware e-commerce site, and Infini Inc., a Washington state-based supplier of fine stone. Additionally, I added Search into the navigation, giving it just as much importance as other pages.

Visual Design + Accessibility

National Humanities Center did not have a brand or visual design system that they were using beyond their logo. They initially had given carte blanche to explore different visual approaches. Their one mandate was that the site had to be accessible. Again, the designs I inherited felt that they fell a bit short not only in establishing a visual UI pattern but also from an accessibility perspective as well. I wanted to base the visual language using contrast and interaction motion to solve for visual accessibility upfront. I focused on incorporating a minimal treatment of black and white throughout the design system, contrasting that with an aqua blue in areas that were linked. I used type treatment as the visual element, use large pull quotes, underlines and rectangular CTAs to enhance the visual elements of the site.

The fonts selected in the inherited designs were IBM Plex Sans and Source Sans Pro, both Google Font sans serif fonts. I knew that I wanted to incorporate a modern serif font into the system to evoke an academic feel and after some typography exploration, paired it with the sans serif Karla.

Green Light

When presenting this new direction to the client, I approached it in a way that allowed them to stay with the current state of designs if they felt more comfortable with that. I had faith in my designs, and after walking them through it and sharing my UX thinking behind the decision making, they were completely bought in and even more excited about where the design was taking the site experience. With that buy-in, it was time to crank out the rest of the experience.