Currency Converter Widget: Motion UI Concept
Thisara Prabhath
Overview
I redesigned a money transfer widget for sending US dollars to Sri Lankan rupees. The goal was simple: show the rate, the fees and the delivery time at a glance, so people know exactly what their recipient gets before they send. I then animated the full send flow as a 10-second motion piece at 60fps.
The problem
Many transfer widgets hide the real cost. People have to work out the exchange rate themselves, guess the fees and hope the money arrives on time.
What I designed
Live rate up front – The USD to LKR rate is the largest number on the card, with a Live rate badge, the change over the past month and a chart with 1D to 1Y ranges plus high and low markers.
Linked amounts – "You send" and "Nimal gets" sit together with a swap button and update as you type.
Every cost spelled out – The transfer fee, the amount converted, how long the rate stays locked (with a live countdown) and when the money should arrive.
Slide to send – A slide-to-confirm button shows the exact amount, which helps prevent accidental transfers.
Rate alert – A small card that notifies you when 1 USD reaches a target rate, showing how far away it is.
Recipient status – Nimal's card moves from "Waiting for transfer" to "Received", with the amount in rupees.
Design decisions
Numbers carry the hierarchy – Big, clear figures for the rate and amounts, with quieter labels around them.
One accent colour – Green marks live and positive states: the rate badge, the chart, the alert toggle and the received status.
Trust details stay visible – Fees, rate lock and arrival time are never hidden behind a tap.
The motion piece
The film follows one transfer from start to finish. The rate chart draws in, the amount changes from 1,000 to 1,440 USD, the recipient amount and fees update, the rate lock counts down, the user slides to send and the recipient card confirms the money was received. It ends on the full widget with the rate alert and recipient cards around it.
Deliverables
Transfer widget UI with a live rate chart, fee breakdown, rate alert and recipient states
10-second motion piece at 60fps
Tools
Figma, Framer
Like this project
Posted Oct 9, 2026
Redesigned a money transfer widget so rates, fees and delivery time are clear at a glance, then animated the full send flow in a 10s 60fps motion piece.
