That is one hell of a sexy (and dynamic) infographic (and page). Congrats on launch. Pat your designer(s) and frontend devs on the back for a job well done.
Hi, i'm one of the founders of Postmates. We just launched Postmates but in the last 3 month we did over 1,000 closed beta deliveries in San Francisco. We created this infographic to share some of the insights with you. It would be great to get your feedback!
Hi Bastian. Postmates looks very cool, but the site seems a bit sparse with details (I did find the help page, but it was very hard). For example, if I wanted an item delivered, does it need to be boxed up like I would if I were shipping with UPS (e.g. cardboard box, packing tape, etc.) or are you guys more flexible (or, alternatively, can you guys deliver a box to the shipper, wait 2 minutes to get it packed, and then ship it)? How flexible are delivery times?
Eridius, this is great feedback. We can probably do a better job at describing this process. You do currently don't need to warp your deliveries with Postmates - so we're pretty flexible. Today our couriers can transport items that "one" person can carry but we will extend that in the future.
Brador, current pricing starts at $15 for a two hour delivery in San Francisco. We will switch to a more dynamic pricing pretty soon though. Thanks for sharing the Firefox bug.
The most important factor actually is the distance - but as i said we will have a more dynamic pricing soon. We wanted to launch with something that's easy to understand.
Why create your own courier company? Why not leverage and consolidate others. For example, http://www.phantomcouriers.com/ Phantom Couriers is the Web 1.0 version of Postmates up here in Canada. I could see them benefiting from a new UI like Postmates offers... they would already have the contracts with law firms, etc....
I developed the site but we have our amazing head of design, Skyler, to thank for the beautiful layout.
The First1000 site is entirely native javascript/html5/css3. No jQuery or frameworks. I believe that frameworks are fantastic but only if you are utilizing their full potential. In the past I've included jQuery for random bits and pieces but I found myself coding around it and I really don't like including a library where I only use a couple of its functions.
Here are some of the cool things we included.
Multiple background images in CSS3. This is a beautiful thing. We should rarely have to nest divs inside divs to achieve a layered background effect now.
Transitions (Webkit, Mozilla, Opera etc have their own implementations) for most of the animations you see on the site. I found myself using the transiton-delay: property a fair bit too. This is really helpful as you can set a delay before the animation start point.
Using delays is how we make the flip cards start from the top left and gradually flip over to the bottom right. Each group of flipcards (diagonally) are given a different transition-delay.
We transition opacity, width/height, top/left positioned coords and background-colors.
We use Transforms to achieve rotation. Each card has a slightly different angle ranging from -3deg to 3deg. If I had NOT been using transforms then I imagine each card would have been a nightmare to implement at an angle like that. It would have taken forever and I would have had to use images for the text. Thankfully you can transform an entire div (and its contents, of course) with ease in CSS3.
As you scroll down the page you'll notice the switches on the right highlighting depending on which card you are viewing. jQuery has plugins for this kind of thing (to see if an element is visible in the current viewport - http://remysharp.com/2009/01/26/element-in-view-event-plugin) but I thought it would be a nice challenge to achieve this effect with native javascript.
For things like numeric figures ascending from 0 to 5700 (for example) I used javascript's setInterval() function with a very short interval adding +10 to the innerHTML of the container. The loop breaks and clearInterval() is called, stopping the loop when the desired number, 5700 is reached.
I used a lot more absolute positioning that I would like to, but it worked out very well.
Transparent PNGs positioned above each card give the 'noise' effect.
I took advantage of lossless PNG compression (using Google Page Speed), and minified our CSS and Javascript.
Other cool things like text-shadow to make text appear to be slightly raised, or impressed always come in handy too.
