Kicksend lets you send tons of photos to people you love. A month ago, we released a revamped version of the awesome Kicksend web app. The relaunch was closely tied to making Kicksend a lot friendlier towards everyday people. To push that along a little further, we were brainstorming a new photo-sending flow for our users. Here’s how it all came together technically, and how this exercise helped influence Kicksend’s current branding.

Whiteboarding
At Kicksend, we whiteboard new product flows as a team. For this session, we were wondering what we could show users that would give them something interesting to look at while photos were sending. We decided that everytime someone sent photos from Kicksend on the web, we’d show them a subtle animation of a rocket blasting off, which was in line with Kicksend’s existing characteristics as a speedy photo delivery service. Here’s Derrick’s first attempt at fleshing it out on paper

First Draft
We had our illustrator, the mighty Mike Kus, come up with visual assets for the animation, which he created for us in a day. This included the actual rocket, flames, support structures for the rocket, a gauge that indicates photo sending progress and a beautiful moonlit background to set the stage. Here’s the result:

As photos send, we wanted the dial to fill up, and have the rocket blast off into the night sky, becoming smaller and receding into the distance.

To make the animation as close to reality as possible, we initially opted for HTML5 with an actual physics-based acceleration engine. Essentially, we would be animating the rocket using projectile motion and then scaling it to be smaller as it blasted off into the background. This involved setting up the HTML5 canvas with a coordinate system that made sense, and scaling/rotating/accelerating the rocket as a function of it’s position on the x-axis, while moving the rocket along the canvas using a projectile function tied again to the rocket’s position on the x-axis.

After a few experiments with Mathematica, we found a few custom projectile functions that worked well, and we had a pretty decent proof of concept. When we decided to test performance, however,  we ran into serious issues with every browser except Chrome. The problem seemed to lie less with doing math in the browser at a rapid execution rate and more towards browser compatibility of the HTML5 Canvas. Animations over a big Canvas were lagging most of the time, and we weren’t confident enough to move forward with it, even though animations on a smaller canvas object seemed to be consistent.

Second Draft
At this point, we were considering scrapping the rocket altogether when we realized we should probably give the new CSS3 animation functions a shot. A little digging showed wider compatibility on multiple browsers so we decided to spend a little time poking around.

20 minutes later – surprise! CSS3 animation support is actually quite powerful, and we wound up replacing most of the rocket animation with CSS3 properties. We scrapped the projectile motion equations completely and also moved off HTML5 Canvas for the most part.

The new way of animating the rocket was now a combination of the following CSS3 properties: transition and transform (for rotation) operating on a rocket image. The actual movement of the rocket (slow start, then speedup) is governed by a custom Cubic-Bezier path that the transition property supports.

This method was significantly smoother, was supported on many more browsers and essentially gave us a solid foundation on top of which we could build out more of the photo sending interface confidently.

Rocket Gauge
We still had some trouble with animating the rocket gauge. Since it was shaped like an arc, filling in backgrounds using transparent foregrounds didn’t really work cross-browser. This is when our realization that HTML5 Canvas actually works consistently with smaller canvas sizes helped.

The rocket gauge was then coded up as a simple canvas arc that gets drawn on the canvas as the photos send. We also used the aforementioned CSS3 properties to make the gauge’s needle move along with the arc drawing. For IE 8, we reverted to a simple progress bar since it didn’t support Canvas.

We pushed the rocket to production and were super happy with the response from our users. Time from whiteboarding to production push: 4 days.

Send some photos on Kicksend to see the animation in action.

And Then…
A few days later, we were wondering what to do about our email newsletter, nurture campaigns and notifications. At that point in time, the layouts were quite terrible, with very limited Kicksend branding. Worse, they looked unfriendly and unapproachable, which directly affected our conversion rates.

When we gave Mike Kus the mandate to redesign our email newsletters and notifications, he used the new rocket to guide his work, resulting in a fresh new look for all our email nurture campaigns, newsletters and notifications, and one that improved the overall cohesiveness and conversions of the app dramatically.

Looking back…
We’ve been working on Kicksend for over a year now and as a team we’ve gotten to know each other’s strengths very well. This web app relaunch was some of our best work together as a team, where every person on the team stepped up to make our product shine.

Thanks for reading!

PS: If you’re interesting in working on a tight product team, we’re always hiring stellar folk.