News

Reworking ING’s home screen: the quality is in the details!

Your mission, should you accept it…

Whilst working with ING, we had to deal with a foundational screen that is as important for our client as it is for end users: the account summary. This screen serves as the homepage of the application (after signing on, of course) and allows the user to consult his or her account balances.

The issues to be resolved

Here is the iPad screen in its original state from a few weeks ago:

ING tablet

We began by listing all the issues caused by this screen:

Issues for ING:

  • Add a new entry to the already-crowded menu (the Savings Coach, also designed by our team)
  • Integrate a new Cross Sell system and the need to improve the manner in which products are highlighted
  • New visual identity that the Netherlands ING group wished to incorporate

Issues for end users: 

  • The current arrangement only allowed 4 accounts to be displayed
  • The total account balance is not visually connected to the balance of each account
  • The “gauges” are not easy to understand and the treatment of negative balances makes the page layout unbalanced

The details that count…

Reformat the list of accounts vertically

One of our first recommendations was to shift the accounts to a vertical list (more consistent with the mobile version of this screen) and to not display the “gauges” that lend a heavy visual emphasis on orange, preventing the eye from focusing on the areas of interaction.

BEFORE

ING ipad

AFTER
iNG ipad

This new arrangement also permits the user to do a mental addition between the balance of each account and the total balance (right aligned, directing the eye in a linear fashion).

Revisit the pictograms

We took advantage of the integration of a new entry in the menu (the Savings Coach) to redesign each icon so that they form a coherent ensemble (same graphical style, same outline, same visual weight…)

BEFORE ING ipad

AFTERING ipad

We did the same work to harmonize the header’s pictograms.

BEFORE

ING ipad

AFTER

ING app

Rethinking the Cross Sell system

The new ING tool (Epiphany) enables the presentation of more targeted offers to the user as a function of the products he or she already has and what is known about the user. This system enables the user to “close” or “dismiss” an offer he or she is not interested in.

BEFORE

ING app AFTERING app

We proposed tiles that are graphically very different and arranged in another column in order to better differentiate the user’s accounts.

If desired, the user can suppress offers he or she doesn’t want to see anymore. Once the column is empty, a placeholder is displayed.

ING app

The Final Result

BEFOREING app

AFTERING app

Conclusion

Since this is a case of reworking the visual identity and the ergonomics of an application that was well-liked by users, the best approach is to proceed in steps. We can see that by improving the details of the UI (design of pictograms, typographic hierarchies, proportions of colors…) we gain legibility and ease information reading for users.

For the time being, the goal is to test this new accounts arrangement on the iPad only (the first feedback is already very positive 😉 but the longer-term goal will be to progressively harmonize the user-friendliness and the UI on all platforms (desktop, mobile, tablet).