[{"data":1,"prerenderedAt":177},["ShallowReactive",2],{"case-atm-locator":3,"cases-list":169},{"id":4,"title":5,"body":6,"cardImg":154,"category":155,"date":156,"description":157,"downloadable":158,"extension":159,"image":160,"img":161,"meta":162,"name":5,"navigation":163,"path":164,"ready":158,"seo":165,"slug":56,"soon":158,"stem":166,"subtitle":167,"toc":158,"__hash__":168},"cases\u002Fcases\u002Fatm-locator.md","ATM locator",{"type":7,"value":8},"minimark",[9,14,18,22,25,41,44,48,51,58,61,63,67,70,73,84,86,102,104,110,112,115,117,123,125,131,133,137,140],[10,11,13],"h2",{"id":12},"context","Context",[15,16,17],"p",{},"The bank had started deploying its own ATMs across the city and partnered with another bank to expand the network. Users needed a convenient way to find the right ATM directly from the app — factoring in available operations, currencies, and working hours.",[10,19,21],{"id":20},"the-task","The Task",[15,23,24],{},"Design an ATM map within the mobile app that allows users to:",[26,27,28,32,35,38],"ul",{},[29,30,31],"li",{},"Find the nearest ATM with the right function — cash withdrawal or deposit;",[29,33,34],{},"Confirm that the ATM is operating now or will be at the planned time;",[29,36,37],{},"Check whether the ATM has the required amount in the right currency;",[29,39,40],{},"Get clear directions to the ATM — including indoor navigation within malls or stores.",[42,43],"hr",{},[10,45,47],{"id":46},"about-the-product","About the Product",[15,49,50],{},"The bank issues its own card that supports cash withdrawals and deposits at ATMs. At launch, the bank's own ATM network was limited, so a partnership with another bank was established to extend coverage. The map displays both networks — the bank's own ATMs and partner ATMs — each with different fee structures and available operations.",[15,52,53],{},[54,55],"img",{"alt":56,"src":57},"atm-locator","\u002Fcases-img\u002Fatm-locator-map.webp",[15,59,60],{},"A key characteristic of the product is that ATMs in the region operate with multiple currencies, and users need to know in advance what amounts are available. Without this information, a trip to the ATM could be a waste of time.",[42,62],{},[10,64,66],{"id":65},"approach","Approach",[15,68,69],{},"We started by defining the core user task: find the nearest suitable ATM, make sure it will be open at the right time, and get directions. \"Suitable\" means the right function, the right currency, and a sufficient amount.",[15,71,72],{},"From this, we derived our design principles:",[26,74,75,78,81],{},[29,76,77],{},"The map should be useful even without internet — ATM data is cached locally in the app;",[29,79,80],{},"Don't overload the map: filters should remove noise, not add complexity;",[29,82,83],{},"Navigation means more than a route on a map — it also includes instructions for finding an ATM inside a building.",[42,85],{},[87,88,92,96,99],"blog-flex",{":toc":89,"alt":90,"img":91},"toc","ATM Locator demo","\u002Fcases-img\u002Fatm-locator-00.gif",[10,93,95],{"id":94},"the-solution","The Solution",[15,97,98],{},"The map displays ATMs from both networks — the bank's own and the partner's. Users can filter by operation type, working hours (open now, 24\u002F7), and network. For a quick start, we added a \"Nearest ATM\" button that instantly highlights the closest active ATM.",[15,100,101],{},"The ATM detail card shows key information: address, working hours, available operations, and — a standout feature — available amounts in different currencies. Users can verify beforehand that the amount they need is actually in the ATM, avoiding a wasted trip.",[42,103],{},[87,105,107],{":toc":89,"alt":90,"img":106},"\u002Fcases-img\u002Fatm-locator-01.gif",[15,108,109],{},"If the ATM doesn't have enough cash, a \"Need more?\" button appears. It opens a list of nearby ATMs with sufficient funds — walking-distance options first, then those reachable by transport.",[42,111],{},[15,113,114],{},"Navigation to the ATM works on two levels: a \"Get directions\" button opens a maps app for walking or transit routing, while for ATMs inside buildings we added text-based instructions — how to find the ATM within a mall or store.",[42,116],{},[87,118,120],{":toc":89,"alt":90,"img":119},"\u002Fcases-img\u002Fatm-locator-02.gif",[15,121,122],{},"The ATM section also includes an FAQ: usage instructions, fee and limit information, and what to do if something goes wrong.",[42,124],{},[87,126,128],{":toc":89,"alt":90,"img":127},"\u002Fcases-img\u002Fatm-locator-03.gif",[15,129,130],{},"All ATM data is cached in the app. We designed dedicated screen states for situations when internet is unavailable — users still see the most recent information from the last update.",[42,132],{},[10,134,136],{"id":135},"results","Results",[15,138,139],{},"We built a tool that solves the user's problem before they leave home or the office:",[26,141,142,145,148,151],{},[29,143,144],{},"Users find the right ATM in seconds — with the right currency, amount, and working hours;",[29,146,147],{},"Filters and the \"Nearest ATM\" button minimize the steps to a result;",[29,149,150],{},"Real-time availability of cash amounts eliminates wasted trips;",[29,152,153],{},"The section works offline, which is critical for a region with inconsistent connectivity.","\u002Fcases-img\u002Fatm-locator-card.webp","Top Fintech Bank, Central Asia","2026-03-20","",false,"md",null,"\u002Fcases-img\u002Fatm-locator-hero.webp",{},true,"\u002Fcases\u002Fatm-locator",{"title":5,"description":157},"cases\u002Fatm-locator","A bank we had previously designed card management interfaces for came to us with a new challenge.","kyrBKTXCKn2wxqzxex0AmKVmVtiPRhpNBZEqQDdEXzg",[170,176],{"title":171,"slug":172,"date":173,"name":171,"cardImg":174,"category":175,"soon":158},"Flexible installment repayment","flexible-installment-repayment","2026-03-19","\u002Fcases-img\u002Fflexible-installment-repayment-card.webp","Top e-com, CIS Region",{"title":5,"slug":56,"date":156,"name":5,"cardImg":154,"category":155,"soon":158},1776181034799]