Better, faster and
more beautiful proposals

This one was special right from the start. We had recently made the transition to a full creative agency with in-house development, and out of the blue came this awesome challenge that really let us show what we could do across the board. Beagle is a browser-based tool for agencies to create better proposals. It was built by a team from Citrix that also worked on their popular project management tool, Podio. When they were still establishing the brand and building the first version of the product, the Beagle guys approached us with a very open brief: Create a landing page that would wow the target group – people at agencies – and get them to try out the beta version.

Getting it all on paper

The client had done a solid job of outlining the Beagle brand footprint when we started, but the product wasn’t complete. We came up with a narrative that didn't require imagery from the product: Through the metaphor of paper we would create a visual universe with interactive motion graphics to tell the story of making a proposal with Beagle. When we dove in, the paper shape quickly became the thing that defined the landing page experience for all of us. Working in parallel streams around this idea we created storyboards, copy, design, animation and prototyping of the final experience – all within a few weeks and in close collaboration with the Beagle guys.

Unfolding the experience

All animations were made fully custom, designed and assembled from the ground up. A lot of love and sweat went into tweaking every little detail of the site; getting animation timing right, trying out different floating effects for the tear-out piece of paper, balancing copy against visual artefacts and all the stuff that was moving around, while still keeping the site running fast everywhere. It was important for us to never block user input. We went to extra lengths to ensure you can always continue scrolling, or scroll backwards whenever you want, without the animations breaking. This is controlled by a homemade component that knows the size of your browser’s viewport, how far you’ve scrolled in the page and which animations should be triggered at any given time. It also knows not to waste resources by rendering stuff that’s outside your viewport.

Over 100.000 unique visitors

With no marketing initiatives the site created a lot of buzz on Twitter, Facebook and design community sites like Product Hunt, Siteinspire and Layervault. The second wave of traffic came briefly after, from award sites like FWA and Awwwards.com. Altogether, the site generated over 100.000 unique visitors in its first month, with a conversion rate consistently above 5%.

Our role in this project included strategy, concept, copywriting, content creation, UX design, visual design, art direction and development.