While working on upcoming improvements to Firefox Sync, fellow designer John Gruen and I happened upon an interesting workflow that combines the hosted diagramming tool Lucidchart with the file-sharing service Dropbox.
The problem
The problem we often face as designers is that our work is published in many forms: user flow diagrams, low-fidelity wireframes, animations, high-fidelity mockups, and ultimately usable graphic assets; these artifacts quickly become out of date, especially when duplicated and compiled into larger design documents.
The goal
We aimed to ensure that the Sync team could easily acquire the latest user flow diagrams and high-fidelity mockups, without overloading them with the full UX document we maintain for the front-end developers. The icing on the cake was that by using Lucidchart and Dropbox, we were able to achieve this, keeping file duplication at a minimum.
How we did it
- We created a Dropbox folder and filled it with the required high-fidelity
PNG mockupsPDFs with copy-and-paste friendly strings, sensibly named. - We made a user flow diagram of the high-level experience on Lucidchart
- We linked each of the screens in the Lucidchart to the respective PDF Dropbox URL.
- In Lucidchart, we turned on PDF publishing for the page under the Share menu; this provides a link, which will generate an up-to-date PDF with working links every time it is clicked.
- Optional classy step – we shortened the URL.
The result
The result is the above link which generates an up-to-date PDF containing links to the respective mockups on Dropbox. Download the PDF, and click on the screens to see how it works.