Logo of UI Challenges
Sign in

Gallery

See what others have created

Number Pad Donation Screen
J

jooeun

@jooeun

EasyInput

Number Pad Donation Screen

Design a mobile donation screen for a nonprofit app where the user can pick an amount fast. The main interaction is a numeric keypad paired with a few quick-tap preset amounts.

The screen should make it obvious that the amount can be entered manually or selected from presets. Keep the donation amount as the focal point, with clear currency formatting and immediate feedback as the number changes.

This is a money flow, so the UI needs to feel calm and trustworthy. Show enough context for the user to understand where the donation goes, while keeping the action to continue or donate visually dominant.

Design the default state with no amount entered yet, but ready for input. The layout should work on a phone one-handed, with large tap targets and a keypad that does not fight the preset chips.

What to deliver

  • Design the default donation screen with presets and numeric input visible.
  • Design the amount display as digits are entered or a preset is tapped.
  • Design the primary donate/continue action in its idle and enabled states.
  • Design the keypad layout and clear/backspace behavior.
  • Design one subtle trust cue, like charity name, fund destination, or payment note.

Use a live-updating total or currency display above the keypad so users can confirm the amount without hunting for the typed digits.