The Transaction screen in Transactly is the hub for the majority of Transaction Coordinators (the main user/persona). It’s the foundation of what will be a multiple-month long task, communication, and document tracking workload. Prior to this re-design the Transaction screen updates were the most highly requested for feature and enhancement changes within the product. Transaction Coordinators (TC’s) need a dense amount of information at-a-glance but the existing design and layout needed to be simplified.

Problem: The experience is slowing TC's down

The biggest issue was that the TC’s wanted to see even more information and that the list and card view also had completely different functionality and data. You would have to go to the list view to perform certain actions and vice versa.

Legacy Card View

Card components were originally created to give the user an quick-view of the content in a more visually consumable way. I believed that the card itself did serve that purpose in the legacy product but it just needed some simplification and we needed to be able to get more cards above the fold without overcrowding. 

Legacy List View

For the list view there were a few additional issues. One was that the list view didn't mimic the card view meaning when you toggled views you would get entirely different information presented to the user. Essentially they were not 2 "views" of the same data. Secondly, as we discovered in user interviews, the data being displayed on the list view was not deemed to be useful to our users.

Explorations

On the design and product teams we had 1 designer and 1 product owner for each of the 3 ‘experiences’. Although I was the primary designer on this project I did work very closely with all the members in product and design to create these designs since they would be changed in each experience.

We held several research and brainstorming sessions using exercises like “I Like, I wish, I wonder”, empathy mapping, etc. As well as many design critiques and prototype testing with internal users such as Transaclty’s own TC’s

And of course one using more creative freedom in case they would consider a bigger change with a more updated design

Here are a few of the iterations I created for the card view

Handoff

This project was awaiting development when I parted from Transactly. Below is an example of some of the details in the Figma “handoff” file ready for engineering.

Outcome

The final designs (below) combined the functionality from both pages allowing us to create a true list and card view. This means that the user can perform all functions from either view. Some of the other updates included:
  • A cleaner look and feel utilizing more white space
  • Visible colored statuses (previously all the same color) 
  • Addition of menu options for each card/row 
  • Keeping the user on a single page for commonly performed tasks that they would previously have to drill in to do
  • Adjusted the search and filter functionality
  • The list view got a facelift
  • Added the right-drawer for another piece of functionality (task manager) that the user would have to drill into a single transaction for
  • Allowing the user to make inline status changes



Reflection

This project was put on hold because after building this out, leadership had decided they would like to do a complete redesign. We still planned to use all of these new designs in the redesign.

Transactly Redesign

Transactly Brokerage Dashboard