GirlForward Annual Report

Inspired by the idea of home — a nod to GirlForward’s mission supporting refugee, immigrant, and asylum-seeking girls — we worked with our partner ThoughtMatter to create single page digital experience resembling an architect’s blueprint on grid paper. Users would navigate by opening and closing different rooms in the blueprint, each revealing the contents of the annual report in the form of animating statistics and interactive elements.

A central focus of the site was the grid snapping animation, in which a room animated open while other closed rooms minimized and moved to the side as tabs. Our biggest challenge was finding a way to achieve this while ensuring rooms were always snapped, flush, to gridlines, regardless of device size.

Full mobile device responsiveness would be a challenge within the project constraints so we prioritized vertical breakpoints, revised mobile layouts to maximize screen real estate, and optimized overall accessibility.

To bring this vision to life, we employed cutting edge front end development techniques, using CSS and javascript in innovative ways to get all interactive elements to work in harmony with one another. We chose a React framework, gatsby.js, which works well for static sites.

For each room, we animated various graphs, dividers, curved text, and other graphics to move or activate on scroll, in some cases employing a parallax effect. We also created an interactive map graphic and vibrating molecule infographics through layered svg files. Some other features included a count-up timer, a scrolling marquee, and a 360-degree timeline.