Intro
Barclays Mobile Banking app allows users to make payments, move money between accounts and view balances and transactions from their phone.
Challenge
A number of new banking apps were disrupting the banking space through the provision of an easy to use interface. In order to compete, a redesign was required.
Solution
The dashboard would be redesigned through vigourous research and testing and a set of new guideline would be created to strengthen the brand.
1. Introduction
Every aspect of the dashboard was reviewed, including all the components that were being used. A gap analysis was carried out and all the elements were grouped by usage and frequency of appearance. With this information a plan was created to prioritise the workflow.
Whilst the components were the main focus, it was important that the new dashboard app should feel fresh and modern for new users.
Work flow
By taking a zoomed-out view of the entire journey a better understanding was observed of the sequence the users traversed through the dashboard. This also helped to identify patterns and templates that could later be reused in the visual design.
2. Design System
From here a set of rules and principles were established for the design system. This included the core atomic expressions: grid, colour, typography and icons.
The grid
Colour palette
Typography
Icons
3. User Research
An open card sort exercise was conducted with 5 participants. The card sort was a great tool to visualize patterns and identify opportunities for navigation and categorization.
Card sort
After carrying out 2 rounds of these sessions we were in a better position to understand how the users interacted with the dashboard and how they viewed their finances.
4. Wireframing
Sketches of the screens were informed using all the collected research data. It became easier after identifying the main actions that the user needed to take to complete their objective. The main goal with the sketches was to quickly jot down any design ideas knowing that more changes could probably be made later when creating the high-fidelity wireframes.
Sketch
Mid-fidelity wireframes were created using the sketches as a rough guideline.
Flow diagram
5. Final Design
The final designs used a refined design system, which remained coherent with the Barclays brand identity. It was important to keep true to the brand value of Barclays as it had a strong presence in the UK; its logo (the eagle) and its colour (sky blue) were easily identifiable. A change in the iconography or in the colour range could disrupt the message sent by the product, which had to be avoided.
To accompany the new screen designs a guide was created to help users to get the most out of banking on the go. The guide would help users to set up, register and use the Barclays Mobile Banking app on an iPhone.
Please click the thumbnail below to see the Barclays Mobile Banking app guide.
6. Conclusion
Whilst having experience working within an interdisciplinary team and leading creative direction, this was a first time working with other fellow UX designers, which brought on its own set of challenges. It was a steep learning curve to keep up with the more experienced designers but a lot was learnt.
Whilst the whole project was a learning experience with a series of new tools used such as Adobe XD and benchmarking, the main learning came from the impact of accessibility and the fact that it should be performed on a progressive basis. Additionally, it was also important to test the solution and brand development to avoid any unwanted surprises.
