Find an open branch or ATM — in seconds.
Refocusing the Chase ATM & Branch Locator around the one thing customers actually came for: availability.
Customers scrolled, searched, and called — because availability wasn’t clear
The locator is where Chase customers land when they need details about the branch or ATM. The prior experience missed critical availability information, buried answers under low-contrast status text, irrelevant appointment CTAs on ATM-only locations, and promotional content pushed mid-feed — so customers scrolled, refined searches, and called support to confirm what the page should have told them at a glance.
The brief wasn't a visual refresh. It was to make availability and service capability the most scannable, trustworthy signals on every surface — and to do it consistently across web, iOS, and Android so the answer didn't depend on which device the customer picked up.
We instrumented the journey before we touched a pixel.
A 12-week agile engagement with design, research, engineering, and operations moving in weekly cadence. I was the design lead for DCE (Digital Customer Experience) that led a mixed-methods discovery: quantitative instrumentation of the live funnel to locate the real drop-offs, moderated sessions to understand why, and a direct line to operations so the redesign could surface real-time branch and ATM status — not a static schedule that would go stale on day one.
Funnel Instrumentation
Instrumented search, branch traffic, CTA clicks, geocode failures, and support-call attributions to pinpoint where task flows broke down.
Heuristic & Competitive Review
Benchmarked availability signals across banking, retail, and mapping competitors — identifying patterns customers already trusted.
Moderated Usability (20)
Twenty moderated sessions across mobile and desktop, focused on urgent-use tasks — finding an open ATM, services, hours, fees, and available bill denominations.
MaxDiff Surveys (800+) / TURF analysis
Remote surveys targeting customers that needed clarity on availability, services, and outages to avoid wasted trips and frustration.
Accessibility Audit
Automated and manual screen-reader testing on each surface — ARIA, keyboard traps, contrast, and list/map view equivalence.
Cross-Functional Sync
Embedded with operations and support — validating the real-time status feed, ATM services, and copy that matched branch realities.
/ Empathy Map · Synthesis
- "Is this branch actually open right now?"
- "I just need the closest ATM that takes deposits."
- "Can I meet with a banker today?"
- "I need a 24/7 ATM — what's closest?"
- "Is this information current or did hours change?"
- "Why is it showing me a meeting CTA for an ATM?"
- "Is there an accessible entrance here?"
- "Do I have time to get there before it closes?"
- Scans hours grids quickly, then re-reads to confirm.
- Refines searches or opens a competitor's map for a second opinion.
- Calls the branch to verify before driving.
- Scrolls past mid-feed promos to get back to results.
- Uncertain when availability signals conflict or look stale.
- Frustrated by appointment CTAs on ATM-only locations.
- Reassured when status is current, plain-spoken, and matches reality.
- Confident when the CTA matches what the location can actually do.
"You have been able to deliver a best-in-class capability to our clients and truly help us be the 'Easiest Bank' to do business with... you were dedicated, persistent and persevered through it all... and I am so proud of this winning team."— Senior Leadership · JPMorganChase
Understand, explore, materialize.
The same three-phase loop I apply across product work — tuned here for a mixed quant/qual engagement running 2 rounds of research, an cross-channel web/iOS/Android, and a real-time operations integration on a 12-week clock.
Understand
- Instrumented search, outages, temporarily closed, geolocations
- Support services and hours for Branch and ATM
- Heuristic review & competitive benchmarking
- Problem framing and measurable success criteria
Explore
- Rapid wireframes on availability, pins, loaction tiles, Branch and ATM details
- High-fidelity Figma prototypes for web + iOS + Android
- Bridge cross-channel parity
- 2 moderated rounds of usability tests
Materialize
- Availability band, badges, contextual CTAs shipped cross-platform
- Real-time ops feed for availabilty, ATM type, ATM count
- WCAG AA compliance on all interactive components
- Post-launch monitoring against primary KPIs
Customers found what they needed — faster, with confidence.
After rollout, the redesigned Locator reduced failed searches, cut the volume of support calls asking for hours, and lifted both customer satisfaction and appointment quality — all while preserving marketing promo performance by relocating it out of the task-critical feed. The clearest signal: the availability band became the single change that moved the most metrics.
A single trustworthy signal at the top of every surface
The high-contrast availability band — Open/Closed, next transition time, and ATM status — became the one thing customers looked for first, on web, iOS, and Android. Directions CTR rose 18% and time-to-first-action dropped 28% at the median.
One design language across web, iOS, and Android
Same availability model, same badge vocabulary, same contextual CTA logic — tuned per platform but unmistakably the same product. Customers got the same answer no matter which device they reached for.
Real-time operations data — with honest fallbacks
Integrating the operations feed meant the UI matched branch reality; kept trust intact when the feed dropped.
Marketing preserved, utility restored
Moving mid-feed promos further down positions left promo CTR net unchanged while removing interference with discovery — a rare win where the task experience and marketing goals both moved in the right direction.
Want to see the healthcare case study?
For a different kind of research-led redesign — native mobile for traveling clinicians — take a look at the SmileMD Provider App. Or if you have a project where this kind of cross-functional, data + research approach would help, get in touch.
Read the SmileMD case study