New York City
/

GirlForward Annual Report

Innovative front-end techniques bringing stories home

We worked with NYC-based design agency ThoughtMatter to develop GirlForward’s annual report designed to be visually-rich and interactive.

Client

GirlForward

Industry

Nonprofit

Partner

ThoughtMatter

What We Did

Website Development

Data Visualization

Visit Site

The Challenge

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.

Welcome page layout with rooms animating open and closed on desktop and mobile screens

Problem-Solving & Implementation

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.

The Approach

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.

Screen Shot 2020 02 24 at 5 12 21 PM
Screen Shot 2020 02 24 at 5 11 30 PM

The 'Our Family' room tab, open and displaying an interactive graphic map of countries represented in the GirlForward community.