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.


User personas, wireframing, prototyping, and visual design


Adobe XD

Lines of Code


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?

Banking CRM

Personas created to represent a typical teller and branch manager.

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
Banking CRM

Original overview only identifies a customer. There's no information about the customer's accounts.


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.

Banking CRM

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.

Banking CRM

The first tab of the loan details window is mostly misc information placed in no particular order.


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.

Banking CRM

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.

Banking CRM

Unable to easily scan for the data users need.


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.

Banking CRM

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.


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