Rethinking Mongolia's First Private banking experience

Desktop-3-1

Project background

Digital Banking has become an integral part of our lives, and it’s not surprising! On this project, we had the opportunity to re-designed both the public and private banking landing experience of Transbank. 

CLIENT

Transbank

COMPLETION

February 2022

DURATION

10 weeks

ROLE

UX Designer

UI Designer 

CONTRIBUTORS

Procraft Angecy

Transbank (Development) 

THE ASK

Transbank sought our expertise to create a modern and elegant website design that attracts and retains HNWI (High net worth individual) clients with additional concierge services and easy flow between the different bank sectors and financial news from one place. 

Problem

TransBank is not aware of the current need of the customer base, therefore they fail to provide a better product/service offering. With an updated business plan and a new plan to attract HNWI clients, the website experience needs to match the brand’s tone and message. There is no clear separation between public, corporate, and private banks on the website, and each sector needs its tone and looks to attract its unique clients.

289416837_1826080577723766_7474492260818514707_n

THE GOAL

How might we design a website to help build and maintain a trustworthy relationship between the bank and its clients with clear navigation and an enticing CTA to consider premium membership with the bank?

STEP 1

Discover

Visual benchmarks for Private Bank

Before beginning the design process, we wanted to reach a consensus on a general design direction that would appeal to the bank customers. We collected visual references from other successful Private Banking platforms to do this. This phase helps us define the website's optical path while considering the client’s preferences. The concierge experience is a huge aspect of what the bank is offering to its partners. 

DISCOVERY

  1. By getting a full understanding of the concierge experience, we were better able to  visualize the tone and visual aspects of the website
  2. We also designed the public bank, and the research helped us to differentiate the two segments and clients.
  3. We visited the bank and experienced first-hand the premium services of a private banking client to get an accurate gist of the looks and feels of the landing page
Desktop-8-1

Citi Bank Private Bank, Bank of Singapore Premium, JP Morgan Private Bank, HSBC Private Bank

IMG_3634
IMG_3609
IMG_4988-1

Design Sprint brainstorming and sketching with clients

STEP 2

Ideate

Flow Map

Beyond the learning and topic content, the rest of the website was very straightforward. The bulk of the strategy work came in when developing the sitemap and journeys for the topic flow. One of the limitations set in place was the client was still unaware of the various services that they will be offering on each sector.

Screen-Shot-2023-04-07-at-2.09.06-PM

Final flow map for Hi-fi UI Design

STEP 3

Design

UI Design

Once all the user tests were conducted, the wireframes were complete and approved, we began the UI design phase. 

Referencing back to the approved visual direction, we created a design that is elegant by utilizing gold and jade color combinations for the palette and incorporating Transbank’s own custom illustrations of tigers. We also ensured each sector of the bank had its own look and feel.

Colors
272916367_1719634975034994_7196633585310579475_n-1
Private Bank Design
The private bank would embody something a bit more exclusive and luxurious by utilizing darker colors and flow. 
Kapture-2023-04-07-at-23.47.31-1
Frame-73-2 v-13
Public Bank Design
The public bank would represent more friendly and community tones
Desktop-3
Kapture-2023-04-08-at-00.12.58

OUTCOME

After the launch of the website and dashboard, we continued to iterate and work closely with the developing team to help with some animated elements. The client was satisfied with the look of the new website.

👋

Thanks for stopping by,

Let's chat!

View