Jira App/Plugin
The product I was working on is one of the apps on the Atlassian Marketplace that allows Jira users to embed their Figma files and interact with it right in the Jira issue with more advanced features than just posting links.
The client asked us to improve the overall UX of his product and help it stand out on the market, as it was developed without involving a UX designer, without user research and usability tests. It was created based on their own basic competitor research and the capabilities of the original platform (Figma API).
Project estimation
Design process roadmap creation
Competitors research
UX audit
Usability testing
Reports formation
Prototyping
UI design
Style guide
Duration: 2 weeks
Team: UX Designer (me), Lead Designer
At the kick-off meeting, we gathered the requirements for the project, learned about the goals and the limitations that we have to be aware of. We also identified the main phases of work, discussed the next steps of joint work and the deliverables that will be handed over to the client.
Key takeaways from the meeting:
This is a newly released product (add-on for Jira Software), so I have something to work with.
Before launching the product, minimal research was done and no testing was conducted, so we want to conduct research and make improvements based on research results.
The main goals are: to find possible gaps in UX, create an advantage over other similar applications on the market and ultimately increase the number of installations.
Target audience: potential users are anyone who uses both Miro and Jira, but we want to keep the focus on 3 user groups - project managers, designers, developers.
After the first call with the client and clarifying the project requirements, I created a detailed roadmap to agree on further work.
After getting the green light, I started by looking at the existing documents I received from the client and continued with competitor analysis. I checked the main players that had the same product on the Atlassian Marketplace, compared them by the number of installs, reviews, key features, and also compared their user flow by main tasks (e.g. installing, adding a link to Figma, navigating a Figma file, adding a second link, removing a link, etc.)
In addition, I conducted a UX audit. I noted the main problems and also made a list of preliminary suggestions for improvement. The conclusions that were drawn from both competitor analysis and internal UX audit were presented and discussed with the client and the development team, which helped to move to the next stage.
Key findings:
No option to add more than 1 link comparing to some of the competitors.
No option to open full screen while others have this option.
Zooming option with touchpad does not work properly.
No option to post file in the presentation mode, which might be the common case.
Confusing buttons bar at the top of the file preview.
No option to edit the link, just the "remove" option.
Research deliverables
Jira App 'before' look
After conducting competitive research, I continued to analyse the existing product with the help of moderated usability tests. I wanted to see how users would interact with the product while performing the specified tasks, and also have the opportunity to ask them questions for a deeper understanding of its actions.
I found 6 respondents who fit the category of potential users - those who have experience in using Jira and also worked with Figma (namely PM, developer and designer). After I prepared the testing script and instructions for the respondents, I conducted testing sessions, during which I received several valuable insights.
Key findings from the testing sessions:
Most respondents would prefer to interact with the original file through a small preview area.
It was difficult for respondents to understand how to find the application in the Jira task and insert a link to Figma.
The redirection to the original Figma file for commenting and reviewing code was unexpected.
The task of editing the Figma link was a bit confusing, as respondents had to use the "Delete Figma" button and they did not know what to expect after clicking on it.
Interaction with the file was not convenient - the zoom option did not work for most respondents.
Usability testing instruction and script
To continue with the next stages of work, the lead designer and I held a meeting with the client where I presented the results of the research. Since we had technical limitations due to the capabilities of the original Figma API, before starting to create the first prototypes, developers were involved to adjust the possibility of implementing potential solutions. As soon as the technical approvals with the developers were completed, I started working on the first drafts.
First UI for testing
Having prepared the interactive prototypes, I again involved the respondents for a second test session to understand how the new version will work, whether the tasks will improve after the redesign
Key findings from the testing sessions:
The task of adding the second link was completed with problems, so this flow needed revision.
The need for quick link copying was voiced.
The description field seemed unnecessary for most of the respondents.
View tabs were requested to be with more clear wording and icons.
Based on testing results I made changes to UI design, finalised it with my team lead, got approval from the client and their dev team, and prepared final files including Figma file with a screenflow, clickable prototype, detailed style guide, video record of main user flows.
Final Design
Style guide
As a result of this project, the client received a new version of the existing application (plugin) with updates based on the results of research, such as competitor analysis, UX audit and usability testing. The implementation process is currently underway, so I look forward to seeing the changes in the data.
