Home > Collaborative prototyping > How to close the gap between design and development in 5 steps with Justinmind and Jira
Improve the designer-developer workflow in 5 simple steps, with Justinmind's new Jira integration

Improve the designer-developer workflow in 5 simple steps, with Justinmind’s new Jira integration


Constant back and forth is the bane of many a designer’s existence. It’s difficult when you’re deep in a design, the developer is lost in code and communication goes out the window. But what if it doesn’t have to be this way? What if designers and developers were finally on the same page making great work?

With Justinmind’s Jira integration, we’ve found a way to bring visual and textual definitions together.

Integrating Jira and Justinmind means your prototyping process will be more collaborative, time-saving and in sync with the developers you work with. You can integrate the tools, allow development teams to see designs in context, link software requirements to prototype elements and share ideas with developers. The Justinmind for Jira Software app is available for both Cloud and Server from the Atlassian Marketplace – download it free!

Let’s look at how to close the gap between design and development in 5 steps with Justinmind and Jira.

Step 1: Choose a developer friendly prototyping tool

To close the gap between designers and developers you’re going to need a robust prototyping tool that’s extra friendly to developers. Justinmind, luckily, has a developer friendly version with design inspect features. It’s also free to add as many developer roles as you want!

Using a prototyping tool that’s set up for developers means fewer messy hand-offs, fewer revisions and happier design-development teams. Win win.

Find out more about Justinmind’s all-new developer friendly features.

software-update-8.0-justinmind-for-developers

Step 2: Make collaboration intuitive

Collaboration should be as intuitive and fluid as possible. Nobody wants to waste their time going back and forth over little details when you could be designing the next big app. Our Jira integration means designer developer workflow is enhanced – with just one click you can import all Jira Software issues in a project.

To make your workflow even more consistent, configure Justinmind to have the same Requirements column settings as Jira Software for ultimate usability.

What does this mean for designers? It means you can save time by getting designs right the first time with fewer mistakes. No longer do you need to tolerate a never-ending back and forth – AKA the productivity killer.


Download Justinmind and put a smile on your developer’s face

DOWNLOAD FREE


Step 3: Never lose sight of requirements

Hunting for documents and specs is a bore, and so is flipping back and forth between different screens and apps. Stop the confusion and get the full benefit of Jira integration by seeing all the software requirements right in front of you while you prototype solutions, helping you to stay on track.  Not only that, but you don’t need to waste any time or energy writing specification documents.

When you’re stuck into your prototyping process, you can link requirements to the screen or UI element that they relate to. Just drag and drop and no one will be in any doubt that all the requirements have been considered.

 

Step 4: Keep developers in the loop while you prototype

At any point during the prototyping process, you can invite developers to review your wireframe or prototype. So, if you’re in need of some contextual feedback about an element, simply share your prototype and let them comment. Likewise, if you just want to know you’re on the right track.

When you send a shareable link to your developer, they can add their comments to the simulation. From there, you can iterate based on their feedback. This is the kind of design collaboration we’ve been dreaming of.

Let’s illustrate: imagine you’ve made an interactive prototype in Justinmind. One of the requirements is a specific UI element must be multi-lingual. The process is super simple:

  • Import the requirement to Justinmind, if you haven’t already
  • Build the relevant screen/UI element, without losing sight of the requirement
  • Associate the screen (or just the specific UI element) to the multi-lingual requirement
  • Export back to Jira Software and developers will see your prototype’s solution in context.

justinmind-jira-add-on

By working in this way from design to delivery, teams can stay in sync throughout prototype development.

Step 5: Export your prototype and requirements back to Jira Software

Now we’re near the end of the design-developer cycle. When you’ve iterated on your developer’s feedback, you just need to click export. Your developer can now see your wireframes and prototypes in the Jira project, along right the relevant issues so they are up to date on any changes made.

When your developers are ready to get their fingers moving and start coding, they can download the prototype (or just the documentation) and access Design Inspector mode in Justinmind’s developer friendly version.

justinmind-jira-add-on-export

They’ll know the exact spec of your design, assets won’t get lost in a hurricane of emails and they’ll have access to the latest design version.

Justinmind for Jira workflow: Design-development collaboration made simple

To improve your prototyping process, let’s break down how Justinmind’s Jira integration works.

Once you’ve downloaded the Jira Software app, open Justinmind. Under Plug-ins go to Jira, then Import Requirements. This step will bring all the requirements outlined in Jira Software into Justinmind so you have them by your side as you prototype.

Now, one of those imported requirements might be something along the lines of ‘Log in Page’.

After you’ve designed the log in page as outlined in the requirements, you can associate it with the screen so they’re linked. By dragging and dropping imported Jira issues from the Justinmind requirements tab, you can associate them to your created UI elements.

If you want to share it with other designers or developers to get feedback or comments, click Share and invite the relevant people.

When you’ve gathered all relevant feedback, under Plug-ins go to Jira and then Export Requirements. Exporting to Jira Software will only work when you have the relevant requirements linked to specific screens.

In Jira, there will be an uploaded prototype for developers to view online or download.

Once downloaded, developers can see the exact measurements, attributes and assets directly in Justinmind. All they need is to be assigned the developer role. Simple!download-justinmind-prototyping-tool-banner-1

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free