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.
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.
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.
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.
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
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.
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.