Unearthing Pivotal User Insights to Redesign for Impact

Share Our Strength - No Kid Hungry (NKH) is an organization committed to ending childhood hunger in the U.S. One of the ways they fulfill its mission is by providing resources, research, and best practices to teachers, school administrators, policymakers, and advocates for implementing childhood hunger programs. The repository for this critical information is the “Center for Best Practices” (CBP) website. Unfortunately, the CBP team had identified several serious usability issues with their website and knew there was a possibility of other hidden problems they were unaware of.

Determined to help the CBP team boost their impact, we conducted a discovery project to define current issues, long-term goals, and a roadmap forward. Our discovery activities included the following: 

• Analytics Audit - Leveraging Google Analytics, we uncovered trends, patterns, and other metrics from the website’s quantitative user data.
• Content Audit - We spent time navigating through the site to understand the depth, breadth, structure, and variety of current content.
• Stakeholder Survey - We collected information to uncover the desires and needs of both the CBP administrators and internal users.
• Stakeholder Workshop - The survey allowed us to facilitate conversations with key stakeholders to better understand organizational goals, assets, and challenges and which provided critical context for interpreting other findings.
• User Survey - We worked with real end users to gather quantitative data to help us understand how they used the site, their frustrations, and what they felt was the most important. 
• User Interviews - Based on the results from the user survey, we interviewed users directly to learn more about their goals and challenges.

The results of our discovery audit outlined our approach to design and development.

Through our various exercises and data collection, we confirmed stakeholder suspicions that users were struggling to engage with the CBP website.

Both the stakeholder and user-focused exercises expressed issues with the site’s navigation issues. Left without a search function to locate content, users had to continuously dive down certain paths, come back out, and then try another way to find information. 

Secondly, content for specific topics had been duplicated multiple times in different sections of the website, causing an excessive number of pages. In addition, the site’s content architecture prohibited users from getting the “full picture” of any topic living on the site. Instead, they were presented with pieces of fragmented content they had to stitch together - relying on memory, which is cognitively taxing.

As our team moved into the project's design phase, we needed to consider how we would approach reinventing the CBP website so that it would be unique yet adhere to the No Kid Hungry brand guidelines.  
We started by creating two moodboards, one that heavily emphasized the NKH primary color (corey orange) and another that included their eight secondary colors.  We presented both options to the CBP team, with the obvious “winner” being the one that incorporated their extended color palette, bolstering the new brand identity we wanted to establish.

Next, our team was tasked with simplifying the complex content architecture to make it easier for audiences to navigate and find information on different programs offered. Due to the vast layers of topics, subtopics, research, etc., we needed to strategize how to present the numerous content types in a user-friendly way. 

Working hand-in-hand with the CBP team, we determined the best way to display this content would be in the form of imageless cards. From there, we organized the content by category and assigned a different brand color to each. We then tagged each card with either ‘research’ or ‘resource.’ The end result was a streamlined system that simplified information discovery and brought a sense of playfulness to the new site.

The previous iteration of the site was built on Drupal 8, and aside from the troubling UX issues, it was riddled with limitations for their team’s content editors. To maintain aspects of the original site, such as Programs, Events, and Resources, we decided to upgrade to Drupal 9. This allowed us to take advantage of the latest features and security updates while keeping the existing functionality intact.

To establish a consistent structure for content editors, we followed a component-based approach by creating a set of content types and paragraphs. These pre-defined components act as building blocks for content editors to craft new pages while ensuring that the layout and design remain consistent throughout the site.

One of the biggest obstacles with the old site was that it had overlapping content and looked very different from page to page, confusing visitors interested in learning more about CBP's programs. To address this issue, we built new program pages that unified the content. Each program page has a tab system that categorizes the content based on what the user may find helpful for that program.

Next, our developers built a jump link sidebar menu that allows users to find and navigate the content they need on pages densely packed with information.

Finally, we incorporated the newly designed resources and research content cards into the programs page template so that any educational program can use them. With these updates, users can navigate the content according to their needs without the risk of getting lost or losing their place.

We are incredibly grateful for the chance to have collaborated with this remarkable non-profit organization. The new, colorful design reflects the innovative personality of the CBP, and with their new toolkit, content editors will be able to seamlessly update and customize their website without compromising its functionality.