Problem

The company was overhauling the existing consumer mobile banking app. There was a pressing need to improve the accounts and transactions screens. Users were constantly confused by the information presented and/or confused on where to find information they needed.

Solution

Design to promote the visibility of information related to the main support call drivers. Implement a clean design based on the new design system. Design the account and transaction flows together to ensure cohesiveness and illustrate the relationship between the screens.

RESEARCH

I began this project by referencing some ideation that had been completed before my time at the company. There were some general concepts that were added as a result of a co-creation session a few years prior, so I had a rough idea of what direction these screens needed to go in.

I created a competitive analysis for both sets of screens, as well as looked at list-style data presentation inside and outside the financial industry. This was pursuant to my strategy of keeping ideation free of unnecessary boundaries, which in my opinion leads to a higher quality experience. One piece this research informed was the inclusion of entry points to take actions on transactions, such as splitting it for budgeting purposes or beginning a dispute.

Later on, we conducted a card sort for transaction details. This was to get a sense of which pieces of data users prioritized most in regards to each type of transaction, so that we could ensure each screen helped users accomplish their most important goals. It was determined that users highly valued the ability to write a memo/comment on a transaction, which we hadn’t considered to be very important at all.

WIREFRAMES

As there were research-based existing designs to reference, there wasn’t a great need to do a lot of wireframing. I did, however, gut check those existing designs by roughly breaking out the major pieces of both accounts and transactions and rapidly rebuilding them into multiple potential concepts. Overall, my concepts were similar to the existing designs and I felt very comfortable proceeding with the established direction for these screens.

PROTOTYPES

One of the requirements was to marry the concepts we liked with the new design system being built. As the design system was actively being built at the time, this was a bit challenging and required me to stay flexible as things evolved. I did this by adapting the concepts 1:1 with the design system components and then working from there based on our design system usage guidelines and agreed-upon patterns.

Several changes were made in the background to other screens that had an impact on this project. This ultimately led to changes with the information architecture, hierarchy, and some adjustments to functionality. For example, transactions were removed from the user dashboard and so were pushed to a more prominent position on the account screens to account for the loss of that transparency.

Another major piece to success with this project was soliciting frequent feedback from my team. Getting perspective from other designers, developers, product owners, and major stakeholders was instrumental in producing screens that were aligned with supporting our users in accomplishing their goals and remaining close to the company’s focus. Detaching myself from my work and taking a critical look at it led to us crafting an experience that is markedly improved over existing state.