We are interested to see if the two-dimensional grid concept, which can be used to plot risk matrices, translates well onto Jira Cloud and to use as many different approaches to design and implementation as we could - including new interface elements, libraries and optimizations. We wanted the UI to be vibrant, animated and a bit different, drawing on features like drag/drop, context menus, inline fields and lottie animations to give the App a personality.

What it does

Visualize your Jira Issues on a two-dimensional grid (a matrix), which can be customized in several ways to suit many different applications, for example, as a Risk Matrix to help you understand risks and their likelihood by plotting your issues on the grid.

In order to apply to many customer sectors, the following features had to be implemented:

  • Increase or decrease the number of rows and columns in the matrix
  • Multiple matrices per Project
  • An issue must be able to appear on multiple matrices at once
  • Customizable labels that are used across the matrix and interface
  • Change the color of individual cells or entire rows and columns.
  • Ability to see which matrices an issue is included on from the 'View Issue' page

How we built it

We had 4 design and requirements meetings initially where we decided (a) which features needed to be included, (b) what the layout and structure of the App was going to be and lastly (c) decided which team members will collaborate on which parts of the App. Craig constructed some high-level designs of the primary pages using Illustrator - the Matrix View, the Item List and the Settings page. Himal and Jack then performed the development based on these designs, which involved collaborating and working independently to product a solution that, when combined, is more than the sum of it's parts -

First, we designed the Data Model that would be used to underpin the solution (Issue Properties were eventually chosen), as well as putting together what we call the 'skeleton', which is a very early version of the App with all extension points added via the atlassian-connect.json file as well as their matching routes and React components - which are set up with react-router to respond to the relevant endpoints - this laid the foundation for the development work to commence.

Next, as we had designed the data model and architecture, we were ready to assign work to both developers to work individually to rapidly prototype each part - we decided that Himal would implement the back-end and the matrix settings interface, while Jack would complete the matrix and list front-end components - as they were most familiar with these elements. However, each developer also checked the others' work using the code history and suggested improvements during meetings we ran.

We frequently pushed our changes to Git, fixing any merge conflicts that occurred and ensured that we were aligned on the particular pieces - the Typescript language was great for this, as using type definitions, each developer knew what object structure and format to expect - this has been a problem in the past due to the flexible (weak) typing in JavaScript.

We also performed regular stand-up meetings a few times a week and collaborated as a team to make the App as cohesive as possible - but we still went through 2 release candidates before we were able to record our demonstration video and at the end we had a product in MVP form for submission and we are really excited to see what people think of it!

We're planning to do a recorded discussion on some of the choices we made with the App, but it wasn't possible to have this ready in time for this submission.

Challenges we ran into

There were numerous challenges that we ran into during the planning, implementation and design of the App - we learnt a lot from these -

  • One of the biggest problems was underestimating how much work was involved in writing the App in the short space of time and we had to compromise and leave out some elements for the submission (e.g. different matrix appearance options and matrix permissions). These features will be added to the release version of the App.
  • Working remotely – recent events have forced us to work in a different way and ensuring everyone was aware what each other was working on was difficult. We have learnt a lot from this which we will apply to our daily work.
  • The short implementation time meant that we had to work a lot more 'closer' and problems with version control (merging) were a lot more frequent than other projects we have worked on.
  • We were stuck on the data model for a little while, until we decided on a system that allows us to search not only for issues with a particular pair of values, but any issues in a particular matrix, column or row - great for allowing us to fix any values when you e.g. remove a row, as the operation is not O(n), with n being the number of columns but O(1) as you can get them all with a single query. This was made possible by using an array of UUID's which contains both the row and columns of the issue across all matrices - which we found beneficial. This used Issue Properties to store the matrix values and the Jira Index to index their values - meaning we didn't have to write our own storage system (the App itself is stateless other than the required AddonSettings data.

What's next for Matrix for Jira

We plan to release Matrix for Jira in July after it has been thoroughly tested.

We'd also like to implement a number of features that we had to leave out of this version due to time constraints:

  • Different appearance options (as shown in the appearance settings tab) that change the view onto the data
  • Permissions that can be placed on individual matrices to restrict access
  • A global page which allows you to access and search for matrices across all of your projects
  • The ability to opt-in or opt-out Projects from the Matrix capability

We'd also like to improve the operation of the drag/drop and context menu features on the Board, as they don't work great on touch devices at the moment.

Most of all, we are excited to see the community response to Matrix for Jira and are looking forward to bringing this to customers soon!

Share this project: