Redesign LPBank’s Personal App

In the old design, users were taken straight into the card detail view using a carousel to switch between cards, skipping a proper listing page altogether. On top of that, it mixed active and inactive (unowned) cards in the same flow. This approach had two major issues.

First, today’s users often own multiple cards, both credit and debit, so using a carousel made it hard to get an overview or manage them effectively. Second, by blending owned and unowned cards together, it became harder to manage existing cards and also limited the chance to upsell new ones or promote other card-related features like rewards and offers.

The new structure separates things more clearly, making it easier to browse, compare, and manage different card types. The listing page is now tailored to the user's state: if you don’t have any cards yet, the system suggests ones that fit your financial profile. If you already own cards, it helps you focus on tracking balances, checking limits, and managing details easily.

Plus, this new setup gives us a cleaner foundation to add supporting features like card promotions and reward points in the future.

Similar to other features, the card detail page in the old version struggled with poor information hierarchy. All the data, whether important or not, was grouped together in one place. This made it hard for users to quickly scan or focus on what really mattered. For credit cards, key details like available balance or upcoming due dates were not highlighted, which made it difficult for users to understand their current credit usage. The actions linked to the card were also placed inside a horizontal scroll, which made it harder to find and access the right function.

To address this, we started by rethinking the entire structure of the page. Each data field was redefined based on its value to the product and the user. We worked closely with the business team to identify what information should come first and which actions users need most frequently. Based on that, we shaped a layout that is more practical and user-friendly.

In the new design, information is divided into clear groups based on priority. Key details like balance, limits, and account information are placed at the top of the page. For credit cards, we also visualized limit usage to help users track things more easily. Common actions are grouped into a second section with clear and accessible buttons. Less frequent actions are moved to the bottom of the page. These actions are still available but now placed more thoughtfully. The most used ones appear first, while the others are accessible through an expandable bottom sheet menu. This setup allows users to find what they need more easily, even as we add more new features. If we had kept the old carousel layout, it would have become increasingly difficult to manage.

In the old version, the card product page felt dull and unstructured. It read like a rushed paragraph with no clear beginning, middle, or end. It simply listed a few bullet points without highlighting the key benefits that users could actually receive.

The new version improves this by clearly structuring the product page into meaningful sections. It highlights the privileges users can enjoy, the unique selling points of each card, and helps people quickly assess whether the card fits their financial needs. It also includes support features to assist users who may have questions or face issues during the card application process. This thoughtful approach not only improves user understanding but also increases the potential for successful conversions.