Trylo - Global eSIM Store
Trylo is a global eSIM store spanning the full purchase journey: a marketing landing page, a searchable plan catalog for 190+ countries, plan detail, checkout with vouchers and multiple payment methods, an order dashboard, and a live order detail screen that renders an installable eSIM QR code. Every screen is fully bilingual (Indonesian and English), supports light and dark themes, and uses Framer Motion so the experience feels like a native app rather than a static site.
The Problem
Buying a travel eSIM is usually a confusing, English only checkout full of data units and coverage caveats that a first time traveler does not understand. The goal was to make the whole flow feel like a familiar consumer store: a shopper should go from landing to a scannable QR without ever wondering what a data cap or activation code means, in their own language.
Research & Discovery
- 01Studied incumbent eSIM stores (Airalo, Holafly, Nomad) and catalogued where the flow leaks: jargon heavy plan cards, activation steps hidden after purchase, and no localized copy for Indonesian travelers.
- 02Mapped the emotional arc of a traveler: excitement at booking, anxiety about connectivity on landing. The product needed to remove the landing anxiety by making activation obvious before purchase.
- 03Decided bilingual support was not a nice to have but the core differentiator for the Indonesian market, so i18n was designed into every component from the start rather than bolted on.
Key Design Decisions
Bilingual by architecture, not by afterthought
Every user facing string routes through a typed i18n dictionary with full ID and EN parity, toggled instantly client side and persisted to local storage. There are zero hardcoded strings across the app, so the language switch is total and never leaves a screen half translated.
QR before the shopper has to ask
The order detail screen generates a real installable eSIM QR with qrcode.react, plus a manual activation code fallback and a one tap download. Activation is shown as a concrete, glanceable artifact instead of a wall of setup instructions.
App like motion on every surface
Framer Motion drives page transitions, filter tabs, buttons, and modal entrances so the site reads as a polished mobile app. Motion is used to signal state changes (data usage bars, activation, deletion) rather than as decoration.
One card grammar across the catalog
Plan cards, order cards, and checkout summaries share the same anatomy: flag, country, data and validity, price, action. Learning one screen teaches all of them, which keeps a large multi screen store feeling coherent from a solo build.
Built With
Outcome
Shipped a complete, production deployed eSIM store covering landing, catalog, plan detail, checkout, orders, and live order detail with QR generation. The app reaches 100% i18n coverage in Indonesian and English, supports light and dark themes, and animates every previously static surface. A full consumer commerce flow, not a single screen demo.
What I Learned
Localization is a product decision, not a translation pass. Designing the i18n dictionary up front forced clearer, shorter copy in both languages and exposed every place the UI leaned on English only assumptions. The other lesson was restraint with motion: animation earns its place when it explains a state change, and becomes noise when it does not.
Next case study
Firee - Decentralized Marketplace