{"id":3235,"date":"2014-01-23T14:44:24","date_gmt":"2014-01-23T22:44:24","guid":{"rendered":"http:\/\/blog.mozilla.org\/ux\/?p=3235"},"modified":"2016-02-19T14:41:32","modified_gmt":"2016-02-19T06:41:32","slug":"how-were-using-lucidchart-and-dropbox-to-reduce-duplicate-ux-artifacts","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2014\/01\/how-were-using-lucidchart-and-dropbox-to-reduce-duplicate-ux-artifacts\/","title":{"rendered":"How we\u2019re using Lucidchart and Dropbox to reduce duplicate UX artifacts"},"content":{"rendered":"

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<\/a> with the file-sharing service Dropbox<\/a>.<\/p>\n

\"Workflow\"<\/p>\n

The problem<\/h4>\n

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.<\/p>\n

The goal<\/h4>\n

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.<\/p>\n

How we did it<\/h4>\n
    \n
  1. We created a Dropbox folder and filled it with the required high-fidelity PNG mockups<\/del> PDFs with copy-and-paste friendly strings, sensibly named.<\/li>\n
  2. We made a user flow diagram of the high-level experience on Lucidchart<\/li>\n
  3. We linked each of the screens in the Lucidchart to the respective PDF Dropbox URL.<\/li>\n
  4. 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.<\/li>\n
  5. Optional classy step – we shortened the URL.<\/li>\n<\/ol>\n

    The result<\/h4>\n