Panic’s Pixel Perfection

A few months ago, a very special email dropped into my Inbox. “Dear Mayor McPreshit,”, it greeted me. I was one of the very few lucky recipients of that email, one of the very few who were selected to test drive an update to the internet’s oldest known, possibly the most beautiful Truck. Originally known as Transit, the gorgeous and powerful Truck went through hundreds of bug fixes and enhancements and was finally unveiled to the public on April 27th, 2010.

The brilliant folks at Panic, arguably the most loved Mac software development firm on the internet today, had put in a lot of effort to bring us an outstanding update to Transmit, their FTP app. But their love for pixels isn’t just limited to the app. We’ve seen some amazingly gorgeous things come out of Panic lately.

The Status Board

Partly inspired by the Cultured Code Development Status Board, Panic, Inc announced their own (internal) Status Board on their company blog. While not as “pretty” as Cultured Code’s Board, Panic’s implementation is quite brilliant for all the information they managed to display in it. And considering it’s for their internal use, you’ve got to commend their efforts. Moreover, their company blog, itself is the most beautiful company blog I’ve come across.

Icon Porn

Most of Panic’s icons come from The Iconfactory, which details how each icon came about (take Coda’s design process for instance). Each icon is superbly detailed, yet looks completely recognisable even at tiny sizes in the dock. Panic has stuck to using the same icon over time, creating brands out of applications rather than producing new icons for newness sake.

Checking the Truck Out

If there’s any company other than Apple that gives utmost importance to ‘Customer Experience’, it’s Panic. The whole experience of landing on their Transmit page and purchasing a copy of T4 makes you feel like you’re the king of another planet on a visit here. If you haven’t already, let me tell you, you’re missing out on a lot of awesomeness.

Their homepage is fairly minimal, listing their most important apps dead centre. Clicking on the Transmit image takes you to the product page, where you’re greeted with the gorgeous truck icon in the header. As someone who loves to keep vinyl toys on his desk, I wish there was an actual toy of this truck.

Next, we’re given a few reasons why the update is “the best ever”. Crisp, precise and to the point. Oh, and “One more thing…”? You know where that comes from.

One of the very first things I like to look at when checking out a new software is the screenshots. But who needs screenshots when you can place an interactive feature right within the page?

Using some fair amount of black magic, the folks at Panic present the app’s features and screenshots in a fantastic interactive thingamajig. Little red dots attract your attention to important features and tips. Too many red dots confusing you? Already visited dots automatically turn brown. And everything is so slick that you’re just pulled towards everything.

Other areas of the app that cannot be shown in this screenshot are denoted by glowing buttons with an arrow. Just like in the app, these sections slide up/down revealing what’s in store.

Want to see what’s new in a simple list? That’s been taken care of as well. Again, instead of going for long descriptions of features or a “Tour” of what’s new, Panic chose to list all new features as a list, categorized neatly with some nice icons as well.

Purchasing the Truck

Before I get into this section, I have to say, this is, by far, the best experience I’ve come across for anything I’ve purchased. This even beats my first Mac purchase.

A subtle “Thanks” for purchasing the app in advance. Sure put a smile on my face.

The entire page is split into three sections.

1. What You Want

Fairly basic in nature, but a nice interactive touch where in it says “1 copy” by default, but changes to “copies” if you enter 2 or more. Panic has also built discounts into this, so entering multiple copies also denotes how much each copy will cost.

2. Who You Are

Your personal details. Nothing extra-ordinary.

3. How You’ll Pay

Two options – Credit Card and Paypal. If paying by CC, the icons highlight as per the card you’re entering (Mine was Visa).

The Submit button for the page also acts as the progress bar, telling you how much information is left to be filled. Once complete, it suffixes the “Done!” text to the button.

Once your order is complete, you’re presented with a gorgeous receipt of purchase.

But there’s more. At the bottom of the page, there’s a little speech cloud that says “We Really Appreciate It.” And when you click on that, the cloud spreads into mugs of everyone on the team. And that’s the teams way of saying, yes, they really do appreciate you purchasing the app.

That’s not all, even the receipt that is emailed to you has a good amount of pixel-love showered upon it.

Additionally, the guys at Campaign Monitor did a very good write-up of what one can learn from Panic’s approach to email marketing, taking a look at one of their CSS3 spiced emails.

It’s companies like Panic, Inc. that make us feel proud of the Mac platform. And we thank them.