Redesigning a
banking app
About Absa
Absa Bank is the third largest bank in South Africa. It offers a range of retail, business, wealth management, corporate and investment solutions to customers and clients.Project Challenge
Background
In May 2005, Barclays Bank of the United Kingdom purchased 56.4% stake in Absa. By the end of December 2017, London-based Barclays PLC had reduced its shareholding in Absa Group Limited, previously called Barclays Africa Group, to 14.9%, allowing Absa to rebrand the bank.
The Challenge
I was provided with a basic brand guidelines with a new logo, new colours and new imagery. It was my task to redesign the mobile app with the new elements. My goal was to create a banking app that is clean and clear in scalable design, easy for users to understand with functionality at the top of mind to ensure that they can do their banking much easier than before.
The Approach
I set out the task of redesigning the mobile app as follows:
- Exploring high-level concepts
- Focusing on information architecture and visual hierarchy
- Refining the design through prototypes and testing
- Developing the design system language
- Testing and implementation
01
Exploration
Objective
The initial stage of the project involved exploring high-level concepts. I conducted research on competitors and other financial institutions' mobile apps to gain an understanding of the industry standards and trends. I identified the strengths and weaknesses of the existing app and used that information to develop a new design that addressed the weaknesses and built on the strengths.
02
Simplification
Objective
After developing a high-level concept, I simplified the design by focusing on information architecture and visual hierarchy. I then used basic iOS UI libraries to build out the core functionality of the app, as iOS had a higher percentage of users than Android. This approach ensured that the app would be easy to use and navigate for iOS users.
03
Refinement
Objective
I then refined the design until patterns emerged that could be used to develop the design system language. I tested the design with a diverse group of users to ensure that it met their needs and goals. This process required further iteration until the design was optimised for user experience.
04
Design system language
Objective
Once the core features were approved, I began developing the design system language using atomic design methodology. The design system language was designed for 17 other designers working on different products for the banking app. The colours and gradients were defined to relate to certain features and functionality, and the typography used the system fonts for iOS and Android to avoid technical issues.
Outcome
As part of the design system language, I defined the style guide, component library and pattern library. The style guide provided guidelines for the use of colours, typography, imagery, icons and illustrations. The component library provided pre-designed UI elements that could be used to create consistent user interfaces. The pattern library provided a collection of design patterns that could be used to solve common design problems.
05
Testing and implementation
Objective
I tested the design system language with a group of designers on a few features to ensure that it could be easily understood and implemented. Due to a tight deadline for launching the rebranded bank, further user tests were not possible. However, the design system was improved incrementally based on feedback from users and designers.
06
Conclusion
The redesigned mobile banking app had a new and clean look that was easy to navigate and understand. The design system language ensured consistency across all products on the mobile app and allowed other designers to work seamlessly. The app received positive feedback from users, who found it easier to use and understand. The bank successfully launched the rebranded app on time, and the design system language was used across all products on the mobile app within the bank. The design system language has also reduced design inconsistencies, minimized design efforts, and improved design quality across the board.