Redesigning CIBC's user interface to enhance how customers view their monthly expenses and payment deadlines through a 'Calendar View' aims to help Canadians better manage their finances and promote timely credit card payments.
The Problem
Despite escalating concerns over personal finances, Canadian consumer spending on enhanced digital and in-person retail experiences remains strong. There is also a significant increase in missed credit card payments, affecting one in twenty-five Canadians as of Q3 2023.
Roles
UX Researcher
UX Designer
Timeline
4 weeks
Tools
Figma
Team
Just me!
How Might We Statement
"How might we design a financial interface that clearly displays transactions and simplifies tracking, allowing CIBC users to easily oversee their expenses and payment deadlines?"
Key Features
Calendar view: Viewing Transactions at a glance
Current UI
New Changes
Current UI
New Changes
Previously, users had to scroll through a long list of purchases, which made it difficult to recognize spending patterns and stay aware of their monthly expenses because transactions could easily be overlooked while scrolling. Now, we're introducing a calendar view to provide a clearer overview of your expenses at a glance.
With the new design, users can also easily view previous months and navigate to today's date with a single click.
Easily view Bill Payment dates
Current UI
New Changes
Current UI
New Changes
I found that many users who are new to credit cards find the section that indicates when to pay the credit card quite tricky and confusing to understand. Therefore, I simplified it by directly displaying on the calendar when a payment is due and whether they have paid it or not. For further credit information, users can scroll up to see the current UI.
Additionally, viewers are able to click directly on the link to view their end-of-month credit card statement when available.
Switching between Current UI and 'Calendar View'
Everyone has different preferences when viewing data, therefore I added an ability to seamlessly switch between the Current UI (List view) and Calendar view.
Primary Research
Interview & Questionnaire Findings
Secondary Research
Industry Standards UI Patterns
I looked into different ways to organize data, like lists, timelines, and dashboards. Many popular tools use a calendar view because it helps users plan their day and stay organized. This confirmed that a calendar view would be a good fit for my design and meet user needs.
Academic Insights into Calendar-Based Data Visualization
"By providing a structured visual representation, calendar instruments help respondents identify patterns and relationships among events."
(Glasner & van der Vaart, 2009)
"Calendars provide an intuitive layout for understanding temporal distributions, helping users identify peaks, gaps, and recurring trends in their data."
(Hartl, 2007, p. 6)
"Calendars enable users to cross-reference various time-related data points, making it easier to track changes and detect relationships."
(Hartl, 2007, p. 6)