Fig. 1
The original SABB app, similar to the global HSBC banking app, was in need of a refresh. It ignored modern mobile app paradigms, looked dated and wasn't a good representation of a bank looking to project an attitude of forward thinking.
Brief
Deliver a best-in-class mobile app, within the constraints of time and technology (rapid deadlines, hybrid app).
Process
Working with our project manager and business analyst, we broke up the features the current app supports into sprints. Within these sprints, we would spend a few days understanding the feature and requirements, then move to hand-drawn scamps, wireframes, full fidelity UI mockups, and finally HTML/CSS/JS. Outside of these sprints, we would also spend time testing prototypes with users and stakeholders.
Fig. 2
Some of the wireframe output during the course of the project. These depict parts of the credit card and settings flow.
Implementation
With close collaboration with a UI designer and a front-end developer, we created an HTML/CSS/JS prototype that allowed us to test our work with real users. We held weekly design reviews and did in-house usability testing on users. I personally wrote some HTML/CSS for this project, and defined more than my fair share of UI screens (using our pre-built pattern library).
Apple Pay
One of the more interesting features was implementing Apple Pay in the mobile app — interestingly, nobody at SABB had had prior experience with implementing such a system, so the responsibility in understanding all of the flows and edge cases fell on me.
Fig. 3
In collaboration with a UI designer, we created UI mockups and a pattern library. These depict parts of the same credit card flow.
Validation
We ran our prototype through two user tests with 8 participants each. Feedback from these existing SABB customers informed form patterns, process flows, and navigation entry points.
Post-mortem
Read more about the SABB Mobile App.