Skip to main content
UI Coach Logo
Intermediate

Subscription Renewal Control

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

Mobile, Responsive web2 to 4 hours

The brief

Understand the problem

Background

Recurring services use different billing cycles, trial rules, and cancellation methods. A balance total alone does not help someone decide what to keep or act before a renewal.

User context

Omar has streaming, software, gym, and cloud storage subscriptions. Two are billed annually, one trial ends this week, and a service has announced a price increase.

Product problem

The product must distinguish confirmed transaction data from predicted renewals and avoid implying it can cancel or pay a provider when it cannot.

Objective

Create an overview, subscription detail, renewal alert, and guided action flow.

What to design

Define the experience

Required experience

  • Recurring cost overview
  • Subscription detail and history
  • Renewal or price-change alert
  • Cancellation guidance

Screens and states

  • Subscription dashboard
  • Calendar or timeline
  • Subscription detail
  • Action confirmation

Core user flow

Follow the critical path

  1. 01

    Omar connects a payment account

  2. 02

    He reviews detected recurring services

  3. 03

    He confirms a yearly renewal and sees the new price

  4. 04

    He follows verified cancellation steps and records the outcome

Product rules

Requirements and constraints

Requirements

  • Label detected, confirmed, and manually added subscriptions
  • Normalize monthly and yearly cost without hiding billing frequency
  • Show evidence for price changes
  • Provide reminders before actionable deadlines
  • Never claim cancellation before provider confirmation

Constraints

  • Merchant names may be ambiguous
  • Some renewals vary in amount
  • Account connections can expire

Reality check

States worth considering

A shared family subscription appears twice
A free trial has no transaction history
A renewal date is estimated
The provider rejects cancellation

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.

Upcoming renewals

  • CloudBox Pro, $119 yearly, renews 9 October
  • MoveMore Gym, $38 monthly, price increases to $42
  • FilmHouse trial, $14 monthly after 4 days

Finish line

What to deliver

  • Four responsive screens
  • A monthly versus annual cost comparison

If you want more

Optional extensions

Add household sharing
Design a cheaper-plan comparison

Optional direction

Visual resources

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

Font pairing
Open SansOpen Sans Condensed

Open Sans & Open Sans Condensed

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

Icons
Illustrations

Keep practicing

Intermediate
Fintech

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
Information HierarchyData Visualization
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
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
Intermediate
Fintech

Personal Finance Dashboard

Design a calm financial overview that connects spending, upcoming obligations, savings progress, and account health to useful next steps.

Responsive web2 to 4 hours
Dashboard DesignData Visualization