ING App

ING is a banking app I use daily and have relied on for over five years. While I appreciate its overall functionality, my recent deep dive into accessibility opened my eyes to areas where the user experience could be improved.

This inspired me to redesign five key screens, focusing on improving accessibilities: contrast, navigation clarity, text readability, and visual hierarchy. Rather than reinventing the app, my goal was to explore how small, thoughtful adjustments can help make an already strong experience even more intuitive and inclusive.

A walkthrough of the five redesigned screens.

Observations and decisions behind the navigation system and the two densest screens: Overview and Insight.

While the current navigation bar depends on colour to differentiate, the icon for the Service tab alone has a different style. Depending on their state, icons should have the same style (e.g., filled or outlined).

Icons give the dominant cue of the navigation state. Therefore, it’s recommended to use a filled icon for selected destinations and outlined icons for non-selected destinations (Material Design, n.d.).

While exploring the top navigation across the five main tabs, I noticed that most headers followed a fairly consistent structure. However, the centred title looked slightly off-balance, since other pages didn’t have icons on the left side.

The logout icon could be a bit confusing for some people, and if it’s clicked, the user will be logged out right away without being asked. Moreover, since I wasn’t fully sure about the reasoning behind the logout icon’s prominence on the header, I decided to move it to the Service screen (as Service has elements related to account), while still keeping it accessible.

Since these pages are all part of the same core experience, I felt that aligning the structure across them could help create a more predictable and user-friendly layout. So, I proposed a simple adjustment: placing the title on the left and any icons on the right for all main screens.

Most elements on this page were grouped in white containers with an orange title and icon, giving them a clear and consistent visual structure. However, I noticed a few inconsistencies:

• The “Cards” section stood out. It didn’t follow the container style. The title was in black instead of orange, and there was no visual box around it.
• I assumed this might be intentional, since the section already includes cards (like “Debit cards” and “Apply for product”), and a “card inside a card” layout could be not the best idea.

While reviewing this page, I first asked myself: “As a user, what do I want to see first?”

From a content perspective, the “Current Accounts (My accounts)” section felt like the focal point. So there were two choices (image below) but for now, I selected B.

The current titles were in orange on a white background, around 20px, with medium or semi-bold font weight (depending on the typeface). I checked the contrast ratio, which came out to approximately 3:1 — this meets WCAG AA, but only if the text is bold.

Since I wanted to aim for WCAG AAA compliance (minimum 4.5:1), I increased the font weight to bold and adjusted the icon thickness to visually match the text’s strength. This small change improves both accessibility and visual hierarchy.

The insights shown are based on two things: 1) the selected account and 2) the selected period. Since all the financial insights below depend on these two, I grouped the selected account and selected period together at the top. Everything else below is about the user’s spending and activity for that month, so I kept them on the same level.

Side-by-side comparisons across the five redesigned screens.

• WCAG. (2024, April 16). Technique G182: ensuring that additional visual cues are available when text color differences are used to convey information. w3.org
• Material Design. (n.d.). Navigation Bar – Material Design 3. m3.material.io