Bank of the Philippine Islands Website
The Case Study
THE CHALLENGE
BPI wants to reimagine the customer experience and empower the business that drive this experience with new tools and ways of working, to set up for present and future success.
But the content is managed across multiple systems
The current Backbase (version 5) platform is unsupported, and upgrading to version 6 isn't feasible due to hosting limitations.
Coupled with poor metrics and practices
WEBSITE GOAL
-
To seamlessly migrate BPI's institutional pages to a modern CMS environment while enhancing user experience, improving regulatory compliance, and empowering business units to drive digital success.
-
To reimagine the customer experience, streamline content management processes, establish a scalable digital ecosystem.
-
To create a repeatable, reliable, scalable, and secure solution that enhances BPI's digital presence and provides a seamless user experience across all touchpoints.
WHAT I DID
Phase 1: Discover & Define
STAKEHOLDERS INTERVIEWS
UNLOCKING INSIGHTS FOR DEEPER UNDERSTANDING
During Stakeholder Sessions, we conducted thorough interviews to delve into various areas such as current content, customer experiences, competitors, and organizational objectives.
Transitioning from a note-taker to leading some sessions initially made me nervous, but with the guidance of a dedicated UX Researcher, I found my confidence. The structured approach with clear questions facilitated seamless communication and alignment among participants. Leveraging a mural board for note-taking enabled real-time collaboration, ensuring everyone remained on the same page. I was impressed by the stakeholders' eagerness to share insights and personal stories, fostering a collaborative and enriching environment.
We want to empower customer to make best decision (financial payment decision), by designing lots of journeys that has that have the customer in mind first, easy and useful for them. We insert ourselves into customer journey.
- Stakeholder (Cards)
Sections of the websites not linked together, not smooth.
- Stakeholder (CRM)
Missing one consistent voice on website - ie tone is not the same – first person.
- Stakeholder (Invester Relations)
Some screen shots of the Stakeholder interview sessions
LEAD ASSESSMENT
UNVEILING THE USER EXPERIENCE
During the Discovery phase, I spearheaded the LEAD assessment alongside the Experience Lead and another UX designer, aiming to evaluate the user experience across key business segments, including the main BPI website and subsidiary service pages.
LEAD is an assessment of the experience of a brand, product and/or service. It is acronym for its principles: (L)ight, (E)thical, (A)ccessible, and (D)ataful. It combines expert heuristic reviews with user needs through journey-based evaluations and shares a common goal with Nielsen's 10 Heuristics. Additionally, LEAD stands out by measuring product usability maturity through a scoring metric, proving valuable for competitor benchmarking.
WHAT IS LEAD?
With a total of 8 websites to audit, we faced the challenge of assimilating additional principles and guidelines while adhering to a tight schedule. Collaborating closely, we leveraged Figma to meticulously outline user objectives and document user journeys, ensuring a user-centric approach. We categorized, identified issues and organized them for further analysis by using the L-E-A-D framework.
While our team focused on the LEAD Assessment, other teams delved into Competitive Benchmarking, Best Practices, and Trends, ensuring a comprehensive analysis. Our agile methodology facilitated daily standups and collaborative sessions, ensuring alignment and progress at every step of the process.
AFFINITY MAPPING
CONVERGING THEMES
After conducting audits on the post-it notes from the eight individual websites, we moved all post-it notes to a new board, grouping them based on the segments and sub-categories of L-E-A-D.
By clustering notes with similar issues, we identified the overarching issue, represented by a separate note placed above all the sub-notes. This converging of themes allowed us to output the top action items, which further informed us on the key issues and pain points at hand.
CUSTOMER SESSIONS
CROSS-CULTURAL INSIGHTS
During the customer sessions, conducting in-depth interviews provided valuable insights into their needs, attitudes, and expectations regarding financial products and services. A unique aspect of this experience was conducting interviews with customers based in the Philippines, where the majority preferred interviews conducted in Tagalog, their mother tongue. Fortunately, our dedicated UX researcher adeptly planned these sessions, utilizing translation tools and setting up Zoom rooms for seamless moderation.
Despite the language difference, we effectively captured insights using a Mural board for note-taking, ensuring alignment among team members. This experience highlighted the importance of being adaptable and having effective communication in cross-cultural research settings, demonstrating our collaborative approach to uncovering meaningful insights for the project.
...seeing so many red errors on the forms. Kept going back to it so I can't proceed. But customer service can't help me. Drain (my) patience when so many error.
- Deposits Customer on Competitor’s Website
I entered a different website, right? It’s the BPI? Actually, I was surprised, I don’t know why. Maybe the other one is for online banking or savings account, stuff like that.
- Housing Loans Customer
Now a days, its not just enough that you have good word of mouth from family. Testimonials from strangers, you don’t know - that experience really matters.
- BPI Car Insurance Customer
A snapshot of the Mural board with post-it lined up next to the pre-filled questions for easy note taking.
IDEATION WORKSHOPS
FORGING INNOVATIVE SOLUTIONS
Ideation Workshop 1 aimed to define future customer journeys aligned with Discovery insights on brand and content experiences. Utilizing a mural board, we conducted dry runs for seamless collaboration. Extensive preparation, including LEAD and competitor analyses, facilitated a comprehensive sharing session, enabling co-creation of experience principles based on personas.
Similarly, in Ideation Workshop 2, we focused on defining future customer journeys and understanding ideal experiences, leveraging existing research and the set up of a blank state Experience Journey Mapping for thorough exploration of touch-points. Integrated insights reflected our commitment to customer-centric solutions.
CUSTOMER JOURNEY
PLOTTING PATHS TO THE FUTURE
Constructing these journeys was an iterative process, requiring careful consideration of how to depict each Phase alongside the corresponding products. With this Future State, I aimed to highlight the disparity between the current reality and our envisioned future.
Utilizing this map, teams could visualize the trajectory towards our desired outcomes and identify areas for improvement. Personally, my favorite aspect was incorporating the mindsets and emotions derived directly from verbatim quotes obtained during customer interviews.
END OF DISCOVERY
UNVEILING BPI'S DIGITAL LANDSCAPE
At the end of our Discovery, the report underlined critical issues identified under each business segment, providing stakeholders with insights into how the team can address these vital issues with the recommendations provided.
We had the combined understanding of BPI's:
-
Brand, business, and digital vision of the program
-
Customers and their expectations
-
Pain and high points of the current state experience from customer, business, data, technology and operational perspectives
-
Requirements, use cases and priorities
-
Content, inventory and publishing process
Adobe Experience Manager (AEM) Cloud Services was recommended by us based on the operational and functional use cases
WHAT I DID
Phase 2: Design & Deliver
AGILE WORKING
BRINGING RECOMMENDATIONS TO LIFE
Following Phase One Discovery’s recommendations, we commenced on the design work, requiring close collaboration among UX and UI designers, together with Content and Technology teams. The project adopted an agile approach, utilising JIRA Software for a streamlined workflow. In each sprint, UX designers were assigned specific tasks (stories) representing a web page for revision.
A snapshot of the Jira board where all teams worked in a collaborative manner
INFORMATION ARCHITECTURE
STREAMLINING NAVIGATION
I analyzed the existing website's current state and its information architecture (IA), identifying redundant links and layers of child pages.
Armed with the Discovery report and insights from a UX researcher's study on user mental models through card sorting, I proposed the new IA. Collaborating with the Content Strategist, the new IA aimed to streamline navigation by eliminating unnecessary child pages and emphasizing engaging content, self-services, and product exploration areas.
Current IA of BPI website
IA tree view (without pages overlapping)
An expanded view of one of the sections
WIREFRAMES
PRIORITIZING PAGE HIERARCHY
To ensure CMS reusability, we focused on template creation and integrated various out-of-the-box components. While the UX team developed wireframes, the UI team established the Design System (DS), promoting brand consistency across Business Segments.
Collaborating with the Content Strategist, I proposed page hierarchy prioritization, enhancing user journey and storytelling. Weekly meetings between the Experience and Tech teams, and Experience and Content teams facilitated client reviews at the end of each Sprint.
WIRE FRAMES
BRAND COHESION THROUGH DESIGN SYSTEM
By leveraging the design systems established by the design team, I was able to utilize and propose variations where necessary. Working within an agile framework, I maintained regular communication with the Tech Team and Developers to assess the feasibility of the components.
Screen grab of BPI's Design System
%20crop.png)
UAT
VALIDATING FUNCTIONALITY
A snapshot of the annotations for the developers to amend and update