Bringing a Bank Brand to Life

Mobile Design  +   Web Applications  +   Design System  +  Conversational Design

Central Pacific Bank // 2022

Swell Credit Hero

Introduction

When I was hired on with Central Pacific Bank (CPB) as Head of Product Design, the marketing department within the bank had already kicked off a major rebranding effort with agency Phenomenon about 6 months prior. The work was stunning, and it was ready to be integrated into the wide variety of bank products.

CPB Logo
About the Bank

Central Pacific Bank was founded in 1954 by veterans of WWII who experienced first hand the social inequities of the time and had a vision for creating a bank that would serve all of Hawaii’s people. Investing in and supporting the local community remains a strong, present day cultural value.

Present day CPB serves as a major bank in Hawaii and as of June 30, 2022, operates 28 branches and 65 ATMs in the state of Hawaii. The bank is a leading force in supporting homeownership and small businesses in Hawaii as a market leader in residential mortgage and SBA loan originations.

CPB has never been a technology company, meaning most all of the platforms used come from third parties that allow varying levels of customization.

CPB Logo
The Culture Challenge

Hawaiian people have a unique culture that is often misrepresented by tourism. They strongly value all things local, and life can be difficult for many because of sky high living costs. In business, there are many who are distrustful of mainland contributors. Because of joining in August 2020, I didn’t have an opportunity to travel to meet the island members of my team, and so building trust remotely and being empathetic to island culture was a top priority.

The Brand

The brand agency’s work was, without a doubt, a masterpiece. Hallmarks of their work were bringing together CPB’s mid-century modern roots together with incredible, character-driven illustrations that embraced the local people, flora and fauna of Hawaii.

Product Design Challenge I: Design System

Prior to really digging into specific outputs, it was important to build a design system in Figma for the new brand.

One issue I identified right off the bat when we started getting assets from the agency was that they hadn’t taken accessibility into context. It was important to our team to comply with WCAG 2.0 standards. Teal was the primary brand color, but it turns out this color is tough to work with in terms of contrast. Particularly with buttons, I tried out many color variations before we landed on a final solution. We came up with a few different hex codes of the teal color to make sure it worked for buttons and text links.

The design system included standard elements we intended to use for all applications to fulfill the goal of delivering a cohesive brand experience.

CPB Design System

Product Design Challenge II: Desktop Banking

FISERV’s Architect was the SASS platform of choice for most retail (personal) and business banking. To bring the brand to Architect, a large illustration was used for the log in screen.

Desktop banking log in

Basic things such as button styles, colors, and fonts were leveraged to customize UI elements. A custom module with icons and text links was added to make certain navigation items easily accessible.

Desktop banking landing
User Experience Improvements

While SASS software typically has many constraints, the CPB team was able to push for customizations. A large area of improvement was to re-organize the various ways to transfer money and pay bills. In many banking applications (including this one), each transfer type will navigate to its own page. Some examples include transferring to an external account via ACH, transferring to an external account via Zelle, transferring to someone else’s account within the same bank, transferring between a user’s own accounts, and paying a bill. All of these examples use the same baseline activity which is to move money from a user’s account to somewhere else.

A design was proposed to consolidate many of these transfer methods into one screen, but unfortunately, technical constraints didn’t allow for this solution to see reality.

Alternatively, all transfers were able to be nested under one main navigation item.

An example of a smaller but highly useful customization, I identified that accessing an account number was very difficult. Account numbers are somewhat frequently used for things like setting up direct deposit or linking external bank accounts. The existing framework required users to download a PDF statement in order to view their account number. To improve this, the account number was added to the main account page. A show/hide icon were added for privacy and a copy icon was added to easily copy the number for times when it needed to be pasted.

Desktop banking account number

Product Design Challenge III: Mobile Banking

The CPB mobile app was built and implemented by MX, another SASS provider. For this project, several designers (myself included) worked on ideal-state designs that we then presented to MX. MX had a great designer who knew the ins and outs of how these platform customizations could be pushed in their product. The mobile app was able to leverage many custom illustrations at key points in the journey, and to the average eye, looked like a fully custom app.

The app store screenshots were a fun opportunity to push the creativity of the brand in product.

App store screenshots

Product Design Challenge III: Chat

Alongside bringing the brand to life, the product team had a goal to get live chat added to customer support. LivePerson was the partner selected.

The Persona

To lean in on CPB’s value proposition of friendly and personalized customer service, we needed to create an endearing persona for our chat service. I went through several iterations with the customer support team to create an image that Hawaiians would identify with. It was important that her hair was down and the flower correctly represented the plumeria.

The name “Nalu,” which means “wave” in Hawaiian, was chosen by the team.

Nalu chat icon
Chat Dialog

The customer service team needed guidance on how to set up the basic chatbot dialog. I used Miro in several working sessions to build out the first draft of dialog questions and responses. In prior research, users had expressed that chatbots were especially valuable if there was fast access to an agent, so we made this option very accessible.

Chat dialog map

Conclusion

Suffice to say that many more projects and challenges took place during my time with Central Pacific Bank, all of which were a great learning experience. I had loads of exposure to the intricacies of finance and banking, and that really inspired me to see banking in a different light. I am mostly impressed with the amount of creative ways myself and the team were able to push on exterior vendors to be more creative with their own product problem solving as we worked to bring Hawaiian life and culture into their platforms.