Setting the standard for carousels at Capital One.

PROJECT OVERVIEW

At the outset of this project, Capital One's Card team requested the development of a new editorial component to enhance their digital offerings. The goal was to create a dynamic feature that could showcase third-party logos and credit card art, supporting various use cases such as product displays, promotional campaigns, cross-sell opportunities, and navigational aids.

The existing components available for such purposes lacked engagement and required significant updates or a complete redesign. To address this, I explored several design iterations and ultimately decided to develop a series of carousel components to meet the team's needs. At the time, there was only one other design component within the library that supported carousel content. However, the "Showcase" design component I created soon became instrumental in defining standards for how users interact with carousels across the Site component library.

PRE-EXISTING WORK

Laying the foundation for this project began with a thorough review of our existing internal component library and an assessment of the current design standards. Initially, the only reference available was the outdated "Offers" component, which had not been updated to align with the ongoing improvements in our design system. This component struggled to engage users, largely due to its lack of graphic elements and visual appeal—key areas of focus for the new component design.

INITIAL DESIGN EXPLORATIONS

Creating full mockups and brainstorming through the different variations of the potential layouts (pictured above) was an invaluably informative step forward in making crucial design decisions. Initial design explorations were centered around the use of imagery, the inclusion of third-party logos / credit card art and the layering of the written content (headline, subheadline and CTA). Drawing and maintaining visual interest for our users was near the top of the priorities when going through the design progressions. Being able to accomplish those goals successfully would ideally capture users’ attention and encourage them to explore the content further.

FINALIZING DESIGN DECISIONS

After going through multiple rounds of design iteration and design discussions with my team, it was decided to ultimately go with a carousel design in an attempt to not only exist as a successful standalone component but help define future facing design as well. While it was important to be able to create a visually appealing and engaging new design component, being able to build deeper consistency within the confines of our pre-existing component library was as well. The main purpose for the Showcase carousel component was to be able to showcase multiple brand and business opportunities to potential customers.

Perhaps one of the bigger design problems for this project were addressed with the decision to place the important content and CTA within a panel along with a banner-like lifestyle image background. By separating the content panel and placing it “in front” of the image, it forces users to prioritize looking at and reading through the headline and subheadline. Turning the single banner of content into a carousel provides the user with multiple levels of interaction. Doing so also allows for users to focus on a given section of content in its entirety.

The only other layout variation that hit all the checkmarks of what was asked was a tabbed experience that complemented what the Showcase carousel had to offer.

ACCESSIBILITY

Adhering to and following UX design accessibility standards were the biggest step in creating a responsive, user friendly, interactive component. Basic user interaction behaviors like swiping and scrolling were deliberately designed as a part of this project. I was also able to work with our accessibility team of designers to create accessible carousel pagination across all responsive breakpoints with thoughtful “tab”-ability for users. The last step was to ensure proper color ratios and font styling before handing off the project to the tech and engineering team at Capital One.