China Construction Bank
01/2015 - 03/2015

Banking Website Upgrading


Link: ccb.com.cn



B A C K G R O U N D

What is CCB website?

China Construction Bank (CCB) is among the top banks in China, who is offering service ranging from financial to local services. The website of CCB takes the responsibilities of promoting popular financial products, logging into online banking account, knowing all latest news. It is the first impression of all users interested in joining CCB.




Target User

22.93% population of CCB users are using online banking, they are our major users. Also rest of users are also parts of CCB's reach, by allowing new users understand what CCB can offer and receive services from it.



Problem

Previously, the website's function is rather miscellaneous and UI style is way out of user's expectation. With the growing needs and user experience trends, this website cannot finish the task of better expressing CCB branding and keep attractive for users. The problems includes:

- Miscellaneous information architecture makes using experience not good.
- Lacking user-friendly interaction and considerable details to keep user engaging.
- UI style used in an irregular way, make CCB branding not concisely promoting.







Goals

- Refine information architecture to make banking business simple and customized.
- Design experience details to complete a well considered user experience.
- Standardization of UI to ensure a consistent branding.



Challenges

- Affectively taking over the business insight from strategy team.
- Limited resources and tight timeline, 3 months to finish main pages design and detail UI style guide.
- Transfer deliverables between design and developing team.



My Role & Team


My Role: I played the role UX/UI Designer from Accenture Interactive. I participated in ideations, UX meetings, clients meetings, designed UI for new pages, UI style guide and transfer delivery to developing team, and training lead in developers.

Team: I was working within a cross functional team of one project manager, two strategists, two designers and one engineer.






I N S I G H T

Information Architecture Reconstruct

After the internal interviews and breaking down the current system, we found all call-to-actions actually stay deeply at the information architecture, plus the complexity of financial business, this left a not intuitive user pathways to finish one task. Our goal is to connect all possible and important actions with home more easily cross platform.







Considerable Experience Details

Beyond IA, in order to change the whole experience of using CCB online banking services, details are keys. Through well considered interactions, animation, user experience will be promoted as strategist found out. We listed several points that would change experience:

- Functional channels cross pages.
- Immersive scenes to help new users know CCB service.
- Customized banking functions for different users.
- Widgets for simplify banking tasks.
- Flexible layout sections to support website requirements.







D E S I G N

Home Page Redesign

As we understand, home page is the most essential one. First attempts are brought up some details to make our crossing platform idea happen.






1. Enrich Matrix Navigation

First thing we did is reconstruct the navigation system. In stead of using a shot 1 level navigation, we try to bring possible and frequent usage actions into the front. Some channels are easy by just adding 2 level navigation, but some are deeper, so have to make a matrix structure navigation to cross all platforms.






2. Crossing Site Functions Access

Then we found some functions like login, financial tools, bonus and some customized functions are needed through the whole website. So we designed a fixed drawer "MyCom Model" to offer users reachable assistants all the time.





3. Quick Services Actions

Next thing we did is a the action drop-down services. In order to give users call to actions as quick as they want, we shorten the hierarchies of many functions, like local services, appointments, purchase and accounts checking, etc.






4. Storytelling Sections

So far, navigation can make users easily access all pages. However, that's very "technical", users should be familiar enough to use navigations. Some new users have to learn it, and may possibly miss the navigation. So we designed three sections, Finance, Local, Planing, located at the first entry of new users. They used storytelling form to better engage users to know what CCB can help users do.





Other Pages

Then after done the home page, we did all the other main pages as the templates for delivery. Based on our designs, it is easier to develop more related, same style pages for further enrichment.







Style Unification

Then after done all the pages, we try to summarize some rules and principles as a style guideline to help further development. Including color usage, layouts, typography, components, patterns, etc.






Responsive & Mobile

In order to make website compatible to all terminals from pc to mobile, we defined some responsive design principles to instruct further development.






UI Development Training

After consulting phase done, as main designer in CCB project, I took the responsibilities to share my experience to developers in Accenture Developing Team. Including design process, style guide breaking down.





R E S U L T

Project Launched

Then after done all the pages, we try to summarize some rules and principles as a style guideline to help further development.



Visit

Reviews

"The most digitalized online banking website"
- from vice president from CCB.


Credits
Meggie Zhao, Zara Zhang, Arca Wang, Leo Lin, Candy Xue
CCB Website Department
All Copyrights CCB & Accenture Reserved