Internet banking UX design for a leading South African bank

Complete User experience refresh of the out-dated online banking experience.

Our client is a leading integrated financial services group on the African continent. They have on-the-ground presence in 20 countries in sub-Saharan Africa. The bank is a 150-year-old organisation and one of the “Big Four’’ banks in South Africa.


Twist Open partnered with Immersion UX Pty Ltd. based in Johannesburg to completely revamp the personal banking platform. Our role was to provide UX mentorship to the bank's in-house design and development teams consisting of 50+ members.


• Complete overhaul of the existing internet banking experience.

• To mentor the in-house design & development teams for the new internet banking revamp effort.

• Follow the agile methodology within teams at the bank and strategically deliver for optimum productivity.

• Introduce new features within payments and deliver user-centered design for them.

• Redesign the task flows for account summary, payments, managing beneficiaries, statements etc.

• Working towards an aggressive deadline set to launch new internet banking platform.

Daily stand-ups around this UX wall at the bank

Design Approach

Assessment of features and relevant tasks for figuring out the detailed Information Architecture

Want to know how UX design can add value to your business?


  • A methodical differentiation of Tasks and Information was carried forward in which the Information was further divided into tabular (beneficiaries list, payments list, etc.) and certified data (bills, receipts, certificates, etc.)



  • Accommodating navigation for both basic and advanced users. This allowed effortless jump between tasks and information access for frequent use case scenarios.


Analysis & flow

User Testing & Iterations

New features were user tested to validate the designs. Design was continuously iterated based on usability test results. To save time multiple options of flows in the form of quick interactive mock-ups of the same function were tested due to aggressive timeline of deliverables and business requirements.

We were working in an agile environment. This called for co-ordinating with the development team specially the back-end team to validate the possibilities of flows and data functions for better user experience. Also, simultaneously ideating and benchmarking on the competitors’ best practices to deliver a validated and competitive product.

Challenges Faced

• Understanding the banking methods and thought process of the stakeholders from a different region.
• Continuously revisiting the high-level Information Architecture to optimise the existing and new features. The main reason was, multiple agile teams were working on different sections of the website. So, a careful and strategic approach was devised to manage the changes made to the IA in tight deadlines.

• User testing the new features and iterating the designs accordingly within a tight deadline.
• Sudden change in business requirements lead to iterations in the design with multiple interdependencies which caused iterations in the designs of other sections too.

The Team

Want a sneak peek into ongoing projects in the financial domain?

This is the table for list of beneficiaries which accommodates link to all the important relevant tasks which could be done for the beneficiaries with the right amount of information needed by the user. So it is an open ended layout for different user types providing an easy switch between tasks and view information.

Check the working prototype in the following link:

This is the task flow of adding a beneficiary along with the high fidelity wireframes.

It takes the user in a focussed environment with form of easy labels strategically put considering the mental model of the user. It also has inline validation for proper guidance.
The wizard helps the user in a way forward in completing tasks where in the success screen it gives all the relevant options for the user to consider.

Check the working prototype in the following link:

This is the ‘Auto Share Invest’ page high fidelity wireframe. This comes under the ‘Invest’ tab for the user.
It follows the similar language of different accounts for the user. This for easy recognition by the user.

Check the working prototype in the following link: