A collection of customisable UI elements, design patterns and standards, created with the aim of improving consistency and quality of both Standard Banks products and the product design experience.
I was the Design Lead for the project, working with 2 visual designers, 2 interaction designers and 1 copywriter. I participated and oversaw the UX research phase, where we conducted ideation workshops, user interviews and ethnographic studies to understand business and user needs and wants.
Liaising with the client’s Marketing and Communications department, we developed a Design System that expanded on the foundation laid by the existing brand identity in order to support omni-channel brand governance.
We also spearheaded the motion and micro-interaction design for the entire mobile application, ensuring functionality, scalability and consistency across modules to control and elevate the user experience beyond the basics of design and tone of voice.
How might we improve productivity for business, designers and developers?
To understand the market that Standard Bank is in, and the competitors within it – we first conducted an industry benchmark on features, design styles and channels.
Looking at immediate competitors in the Banking and Finance sector, as well as smaller competitors in the Fintech industry, gave us a good idea of what’s available to customers now, and how we can do things better.
We talked to employees of Standard Bank ranging from C-suite personnel to the Customer Service Officers – to get an understanding of how The Banks employees see their own company in terms of brand identity and market position.
The stakeholder interview was also instrumental in understanding the pain points that Standard Banks employees face both in using the current systems in place, as well as ideas on how things could be improved.
We reached out and recruited various user types within the different environments – to interview non-customers and customers of Standard Bank. The goal was to understand how each individual customer saw Standard Bank as a brand, used their products and ultimately – their expectations of web and mobile banking facilities.
After consolidating and analysing the research data gathered, we came up with 4 personas that best describe the demographics of RHB’s target market – from the fresh graduate to the wealthy retiree.
These personas allowed both us and the client to constantly be reminded of the people that we are designing the product for, their needs and wants, as well as pain points.
We conducted an ideation workshop with the client, inviting stakeholders across the board to contribute and pitch ideas, rank them and eventually – select the best of them for inclusion into the product.
This ensured that the client’s voice was heard, and that stakeholders had a personal stake and say in how the product would be developed – allowing for a balance between user needs and business wants.
To determine how best to approach these issues, I ran workshops with the wider design team to define the technologies and tools we could use to improve our workflow, grid and breakpoint usage and developer handover process.
We chose to adopt the 8pt grid system with 16 columns on XL/L breakpoints and 8 as the browser sizes down. This allowed us to create more interesting layouts whilst introducing consistency and rhythm across products, and avoiding the rendering issues associated with scaling half pixels.
After experimenting with alternate options, we chose to continue using Sketch for the UI kit. We didn’t want to change tools just for the sake of it, and the only major issues we had identified (duplication of symbols, file versioning) we could resolve by adding Abstract and shared component libraries into our workflow. The resulting library is fully themeable for new client projects, and makes use of shared colour, layer and typography styles for quick and easy customisation in a similar way to how these would be updated in CSS.
Based on the client’s choice of concept (personal and free), we created a prototype in InVision for user testing. The prototype also allowed us to test navigation and usability internally, as well as quickly coming up with a basic design language to govern how components and layouts should look and flow in different screens.
We carried out user testing using the prototype to hear users’ feedback on the usability, navigation and features that they expected from a mobile banking application.
We were also able to get opinions and perspectives on design themes (based on the applications that users most used and like) and perspectives of RHB as a brand – which was crucial in designing an application that users liked using and would return.
There were more than 7 iterative improvements in between these main iterations, but they primarily dealt with colour changes, icon style, content display and layout expectations.
The final design was the result of months of iterations and user testing, coming up with a design language that both worked with the existing corporate identity of Standard Bank, while allowing for expansion into digital channels.
The design revolved around the concepts of flexibility, clarity, and friendliness – key messages that Standard Bank wanted to bring across to its customers. These were achieved through the use of a light and bright colour palette, card-based responsive layout, and a friendly, casual tone-of-voice.
Good documentation serves to define and communicate the visual design, user experience and engineering values, as well as a consistent design, development and new feature governance process. This would allow other internal and external teams to quickly adopt the platform, and work in harmony with each other.
Discovery and research
Low-fidelity wireframes and prototypes
High-fidelity designs and asset creation
Usability testing and validation
Design workflow management
Providing direction to the design team