Balance Transfer Credit Cards Optimization
Working cross-functionally and using UX principles to optimize Discover's Balance Transfer Credit Cards webpage
The Hypothesis:
After noticing low traffic and application submissions on our Balance Transfer page, we knew it was time for a redesign. In collaboration with the SEO team, we wanted to pull in a larger audience to the page by updating the copy to have a stronger keyword performance. As a UX team, we knew there was an opportunity to redesign the page to better reflect the user journey and encourage more applications.
The Solution:
Through heat mapping, tracking user data, and our SEO SME’s crucial input and findings, we knew we would get more users to our webpage through a redesign. By focusing on the hierarchy, visual appeal, recognition, and user appeal, there would be more credit card applicants.
The Outcome:
The team created a newly optimized and modernized page. Heat maps show that there is significantly more interaction and less user drop off.The page also won an IHAF (In-House Agency Forum) award for its excellence in UX/UI Design.
You can see a side by side comparison of both pages here.
Optimized, updated webpage and the previous version:
Research
Heat Mapping
Utilizing Contentsquare, the team and I did a deep dive into the Balance Transfer page. Focusing on click and hover rates, we noticed that there were several pain points that could be addressed. We noticed people were scrolling past our sections that were text heavy, so we wanted to add more visual appeal and interactivity to encourage the user to absorb the content that could lead to them making an informed decision to click our CTA: Apply Now.
Search Engine Optimization Deep Dive
Our SEO partners did a deep dive on what Balance Transfer keywords had an opportunity for improvement when it came to Google ranking. Our Copywriters rewrote the page to utilize these keywords, making the page show up higher when using search engines. This was imperative because with the page getting more user traffic, we had a major opportunity to convert these users to credit card applicants.
UI: Update Brand Guidelines
Mobile and desktop examples of updated UI:
Discover Colors: I utilized our new secondary Discover color green throughout the page to invoke a sense of both “money” and “savings.” By subtly signalling to our users that we were creating a money saving opportunity throughout the page, we invoked trust that led to more users interested in our application process.
Discover Shape Language: Creating curves and soft edges throughout the page encourages users to ease through the page as opposed to harsh lines and blocky components.
Discover Imagery: Choosing images that were light, carefree, and refreshing livened up the visual appeal of the page. It created an approachable, friendly environment for users to scroll through.
IHAF Award: All of these UI decisions lead to us winning an In-House Agency Forum award for exceptional UX/UI Design in 2024!
New Components
With our SEO redesigns, we sometimes run into the issue of having long, copy heavy sections that are typically overlooked by our users. Usually they scroll past large sections with lots of wording, as we saw when researching heat maps of the original Balance Transfer page. When creating redesigns, I found the opportunity to utilize two components I had built with the development team into the design. These were two new components where I was the Lead Designer on: leading reviews, presentations, doing research, and making iterations based off feedback.
Tabs Component: Focusing heavily on usability, I wanted to create a new component that was easily scannable for the user. With this newly designed component, users could easily view each category and click on the tab they want to learn more about. There is a clear visual hierarchy between the tabs and the informative copy that lives within the component. Now, users can interact with the section and only view content that is relevant to them instead of being distracted by long sections filled with words.
Swipeable Card Component: When looking at our design system as a whole, I noticed we were lacking a swipeable component for users to easily scroll through copy blocks or other content. One issue we had with the original page is that we had a large drop off of users towards the middle of the webpage, especially on mobile. I hypothesized that having horizontal, swipeable content would significantly shorten our pages, which could help prevent visitor fall off.
Iterations
Working in a Cross Functional team: We had around 6 iterations of this page. During review cycles, I worked among many teams to ensure that this redesign not only benefitted the SEO and UX teams, but met all of our acquisition teams expectations to help drive their 2024 goals. I reviewed my designs with the SEO, CRO, Legal, and Brand teams in order to make sure the new Balance Transfer Credit Card page aligned with all of these teams. This teamwork put us all in a position to be proud of this page going live and excited to see the performance.
Unfortunately, I am not permitted to show past iterations of this project with Discover.
Conclusion
Working closely with the SEO, CRO, Legal, and Development team, we created a newly optimized and modernized page. Heat maps show that there is significantly more interaction and less user drop off.
It was also nominated, and then won, an In-House Agency Forum for it’s excellence in UX/UI design.
You can see a the live page here and a full age side by side comparison of both pages here.
