Redesigning how articles look at Capital One.

PROJECT OVERVIEW

Learn and Grow articles on the Capital One website are the perfect way to provide information to current and potential customers. The article space on capitalone.com occupies roughly 85% of all webpages on the Site. As such, articles are also responsible for a high percentage of the Site’s overall foot traffic. The articles do a great job at engaging and informing visitors, but another one of their main purposes is to funnel users towards taking actions with one of Capital One’s lines of businesses by linking users to account sign up pages, credit card applications as well as other articles that promote these similar engagements. articles provide numerous opportunities to create engagements and are heavily featured all across Capital One’s website, even outside of the Learn and Grow space. Currently, there are over 2,000 articles across the Site with some of the more popular articles generating upwards of 7,000+ views per day.

The main issue (at the time of the redesign) was that the template for article pages was not updated or retrofitted with new design work since it was first introduced on the Site. In order to optimize the space, it was important to realign the articles with Capital One’s dynamic design system while also incorporating new design patterns into the space. Since the updates have gone live, the redesign has accumulated over 40 million page views, drove over 615,000 new card applications, increased total clicks by 37%, increased click through rate by 21%, and improved total SERP features by 17%.

We can break down the updates into two categories: hero area and body content.

Given that there are multiple pages and articles affected by these updates, one of the biggest goals of this redesign project was to create a standard in spots that were lacking in order to really drive home consistency. In order to accomplish the goal with flexibility and the overall user experience in mind, the template would need to be able to support future facing changes and additions to the Article build.

DESIGN FLAWS

Taking a closer look at the previous build, there were specific flaws that needed to be addressed for the new Article redesign to be successful:

• Right off the bat at the top of the articles, design elements of the hero area were scattered and give a slight sense of information overload. Simplifying these elements and reorganizing arguably the most important and visible portion of the Article would be highly effective in optimizing content for our users.

• Non-standardized font sizes and weights in the initial design of the articles were a huge issue. Content creators for Capital One were previously using a free text editor to pick and choose when to change the styling of their text. At a large scale, this simple detail lent itself to wide ranging inconsistencies across the Article space.

• There was poor readability within the Article’s body content due to a lack of a proper structure where designated pieces of content should be placed and inconsistent spacing between chunks of content.

• Nested components (e.g. banners with CTAs, nested accordions, newsletter signup forms) were not aligned with Capital One’s current design system and the Site’s standards of consistency.

• Images embedded in the body content did not have proper guidelines and standardization to create consistent usage for these images.

IDEATION

Before diving into execution, it was important to take a step back and evaluate how the article space functioned within the larger Capital One ecosystem. Since Learn and Grow articles serve both informational and business-driven purposes, the redesign needed to balance readability, engagement, and conversion opportunities.

The ideation phase focused on three key goals:

• Creating Consistency Across the Site – Aligning article design with Capital One’s broader design system to maintain uniformity in fonts, spacing, imagery, and interactive elements.

• Optimizing for Engagement & Conversions – Strategically placing nested components, CTAs, and internal links to encourage users to explore more content and take meaningful actions with promoting scalability across Capital One’s component library.

• Enhancing Readability & Accessibility – Ensuring that articles were easy to scan and digest by implementing clear text hierarchy, structured spacing, and standardized typography.

To kick off the ideation process, I conducted an audit of the existing article space, comparing it to other high-traffic content experiences within Capital One’s ecosystem. I also collaborated with content strategists and engineers to understand technical constraints and ensure that the redesign would be scalable for future enhancements.

From there, I developed multiple low-fidelity wireframes exploring different layout structures, hero area compositions, and ways to integrate engagement-driving components. These concepts were iterated on based on feedback from stakeholders, balancing business objectives with user experience needs. The final direction focused on a modular, flexible template that could accommodate various content types while maintaining a cohesive look and feel.

This foundational ideation process set the stage for the design updates that followed, ensuring every change was intentional and aligned with both user and business goals.

HERO AREA

The hero area was updated with a new image size, typography updates, and optimized spacing and placement for all of its elements. The hero image was reformatted to move away from a full bleed sizing that stretched the full width of the user’s screen. By adjusting the width of the image to only stretch the width of the 12 column grid, the content seamlessly flowed down the rest of the page to the article content as it reduces to 10 columns for the body content. The new image sizing also gives content creators an easier time selecting imagery that doesn’t get cropped at awkward screen breakpoints.

Font styling for the headlines and sub-headlines were realigned with Site standards for consistency. The meta data and social sharing icons were placed below the hero image, and new optional author tag lines were folded into the hero space as well.

BODY CONTENT: TYPOGRAPHY & SPACING

Considering that this project and overall the articles space incorporates text heavy content, it was extremely important to update the font styling and spacing for the content that users were seeing on the articles.

The solution was creating a defined system of text hierarchy that is easy to understand for content creators, has enough flexibility to highlight specific points of content, and is aligned with pre-existing Site and design system standards that are used all over the Capital One website.

The other large piece of the body content update was to define the spacing used within the articles. By creating consistent padding between sections of content and types of content (e.g. images, banners, text blocks), the comprehensive scan-ability and readability of the articles were vastly improved.

DESIGNING FOR THE RESPONSIVE GRID

The last and perhaps the most notable change for the Article redesign was to reformat the body content of the Article template to a 10 column grid — away from the previous 8 column grid. From a design view point, the wider body allows for users to enjoy reading articles with a reduced amount of verticality on the page with comfortable margins on the edge. This also made the design of the articles more future facing in that they could now accommodate pre-existing and future nested components that were built for other spaces on the Site that utilized the 10 column grid. For additional context, nested components are some of the key drivers for engagement in the Article space.

HANDOFFS

For the handoffs on this project, I delivered a dedicated page with redlines of the design work and personal design notes on the final design decisions to the engineering tech team. Throughout the process, there was constant communication and biweekly check-ins to make sure that they were aware of all the changes that were on the way with the new build of the Article space. The biggest hurdle for the engineering team on this specific project was that they had to redo a vast majority of the coding from scratch in order to move away from the free text editor that was previously used, and to implement the Article as a template in our web content manager.

Deliverables given to the engineering team for this project included:

• Asset sizing for images both in article and the hero image across all responsive breakpoints — large desktop, small desktop, large tablet, small tablet and mobile

• Set pixel spacing amounts and where these increments would be used in which places for specific pieces of content

• Design notes on the content creation guidelines in order to maintain consistency working with different lines of business

• Specifications on the author space and legal footnotes

RESULTS & IMPACT

After launching the redesigned article template, the updates significantly improved user engagement and business outcomes:

• 40M+ page views since launch

• 615K+ new credit card applications driven by article interactions

• 37% increase in total clicks across articles

• 21% increase in click-through rate (CTR)

• 17% increase in total SERP features, improving search visibility

By improving readability, visual consistency, and content structure, the redesign not only enhanced the user experience but also reinforced Capital One’s business goals by driving meaningful customer actions.