OCBC Wing Hang

Website Design And Front-end Development

The website of OCBC Wing Hang was too old to fulfil the latest requirements in terms of business, technology and design. Thus it needed to be revamped. After studying the old website, the website was redesigned and built step by step.

Information Architecture

To reorganize, structure, and label content effectively, information architecture (IA) was implemented. The entire website of OCBC Wing Hang has been divided into three branches: personal banking, business banking, and OCBC Wing Hang Group’s information. Each branch has both Traditional Chinese and English versions. Redundant information and menus were removed.

This aims to improve user usability and increase findability as well as readability. It helps different user groups find the relevant content they want, enhancing their engagement and retention, which leads to higher conversion rates.

screenshot of OCBCWH's old homepage

Typography

Headings

Font style of headings English font style of headings Traditional Chinese font style of headings

Content

Font style of content English font style of contentTraditional Chinese font style of content

Color Guide

Primary Color

Personal / Business Banking

#BA9F6B
RGBA 237 28 36 100%

Premier Banking

#BA9F6B
RGBA 186 159 107 100%
#A7A9AC
RGBA 167 169 172 100%

Secondary Color

#9E0B0F
RGBA 158 11 15 100%
#F37021
RGBA 243 112 33 100%
#FDB913
RGBA 253 185 19 100%
#F1DFB8
RGBA 241 223 184 100%
#00A8A5
RGBA 0 168 165 100%
#005B7E
RGBA 0 91 126 100%
#6C1B78
RGBA 108 27 120 100%
#BC1286
RGBA 188 18 134 100%

Icons

Branch service icon Personal service icon Phone icon Fax icon Email icon Web service icon Digital service icon

UI Design & Front-end Development

Desktop - Personal Banking

Personal banking's investment page

Business Banking

Business banking homepage

OCBC Wing Hang Group

CBC Wing Hang Group homepage

© 2025 Flora Lamb.

All rights reserved.