The goal of this project was to try to solve some of the problems that users were having according to data found through the Apple AppStore and Google PlayStore.
USER REVIEWS
To start with research, I have collected and analysed negative reviews from Google PlayStore and Apple AppStore.
EMPATHY MAPS
After analysis of reviews I have created empathy maps to start defining the personas:
PERSONAS
PROBLEM IDENTIFICATION
From the analysis of the reviews, there were four problems that seemed bigger than others:

1. Login
2. Transfers
3. Itemised and specific billing
4. Payee Management
SCENARIOS
Edgar, 67

1. Opens Bank of Ireland App
2. Logs into the App using the fingerprint option
3. He is presented with the first screen of the app showing his account balance and few recent transactions.
4. On the bottom of the app page, he presses the transfers icon.
5. He is presented with a screen with different payment methods, he chooses “Bank Transfers”
6. On the bottom of the page, he clicks on the circular icon to add new IBAN account to his list.
7. In the “New Recipient” screen he fills name of his granddaughter and inserts the IBAN of her savings account. He skips other field and clicks “Continue”.
8. From the list of all his saved account, he selects added granddaughters Young Saver Account.
9. The app shows “Enter Amount: screen and he types in 50.00 EUR and clicks next.
10. He receives the confirmation that transactions have been transferred.
11. He closes the app

Rob, 31

1. Opens Bank of Ireland App
2. He is presented with passcode screen since his fingerprint option is disabled
3. Rob types in the passcode
4. He is presented with the first screen of the app showing his account balance and few recent transactions.
5. On the bottom of the app page, he presses the transfers icon.
6. He is presented with a screen with different payment methods; he chooses “Send to Mobile”.
7. He is presented with a screen showing all contacts from his phone address book that have a Bank of Ireland account.
8. He selects his friend John from the list of contacts.
9. The app shows “Enter Amount: screen and he types in 65.00 EUR and clicks next.
10. He receives the confirmation that transactions have been transferred.
11. He goes back to transfers page and clicks on the “Transfer to a Savings Account”.
12. The app shows “Enter Amount: screen and he types in 250.00 EUR and clicks next.
13. He receives the confirmation that transactions have been transferred.
14. He closes the app
DESIGN PROCESS
I have started the design process by sketching out the current system (AS-IS). From those sketches, I have tried to implement changes that would solve some of the problems on a low-fidelity level. The paper designs were focused mainly on Interaction Design and Information Architecture and those sketches were then translated into the final Visual Design following the principles and language of Material Design. The image below illustrates the stages of the process: AS-IS sketch, TO-BE sketch and final design.
TYPOGRAPHY
Roboto is used throughout the app ranging from size 16pt to 38pt. In cases where 16pt size has been used in the design the option to increase the size to 20pt was added as additional functionality. More about this functionality can be found in the Inclusive Design section below.
ICONS
Material Design Icons were used where there was a dedicated icon. For icons that were not available in the Material Design library, icons with similar visual style were used instead.
PROTOTYPES
Links to the InVision Prototypes:
INCLUSIVE DESIGN
During the implementation of the Material Design the size of typography was considered for age-related visual impairment, as well as negative space for the option to make the font size larger. The brand colour scheme when analysed didn’t meet minimum requirements with both colour combinations that are in contrast. The Colour Contrast Analyser software was used to generate two additional colour schemes that would exceed the minimum value of the colour contrast in five different aspects. The additional colour schemes had to accommodate for both age-related visual impairment (colour difference and brightness difference) and three types of colour blindness (Protanopia, Deuteranopia and Tritanopia).
For the colour data analysis in the chart above, Colour Contrast Analyser for MacOS was used to generate all the data. The value in Green represents the value that is above the minimum requirement and the value in Red represents the value below the minimum requirement. The white arrows represent the colour combinations that are in contrast to each other.
The prototype above represents the implementation of two additional colour schemes into the existing prototype.
The two images above show the simulation of two additional colour schemes when viewed with Protanopia and Deuteranopia colour blindness. Adobe Photoshop only has an option to simulate Protanopia and Deuteranopia. Tritanopia is a very rare type of colour blindness.

Other projects from the portfolio

Back to Top