Credit Card Deferred Schedule

This project aimed at improving the user experience for clients managing deferred payments

About my role in this project and my global feeling

As Intern UX Designer at BoursoBank, I had opportunity to work with 2 distinct teams :

  • ✅ As Principal UX Designer (for 6 months) for the Customer Service : my intership allow Bourso Bank to recruit a resource for the customer service (until my arrival, the Infography team were almost totally allocated to the Marketing Department only.
  • ✅ As UX Designer (for 1 month) in the UX Team of the Marketing Dept. : at the end of my internship, I worked on 2-3 project.

I had 2 challenges here : undestand the bank domain and users' needs & apply my UX skills after my Master's Degree. Fortunately, I had a great team and my internship was a success.

Problem Statement

After some weeks in the Customer Service team, I noticed some improvements. One on my first improvement was the display of the calendar for differed credit card. It was only a table, that is terribly not responsive design. I have proposed a new way to display the calendar based on studies, interviews and experience of one of my teammates. For this case, I was the Principal UX Designer.

 

Previous Boursoshop display

Challenges and Context

Previously, the calendar feature was displayed as a static table, which created significant frustrations. Users had to manually locate the current month's row, a cumbersome process that was especially problematic on mobile due to the lack of responsive design. Scrolling horizontally and vertically on small screens was inconvenient and impractical. These issues severely impacted usability and customer satisfaction, prompting a complete redesign of the feature.

User Research and Needs Gathering

To design a tool that truly meets user needs, we conducted a series of research activities to understand the frustrations and expectations of clients. Our process included discussions with two team members of BoursoBank, one Customer Service member, one experienced bank manager, and two clients to gain comprehensive insights.

Our User Research Approach

To create a user-centered design, we conducted in-depth research to understand the pain points and needs of both users and stakeholders. Here's how we approached it:

  • User Interviews: Engaged with diverse clients, including students, retirees, and working professionals, to understand their struggles with the previous tabular design and deferred debit concepts.
  • Feedback Workshops: Organized sessions with banking and design teams to identify usability challenges and align on solutions.
  • Surveys: Collected data to validate assumptions about deferred debit clarity and date display preferences.
  • Process Audit: Evaluated the limitations of the existing display, identifying how it hindered scalability and user satisfaction, especially on mobile platforms.

My study also take in consideration the way that the eye read information, the following picture show how a human being consult an information.

Eyes' path

What We Learned

Through this research, several recurring issues emerged:

  • Deferred Debit Confusion: Many users struggled with understanding the concept of deferred debit, highlighting the need for educational content.
  • Mobile Usability Issues: The old table format was difficult to navigate, especially on mobile devices, where horizontal and vertical scrolling frustrated users.
  • Preference for Simplicity: Users wanted a clean, straightforward display that shows relevant information (e.g., current month’s debit date) without requiring extra effort to find it.
  • Need for Educational Support: Users appreciated the option to access explanatory content when needed, but preferred it to be unobtrusive.

User Personas

To better understand the different types of users, we created personas. These profiles allowed us to define the specific needs and goals of each user group and tailor the tool to their objectives.

User Journey Mapping

Hafid - Student client

Phase: Want to consult date

  • Emotions: 😟 Confused, 😠 Frustrated
  • Pain points: Difficulty finding the correct month and information, especially on mobile.
  • Opportunities: ✅ Mobile-optimized calendar, displaying the current month’s date and offering easy navigation to other months.

Phase: Need to understand benefits

  • Emotions: 😒 Annoyed, 🙂 Reassured
  • Pain points: Confusion about the deferred debit system.
  • Opportunities: ✅ Clear, accessible explanations directly within the calendar interface.

Fatima - Senion client

Phase: Want to consult date

  • Emotions: 😟 Overwhelmed, 😒 Impatient
  • Pain points: Difficulty reading the information on mobile due to small text or excessive scrolling.
  • Opportunities: ✅ Simplified display with minimal scrolling and clear fonts, especially on mobile.

Phase: Need assistance

  • Emotions: 😕 Anxious, 🙂 Reassured
  • Pain points: Difficulty understanding delayed debit mechanics.
  • Opportunities: ✅ A help section easily accessible from the calendar interface, explaining the key concepts.

Jamal - Banking Customer Service Representative

Phase: Need to support customers

  • Emotions: 😤 Frustrated, 😌 Satisfied
  • Pain points: Receiving multiple customer inquiries about dates or calendar functionalities.
  • Opportunities: ✅ A clear, easy-to-use calendar that minimizes confusion, reducing support queries.

Phase: Follow-up on issues

  • Emotions: 😒 Tired, 🙂 Accomplished
  • Pain points: Repeatedly explaining calendar and offer details to users.
  • Opportunities: ✅ A demo feature to help customer service representatives guide clients effectively.

Jamila - Experienced Banking Manager

Phase: Monitor product performance

  • Emotions: 😟 Concerned, 🙂 Motivated
  • Pain points: Lack of insight into how customers interact with the calendar feature.
  • Opportunities: ✅ Analytics tools to track user engagement and improve the product based on insights.

Phase: Strategic planning

  • Emotions: 😠 Pressured, 🙂 Empowered
  • Pain points: Difficulties in adapting the calendar for future user segments and business needs.
  • Opportunities: ✅ A flexible calendar design that can scale according to evolving business goals.

Design Process

Client Path - Desktop

Client User Path PC

This diagram illustrates the journey of the cleint using the feature to consult date of deffered credit card calendar with PC.

Client Path - Mobile

Client User Path Mobile

Here, we see the difference. This design had been adopted directly by users only with the sketch.

Solution & Features

The revamped calendar offers a clean, user-friendly design focused on displaying essential information while maintaining a seamless mobile experience.

  • Dynamic Date Display: Automatically shows the debit date for the current month (e.g., November shows November’s date by default), streamlining navigation for users.
  • Dropdown Menu for Other Dates: Allows users to quickly access dates for other months without overwhelming the interface.
  • Mobile-Optimized Layout: Ensures an intuitive, clutter-free experience on small screens.
  • Educational Tooltip: An optional, collapsible guide explaining the concept of deferred debit, addressing a common pain point highlighted during interviews.

This solution simplifies access, enhances comprehension, and significantly improves usability, particularly for mobile users.

Sketch PC
Sketch Mobile

Prototypes & Mockups

Interactive Prototype

Explore the interactive prototype created with Axure, which simulates the full user journey of date for deffered Credit Card consultation.

UI Mockups

Below are the mockups of the key screens in the application, demonstrating how the user interface supports the workflows of date consultation.

CC Deffered 1

Date displayed based on current month

CC Deffered 2

Possibility to download a table of all date for the current year

CC Deffered 3

A help is now available to explain deffered credit card system

Offer 1
Offer 2
Offer 3

Test, Impact and Results

The new calendar solution significantly improved user engagement, offering a more accessible and intuitive display, particularly on mobile devices. It addressed prior navigation issues, especially for older clients, and made the process of consulting the payment dates more streamlined. Marketing teams appreciated the flexibility for content management and prioritization.

Test Methodology

The design was evaluated using real-world scenarios tailored to different user personas, ensuring usability across demographics. Feedback was gathered through interviews and workshops, refining features to meet both user and marketing needs.

Result after tests

Result

This table recap one of the test we made with users

User Feedback

Users appreciated the clarity of the new calendar, especially its mobile-friendly design. The enhanced user interface made it easier to find and view the correct dates without frustration. Marketing teams valued the new dynamic controls, enabling quicker and more effective campaign adjustments.

Challenges

There was initial confusion regarding the calendar’s presentation, particularly about deferred debit. This was resolved by simplifying the design and integrating helpful explanations directly within the interface. Marketing teams needed additional support to visualize the scalability of the calendar, which was addressed through detailed training and updates.

Key Improvements

The calendar now features dynamic navigation with a clear, mobile-optimized display. UI elements were redesigned to minimize cognitive load, making it simpler for users of all ages to access relevant information. Marketing teams now have tools to easily manage and prioritize offers, improving their flexibility.

Impact

Tools Used

Hubspot
Balsamiq
Photoshop
Axure
Jira
Microsoft