Details Pages Redesign: Tackling UX Debts
Role:
Senior UX Designer
Collaborators:
UI Designer
UX Manager
Product:
Global Relay Archive
Background
While reviewing and analysing reported UX debts, several usability issues were discovered on the pages that shared a similar structure and workflow. When viewed holistically, these issues were significantly degrading the user experience of a critical workflow in the surveillance platform.
The UX team seized the opportunity to initiate a design-led project, as improvements to some of these pages were already on the roadmap for 2024 or 2025. The project's aim was to create a common page structure that addressed the UX debt, reduce inconsistencies and ultimately lower the learning curve for users.​​
Design Phase 1
To begin, I analysed each of the pages to break down the common elements across them. I wanted to review the structure of the pages as a whole as many of the debts were related to navigation and finding particular actions.
I held a brainstorming workshop with the wider design team to get a variety of ideas on an overall structure and navigation pattern. I took the most common ideas and explored them further, coming to 3 options that I wanted to user test.
This first round of testing was focused on the most common workflow and actions across the pages. For each task, I wanted to see which layout was the most intuitive and allowed users to easily and quickly find what they are looking for. I also counted the success and error rates across each version. I tested 3 versions with 12 participants, varying the order of the test and counting success and error rates for each task and version. Users were also asked about the priority of each element on the page, to better understand which were the primary and secondary actions.
Explorations on navigation structures
Results and iteration
There was an overwhelming preference for a tabs pattern of navigation, regardless of familiarity with the workflow or order tested. The primary action was to add or edit items in the table, with most other actions being used much less often.
These findings led to a second round of explorations, focusing on how to integrate tabs to bring attention on the main table and how to minimise the secondary actions. I explored improving the page header, title and breadcrumbs so that it is clear to the user where they are in the platform. I also looked at how the secondary actions could be accessed without navigating away to another page.
I conducted a second round of testing to understand which structure allowed for users to focus on the main content (the table) and if there were any usability issues in accessing the secondary actions now they had been grouped together in the header.
Explorations on tabs with secondary actions
Development and other improvements
Most participants preferred version 2 with secondary actions opened as a dialog. We moved forward with this structure and focused in on the details of the pages. At this point, the UI designer worked through mockups of the page structure while I worked through some UX improvements to the table.
The tables on these pages used inconsistent patterns and were not in line with UX best practices. I explored improving the error, add and delete row patterns with 3 main improvements:
-
having an add button directly within the table, as users would often add several entries at once
-
integrating the newer pattern from the design system into tables, stacking errors instead of displaying the error over another row
-
implementing a universal undo button instead of undo on individual rows
I tested these changes with 9 users, giving them tasks that would compare the improvements with the current table patterns and uncover any usability issues. Both the add and error patterns were better understood and preferred, while the universal undo button was either missed or misunderstood by participants.
These changes were implemented alongside smaller UI improvements to create consistency across the different pages and workflows in the platform.
Page template
Example page
Development
These changes were implemented by integrating with existing feature development initiatives over the following year. The initial page structure was first developed for an information page that did not have a table, allowing us to get feedback on the structure itself. After validating the improvements to the structure, the next initiative was able to build off the first one and also include the improvements to the tables.
​
By analysing UX debts and strategically aligning with existing projects on the roadmap, we significantly reduced development time while simultaneously addressing and eliminating numerous UX debts. This coordinated effort enabled the UX team to enhance the usability and overall experience of a large number of pages efficiently and cohesively.