How It’s Made: The Dropbox Web

Hey all,

Ding! leveled up!

Some new features:
– Prettier! (we hope?)
– Multi-select on file browser
– True bulk operations (with progress bar for large file operations)
– The ability to download zip files of arbitrary sets of files/folders
– Search on the file browser
– Significant improvements to navigation
– GMail style keyboard shortcuts (!)
– Mobile optimized version of the site (for non iphone users)
– Countless UI/usability improvements
– New Getting Started tab (check it out for a surprise!)

So ever since they’ve come out, I’ve always been a huge fan of the How It’s Made videos. Sometimes it’s pretty obvious how the featured object is made but it’s always pretty cool to see what goes on behind the scenes (How else would you know that treadmills were originally made for farm animals?) Anyway, we may be too lazy to provide you a video of how our brand spankin’ new redesign and other web projects are made, but maybe a description will suffice.

Those of you who have been with us since our prehistoric days know how much the page has evolved over time– updating the site is always a work in progress. Like the previous designs, the impetus for this one came pretty spontaneously. I was sitting at my computer and thought ‘this site’s kinda… ugly.’ This is usually what spawns the next step in the process:

Once I’ve ID’d a problem, I take a YPOJ (yellow pad of justice) and camp out on the office couch for several hours making sketches of what I envision the upcoming design to look like. Once I’m happy with several candidates, a few of us (Arash, Trevor, the other Jon, and myself) sit down and discuss whether or not it’ll work. Each of these designs get dumped into photoshop and the resulting .psds are prototypes for the final design.

Then begins the months long process of iterating. This is where Trevor Berg begins his magic and turns the .psds from the previous step into an actual usable website. This is housed on his machine and viewable to everyone within the Dropbox office.

The web team has a shared folder and within it is a notorious text file called ‘THE LIST.txt‘, which has every complaint and nitpick about the project in development (we’ve recently started moving these lists to Etherpad, which is an awesome app by the way). These range anywhere from big changes (the Getting Started tab was initially a complaint) to really, really tiny ones (move this word down 1 pixel). Trevor whittles this list down (the total number of items sometimes span several hundred) until all of us are happy with the design and usability.

Final Product
The result is what you see on Nearly every page and design goes through the process listed above, and we like to think that it’s served us well for the past year.

Let us know your thoughts on the redesign!