Screenshot of Fidelity

Fidelity - Xtrac

Workflow automation and document management.

Visit xtracsolutions.com

Problem

Xtrac is used within Fidelity to track Work Items (WI) – which are things like new account openings, account maintenance (check reorder), and account servicing (address change) related to the various financial services Fidelity offers.

The existing interface made it difficult to understand what the latest news was on Work Items, and in turn, what a user should be doing in response. It was essentially a table view of actions that had occurred alongside a timestamp and brief description of what happened.

I was tasked with creating a page where users can see what's happening with a work item as well as what's been happening with all the work in their queue.

Team

This was a five person team, including myself, a PM, and a software engineer along with an internal manager and UX consultant.

My Role

I led ideation, low-fidelity and high-fidelity design, and clickable prototyping.

The client was remote, and due to corporate privacy policies, screen sharing wasn't allowed - so I worked with an internal PM and UX team to understand current use patterns and problems. In the initial ideation phase, I worked to synthesize their data and insights into actionable product features.

There were many technical restraints in working with a legacy system, particularly in what interactions could and could not happen.

Screenshot of low-fidelity design

In the initial low fidelity version, I kept a lefthand menu to match style patterns in other aspects of the product and included the ability to view activity for a specific list or queue, the ability to sort activity by most recent or by work item, and the ability to sort by activity type. I placed visual emphasis on the action taken and the work item it was taken upon, and I added in a quick reply button to enable users to quickly take an action in response.

We turned this into a clickable prototype and sent it out to users to get feedback.

Screenshot of prototype

I then implemented that feedback as I moved towards a more high fidelity design. Some users were confused by the positioning of the filter options, so I created a different visual hierarchy to try to provide greater separation between items that dictated what the list was and the list itself. I also learned that being able to hide certain fields could greatly improve efficiency of some users, so I included a settings option. I then sent this new prototype out into the world.

With this feedback and some newfound technical freedoms, I evolved the design to its final form. The ability to search and find a specific item from the feed had been unfeasible in the beginning but was now possible. Since our user interviews had indicated that it would provide high value, I included it in this version.

There was an obvious need for more robust filter/search options, so I redesigned the lefthand panel.

I discovered the type of action taken was most indicative of whether or not a user needed to respond, so I increased the visual prominence of the action icon. I also discovered that having the response action near the action would speed up the user’s flow.

Screenshot of filter/search options
Screenshot of new inline response form

A key piece of this redesign was the ability to quickly respond - this was done with a form that appears inline with the prior action.

This had previously been done on a separate page (so the flow was table - item - item history - new action) which caused a lot of friction for users and lowered productivity.

We also needed to include a revised version of the table view to match the new flow and styling. This view allows users to do more robust queries and bulk actions.

Screenshot of new table design

Results

The product is currently being beta tested with a group of internal users. From there, the task of widespread technical change and implementation can begin. So far - users have had an easy time acclimating to the new interface.