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?
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
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.
Defining values
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.
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.
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;
MORE WORKS
