Credit Card Detail Page Redesign

Link to Citi® Secured Mastercard page Link to Citi®Diamond Preferred®Card page Link to Citi®Simplicity Card page

Problem

Solution

How might we transform outdated credit card detail pages into intuitive, engaging experiences that help users confidently choose the right card?

By leveraging Citi’s design system and organizing content within a consistent credit card detail page framework, I created an engaging experience that helped customers confidently select the right card.

Context

Citibank’s credit card product detail pages are a critical conversion point where potential customers evaluate options and decide whether they should apply or not. The pages need to clearly communicate card benefits while complying with legal, marketing, and internal design standards. The project involved multiple stakeholders, including external agency Razorfish, copywriters, product owners, and legal partners, which created complexity and risk for inconsistencies or delayed launches.

Task

I was responsible for translating agency-provided designs into Citi’s internal design system while ensuring:

Clear and engaging presentation of credit card features and benefits
Consistency across reusable design components
Compliance with legal and regulatory requirements
Alignment with cross-functional stakeholder expectations
Responsiveness and usability across all devices

The ultimate goal was to deliver pages that not only looked polished but supported business objectives like higher application rates and reduced user drop-off.

Action

Implemented design system components: Rebuilt agency designs using Citi’s internal UI components (e.g., hero sections, sticky banners, legal areas) to ensure scalability and consistency across products.
Collaborated with outside agency: Worked closely with Razorfish to understand the design intent, ensuring the final implementation matched their vision while remaining compliant and feasible.
Aligned content with copywriting & stakeholders: Partnered with copywriters and stakeholders to refine messaging, ensuring clarity, accuracy, and legal compliance.
Managed responsive execution: Verified breakpoints and page responsiveness to ensure seamless experiences across desktop, tablet, and mobile devices.
Delivered developer-ready handoffs: Provided specifications, assets, and guidance to Engineering, reducing errors and speeding up time to market.

Success!

Increased application efficiency: By clearly presenting credit card information and streamlining interactions, users were able to make faster, more confident decisions, supporting higher application conversion rates.
Consistency and scalability: Standardized implementation across multiple credit card products that reduced design debt and iteration cycles, freeing internal teams to focus on higher-value initiatives.
Cross-team alignment: Streamlined collaboration between agency, internal teams, and Legal, reducing feedback cycles and accelerating time-to-launch for new pages.
Enhanced user trust: By maintaining compliance and clarity, pages reduced confusion and potential drop-offs, improving overall engagement metrics and supporting Citi’s revenue goals.

Reflection

Looking back on this project, I gained a deeper understanding of how to translate high-fidelity designs into scalable, production-ready pages while balancing business, legal, and user needs. I strengthened my ability to collaborate with cross-functional teams, including agencies, copywriters, product owners, and legal stakeholders, which taught me how to facilitate alignment and navigate complex workflows without compromising user experience.

I also honed my systems-thinking and attention to detail, ensuring that every component I implemented adhered to Citi’s design system while remaining responsive and accessible. This experience reinforced the importance of bridging design intent with practical execution, and I became more confident in making judgment calls that balance user needs, design fidelity, and business goals.

Overall, this project helped me grow as a reliable, detail-oriented, and proactive UX professional. I learned how to anticipate stakeholder needs, communicate effectively across teams, and deliver polished, high-quality solutions on time—skills that make me an asset in any design environment.