Personas created to represent a typical teller and branch manager.
OVERVIEW
About the project
Portico is a full-service banking and CRM platform with users ranging from young tellers to experienced branch managers.
The problem
The original application was created on a fixed layout, causing lots of wasted space on larger screens, content and actions on an overwhelming number of popups, and couldn't be used on a tablet.
The goal
Design a clean, streamlined, touch-enabled experience that's responsive to run on desktop, laptop, and tablet.
Responsibilities
User personas, wireframing, prototyping, and visual design
Tools
Adobe XD
1,400
Pages/Screens
695
Menus
12,000
Users
1.5M
Lines of Code
MEETING OUR USERS
When I joined the team, many of my co-workers had worked on the application and interacted with users for 15+ years. But I didn't have the same expertise and experiences with our users.
I pitched the idea of developing personas as a way for me to learn about who I was designing for. Also, I wanted anyone who joined the team after me to have some understanding of our users on day 1 of the job like I wanted.
Conducting interviews
We conducted several interviews with branch staff to identify pain points, opportunities, and insights. We interviewed 2-3 people from the 6 main departments at the branch. The interviews gave us insight into what our team could do to make their jobs easier.
Some questions we asked:
How well does Portico currently support your work?
In your opinion, what would be needed for an improved experience?
How many customers do you serve in a typical day?
What other colleagues do you interact with as you work?
What kinds of things do you need to know when carrying out a transaction for a customer?
Are there things you need to keep track of or follow-up on when you carry out transactions for customers?
Could you briefly describe your typical workday?
Developing personas
From the contextual inquiries and interviews, we developed three personas. We refer to the personas throughout the entire product development process.
From observations and interviews, we found that our users range from novice users to experienced users with years of knowledge.
Our users need to accomplish tasks quickly, especially with a customer in front of them. Also, they get interrupted throughout their workday and need to be able to switch between tasks easily.
Solving design problems
Original overview only identifies a customer. There's no information about the customer's accounts.
PROBLEM #1
Related information on different pages
Since the app was originally developed at a fixed layout, data was typically laid out so that it would fit on the page without a clear hierarchy to follow. Also, most data appeared in truncated tables and text boxes whether the data could be edited or not.
This made it difficult for tellers to get an overview of a customer at a glance, causing more time spent staring at the screen rather than the person in front of them.
Comprehensive overview includes identification images, account info, and products and services the customer has.
Solution: Reimagine customer overview
When beginning a transaction for a customer, tellers need to be able to quickly verify the identity of the person in front of them. They also need to have a wholistic view of that customer.
Tellers are responsible for helping customers quickly, but they also need to engage in conversation and build relationships with customers. Having all the info they need about a customer in one spot helps them keep their focus on the customer rather than navigating to different screens.
The first tab of the loan details window is mostly misc information placed in no particular order.
PROBLEM #2
Unclear information hierarchy
Since the app was originally developed at a fixed layout, data was typically laid out so that it would fit on the page without a clear hierarchy to follow.
For example, the first tab on an account details window provided a fragmented overview of the account. The customer's name and ID number are two of the first fields users see when they come to get information on a customer's loan.
Data is grouped and organized. Important info is highlighted.
Solution: Organize & group content
Grouping related information into cards helps users scan the page and find the info they are looking for.
Creating contrast helps establish hierarchy. Key information is in a larger and bolder font, making the most important stuff be the first thing a user sees.
We evaluated information on other tabs and asked some users what content they need to get a complete overview of a loan. From those conversations, we added interest rates, collateral info, and past due amount when applicable.
Unable to easily scan for the data users need.
PROBLEM #3
Complex data tables
Like most enterprise applications, Portico has a lot of data tables that vary in size, complexity, data, and purpose.
The original data tables were difficult to read and use due to complicated expand/collapse functionality and incredibly data-dense screens.
Related columns are now grouped and proper alignment is applied.
Solution: Improve table style
We began by only showing horizontal row lines, which helps users keep their place while reading but also removes some of the clutter.
We combined some columns by adding some data as subtext. This provided hull details when appropriate without taking up too much space or cluttering the table.
We paired down the search options to the ones used most often. Additional search options can be accessed though the search dropdown when needed.
LEARNINGS
Function over form. Our users didn't want spacious and minimalist screens like you'd see in consumer apps. They wanted to see as much info as possible on the screen. It's our job to put their daily productivity first.
When in doubt, just ask. Banking is incredibly complex, so I relied on business analysts, SMEs, and customer support for feedback on how something should work. But I often went straight the the source: the users. Design is a collaborative process, not just a final product.