Accounts Details Page Redesign
The account details page is the page a user sees when they click on an account in the account list. This page displays balances, transactions, and is a jumping off point for a user to complete a variety of tasks.
The Ask
The goal of this project was to create a consistent, space efficient, visually appealing design template that could be used for the account details page across all account types.
1) Identify gaps with old designs
The Process
It had been a few years since the design on the account details pages had been updated, and in that time some inconsistencies had popped up in the designs across account types. Additionally, because the initial designs had been completed before the introduction of new features, these features had to be squeezed into the existing page without consideration for the broader design. This was our chance to take a step back and update the organization of the page and ensure consistency across account types. To do this, we used a Miro board to identify aspects of the design that we thought could be improved or needed to be looked into. Additionally, we went through old research reports to understand why certain decisions were made.
Below are some examples of the old designs that we were tasked with updating.
2) Research for new designs
3) Design
The design process took many iterations, as it took time to find a consistent template and style that worked across all account types. We conducted a research study on a few initial designs in order to get user feedback on new design elements we wanted to incorporate. There was a point when we thought we had found the final solution, but there were a few concerns from product partners about some elements of the design. I took the initiative to address these concerns with the product partners and presented an alternate solution that was accepted and integrated into the final design. Our goal during this design process was to make it easy for users to find the top tasks that were identified in research studies and to be efficient with space so that the transaction table would not be hidden below the fold. We considered putting the transaction table above other elements and adding a “view all” button to it that would take clients to a full transaction page, but we learned from client feedback that clients liked that they did not have that extra click in the current experience. Though many top competitors utilize the transaction table experience with the extra click, we decided that this was an opportunity for us to differentiate our experience and continue to provide clients with a feature that they enjoy. It was important to keep the client experience and feedback top of mind when making that decision. Unfortunately I am unable to show final screens before they are in production for confidentiality reasons, but I will update my portfolio with screens as soon as I can.
We used tools that let us explore competitor screens, which gave us ideas and insight into industry trends. Every feature/element that would need to be shown on each account type was mapped out, and we considered future features that could impact the design. We spoke with product managers and referenced research studies, analytics, and client feedback. Below is a picture from the Miro board where I mapped each feature to each deposit account type and noted upcoming features or dependencies to keep in mind. Note that at the time we were planning to integrate a subsidiary called Lighstream into the Truist app, but that goal was later abandoned by leadership.
In addition to mapping out features, I looked at competitor screens and tracked which user tasks and design patterns were most common across them, as shown in the photo below. This project was a team effort, but I took initiative and was the sole designer responsible for the work shown in the photos above and below.
Challenges and Lessons Learned
A challenge with this project was how much information had to be shown on the account details page. There were many pieces of information that product partners required, so it was a challenge to incorporate all these elements in a way that was efficient with space, did not look too busy, and didn’t push the transactions table down below the fold. Legal requirements also complicated this, as there were certain bits of content, such as the content associated with the Cash Reserve feature shown above, that we had no choice but to include.
A big takeaway from this project was that it is never too late to take a step back and reassess the design as whole. If we had to move one element, it was easy to want to shove it somewhere else in the existing design, but I had to remember that the overall design and placement of each element is important. Therefore, when one element was causing problems, I took a step back and rearranged the entire design instead of forcing an element into the only open spot.