Near-Real-Time Collaboration with Mockups and DropBox

Hi all. I am excited about this week's update because it enables powerful new collaboration capabilities in Mockups for Desktop without compromising the simplicity of the tool.

I am calling this week's update "the DropBox release".

What is DropBox?

DropBox is the easiest way to share and store your files online. Think of it as a shared folder on steroids. Its simplicity is a thing of beauty. I have been using it for months to transfer files between my desktop and the balsamiq servers, to share files with contractors and whenever I need to quickly post something to the web. I highly recommend watching the video on their home page or taking a quick tour. Chances are you'll sign up immediately. Oh, and it's free for up to 2Gb of storage, and very cheap after that.

So why is this "The DropBox Release"?

This week's free upgrade contains two features which, together with Dropbox, work wonders for collaborating on wireframes, both with clients and colleagues.

The two features are:

  • "Export All to PNG..." asks you to select a folder in which to export all the images of the mockups you have open.
  • I added a feature which checks for updates to the mockup file you have currently open in the background. If Mockups notices the file on disk is more recent than when you last loaded it, it gives you an option to reload the file to accept the changes.
  • acceptchanges

So why are these two little features so important for collaborating on your Mockups? Let's look at two scenarios.

Scenario #1: developer working with a client

Say you are devloping software for someone with the help of Mockups and DropBox. You already set up a shared DropBox folder with your client, so that you can share files easily back and forth.

Now whenever you need to make a change and send a new image to the client for review, all you have to do is use the new "Export All ton PNG..." feature and tell Mockups to save all images in the shared DropBox folder.

exporttodropbox

Your client will receive a notification of the files that changed and be able to see the changes immediately. The BMML files live somewhere else on your hard drive, the client only gets the PNG images. Oh, and Dropbox also keeps a copy of every version of the files, so your client will be able to see how the mockup evolved over time. Bonus! :)

Here's a quick screencast I made to illustrate this workflow:

Scenario #2: Working Together

Now say you are working with someone who also has Mockups for Desktop installed. In this case, you can save the BMML files in DropBox directly! You both open the same file in Mockups at the same time, and whenever one of you makes a change and saves the file the other person will get notified (usually in less than 5 seconds), hit the "Reload the File" button and see your changes immediately, just like that!

To repeat: in order to share a change all you have to do is save your mockup normally...DropBox will take over and send it around, then Mockups will notice and everyone will see your changes, in SECONDS! Magic! ;)

Here's a quick screencast I made to illustrate this workflow:

This is especially handy if your mockups contain images, as you only need to save them in one place (I have an "images" folder under each of my DropBox folders)...so you'll no longer need to zip your bmml+image files before sending them around...in fact you won't be emailing anything around anymore! :)

Obviously you could use any other folder-sharing technology with Mockups to achieve the same results...but I doubt it will be as polished and easy to use as DropBox is. :)

Other changes in this week's update

Mockups For Confluence Bug Fix: I finally fixed a bug with mockups with spaces in their names not showing up when you exporting the wiki page to PDF. Also, while I was at it, I removed the "edit this mockup" link from the PDF output since it doesn't make sense there.

New Application Icon: I finally created a new icon for OS X (and Vista?)....it still shows that I'm not an icon designer, but at least the pixelated jagged lines are gone...

icon128

How do I upgrade?

Upgrading Mockups for Desktop is free, fast and painless: just go here and install the latest version on top of what you currently have.

For Mockups for Confluence, download and instructions are here.

On a personal note, I am very proud to have now linked Mockups with what I consider three of the best Web products out there: DropBox, Posterous (with Mockups To Go) and GetSatisfaction (via this site). These 3 companies truly understand the importance of usability and simplicity, and do a great job at keeping their software simple while enabling powerful workflows, something I always strive for as well. Someone should acquire the 4 of us and turn us into a killer company! :) Just kidding, Balsamiq Studios is not for sale, I'm having way too much fun right now. ;)

Happy collaborating with Mockups and DropBox!

Peldi

P.S.Stay tuned for an exciting Mockups for JIRA update tomorrow!

Comments (12)

  1. nice work peldi. i also use dropbox – brilliant service.

    these are some kool features. keep it up.

  2. Can’t go wrong mixing Mockups with Dropbox. Two great products.

  3. Excellent! This is what I was needing for my small two-three person teams all remotely located. Perfect!

  4. hey peldi,

    great to see — we use balsamiq for all our UI mockups at dropbox :) let us know if we can help.

  5. This is what I call WOW :)

    Emiliano
  6. Pingback: Mockups 1.6 Release: Linking Mockups, and More! | The Balsamiq Blog

  7. How about simultaneous modifications to the same file? I’m presuming Balsamiq can’t handle that, and if someone else saves changes while I’ve been working on the same file, I’ll be left with the choice of clobbering their change or mine.

    [Peldi: when the "do you want to update" dialog comes up, you can say no, save your current copy with Save As... and then say "yes" the next time the dialog comes up. Then you can merge things manually. We are working on co-editing capabilities for our hosted application, stay tuned!]

  8. Hi.

    Commento to your “hosted application”

    And what about ability to allow customer/collegue to see mockups demo remotelly in something like “Presentation mode”

    Customer/Colleague will be able to
    - view and go through multiple mockups linked vie mockups links
    - and by that check and feel the workflow
    - add a comments

    Customer/Colleague will NOT be able
    - change

    Customer/Colleague will use ordinary browser

    Do you plan to have this as cheaper option in your “hosted application” version?

    Cheaper as the Customer/Colleague will no by able to change anything.

  9. Pingback: Online Wireframing Tools : Seminare: Redesign der Website der FH Aachen

  10. That is neat. Must try this technique out.

  11. despite its age, this post is still epic. Given that DropBox allows you track by RSS the activity of your feed I’m going to use this hack in conjunction with IFTTT.com to get notified by twitter replies (of a protected only followed clone account of myself) of changes in the mockup process.

  12. My partner and I have basically been doing this for a while already! Great that you have tools setup for it now :).

Leave a Comment

Your email is never published nor shared.