Skip to main content
UI Coach Logo
Intermediate

Repayment Calendar for Pay-Later Purchases

Design a repayment calendar that combines installments across merchants and makes upcoming amounts, fees, and failed-payment recovery clear.

Mobile2 to 4 hours

The brief

Understand the problem

Background

Pay-later purchases can feel separate at checkout but compete for the same bank balance on repayment days. A calendar should reveal total obligations and plan terms without encouraging additional borrowing.

User context

Talia has four active purchase plans from three merchants. Her pay date moved by two days, and she wants to see whether any installment is eligible for a schedule change.

Product problem

Talia needs one accurate view of dates, remaining balances, payment methods, and consequences before deciding how to handle a crowded week.

Objective

Create monthly overview, installment detail, permitted reschedule, and failed-payment recovery states.

What to design

Define the experience

Required experience

  • Review total due by day and pay period
  • Open a purchase plan and inspect its terms
  • Check eligibility and consequences for changing one date
  • Recover from a payment failure without losing schedule context

Screens and states

  • Repayment calendar
  • Purchase plan detail
  • Date-change review
  • Failed-payment recovery

Core user flow

Follow the critical path

  1. 01

    Talia opens September and sees three installments due before payday

  2. 02

    She selects a $64 payment and checks its change policy

  3. 03

    The interface offers one fee-free date within the allowed window

  4. 04

    She confirms the new date and reviews the updated weekly total

Product rules

Requirements and constraints

Requirements

  • Aggregate obligations while preserving each plan's merchant and terms
  • Show remaining principal, fees, due dates, and payment method
  • Explain date-change eligibility before presenting options
  • Update totals immediately after a confirmed change
  • Provide support and hardship routes without promoting new credit

Constraints

  • Eligibility and fees vary by plan and jurisdiction
  • A reschedule cannot be implied until confirmed
  • Bank processing dates may shift around public holidays

Reality check

States worth considering

Several installments fall on the same day
A merchant refund arrives after a schedule change
The bank account has expired
A payment partially succeeds
The user enters a hardship arrangement

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

September payments

  • 4 September: $38 for headphones
  • 6 September: $64 for shoes
  • 6 September: $29 for cookware
  • 18 September: $64 for shoes

Finish line

What to deliver

  • Four mobile screens showing schedule review and one permitted date change
  • A calendar component with due, processing, paid, failed, and changed states

If you want more

Optional extensions

Add a pay-cycle view
Design a downloadable repayment statement

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
OswaldDroid Serif

Oswald & Droid Serif

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
Fintech

Subscription Renewal Control

Design a subscription dashboard that reveals upcoming charges, price changes, and cancellation steps before money leaves an account.

Mobile2 to 4 hours
Data VisualizationInformation Hierarchy
Intermediate
Fintech

Shared Bills and Household Payments

Design a bill workspace that tracks household costs, splits responsibility, and makes upcoming payments clear to roommates.

Mobile2 to 4 hours
Data VisualizationInformation Hierarchy
Intermediate
Fintech

Track Money Owed Between Friends

Design a private lending record that helps friends remember terms, acknowledge repayments, and resolve mismatched expectations.

Mobile2 to 4 hours
Information HierarchyTrust and Safety
Advanced
Fintech

First Stock Order Ticket

Design a stock trading flow that helps a new investor place and monitor one transparent market or limit order.

Responsive web4 hours plus
Information HierarchyData Visualization
Advanced
Fintech

Investment Portfolio Risk Explanation

Design a portfolio view that explains concentration, volatility, time horizon, and scenario uncertainty without giving personal investment advice.

Responsive web2 to 4 hours
Data VisualizationContent Design
Intermediate
Fintech

Donate to a Verified Local Cause

Design a donation flow that helps supporters understand a charity, choose how funds are used, and keep a reliable receipt.

Mobile2 to 4 hours
Trust and SafetyForms