DBS Bank

DBS Bank Onboarding

Project Overview

This project aims to digitally onboard existing customers to digital channels including iBanking and mBanking.

Customers must have existing DBS or POSB accounts. As a side goal it also aims to redesign the existing digital onboarding flow to make it much simpler and streamlined.

Although we had a Design Language System in place after the iBanking redesign in early 2015, we wanted to set a different tone for this flow: a tone that achieves the above goals better.

This project sets the direction for the future onboarding flows.

My Role

My role is to lead the design process, starting from sketching, wireframing to designing & prototyping the user interface. I work with the Business Analysts, Technology team, Project Managers, fellow Designers, and the senior management.

Goals

This project aims to digitally onboard existing customers to digital channels including iBanking and mBanking. It aims to eliminate the clutch of current onboarding flow, as they have longer steps. It is also non-responsive and has a visual design that doesn’t favor current DBS Bank’s branding, with low-impact layout, typography and colors.

Scope-wise, it needs to include a mobile web within a responsive website design and a plug into the mBanking design, which was also ongoing.

Scope

Scope of Work

Existing

Pre-redesigned Version

Challenges

We work with a team of businesspeople, compliance, technology and design to gather requirements before the project took off. Basically, requirements normally start from the business or marketing team, then handed over to solutions team, then design and finally technology team.

However, we tried a new approach whereby it’s a little more agile and iterative. It simply is not possible for a project to take off in silo-ed or waterfall manner, even in big company like DBS.

We had to work together daily, continually improving on our results. We were also challenged to dump our ideas and recycle, again and again.

In conclusion, the main challenge was more about to make the team stick together and to communicate as often as possible, because we are literally living in “silos”.

Process

We were trying to identify which design direction we would like to go. Currently, there is only one design language done by an agency, but we think it’s not clean and streamlined enough. We tried to improve the existing design language, starting from the onboarding flow. We wanted it to be an example that we can use to improve upon the other flows.

Our inspiration was Typeform onboarding, but we felt that was “too novel” of an approach for banking. We should balance it a little.

A great deal of time was spent prototyping in Invision and iterating it every single day to cope with changing requirements by business, and later, by technology. Invision was the perfect tool for this as it allowed easy and rapid changes, and because it was web-based, it was easy to share too.

Testing with the users

Testing with the Users

Prototyping with Invision

Prototyping with Invision

We spent initial time directly plunging into prototyping with “enough design”, as we felt it was more properly demonstrated with a hi-fi prototype. We used Invision as a tool. These prototypes can be shared with all stakeholders and eventually be presented in the user testing that we conducted with existing DBS customers.

Results

Concept

Initial Explorations

Learning about the new login page design that our team did a while ago, we decided to go that way.

To achieve the simple and focused design, we stayed away from the existing design in particular. We broke free and try to do a “paper sheet” design concept. It is the “center-stage” of the form-filling experience. It doesn’t mean that it’s a skeuomorphic interpretation of a paper as in traditional form, it just means it’s one focused space in which everything that need to happen, happens.

We tried to simplify the process, both flow-wise and perception-wise.

Wireframes

Wireframes

Responsive Design

Responsive Design

First Drafts

First Drafts

Iterations

Iterations

Final Design

Final Design

Flow-wise, we tried to reduce the forms the users need to fill, and whenever possible, reduce the steps, but without compromising security and accuracy. Security is paramount in banking and it has not always been possible to reduce something.

Perception-wise, we tried to design it in such a way that it improves readibility (with bigger forms and text box), nuanced/softer colors, cleaner perception by increasing spacings and distraction-free environment.

The design will be a base for future onboarding flows, and hopefully on the new Design Language System that the team is building for the web and mobile.

Future designs can be different from this but the concept stays the same: clean & legible with rooms for improvements.

For the relatively short duration of the project, I tried to document the style guide for the web. The style guide for the mobile app looks vastly different because a different team handled it.

Final Design - Desktop

Final Design on Desktop Website, Login Page

Final Design - Desktop - Popup

Final Design on Desktop Website, Popup Design

Final Design - Desktop

Final Design on Desktop Website, Inner Steps

Final Design - Mobile Web

Final Design on Mobile Website

Final Design - Tablet Site

Final Design on Tablet Website

Final Design - Mobile App

Final Design on iOS, Login Screen

Final Design - Mobile App

Final Design on iOS, Verification Screen

Final Design - Guidelines

Final Design Guidelines for the Developers

See more Case Studies