Malala Fund Annual Report
Each year, Malala Fund publishes its Annual Report, documenting the organization's efforts and the progress they have made for girls' education.
For fiscal year 2021-2022, the Annual Report details the efforts of Malala Fund to support partners in Afghanistan after the Taliban takeover resulted in the banning of girls' education, the launch of the Girl Programme to provide opportunities for young women to connect, learn and take action to improve the lives of girls in their communities, and the expansion of Malala Fund’s Education Champion Network into Bangladesh and Tanzania.
The Annual Report plays an important function in fundraising and is largely shared with Malala Fund's major donors and supporters to kick off end of year fundraising. The microsite acts as a resource that demonstrates how innovative, flexible efforts can help accelerate progress. With this in mind, I wanted to build a product that was informative and rich in impact, yet innovative in its approach.
As the Product Lead, I was in charge of leading product strategy and developing a roadmap for digital fundraising. I led a team of designers from the design firm Language Dept. and engineers from web development agency CodeZone through the entire product development lifecycle from ideation, design and development through to launch. (continued below)
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.
To recreate the experience of reading through a publication, we divided the Annual Report into chapters and enabled horizontal scrolling across the microsite. The navigation is embedded within the reading experience and readers can read sequentially chapter by chapter or choose to explore the site.
The cues at the end of each chapter moves the readers along and adds to the dynamic storytelling.
The design and functionality aren't just stand-alone features of the site; they reinforce Malala Fund's messaging. We used colors from Malala Fund's brand palette to reiterate the organization's strong brand identity and thoughtfully placed striking visuals to convey impact.
We peppered the microsite with animations that load progressively as you scroll to create a sense of movement. Each chapter followed a similar design structure and was designated a distinct color and icon.
To risk having the information presented be too dense, it was important to create a good balance between the copy, visuals and animation so that the audience could still explore the microsite without feeling overwhelmed. Breaking the microsite into chapters also helped achieve a more user-friendly interface to prevent the audience from scrolling endlessly.
Having the design and content be consistent across all platforms was also a motivator in telling a cohesive story not just on desktop, but on mobile and tablet too. A responsive design based on the browser's viewport height ensured the Annual Report would scale perfectly across all screen sizes.