WIP -- New donation page (tribute section)

Some more of the new donation page we're working on. We really wanted to include a new version of our tributing process that would engage people without creating either: 1) an unworkable fulfillment process on our end or 2) an overly complicated process for users. The additional challenge was how to create this sort of user experience in a way that was subtle but immersive if a user goes forward with it.

Our solution was to create an expanding/nested view (almost a sub-app, really) within the donation page. It's still a part of the overall angular app and uses UI-router to achieve nested views. We used the greensock.js animation library to achieve the smooth css transitions.

The attached sreencap show the secondary and tertiary steps of the process—a user is able to choose their card, specify who it is written to/for, and then review it all before returning to the main donation app.

tribute.mov
6 MB
Download

More by Children's Hunger Fund

View profile