Bank of Philippines
I helped visualize the re-design of BPI consumer website
Project Type & Timeline
UX/UI Designers, Lead Designers, Project Managers, Dev team
Website / 3 Months
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?
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.
Redesign of current BPI website that is intuitive for their customers to find and learn current and new products
Explore using microanimation to make designs more informational, focussed and delightful
Introduce mobile and tablet optimization
Create a seamless and intuitive transaction for current and new customers
Improve the user experience and user interaction of BPI
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.
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
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.
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.
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.
You may visit the live site and observe from the link here;