Anna Fong

ABOUT

Bank of Hawaii’s online booking tool gives customer the ability to book an appointment and work with a bank representative over the phone for their banking needs. Depending on the product that is selected, appointments phone calls could range from 30 minutes to 1 hour.

CHALLENGE

Connect Bank of Hawaii customers to a bank representative without leaving their home. The bank wanted customers to feel safe during a time when stay at home restrictions were in place.

Product card wireframes.
Exploration with copy lengths, text alignment, and backgrounds. Tested product names, product descriptions, and call to actions styles.

Product card designs.
The use of 3 product cards in 1 row was a new component. In the design, I used colors from the Bank of Hawaii website palette and incorporated the flower petals element which is used in print materials.

SOLUTION

A single page with products for all available appointment types.

Desktop view & mobile view.
Each product card is linked to an appointment type. The top 6 products were based on the number of appointments booked. The mortgage team was taking in a huge volume of appointments from low interest rates. Feedback from the branch representatives with the in-person appointments were also taken into consideration. By placing the most popular items at the top, this allowed customers to quickly select their appointment type and did not have to do as much scrolling to find the product.

Desktop view & mobile view.
The remaining categories are listed below the top 6 and are anchored to specific section on the page. This allowed customers to be in the right section with 1 click/tap away to save time.

CONTRIBUTION

Product Designer
I worked cross functionally with the Brand team and the in-house developers. With the Brand team, I ensured the proper elements and brand colors were used in the card designs. I darken a few of the brand colors to meet WCAG 2.1 AA compliance. For the developers, I created mockups for all devices sizes and provided detailed specifications for the new card component to be implemented into the website CMS. Once implementation was done, I QA tested the creation of the card in the CMS and verified it rendered correctly on all device sizes.