Bank Homepage Re-Launch
Modernizing Capital One Bank’s digital presence
This was a product management project I led for the Enterprise Website Platform team at Capital One. I worked closely with Bank product and design partners to re-design the Bank Homepage with our new Enterprise website shared UI components and coordinate the launch of the new page.
Some information has been removed or modified due to confidentiality.
Client
Capital One
Duration
6 months
(Oct. - Dec. ‘20)
My Role
Product Management
Team
1 Enterprise PM (me)
5 Enterprise Engineers
2 Enterprise Designers
Bank agile team
Background Information
The capitalone.com website platform was migrating from a legacy platform with a federated management model to a new WYSIWYG platform with a unified management model. I owned the UI component library that would be used by 15+ line-of-business (LOB) teams (ex. Credit Card, Bank, Small Business, Auto Finance, etc.) to build their webpages on the new platform, and worked with product managers from each LOB team to coordinate the timeline & component requirements for their webpage migrations. I had to ensure all migrations were completed before the contract with our legacy platform expired.
The bank homepage was the first high exposure page to migrate to the platform. If executed unsuccessfully, there would be tangible business impact on conversions (bank account openings) and customer experience. As the PM managing the website migration, I had to ensure the migration went successfully based on the following goals:
Establish working model between Enterprise (my team) and Bank team for building and migrating webpages to new platform
Migrate Bank Homepage to new platform with all minimum-viable-product (MVP) component requirements
No adverse impact to customer experience after launching new Bank Homepage
Migrating the Bank Homepage
Building the Webpage Components
To determine the component requirements for the Bank Homepage, I worked with the Enterprise and Bank design teams to identify the UI components that needed to be built to meet their ideal initial design. This was the first time that a LOB engineering team would be collaborating with the Enterprise engineering team to build components together. I established a working model I could also adopt with future LOB teams. In this model, I worked with the Bank product manager to:
Identify if there was a deadline based on LOB marketing goals
Coordinate component development between Enterprise & LOB engineering teams based on team capacity
Set up training and pair-programming to ensure Bank engineering team could successfully develop components
Have weekly check-ins to address design and development issues, discuss design and accessibility review results, and track against timelines
Once the components were built and the webpage was ready in QA, I guided the Bank team through the page launch.
Launching the Webpage
To ensure the page was ready for launch, the Bank team needed to coordinate many partners across design, accessibility, web content management, and content delivery. To streamline the process, I created a pre-launch checklist so they knew when and how to engage each team. I invited point-of-contacts from each team to our weekly check-ins so I could guide their interactions and the Bank team could easily address any issues that came up throughout the process.
Impact
Unified Website Experience
On the old platform, the webpage design was significantly different across LOB pages (ex. Credit Card pages looked different from Bank pages). With the Bank Homepage on the new platform, using shared components, the design was unified with Enterprise pages. This improved user experience as users could now expect the same design patterns across pages. A comparison of the old and new pages can be found below.
Streamlined Migration Process
By collaborating with the Bank team, I established a standard component development and page launch process that would be used for all future migrations. The component development process decreased development cycle time by two sprints (four weeks) per component. The pre-launch checklist reduced churn between the five collaborating teams and reduced launch timelines from two months to three weeks.
Successful Bank Homepage Launch
The Bank homepage launched successfully without any issues. The Bank team measured performance and engagement metrics for the new page. Page performance improved on the new platform (ex. page load time decreased) and user engagement improved (ex. more clicks to the bank account opening page).
Figure 1. Comparing the legacy Bank Homepage to the new Bank Homepage, highlighting shared UI components that created a unified website user experience
Reflection
Setting Expectations
In situations where many teams need to collaborate, setting expectations for roles and responsibilities in the beginning reduces conflicting assumptions and churn that comes along with it. By walking all teams through a standard process, I was able to set expectations and encourage team members to communicate where they were facing issues and how things could be improved. This helped us work together as a bigger team instead of competing against each others’ priorities.
Recurring Check-Ins
Similarly, I learned that having recurring check-ins gave each team the space to bring up questions or issues they were facing. Partner teams could easily address these in meetings, versus working back and forth over email or chat. This was especially important because everyone was working remotely due to COVID and teams were working across time zones. To run a successful check-in, I ensured we had an open agenda where each team could add topics they’d like to discuss and also invite relevant point-of-contacts from partner teams needed for each conversation topic. This kept meetings flexible and efficient.