top of page
desktop_hero.jpg
desktop.jpg

BPI

Bank of Philippines

Role

UI Designer

Summary

I helped visualize the re-design of BPI consumer website

Technology

Figma

Collaborators

Project Type & Timeline

UX/UI Designers, Lead Designers, Project Managers, Dev team

Website / 3 Months

Problem Statement

As part of re-designing BPI consumer website, BPI needed to improve a noticeably cumbersome dated user and visual experience. How might we redesign BPI for customers who frequently run into problems navigating and finding products, services, or complete transactions?

Intro_mobile.jpg

Project approach

Since the research was already done when I took up the project,

I gathered insights and synthesize research, and data and create informed design decisions through quick visual workshops. 

Project goals

Redesign

Redesign of current BPI website that is intuitive for their customers to find and learn current and new products

Microanimation

Explore using microanimation to make designs more informational, focussed and delightful

Multiple platforms

Introduce mobile and tablet optimization

Seamless

Create a seamless and intuitive transaction for current and new customers

User Experience

Improve the user experience and user interaction of BPI

old_bpi.jpg

Before redesign

Understanding core customer needs

Finding what is right for me

Being transparent with information that is comprehensible while eliminating heavy text, allowing new and current customers to be educated about the products and services by BPI.

I need assistance

To provide customers easy access and navigation to help them with their need for products or services within a click of a button. 

I need to be informed

Getting the right information is crucial, but providing too much information can also be overwhelming. Concise information with informed design solutions are fundamental. 

Product is key

Multiple platforms so that customers have a better experience regardless of the medium the use. 

Design Ideation workshop

I was involved in the design ideation workshop for the UX and UI designers to provide their inputs that helped in the ideation phase. We focussed on finalizing experience principles, building the brand archetypes that are associated with the personas, and compiling imagery based on the values.

Experience Principles

We established a set of guiding principles to serve as guard rails for how users should experience their interactions. Inspiring values that help create a shared experience vision for BPI, with consistent application across touchpoints

Brand Archetypes

We defined the brand archetypes to help determine the human character traits that most accurately reflect BPI as a brand. This enabled BPI to create a deeper connection with BPI’s customers with strong emotional interaction.

With the sea of visual references, these select few resonated the most with the top values and the personas. 

persona_images.png

Defining values

brandvalues.png
designsystems.jpg
bpi_phoneclay_1.jpg

Design Inspirations

Angled dynamic shape to make the website appear more youthful, unique, and bold. Bright UI that is spacious, simple, and practical, with BPI red as the main color that draws the eye.

Bold, large titles that show confidence and the right balance of gradient usage to draw your eyes to read the content. Simple, functional, spacious, and easy-to-use UI elements. All key information can be seen at a glance by using one primary color as the highlight.

bpi_phone2.jpg
bpi_phone.jpg

Gradient overlay treatment over warm-toned photography brings extra texture and makes the photography more extraordinary. Content structured in a playful grid / not too rigid to engage the user to continue to explore and add visual interest. Minimalistic illustrations with enough details to appear more modern and relatable to the latest trend.

desktop.jpg

Challenges and learnings

Limited feedback and testing

As the project was still ongoing, I did not manage to do the testing with users for feedback. We have, however, presented our sprint development to the stakeholders and received feedback from a business perspective. 

Development team implementation

There were some issues implementing the designs on the dev side, some iterations had to be done to facilitate this change which caused further delays.

Learnings

The learning curve for this project was really high, but I was really thrilled as I was able to create design systems and micro animation other than just UI Design. I also realized the success of the development of the project hinges on the people-team dynamics, support from managers/developers etc.

LIVE SITE

You may visit the live site and observe from the link here; 

https://www.bpi.com.ph/

MORE WORKS

bottom of page