Responses by Sarah Asip, system design and research, Language Dept.; Ayesha Shakya, digital product manager, Malala Fund; Craig Wann, principal and lead developer, CodeZone; and Jada Vogt, art direction and visual design, Language Dept.

Background: “Malala Fund works to break down the barriers keeping 130 million girls out of school,” says Ayesha Shakya. “We advocate for policies that will help more girls learn, invest in education activists across eight countries and elevate the voices of young women fighting for a more equal future. This microsite is a celebration of our impact in the last year and helps our donors understand how much we can achieve with their generous support.”

Larger picture: “We wanted the launch of the 2021–22 annual report to preclude the start of our end-of-year fundraising, which usually begins around October,” Shakya explains. “While not part of a larger campaign, the site adds to the story of our ongoing work to ensure every girl around the world has access to free, safe, quality education. Girls’ education is a complicated global challenge, and I hope this site can act as a resource that demonstrates how innovative, flexible approaches like ours can help accelerate progress.”

Design core: “The horizontal scroll on desktop enables the viewport to frame content as in a publication,” say Sarah Asip and Jada Vogt. “The navigation is naturally embedded in the reading experience: bookmarks are built right in, and color is used as wayfinding. A distinct color and icon from the brand system give identity to each chapter. Progressive loading animations pull the reader forward. Navigational ‘bookends’ encourage reading chapters in a linear fashion. Together, these core design features support a dynamic yet natural reading experience for many bite-sized stories.”

Favorite details: “Our goal was to build a site that could succinctly highlight Malala Fund’s tremendous impact while prioritizing good design and usability and creating the best user experience for our readers,” Shakya says. “The design and functionality aren’t just standalone features of the site; they reinforce Malala Fund’s messaging, and I’m super proud our teams pulled it off!”

“The country icons and patterns within the Programmes + Advocacy chapter make for a fluid experience to move back and forth between countries,” say Asip and Vogt. “The running patterns cue the user to where they are and give each country its own moment.”

Challenges: “Differentiating from the prior year’s annual report while using the same horizontal scroll structure and visual system,” say Asip and Vogt. “How could we use the same elements in a boldly different way?”

“It was challenging to measure and decide what information was important to us to include in the report versus what donors needed to know,” Shakya recalls. “We couldn’t have readers scroll infinitely through all the content, but we also wanted to ensure we didn’t leave out any crucial bits of information about our work. I believe the team found that sweet sport and produced a balanced, thoughtful and innovative product by making it interactive and maintaining dynamic storytelling throughout.”

New lessons: “We learned how important it is to be agile as we build our designs and adapt quickly—but thoughtfully—to changes,” Shakya says. “When you’re working on a large-scale project like an annual report, it is important to balance the requests from our many shareholders with the needs of our donors and have the design and functionality of the site serve that purpose. It was a challenging task, but the strong cross-functional collaboration between our teams ensured our success.”

Navigation structure: “We wanted to create a fluid navigation that wouldn’t disrupt the user’s flow,” say Asip and Vogt. “It was important to let readers jump around the site without getting lost—through the use of color—as well as provide natural encouragement to read sequentially through the cues at the end of each chapter.”

Technology: “The site is written in JavaScript using React and the Next.js framework,” explains Craig Wann. “We used a CSS framework called Tailwind. The cloud-based service Contentful was used for content management. The site is hosted with AWS Amplify using static site generation, which means the site is compiled to static HTML when content or code changes.”

Special technical features: “Keeping design consistency across all screen sizes was one of the more complex issues we faced,” Wann says. “Most responsive designs allow some flexibility in scale and positioning across screens. We wanted the annual report to behave more like a PDF, where all elements, spacing and type sizes scale proportionally and consistently across all screens. To accomplish this, we extended Tailwind to add custom utility classes, through which it creates a grid based on the height of the browser’s viewport. We then based all type and element sizes and positioning off of viewport size rather than pixels or other standard units. This enabled us to create a grid that scaled pixel-perfectly across all screen sizes.”