REDESIGN

Standard Bank

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.

Standard Bank

The Challenge

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?

Industry Benchmarking

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.

Industry benchmarking

Stakeholder Interviews

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.

Benchmarking

User interviews

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.

User Interviews

Personas

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.

Persona

Ideation Workshop

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.

Ideation

Conceptualisation

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.

Conceptualisation

Prototyping

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.

Prototyping

User Testing

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.

User Testing

Final Design

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.

SB Final Design

User Interface

Atomic Design was a familiar concept to everyone in the team, so we decided to start by organising elements into Atoms, Molecules, Organisms, Templates and Pages. The development team adopting React as their JavaScript library also helped us to align, as we were all thinking about the project in terms of creating complex interfaces from small building blocks.

Account Type
Calculators
Location
Compare
Learn
Media

Design System

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.

Colours
Buttons
Navigation
Feature Cards
Mobile Navigation
Secondary Navigation

Project Information

CLIENT
Standard Bank

DATE
2017/2018

My Role

Discovery and research
Competitor analysis
Low-fidelity wireframes and prototypes
High-fidelity designs and asset creation
Usability testing and validation
Design workflow management
Providing direction to the design team

Design Tools

Sketch
Illustrator
Photoshop
Principle
After Effects
Origami
InVision