Menu
Client
Client
China Construction Bank
China Construction Bank
2023 Spring
2023 Spring
Role
User Interface Designer
Teammates
Teammates
Key. Chan Project Direction
Key. Chan Project Direction
Xin. Gao UX Expert
Xin. Gao UX Expert
Kun. Lin Senior UI Designer
Kun. Lin Senior UI Designer
Amber. H Senior UI Designer
Amber. H Senior UI Designer
YiFang. Z UI Designer
YiFang. Z UI Designer
Amy. Yao UI Designer
Amy. Yao UI Designer
Luyuan Li Senior UX Designer
Luyuan Li Senior UX Designer
Kexian. Xie UX Designer
Kexian. Xie UX Designer
SCCBA Design Team
SCCBA Design Team
Background
The SCCBA alliance, a non-banking financial platform, supports 15 city banks with services like digital branding, product customization, and data operation. With the rapid development of fintech in China, the SCCBA alliance aims to help members extend the concept of technology-driven finance from mobile to web platforms, establishing a forward-looking and innovative personal online web banking.
The SCCBA alliance, a non-banking financial platform, supports 15 city banks with services like digital branding, product customization, and data operation. With the rapid development of fintech in China, the SCCBA alliance aims to help members extend the concept of technology-driven finance from mobile to web platforms, establishing a forward-looking and innovative personal online web banking.
The SCCBA alliance, a non-banking financial platform, supports 15 city banks with services like digital branding, product customization, and data operation. With the rapid development of fintech in China, the SCCBA alliance aims to help members extend the concept of technology-driven finance from mobile to web platforms, establishing a forward-looking and innovative personal online web banking.
Goal
To provide an innovative design direction that sets SCCBA's personal web banking apart from existing competitors
Develop a flexible and consistent design system, enabling SCCBA to provide each member bank with a personalized online banking solution that reflects its unique brand identity, while maintaining a unified design language across the alliance
To provide an innovative design direction that sets SCCBA's personal web banking apart from existing competitors
Develop a flexible and consistent design system, enabling SCCBA to provide each member bank with a personalized online banking solution that reflects its unique brand identity, while maintaining a unified design language across the alliance
Problem
Given the widespread adoption of mobile banking in China, traditional personal web banking is facing an identity crisis in the financial product channel.
Due to previous oversight of the personal web banking channel, there's a lack of a refined and unified visual strategy to assist the team in designing and developing for member banks within the product.
These can lead:
Inconsistency in User Experience (User)
Resource Allocation Challenges (Company)
Competitive Disadvantage (Brand)
Missed Opportunities for Unique Services (Product)
Given the widespread adoption of mobile banking in China, traditional personal web banking is facing an identity crisis in the financial product channel.
Due to previous oversight of the personal web banking channel, there's a lack of a refined and unified visual strategy to assist the team in designing and developing for member banks within the product.
These can lead:
Inconsistency in User Experience (User)
Resource Allocation Challenges (Company)
Competitive Disadvantage (Brand)
Missed Opportunities for Unique Services (Product)
Given the widespread adoption of mobile banking in China, traditional personal web banking is facing an identity crisis in the financial product channel.
Due to previous oversight of the personal web banking channel, there's a lack of a refined and unified visual strategy to assist the team in designing and developing for member banks within the product.
These can lead:
Inconsistency in User Experience (User)
Resource Allocation Challenges (Company)
Competitive Disadvantage (Brand)
Missed Opportunities for Unique Services (Product)
Contribution
What role should personal web banking play in the current ecosystem of financial
Designed all the core aspects of Project.
Participated in Establishing design model & Built design system and essential component.
Training SCCBA team members to use the design system in Figma and established a component review committee
What role should personal web banking play in the current ecosystem of financial
Designed all the core aspects of Project.
Participated in Establishing design model & Built design system and essential component.
Training SCCBA team members to use the design system in Figma and established a component review committee
What role should personal web banking play in the current ecosystem of financial
Designed all the core aspects of Project.
Participated in Establishing design model & Built design system and essential component.
Training SCCBA team members to use the design system in Figma and established a component review committee
Approaching solution from 3 level:
Idea Level, Frame Level, and Application Level
Approaching solution from 3 level: Idea Level, Frame Level, and Application Level
Idea Level
In the early stages of the project, our internal interviews revealed that the SCCBA team had varying perspectives, lacking a unified value structure. Therefore, we identified the first step as collaborating with the members of the SCCBA team to jointly define their team values and align on a unified design goal.
In the early stages of the project, our internal interviews revealed that the SCCBA team had varying perspectives, lacking a unified value structure. Therefore, we identified the first step as collaborating with the members of the SCCBA team to jointly define their team values and align on a unified design goal.
"Understand, Explore, Unite"
Design Values
Starting with the company's core values, we engaged in brainstorming, categorizing, and redefining through a co-creation workshop, collaboratively developing a design philosophy with SCCBA members. This philosophy will serve as the highest guiding standard for the SCCBA team's design decisions.
Design Values
Starting with the company's core values, we engaged in brainstorming, categorizing, and redefining through a co-creation workshop, collaboratively developing a design philosophy with SCCBA members. This philosophy will serve as the highest guiding standard for the SCCBA team's design decisions.
Design Values
Starting with the company's core values, we engaged in brainstorming, categorizing, and redefining through a co-creation workshop, collaboratively developing a design philosophy with SCCBA members. This philosophy will serve as the highest guiding standard for the SCCBA team's design decisions.
Design Values
Starting with the company's core values, we engaged in brainstorming, categorizing, and redefining through a co-creation workshop, collaboratively developing a design philosophy with SCCBA members. This philosophy will serve as the highest guiding standard for the SCCBA team's design decisions.
Reflection
Through this process, we can quickly understand and anticipate the client's potential needs regarding the project's completion. It allows us to gain more inspiration from different perspectives. More importantly, this approach helps to align the client's views, facilitating the smooth progression of the project
Reflection
Through this process, we can quickly understand and anticipate the client's potential needs regarding the project's completion. It allows us to gain more inspiration from different perspectives.
More importantly, this approach helps to align the client's views, facilitating the smooth progression of the project.
Former Level
At this level, we approach from three perspectives: product, user, and platform. By conducting research specific to each viewpoint, we aim to develop a comprehensive design strategy model that can be applied globally in this product
At this level, we approach from three perspectives: product, user, and platform. By conducting research specific to each viewpoint, we aim to develop a comprehensive design strategy model that can be applied globally in this product
"Understand, Explore, Unite"
Users and Platform
Through data research, we identified the following key characteristics of personal web banking users: they are middle-aged people (35-45), engage in high-value transactions, and have specific usage objectives. Their commonly used functions include asset management, transfers, and wealth management.
Users and Platform
Through data research, we identified the following key characteristics of personal web banking users: they are middle-aged people (35-45), engage in high-value transactions, and have specific usage objectives. Their commonly used functions include asset management, transfers, and wealth management.
Users and Platform
Through data research, we identified the following key characteristics of personal web banking users: they are middle-aged people (35-45), engage in high-value transactions, and have specific usage objectives. Their commonly used functions include asset management, transfers, and wealth management.
Users and Platform
Through data research, we identified the following key characteristics of personal web banking users: they are middle-aged people (35-45), engage in high-value transactions, and have specific usage objectives. Their commonly used functions include asset management, transfers, and wealth management.
Product analysis
We analyze the leading financial institutions (13 companies) and a broad financial category institution (1 company) in personal online banking, conducting our analysis from six perspectives to identify opportunities.
13
Traditional Finance
1
General financial sector
Product analysis
We analyze the leading financial institutions (13 companies) and a broad financial category institution (1 company) in personal online banking, conducting our analysis from six perspectives to identify opportunities.
13
Traditional Finance
1
General financial sector
Product analysis
We analyze the leading financial institutions (13 companies) and a broad financial category institution (1 company) in personal online banking, conducting our analysis from six perspectives to identify opportunities.
13
Traditional Finance
1
General financial sector
Product analysis
We analyze the leading financial institutions (13 companies) and a broad financial category institution (1 company) in personal online banking, conducting our analysis from six perspectives to identify opportunities.
13
Traditional Finance
1
General financial sector
Reflection
Personal web banking, in contrast to mobile banking, will emphasize banking tasks, streamlining frequent transactions, enhancing key features, and utilizing data visualization.
Reflection
Personal web banking, in contrast to mobile banking, will emphasize banking tasks, streamlining frequent transactions, enhancing key features, and utilizing data visualization.
Application Level
As a component of the product ecosystem, the design of personal web banking should maintain a brand atmosphere similar to the mobile version, while appropriately innovating on this foundation, rather than pursuing innovation in isolation.
As a component of the product ecosystem, the design of personal web banking should maintain a brand atmosphere similar to the mobile version, while appropriately innovating on this foundation, rather than pursuing innovation in isolation.
" Consistent，yet Innovative"
As part of client requirements, we selected Rizhao Bank as our initial pilot bank for the design. Consequently, we conducted brand-related interviews with representatives from the bank to confirm design requirements and identify key design elements
Design Values
Design Values
“We aim for customers to perceive Rizhao Bank's services as intelligent, high-quality, and filled with warmth, much like sunlight, reflecting our attitude and approach in development”
Direction 1 - Conversation Bank
Drawing inspiration from Rizhao Bank's slogan “Bathed in the glow of sunshine, Together with True Heart”, our design centers on the user, focusing on emotional connection. It becomes a warm, reliable, and vibrant companion in the user’s life, embodying the essence of approachability, warmth, and dynamic energy.
Light will be the pivotal element throughout the design, mirroring its diverse splendor across various mediums and seasons. Much like Rizhao Bank, it will act as a beam of light in users' lives, illuminating each unique lifestyle and adding brilliance to everyday moments
"Bathed in the glow of sunshine, Together with True Heart"
Companion for Daily Insporation
During every encounter with users, our friend Young provides service recommendations tailored to their recent activities, allowing users to quickly access the data they care about.
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Companion for Daily Support
The app offers conversational banking, creating an experience akin to chatting with a friend rather than a conventional service, nurturing an emotional bond in its quest to bring love and empathy into the financial experience
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Implementing a groundbreaking conversational interaction model, we transform the one-way operations of online banking into a two-way dialogue, establishing an emotional connection with users. This approach leads to the creation of a personal web banking product that features a more humanized and personalized service experience.
Direction 1 - Conversation Bank
Drawing inspiration from Rizhao Bank's slogan “Bathed in the glow of sunshine, Together with True Heart”, our design centers on the user, focusing on emotional connection. It becomes a warm, reliable, and vibrant companion in the user’s life, embodying the essence of approachability, warmth, and dynamic energy.
Light will be the pivotal element throughout the design, mirroring its diverse splendor across various mediums and seasons. Much like Rizhao Bank, it will act as a beam of light in users' lives, illuminating each unique lifestyle and adding brilliance to everyday moments
"Bathed in the glow of sunshine, Together with True Heart"
Companion for Daily Insporation
During every encounter with users, our friend Young provides service recommendations tailored to their recent activities, allowing users to quickly access the data they care about.
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Companion for Daily Support
The app offers conversational banking, creating an experience akin to chatting with a friend rather than a conventional service, nurturing an emotional bond in its quest to bring love and empathy into the financial experience
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Implementing a groundbreaking conversational interaction model, we transform the one-way operations of online banking into a two-way dialogue, establishing an emotional connection with users. This approach leads to the creation of a personal web banking product that features a more humanized and personalized service experience.
Direction 1 - Conversation Bank
Drawing inspiration from Rizhao Bank's slogan “Bathed in the glow of sunshine, Together with True Heart”, our design centers on the user, focusing on emotional connection. It becomes a warm, reliable, and vibrant companion in the user’s life, embodying the essence of approachability, warmth, and dynamic energy.
Light will be the pivotal element throughout the design, mirroring its diverse splendor across various mediums and seasons. Much like Rizhao Bank, it will act as a beam of light in users' lives, illuminating each unique lifestyle and adding brilliance to everyday moments
"Bathed in the glow of sunshine, Together with True Heart"
Companion for Daily Insporation
During every encounter with users, our friend Young provides service recommendations tailored to their recent activities, allowing users to quickly access the data they care about.
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Companion for Daily Support
The app offers conversational banking, creating an experience akin to chatting with a friend rather than a conventional service, nurturing an emotional bond in its quest to bring love and empathy into the financial experience
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Approaching solution from 3 level: Idea Level, Frame Level, and Application Level
Direction 1 - Conversation Bank
Drawing inspiration from Rizhao Bank's slogan “Bathed in the glow of sunshine, Together with True Heart”, our design centers on the user, focusing on emotional connection. It becomes a warm, reliable, and vibrant companion in the user’s life, embodying the essence of approachability, warmth, and dynamic energy.
Light will be the pivotal element throughout the design, mirroring its diverse splendor across various mediums and seasons. Much like Rizhao Bank, it will act as a beam of light in users' lives, illuminating each unique lifestyle and adding brilliance to everyday moments
"Bathed in the glow of sunshine, Together with True Heart"
Companion for Daily Insporation
During every encounter with users, our friend Young provides service recommendations tailored to their recent activities, allowing users to quickly access the data they care about.
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Companion for Daily Support
The app offers conversational banking, creating an experience akin to chatting with a friend rather than a conventional service, nurturing an emotional bond in its quest to bring love and empathy into the financial experience
Why we need
Based on our user analysis, most of our users are highly goal-oriented. By offering personalized homepage customization, we can help users quickly find the features they need and gain a clearer understanding of their account activities.
Implementing a groundbreaking conversational interaction model, we transform the one-way operations of online banking into a two-way dialogue, establishing an emotional connection with users. This approach leads to the creation of a personal web banking product that features a more humanized and personalized service experience.
Direction 2 - Immersive Experience Bank
In Proposal 2, my aim is to create a more futuristic experience, offering users a sense of freedom, purity, and transparency, thereby emphasizing the bank's security.
This proposal also explores various innovative designs, including how to create a user experience similar to mobile apps to reduce the learning curve; multi-perspective switching to quickly provide comprehensive account information; widgets that can synchronize with mobile devices; and even contemplating the future application of banking in VR. This approach is largely based on inspirational thinking for the client, with the hope that some of these features could be realized in the future.
Direction 2 - Immersive Experience Bank
In Proposal 2, my aim is to create a more futuristic experience, offering users a sense of freedom, purity, and transparency, thereby emphasizing the bank's security.
This proposal also explores various innovative designs, including how to create a user experience similar to mobile apps to reduce the learning curve; multi-perspective switching to quickly provide comprehensive account information; widgets that can synchronize with mobile devices; and even contemplating the future application of banking in VR. This approach is largely based on inspirational thinking for the client, with the hope that some of these features could be realized in the future.
Direction 2 - Immersive Experience Bank
In Proposal 2, my aim is to create a more futuristic experience, offering users a sense of freedom, purity, and transparency, thereby emphasizing the bank's security.
Implementing a groundbreaking conversational interaction model, we transform the one-way operations of online banking into a two-way dialogue, establishing an emotional connection with users. This approach leads to the creation of a personal web banking product that features a more humanized and personalized service experience
Direction 2 - Immersive Experience Bank
In Proposal 2, my aim is to create a more futuristic experience, offering users a sense of freedom, purity, and transparency, thereby emphasizing the bank's security.
This proposal also explores various innovative designs, including how to create a user experience similar to mobile apps to reduce the learning curve; multi-perspective switching to quickly provide comprehensive account information; widgets that can synchronize with mobile devices; and even contemplating the future application of banking in VR. This approach is largely based on inspirational thinking for the client, with the hope that some of these features could be realized in the future.
Design System
We developed a comprehensive corporate design system for SCCBA, which encompasses the design values identified in our co-creation workshops, as well as a design standard guide, atomic-level components, and a brand replacement manual.
Design System
We developed a comprehensive corporate design system for SCCBA, which encompasses the design values identified in our co-creation workshops, as well as a design standard guide, atomic-level components, and a brand replacement manual.
Design System
We developed a comprehensive corporate design system for SCCBA, which encompasses the design values identified in our co-creation workshops, as well as a design standard guide, atomic-level components, and a brand replacement manual.
Design System
We developed a comprehensive corporate design system for SCCBA, which encompasses the design values identified in our co-creation workshops, as well as a design standard guide, atomic-level components, and a brand replacement manual.
Things I learned
This project, a collaborative effort involving multiple teams and departments, imparted a crucial lesson: as a designer, it's equally important to guide and inspire enthusiasm within the client's team. Starting with our initial workshops, we engaged every team member in defining shared values, fostering their sense of responsibility and involvement in the project. Later, as I worked alongside the client's design team to build the design system, this collaborative approach significantly smoothed the project's progress. It was gratifying to witness their designers grow alongside me, and the transformation within the client's team reaffirmed the success of our consultative approach.