Redesigning issues and filters in JIRA — Case Study
Challenge was to redesign JIRA ticket details page.
JIRA Software is built for every member of your software team to plan,
track, and release great software. You can plan, track, release, report or build product maps with utmost fun.
The issue view IN JIRA presented user interfaces for elements and features that were rarely relevant or helped users with resolving an issue. While going through the content and infrastructure of the page I found out design overwhelming and and cluttered; empty states and infrequently used features were too prominently visible.
Design Process-
I follow a Lean UX Design thinking process. It starts with getting to know the users we’re designing for. Without them, we wouldn’t know what to design, how it should work, or why it matters.
I have divided my process into 4 steps as below diagram and presented research and visual part of it.
Research and Competitions-
1. Asana —
Pros:
• Easily set recurring tasks for things that need to be completed more than once;
• It’s relatively inexpensive as far as software goes (especially because you won’t be charged until you exceed 15 members);
• It has several different views (like tasks and calendar) that allow people to look at their to-do lists in a variety of visual ways.
Cons:
• There are no multi-person tasks. Unfortunately, you cannot assign multiple people to the same task with Asana;
• With large teams, using calendar mode or other features may be too overwhelming given the number of to-dos;
• No time tracking & estimate functionality: there is no way to track time with Asana, unfortunately.
2. Trello —
Pros:
• It has a simple access. So, you can invite outside members, create closed boards, or add public boards;
• Trello’s interface is meant to be simple so you can transform it into the project management tool of your dreams;
• Trello comes with loads of pre-made templates;
• Seamless integration. Paying users can integrate with Slack, GitHub, and Salesforce;
• Trello is easy to learn.
Cons:
• Because Trello’s meant to be a more customizable system, teams need to activate «Power Ups»;
• While items can be organized into specific tasks and cards, once a board collects a large number of cards the board can easily get crowded and cluttered;
• No overview. There’s no way to add a project overview or any sub-task functionality.
JIRA Analysis
This is a cross-platform issue-tracking solution, which is a shrewd choice for Agile and Scrum projects. Jira allows:
- Creating user stories
- Manage issues
- Distributing and prioritizing assignments across the development team
- Planning sprints
- Using customized Scrum and Kanban boards for the aims of iteration
- Tracking project performance
A competitive advantage: An impressive set of advanced features. API integration.
Cons: Jira’s UI is somehow not very user-friendly.
Taking a look at existing design.
The Issue Experience
Issues are the life blood of Jira and the experience of prioritising, planning, progressing and resolving issues spans a multiple contexts and locations. How issues are represented in search results, as subtasks, as links and in the backlog and board will all evolve with a little thought. I took on this challenge and led the visual design of the issue view and in addition to proposing a system for how issues should be displayed.
Navbar
A set of quick action buttons appear at the navbar across product, a natural place where users can start to further take actions even other that issues and filters.
Header
Header here will be confined of ‘Add to favourites’ and ‘Move to another Project’. Added a new feature from my thought process was ‘Know shortcuts’ for efficiency and saving time.
Issue Body Content
Main component of the issue screen will have some of the most important features which are given very low prominence in the current design such as, Progress tags, Assigned to people, an priority of the product, department tags for which project is alloted to. and some other actionables such as print report, History, share and description text.
Description text can be varied hence it will have an ioption for ‘Read more’ or ‘Read less’. If the user places any sort of link there will a preview for better clarity.
Consideration : App integeration feature can be developed in a way such as when when lets say a designer attaches a zeplin link or a figma link or Github its shows on header in link format.
Substasks & Checklist
These are quick actions a user would want to take on one tap without much of a struggle which I faced within the existing design These actionables will mostly be adding a ‘To do list with subtasks’ and Checklist. There can be multiple numbers of checklist and subtask.
Considering there can be multiple number of checklist and keeping the realstate in mind as soon as a user completes a check point it will be hidden which can be visible by clicking on three dot menu.
Activities
Activities sections is going to be one of the must have features as it s process tracking tool and would require constant feedback giving and taking.
Consideration: Can add a bookmark feature for comments and attachments.
Sidebar Actions and Information
In current design a lot of critical information has been deprioritise in the sidebar such as priority, departments, assignees and assigned too.
Majorly important task creation date and Due Date required to be upfornt which can be edited and watchers, All null things will be hidden in ‘show more details’.
Considerations- Watchers can also be named as ‘subscribers’ to a particular project wihile the owner has rights to unsubscribe.
Show more details will be dynamic and will keep changing based on the imformation.
Information architecture was changed on the basis of priority.
Final Dashboard Visuals —
The system would also encourage the use of an inline create state, where new issues can effortlessly be created and added to an existing sprint or column on the board or the backlog. Based on the issue type, a user could also set the priority or assign and issue through an interaction from within the create state.
Some Considerations-
- User is already aware about the use case of the platform.
- User knows how to create a ticket and use different features.
- User has all the basic necessary details to create a task.
- The screen has been designed from view perspective (on edit, empty fields will be visible ex. bug type, browser etc.).
- Adding custom app will have their own component and change the layout of the tickets (adding figma preview or zeplin).
- There can be many more fields based on entries.
- Platform navigation to this page is already sorted (kanban board).
- New activity card is added in the bottom to track the edit in the ticket and task changes.
- Edge cases are not considered deeply.
- There can be multiple ways of solving usability issues the one presented here can be a pop over to.
Throughout the project I hardened my product-system thinking skills and learned how to better quantify the impact of design changes. I didn’t get everything right along the way, but tried keeping pragmatic approach to building the new design.
