How It’s Made: The Dropbox Web

Posted by Jon Ying on September 10, 2009

Hey all,

Ding!  http://www.dropbox.com 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.

Planning
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:

Mockups
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.

THE LIST
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 www.dropbox.com. 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!


37 Comments to How It’s Made: The Dropbox Web

Michael
September 11, 2009

Nice, although I really have to get used to having my folders sometimes on the right part (tab “files”) and sometimes on the left part (tab “sharing”), also, I would sort the tabs into files – sharing – recent events – help, but I can get used to it.

On the other hand: Why not integrate the whole “recent events” tab into the huge free space under the search-box in “files”-view?

What I, however, absolutely like, is the folder “dropbox homepage junk etc” on your screenshot in this article! ;-)

aspiroots
September 11, 2009

Great Job !

I was particularly happy reading “Mobile optimized version of the site (for non iphone users)”, something I'm waiting for month now…

However:

– “Javascript required” message with Blackberry's embeded browser

– with Opera, I view the home page, but can't change folder. result: can't download or view 99% of my files…

I don't see any improvement in this part, actually

mugpet
September 11, 2009

GZ :-)

Eric
September 11, 2009

I was excited to hear about the mobile optimized version, but like the above commenter, I'm having trouble with it on my BlackBerry. I went to http://www.getdropbox.com, but it didn't look like a mobile version of the site, just the standard one. I typed my e-mail address and password, and my BlackBerry has been stuck at “Running Script” for quite a few minutes. It looks like it's going to require a battery-pull to get it back from unresponsive.

Is there a direct URL to the new mobile site? mobile.getdropbox.com directs to the iPhone version. I tried changing the User Agent on my desktop browser to a few known mobile user agent strings, but never get directed to anything but the standard site.

Belzecue
September 11, 2009

Gasp! Absolutely killer redesign. Fantastic work, folks.

I rarely work directly via the web interface, but the redesign has me itching to spend some time there.

bzzzwa
September 11, 2009

Please give us a link to mobile version of Dropbox. I have same problem as Eric. I am excited to see it :)

Thanks

Petr

joemccann
September 11, 2009

Glad to see Dropbox constantly improving. I wrote an article on using Dropbox in conjunction with some other free technologies for “distributed collaboration”, or building a website remotely.

http://www.subprint.com/blog/d

yojan
September 11, 2009

Been waiting for that search bar…

Finally it is upon us!!

demorest
September 11, 2009

The only thing that bugs me is that “Get Started” is listed first, and stays there. I have been using dropbox for 6 months, I have already started.

Name
September 11, 2009

hey demorest,

there's a 'hide getting started tab' link at the bottom left of the page. this will make it go away :)

demorest
September 11, 2009

Found it just before you responded! Thanks!

Rodrigo
September 11, 2009

hey thanks for the surprise!

amigokin
September 11, 2009

The “Search on the file browser” feature is not working well for me. Most filenames I've tried are not being found by the search box. Is like the indexing of all the folders is not complete…

In any case, keep the good work guys!

turkif
September 11, 2009

Super awesome, well done guys! I really love the new design and features. Search, i love it!

Pierre Spring
September 11, 2009

thank you … i'm a recent subscriber, and i love your service … if only i had enough data worthwhile an upgrade ;)

sce
September 12, 2009

Simple elegant nice design. Now version 2! Nice! Keep up the good work!

andres
September 12, 2009

How many times have my “public” files been downloaded?!?!?!

I would love a counter!!!

kry
September 12, 2009

“- Mobile optimized version of the site (for non iphone users)”??

Where is it?

Alexander Gieg
September 12, 2009

The new design is nice, but I'd prefer the blue box, including the search field and the links below it, to be in the right side. Also, that blue box needs something inside it, otherwise it feels as wasted space. The most recent of the “recent events”, as suggested by Michael, would certainly be a very good option.

cssbit
September 13, 2009

lovely UI, i really like it .. hmmmmm i have some tips and ideas

paule1s
September 14, 2009

Congratuilations on a great job. I love your emphasis on the customer and ease of use. My experience with large file transfers is documented here together with a few feature enhancement requests

http://sharevm.wordpress.com/2

Paul

puppe
September 14, 2009

GZ

Jim M.
September 15, 2009

Can someone let us know how to access the “GMail style keyboard shortcuts”?

I would love to use them but can't find them.

Jim

Jonathan Dumaine
September 16, 2009

I have to say, I'm loving the new design. It's much better than the last few.

I also have to say, Dropbox has been solidified as one of my favorite companies of all time. You guys exceed your own expectations–not to mention my own–and anything you post has a witty, fun feel to it. There's no corporate droll, and it's fantastic because of it. You're exactly the type of company I would love to work for.

Karthik T
September 18, 2009

Seems like i might be the only ones, but what i can see as the Design(only design) changes.. i do not like. That blue box to the left looks disgusting and is mostly a waste of space.

Also i understand that gmail style more actions button is more optimised for multiple files thing.. But i really liked the dropbown next to the file kinda system, and this is just too cumbersome sometimes.

kudos on the other features. Web version is the one thing(+delta sync) that puts this above syncplicity(more fancyier web interface but im a google kinda guy, nice and simple>> fancy)

If you could only support multiple (custom, i.e. outside drop box) folders and ability to control which folders get synced whr(as in which comp syncs which folder-see above named competition) and maybe file viewers like i think the other guys do, i would give up on syncplicity without a second thought. as it is i need to use both of them for what 1 can do.

Floris
September 20, 2009

Thanks for the surprise :)

perelandra
September 22, 2009

I love the search functionality!!!

James
September 29, 2009

Awesome, finally!

Sally Carson
September 29, 2009

Congrats guys!

Kyle Reilly
October 2, 2009

If only they would support 3.0.1

*sigh*

bzzzwa
October 3, 2009

The web interface for non-iphone mobile phones just have arrived: http://m.getdropbox.com

Thanks for it Dropbox

bzzzwa
October 3, 2009

The web interface for non-iphone mobile phones just has arrived: http://m.getdropbox.com

Dimentium
October 8, 2009

mmm.. its nice. )

but can u make an alternative “simple” (old/previous) version avaible?

i use this bookmark “https://www.getdropbox.com/upl…” for quick access to upload form in “torrent” folder – for adding task in uTorrent app at my home computer, but now it doesnt work :(

i need make more *clicks* ;(

fly3rman
October 28, 2009

Iphone?

Give us S60 Client. Cmon S60 is way more older and alot more Devices use it.

Is development so much more easy for the Iphone?

Harald Jenk
November 27, 2009

Dropbox ist just great and helps me a lot. Thank you!

Ed
December 20, 2009

Hey! My computer just crashed and I lost everything. I figured that I could use dropbox to get my pictures onto your servers (I have like 400+) and then dump them via the website onto my computer. Only problem, the Apple iPhone App doesn't allow “mutli select” of pictures. Is it possible you will be adding this soon? This would make your app the PREMIER app to get pics off your iphone and onto your computer.

wb
January 14, 2013

The design and simplicity of your website is inspirational.
I am searching for a designer who can do something similar for a product.
Any contacts in South Africa? :)