ATM/Branch Location Web Page Redesign

Overview

The goal of this project is to redesign the current LBC ATM/Branch Locator web page to align with the new brand identity, updated design patterns, and improved user experience.

Mission

The current LBC ATM/Branch Locator webpage has not yet been updated to align with the bank’s new online branding design. In addition to its outdated appearance, the page presents several usability issues that contribute to a poor user experience. To address these concerns, three primary design solutions have been proposed:

  1. A simplified Branch/ATM locator featuring only a list of branch locations on a basic webpage.
  2. A locator that combines a list of branch locations with a Google Map displaying each branch, but without a search function
  3. A more advanced locator that includes both a branch list and a searchable Google Map.

For Phase 1 of this project, the first design solution—a simplified Branch/ATM locator consisting of a plain list without any map integration—will be implemented. The below Work Sample section presents the final design of Solution #1, alongside a comparison with the current branch locator page.

My role and What I Have Accomplished

I led a discovery phase prior to UI design, conducting persona development and user journey mapping to identify key user pain points and align stakeholders. These insights guided the design strategy, and I ultimately delivered a redesigned Branch/ATM Locator webpage that aligns with the new brand identity and updated design patterns.

Work Samples

The following before-and-after comparison illustrates the enhancements made in the redesigned LBC Branch and ATM Locator webpage.
The second image in the carousel shows a brief user journey for current state and future state in comparison charts while the third image showing the detailed version of the final UI design.

The initial User Persona Exercise in Figma Jam for all three scenarios/design solutions.

User journey mapping exercise; showing the initial User Journey Mapping exercise paired with mid-fidelity UI mockups to visualize key user flows and design solutions. The 4th image showing a summaried version of user journey map in chart format for all 3 design solutions.