One of the features I use most in Jira is actually provided by one of my favorite plugins – Balsamiq Mockups. The Balsamiq Mockups for Jira plugin lets you quickly attach UI mockups to any Jira issue, turning Jira into an even better collaboration tool for certain tasks – especially design and UI projects – and helping the issue requester communicate exactly what she needs from the assignee.

We use Jira pretty heavily in marketing, mostly to coordinate tasks with our Website Task Force team (the acronym was their choosing, an homage to how they react to most of the issues assigned to them). That team handles both the actual design and production of our web site, and communicating requirements precisely to them is a must. That’s where Mockups comes in handy. Mockups is the simplest way to visually communicate your design requirements, and the integration with Jira lets you attach these visual requirements directly to Jira tasks or issues.

So here’s a simple example of the feature in action..

Redesigning our “Contact Us” page

We recently decided to update our Contact Us page – partially to improve how content was organized, partially to provide better information to customers before they contact us (so maybe they no longer need to), but also because a few of us thought it was ugly.

So, we start with a Jira issue – what we want done, who we need to do it, and the date we need it done by. Okay, easy enough. Now we need to give as much guidance as we can around what we really want. The simplest place to start would probably be a piece of paper and a pencil, but that presents two challenges: 1) what if you suck at drawing, 2) even if you don’t suck, how are you going to link it simply to Jira, or share it quickly with distributed teams?

Jira Operations.jpg

With the Balsamiq Mockups for Jira plugin installed, I have a nifty additional operation available on each issue – I can add or edit a mockup. With Mockups, I have a simple way to visually communicate what I want.

Clicking the button launches the Mockups application, a simple but powerful web-based editor for creating wireframes or UI mockups. Drag-and-drop pre-built controls on the page, configure how you want the page to look, save-and-close the page, and Voila, the mockup you’ve created is attached to the Jira issue as an image. And the mockup is editable by other collaborators on the issue.

Mockups UI.jpg

The Mockups UI for designing…wait for it…mockups!

In this example, I add three mockups, one for each page of the site we’re designing. Our designer makes an actual design mockup for each, and attaches those to the issue as well. Conversation ensues through comments on the issue (which you can handily track through RSS, email notifications, or through Jira’s Activity Streams), we make a few small adjustments, and then agree on the final design. In parallel, we use Confluence to collaborate on the content we want to amend on the page, and include a link to this Confluence page directly in the issue. Confluence also has a Balsamiq Mockups plugin, so we add the same mockups to the associated Confluence page.


Mockups added to a Jira issue.

Mockups with Design.jpg

Real designs, added to the same issue, as a result of clean and direct mockups.

A menage-a-trois for design tasks

The combination of Jira, Confluence and Balsamiq Mockups is the perfect menage-a-trois for design and content tasks. Outline content in Confluence, use Mockups in both products to visually describe what you’re after, and use Jira to keep everything organized and on track. And best of all, it limits the back-and-forth that bogs down most design changes, and helps you get things done faster.

If you haven’t done so already, give Balsamiq Mockups for Jira (or for Confluence) a try. They’re both in the Atlassian Plugin Exchange.

Visual requirements management in Jira