Overseas Shopping Price Calculator: designing for how Taiwanese shoppers actually do the math
Shopping overseas or on foreign sites, Taiwanese shoppers juggle constant mental math: the exchange rate, discounts written two different ways (25% off vs. 75折), and the hidden costs — foreign transaction fees, card cashback, tax refunds. Generic currency converters answer none of it. I designed and prototyped a mobile calculator that does the math the way shoppers actually think: real-time, no calculate button, with Taiwan’s 折 discount notation as a first-class input.
01Context & problem
The question a shopper actually has in a Tokyo store isn’t “what’s ¥12,800 in TWD” — it’s “after the 8折 discount, minus tax refund, plus my card’s foreign transaction fee and cashback, what does this really cost me — and is it a good deal?” Generic converters answer the first question. Nobody answers the second, so people do it in their heads, in a foreign currency, at the checkout line — and get it wrong.
02Research & insights
- Discount notation is a localization problem: Taiwan writes discounts as 折 (75折 = pay 75%), Western sites write % off (25% off = pay 75%). Shoppers translate between the two in their heads — a small, constant source of errors that no converter addresses.
- The sticker price isn’t the real price: tax refunds, overseas card fees, and cashback shift the actual cost by several percent — enough to change a buying decision, and exactly the part people can’t do mentally.
- Trust depends on rate freshness: a converted number without a timestamp is a number people double-check elsewhere. Showing when the rate updated — and clearly labeling a stale-rate fallback when offline — is what makes the answer trustworthy.
03Design decisions
Four decisions define the product, each traceable to an insight:
- No calculate button: results update live as you type. The calculator disappears; only answers remain — because the moment of use is a checkout line, not a desk.
- 折 as a first-class input: quick chips for 9折 / 8折 / 7折 plus a custom field that accepts both notations (“20% off” or “75折”) — the interface speaks the shopper’s language instead of making the shopper translate.
- States designed before polish: a guided empty state, and an error state that degrades gracefully — when rates can’t refresh, the tool clearly labels “using last rate, updated yesterday 22:10” and stays usable instead of breaking.
- Advanced costs, kept out of the way: tax refund, foreign transaction fee, and card cashback live in a V2 panel that resolves to one number — 實際花費, actual spend — so the primary flow stays effortless and the deeper answer is one tap away.
04Outcome & reflection
- A working prototype, end to end — from observed pain to insights, decisions, and a state-complete interactive build. All design decisions are mine; the prototype was built with AI-assisted coding — the fastest way I know to get a design idea into a testable, working state.
- The localization thread, at its smallest scale — my client work adapts global systems to local markets; this project applies the same instinct to something as small as a discount notation. Localization isn’t a layer you add; it’s how you read what users already do.
What I’d do next: put it in front of real shoppers — the open question is whether the advanced costs (fees, cashback, refund) belong one tap away in V2, or whether “actual spend” is the number that should greet you first. That’s a testable question, and I’d rather test it than debate it.