A New Information Architecture for the Johnson Center
The Dorothy A. Johnson Center is a global leader in helping organizations understand, strengthen, and advance philanthropy through professional development, applied research, and resources and tools.
Ready to re-organize and refresh their website, the Johnson Center was keen to partner with an agency that could deliver a new information architecture, help them articulate their “why”, and bring them into 2020 with a fresh design. Our team at Briteweb gladly stepped up to the plate.
Content and User Experience Go Hand in Hand
With a wealth of information to share, the Johnson Center’s website serves as a hub of valuable content for funders, foundations, nonprofit organizations, and individual donors.
Over time, and an ever-growing library of material, the website became cluttered, which overwhelmed and confused their audience. The design and copy no longer represented the progressiveness of their work and their passion for their mission. What was needed was a complete website overhaul, and we delivered just that.
We kicked off the project with the Johnson Center in the usual way: a discovery session and a landscape analysis. After we spent time getting to know the organization better, we dove into the challenges they were facing, analyzed similar organizations, analyzed a recent market study they conducted and surveyed a group of their stakeholders.
The results of this analysis led us to identify and prioritize the following objectives:
Clearly Communicate Their “Why”
The feedback we received from the stakeholders was that the website didn’t tell the organization’s story clearly enough. They wanted to be able to understand why the Johnson Center exists at a glance, without having to search for it.
We addressed this by placing their mission above the fold, as the initial primary focal point on the homepage. We replaced the carousel slider they had on the old website and made thoughtful design choices to draw focus to their “why”.
Improved IA and UX Design
Overall, the content published by the Johnson Center was high-quality, but the website was in desperate need of content consolidation and organization. There were too many pieces of information in different places and various landing pages, which the stakeholders surveyed found confusing to navigate.
To address this challenge, we started with an essential phase of the User Experience (UX) process, a deep dive into their audience — philanthropic organizations. Gaining a thorough understanding of this audience by speaking to them informed the way we would eventually design their Information Architecture (IA).
“Information Architecture is about organizing content and information according to how a user would expect to find it. It’s about understanding the audience first and then structuring content to meet their needs. Organizing and reshaping their content based on their audience brought out the Johnson Center’s hidden “why” even more,” explains Briteweb UX Strategist, Bonnie Van Volkinburg.
We worked with the Johnson Center’s team to understand the thought processes, experiences, and possible uses of the organization’s website in a process called journey mapping. Then we paired this research with a new offerings content framework that the Johnson Center had developed, which would serve as a structural foundation for the content. Together, we built a content strategy around this framework and developed an information hierarchy, within which the content was consolidated and organized.
Application of the Content Strategy
By organizing the information into drawers within a single page, we were able to visually deliver a considerable amount of information in digestible portions. In this way, we were able to guide users to the Johnson Center’s core offerings, and related content to improve engagement.
The combination of UX research and design and a user-centric IA contributed to a more sophisticated navigation and improved the overall user experience.
We topped it off with a search functionality that could bring users to the information they wanted quickly and intuitively.
A Visual Identity Uplift
Overdue for a website design refresh, the Johnson Center’s website was quite a few years old and no longer dated, and didn’t reflect the progressiveness of their work today. They needed a clear brand, a persona, a way to stand out, and for their brand to match their new website.
Rather than jumping into a complete brand overhaul, Johnson Center asked us to deliver a visual identity uplift — minor adjustments that would bring everything together seamlessly. Our design team refreshed their color palette and designed unique angled visual elements.
Before & After
This website redesign wasn’t just about how it looks, but how it functions for the Johnson Center’s audience. The organization’s new website uses smart UX design to highlight their specific expertise. It features dynamic colors, shapes, branding, and is home to a vast, well-structured resource library.
Built with the future in mind, the website is now also visually and structurally equipped to host even more information, setting the Johnson Center up to expand their horizons, and reach an even larger national audience.