Reimagining the M&S credit card experience for one of the UK’s largest retailers
Reimagining the M&S credit card experience for one of the UK’s largest retailers
Reimagining the M&S credit card experience for one of the UK’s largest retailers
Reimagining the M&S credit card experience for one of the UK’s largest retailers
PRODUCT DESIGN / USER RESEARCH
2025
PRODUCT DESIGN / USER RESEARCH
2025
PRODUCT DESIGN / USER RESEARCH
2025
PRODUCT DESIGN / USER RESEARCH
2025
Project details
Project details
Project details
OVERVIEW
OVERVIEW
OVERVIEW
M&S is a leading UK retailer with over 7 million digital users across retail and banking. With an updated partnership agreement between M&S Bank and M&S Retail, the goal was to redesign the credit card experience by migrating content to M&S.com, integrating Sparks with credit card applications, and laying foundations for a unified, scalable ecosystem.
M&S is a leading UK retailer with over 7 million digital users across retail and banking. With an updated partnership agreement between M&S Bank and M&S Retail, the goal was to redesign the credit card experience by migrating content to M&S.com, integrating Sparks with credit card applications, and laying foundations for a unified, scalable ecosystem.
M&S is a leading UK retailer with over 7 million digital users across retail and banking. With an updated partnership agreement between M&S Bank and M&S Retail, the goal was to redesign the credit card experience by migrating content to M&S.com, integrating Sparks with credit card applications, and laying foundations for a unified, scalable ecosystem.
M&S is a leading UK retailer with over 7 million digital users across retail and banking. With an updated partnership agreement between M&S Bank and M&S Retail, the goal was to redesign the credit card experience by migrating content to M&S.com, integrating Sparks with credit card applications, and laying foundations for a unified, scalable ecosystem.
The project had two major phases: Front Door, launching a new M&S Money section with all credit card products on M&S.com, and Connected Acquisition (ConAcq), integrating sign-in, eligibility checks, and the full application journey on the M&S site. The redesign also included migrating from FESK to Onyx and ensuring all compliance, APR, and data protection requirements were met.
The project had two major phases: Front Door, launching a new M&S Money section with all credit card products on M&S.com, and Connected Acquisition (ConAcq), integrating sign-in, eligibility checks, and the full application journey on the M&S site. The redesign also included migrating from FESK to Onyx and ensuring all compliance, APR, and data protection requirements were met.
The project had two major phases: Front Door, launching a new M&S Money section with all credit card products on M&S.com, and Connected Acquisition (ConAcq), integrating sign-in, eligibility checks, and the full application journey on the M&S site. The redesign also included migrating from FESK to Onyx and ensuring all compliance, APR, and data protection requirements were met.
The project had two major phases: Front Door, launching a new M&S Money section with all credit card products on M&S.com, and Connected Acquisition (ConAcq), integrating sign-in, eligibility checks, and the full application journey on the M&S site. The redesign also included migrating from FESK to Onyx and ensuring all compliance, APR, and data protection requirements were met.
Client
Client
Marks & Spencer
Marks & Spencer
My role
My role
Design systems
User testing
Developer handoff
Design systems
User testing
Developer handoff
Design systems
User testing
Developer handoff
Team
Team
3 designers
1 project manager
Many developers
3 designers
1 project manager
Many developers
3 designers
1 project manager
Many developers
Duration
Duration
2025
2025
My role
My role
My role
Alongside the Design Lead, I designs some of the key credit card pages and flows, collaborating with developers and marketing to balance compliance, usability, and brand consistency. My responsibilities included auditing existing content, running quick user research, redesigning pages with a focus on hierarchy and clarity, establishing reusable components and standards for the new M&S Money section, and spearheading the Ad Control approval process to ensure all compliance requirements were met efficiently.
Alongside the Design Lead, I designs some of the key credit card pages and flows, collaborating with developers and marketing to balance compliance, usability, and brand consistency. My responsibilities included auditing existing content, running quick user research, redesigning pages with a focus on hierarchy and clarity, establishing reusable components and standards for the new M&S Money section, and spearheading the Ad Control approval process to ensure all compliance requirements were met efficiently.
Alongside the Design Lead, I designs some of the key credit card pages and flows, collaborating with developers and marketing to balance compliance, usability, and brand consistency. My responsibilities included auditing existing content, running quick user research, redesigning pages with a focus on hierarchy and clarity, establishing reusable components and standards for the new M&S Money section, and spearheading the Ad Control approval process to ensure all compliance requirements were met efficiently.
Alongside the Design Lead, I designs some of the key credit card pages and flows, collaborating with developers and marketing to balance compliance, usability, and brand consistency. My responsibilities included auditing existing content, running quick user research, redesigning pages with a focus on hierarchy and clarity, establishing reusable components and standards for the new M&S Money section, and spearheading the Ad Control approval process to ensure all compliance requirements were met efficiently.
Key Challenges
Key Challenges
Key Challenges
Migrating complex credit card content from legacy systems while keeping compliance and design consistency
Migrating complex credit card content from legacy systems while keeping compliance and design consistency
Migrating complex credit card content from legacy systems while keeping compliance and design consistency
Migrating complex credit card content from legacy systems while keeping compliance and design consistency
Designing for a tight timeline and multiple dependencies, including development handoff and Ad Control approval processes
Designing for a tight timeline and multiple dependencies, including development handoff and Ad Control approval processes
Designing for a tight timeline and multiple dependencies, including development handoff and Ad Control approval processes
Designing for a tight timeline and multiple dependencies, including development handoff and Ad Control approval processes
Balancing informative content with clarity and scanability, ensuring users can quickly understand key benefits and take action
Balancing informative content with clarity and scanability, ensuring users can quickly understand key benefits and take action
Balancing informative content with clarity and scanability, ensuring users can quickly understand key benefits and take action
Balancing informative content with clarity and scanability, ensuring users can quickly understand key benefits and take action
Creating a seamless end-to-end experience across Front Door and Connected Acquisition journeys while integrating Sparks
Creating a seamless end-to-end experience across Front Door and Connected Acquisition journeys while integrating Sparks
Creating a seamless end-to-end experience across Front Door and Connected Acquisition journeys while integrating Sparks
Creating a seamless end-to-end experience across Front Door and Connected Acquisition journeys while integrating Sparks
How might we reimagine M&S Credit Card pages to meet compliance requirements, and lay the foundation for future design work?
How might we reimagine M&S Credit Card pages to meet compliance requirements, and lay the foundation for future design work?
How might we reimagine M&S Credit Card pages to meet compliance requirements, and lay the foundation for future design work?
How might we reimagine M&S Credit Card pages to meet compliance requirements, and lay the foundation for future design work?
Our approach
Our approach
Our approach
Defined goals and success criteria
Defined goals and success criteria
Defined goals and success criteria
Aligned the team around business and user objectives — compliance, frictionless application flows, and a scalable, reusable design system.
Aligned the team around business and user objectives — compliance, frictionless application flows, and a scalable, reusable design system.
Aligned the team around business and user objectives — compliance, frictionless application flows, and a scalable, reusable design system.
Aligned the team around business and user objectives — compliance, frictionless application flows, and a scalable, reusable design system.
Audit and quick research
Audit and quick research
Audit and quick research
Reviewed existing pages, competitor insights, and marketing proposition research. Ran surveys and unmoderated usability tests in UserZoom to identify pain points and prioritize improvements.
Reviewed existing pages, competitor insights, and marketing proposition research. Ran surveys and unmoderated usability tests in UserZoom to identify pain points and prioritize improvements.
Reviewed existing pages, competitor insights, and marketing proposition research. Ran surveys and unmoderated usability tests in UserZoom to identify pain points and prioritize improvements.
Reviewed existing pages, competitor insights, and marketing proposition research. Ran surveys and unmoderated usability tests in UserZoom to identify pain points and prioritize improvements.
Iterative redesigns
alidated design decisions through user testing
Iterative redesigns
Iterative redesigns
Kicked off a 2-week design sprint to rebuild 5 priority pages, using research insights to inform layout, hierarchy, and messaging. Introduced flyouts for supplementary content and streamlined hero sections to highlight rewards, key benefits, and social proof.
Kicked off a 2-week design sprint to rebuild 5 priority pages, using research insights to inform layout, hierarchy, and messaging. Introduced flyouts for supplementary content and streamlined hero sections to highlight rewards, key benefits, and social proof.
Kicked off a 2-week design sprint to rebuild 5 priority pages, using research insights to inform layout, hierarchy, and messaging. Introduced flyouts for supplementary content and streamlined hero sections to highlight rewards, key benefits, and social proof.
Kicked off a 2-week design sprint to rebuild 5 priority pages, using research insights to inform layout, hierarchy, and messaging. Introduced flyouts for supplementary content and streamlined hero sections to highlight rewards, key benefits, and social proof.
Collaboration and compliance
Collaboration and compliance
Collaboration and compliance
Collaboration and compliance
Worked closely with developers and marketing to navigate technical constraints and Ad Control approval processes, iterating designs to meet compliance without delaying delivery.
Worked closely with developers and marketing to navigate technical constraints and Ad Control approval processes, iterating designs to meet compliance without delaying delivery.
Worked closely with developers and marketing to navigate technical constraints and Ad Control approval processes, iterating designs to meet compliance without delaying delivery.
Worked closely with developers and marketing to navigate technical constraints and Ad Control approval processes, iterating designs to meet compliance without delaying delivery.
Ecosystem mapping
alidated design decisions through user testing
Ecosystem mapping
Ecosystem mapping
Mapped full customer journeys across sign-in, eligibility, application, and success screens, ensuring Front Door and ConAcq experiences were consistent, clear, and future-proof.
Mapped full customer journeys across sign-in, eligibility, application, and success screens, ensuring Front Door and ConAcq experiences were consistent, clear, and future-proof.
Mapped full customer journeys across sign-in, eligibility, application, and success screens, ensuring Front Door and ConAcq experiences were consistent, clear, and future-proof.
Mapped full customer journeys across sign-in, eligibility, application, and success screens, ensuring Front Door and ConAcq experiences were consistent, clear, and future-proof.
Laying out all flow states, key screens, FAQs, and flyouts to show how users move through the credit card journeys, access information in context, and complete actions seamlessly across Front Door and Connected Acquisition.
Laying out all flow states, key screens, FAQs, and flyouts to show how users move through the credit card journeys, access information in context, and complete actions seamlessly across Front Door and Connected Acquisition.
Laying out all flow states, key screens, FAQs, and flyouts to show how users move through the credit card journeys, access information in context, and complete actions seamlessly across Front Door and Connected Acquisition.
RESULTS
RESULTS
RESULTS
RESULTS
Optimized Front Door pages for clarity, engagement, and rewards visibility
Optimized Front Door pages for clarity, engagement, and rewards visibility
Optimized Front Door pages for clarity, engagement, and rewards visibility
Optimized Front Door pages for clarity, engagement, and rewards visibility
Redesigned credit card landing pages with a clearer visual hierarchy, prominent rewards information, and contextual flyouts. Key benefits were prioritized, campaign clutter was reduced, and social proof was elevated to build trust and encourage scrolling.
Redesigned credit card landing pages with a clearer visual hierarchy, prominent rewards information, and contextual flyouts. Key benefits were prioritized, campaign clutter was reduced, and social proof was elevated to build trust and encourage scrolling.
Redesigned credit card landing pages with a clearer visual hierarchy, prominent rewards information, and contextual flyouts. Key benefits were prioritized, campaign clutter was reduced, and social proof was elevated to build trust and encourage scrolling.
RESULTS
RESULTS
RESULTS
RESULTS
Seamless Connected Acquisition journey from sign-in to application success
Seamless Connected Acquisition journey from sign-in to application success
Seamless Connected Acquisition journey from sign-in to application success
Seamless Connected Acquisition journey from sign-in to application success
Clear and supportive error handling, created in close collaboration with developers to ensure messages reflected real system behaviour—helping users understand what happened and how to fix it without confusion.
Clear and supportive error handling, created in close collaboration with developers to ensure messages reflected real system behaviour—helping users understand what happened and how to fix it without confusion.
Clear and supportive error handling, created in close collaboration with developers to ensure messages reflected real system behaviour—helping users understand what happened and how to fix it without confusion.
RESULTS
RESULTS
RESULTS
RESULTS
Streamlined compliance and collaboration processes to accelerate delivery
Streamlined compliance and collaboration processes to accelerate delivery
Streamlined compliance and collaboration processes to accelerate delivery
Streamlined compliance and collaboration processes to accelerate delivery
Developed design patterns and components that can be reused across multiple credit card products. This approach ensured visual consistency, reduced design debt, and allowed for faster iterations on new pages or offers.
Developed design patterns and components that can be reused across multiple credit card products. This approach ensured visual consistency, reduced design debt, and allowed for faster iterations on new pages or offers.
Developed design patterns and components that can be reused across multiple credit card products. This approach ensured visual consistency, reduced design debt, and allowed for faster iterations on new pages or offers.
RESULTS
RESULTS
RESULTS
RESULTS
Reusable components and scalable patterns for a unified ecosystem
Reusable components and scalable patterns for a unified ecosystem
Reusable components and scalable patterns for a unified ecosystem
Reusable components and scalable patterns for a unified ecosystem
Improved coordination between design, marketing, developers, and Ad Control, reducing bottlenecks caused by legacy approval workflows. This enabled faster iteration while ensuring all regulatory and compliance requirements were consistently met.
Improved coordination between design, marketing, developers, and Ad Control, reducing bottlenecks caused by legacy approval workflows. This enabled faster iteration while ensuring all regulatory and compliance requirements were consistently met.
Improved coordination between design, marketing, developers, and Ad Control, reducing bottlenecks caused by legacy approval workflows. This enabled faster iteration while ensuring all regulatory and compliance requirements were consistently met.
MOVING FORWARD
MOVING FORWARD
Expanding and evolving the M&S Credit Card experience
Expanding and evolving the M&S Credit Card experience
Expanding and evolving the M&S Credit Card experience
Expanding and evolving the M&S Credit Card experience
Next steps:
Continue refining the user experience using feedback and analytics, updating flows based on real usage
Expand the section to include related products like general insurance and travel money
Explore further integration with Sparks and other services while maintaining compliance
Keep building reusable components to support future credit card products and campaigns
Project Takeaways
Project Takeaways
Project Takeaways
Project Takeaways
Launching an ecosystem is complex
Launching an ecosystem is complex
Launching an ecosystem is complex
Launching an ecosystem is complex
Redesigning an entire credit card section required navigating legacy systems, multiple stakeholders, strict compliance, and tight timelines. Planning, prioritization, and adaptability were critical to keep the project on track.
Redesigning an entire credit card section required navigating legacy systems, multiple stakeholders, strict compliance, and tight timelines. Planning, prioritization, and adaptability were critical to keep the project on track.
Redesigning an entire credit card section required navigating legacy systems, multiple stakeholders, strict compliance, and tight timelines. Planning, prioritization, and adaptability were critical to keep the project on track.
Redesigning an entire credit card section required navigating legacy systems, multiple stakeholders, strict compliance, and tight timelines. Planning, prioritization, and adaptability were critical to keep the project on track.
Process optimization is key
Process optimization is key
Process optimization is key
Process optimization is key
From approvals to content migration, improving workflows enabled faster iteration while maintaining consistency across the new M&S Money ecosystem. Streamlining these processes also reduced bottlenecks and allowed the team to focus on design quality.
From approvals to content migration, improving workflows enabled faster iteration while maintaining consistency across the new M&S Money ecosystem. Streamlining these processes also reduced bottlenecks and allowed the team to focus on design quality.
From approvals to content migration, improving workflows enabled faster iteration while maintaining consistency across the new M&S Money ecosystem. Streamlining these processes also reduced bottlenecks and allowed the team to focus on design quality.
From approvals to content migration, improving workflows enabled faster iteration while maintaining consistency across the new M&S Money ecosystem. Streamlining these processes also reduced bottlenecks and allowed the team to focus on design quality.
Collaboration drives success
Collaboration drives success
Collaboration drives success
Collaboration drives success
Being the first design team in this new space meant defining workflows, setting standards, and proving what’s possible. Close coordination with developers, marketing, and compliance teams ensured designs were feasible, approved, and user-centered.
Being the first design team in this new space meant defining workflows, setting standards, and proving what’s possible. Close coordination with developers, marketing, and compliance teams ensured designs were feasible, approved, and user-centered.
Being the first design team in this new space meant defining workflows, setting standards, and proving what’s possible. Close coordination with developers, marketing, and compliance teams ensured designs were feasible, approved, and user-centered.
Being the first design team in this new space meant defining workflows, setting standards, and proving what’s possible. Close coordination with developers, marketing, and compliance teams ensured designs were feasible, approved, and user-centered.
Research-informed design matters
Research-informed design matters
Research-informed design matters
Research-informed design matters
Leveraging surveys, competitor analysis, and unmoderated usability studies helped prioritize content, refine flows, and validate design decisions quickly. Insights from research consistently shaped both layout and messaging to maximize clarity and engagement.
Leveraging surveys, competitor analysis, and unmoderated usability studies helped prioritize content, refine flows, and validate design decisions quickly. Insights from research consistently shaped both layout and messaging to maximize clarity and engagement.
Leveraging surveys, competitor analysis, and unmoderated usability studies helped prioritize content, refine flows, and validate design decisions quickly. Insights from research consistently shaped both layout and messaging to maximize clarity and engagement.
Leveraging surveys, competitor analysis, and unmoderated usability studies helped prioritize content, refine flows, and validate design decisions quickly. Insights from research consistently shaped both layout and messaging to maximize clarity and engagement.
Hiya! Have an idea
or opportunity?
© NICOLE LOZANO 2025
Hiya! Have an idea
or opportunity?
© NICOLE LOZANO 2025
Hiya! Have an idea
or opportunity?
© NICOLE LOZANO 2025
Hiya! Have an idea
or opportunity?
© NICOLE LOZANO 2025