Skip to main content
UI Coach Logo
Intermediate

Shared Bills and Household Payments

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

Mobile, Responsive web2 to 4 hours

The brief

Understand the problem

Background

Shared households receive bills on different schedules and through different accounts. Spreadsheets show totals but do not make ownership, partial payment, or changing occupancy easy to understand.

User context

Caleb shares an apartment with three people. He pays the electricity bill, another roommate manages internet, and one person is moving out halfway through the billing period.

Product problem

The product must distinguish the amount owed to a provider from amounts owed between people, then handle adjustments without rewriting past records.

Objective

Design bill capture, split review, reminder, and settlement states for a shared household.

What to design

Define the experience

Required experience

  • Bill entry or import
  • Transparent split calculation
  • Household balance and settlement

Screens and states

  • Upcoming bills dashboard
  • Bill and split detail
  • Payment request
  • Household activity

Core user flow

Follow the critical path

  1. 01

    Caleb imports the electricity bill

  2. 02

    He checks the billing dates and adjusts one roommate's share

  3. 03

    Everyone receives a clear request

  4. 04

    Payments update each person's balance without changing the provider status

Product rules

Requirements and constraints

Requirements

  • Show provider due dates separately from roommate deadlines
  • Explain how each share was calculated
  • Support partial and offline payments
  • Keep edits and reminders visible to the household

Constraints

  • Not every provider supports direct payment
  • Roommates may use different currencies or payment methods
  • Financial details should be shared only as needed

Reality check

States worth considering

A bill is corrected after splitting
A roommate leaves mid-cycle
Someone pays the provider directly
A scheduled payment fails

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.

October household bills

  • Electricity, $146.80, due 18 October
  • Internet, $72.00, paid to provider
  • Water, $43.20, two roommates settled

Finish line

What to deliver

  • Four responsive screens
  • A clear calculation breakdown for one adjusted split

If you want more

Optional extensions

Add recurring split rules
Design a dispute and comment flow

Optional direction

Visual resources

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

Font pairing
RalewayLato

Raleway & Lato

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
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

Guided Portfolio Rebalance

Design an investment review that proposes a diversified rebalance and requires informed approval before any order.

Responsive web4 hours plus
Data VisualizationTrust and Safety
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
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
Advanced
Fintech

Freelance Income Cashflow Forecast

Design a cashflow forecast that turns irregular invoices, expected payment dates, recurring costs, and tax set-asides into transparent scenarios.

Responsive web2 to 4 hours
Data VisualizationForms