How the design solved bigger issues than just website UI
This case study outlines the journey of revamping the VPBank Prime website, focusing on how strategic UI/UX design solved core branding and engagement challenges.
UI/UX Designer
In charge of design concept, UI/UX execution, and graphic design
Web Scope
A new digital experience for VPBank Prime’s website
2023
5-month timeline, from initial research to final design delivery
Overview
Revamp to retell a story
The existing website was outdated, failing to connect with its target audience and reflect the premium nature of the service. Our goal was to deliver a complete visual and experiential revamp, creating a modern, engaging platform that would resonate with a younger demographic of affluent customers.
We operated as a lean, collaborative team with 01 Lead Designer, 01 dedicated UI/UX Designer (me), 01 UX Researcher, and 01 Project Manager
My role
UI/UX Designer
Project duration
5 months (Jan - May 2023)
Contribution
Design research, concept development, UI execution, UI kit
Challenge
Reimagining a constrictive brand identity
The core challenge was multi-faceted. The client was dissatisfied with their existing branding, feeling it was stale and uninspiring. However, they were not looking for a complete rebrand, but rather a new, creative interpretation of their existing assets.
Outdated brand guideline
The provided brand guidelines were print-oriented and not suitable for digital application. A direct translation to UI design resulted in a visually unappealing and dated interface.
Engaging a younger audience
The bank wanted to attract a younger, tech-savvy generation of priority customers. This required a new approach to brand storytelling that was more dynamic, engaging, and less corporate.
Finding a new visual language
We needed to develop a modern and sophisticated design style that pushed the boundaries of the current branding while still feeling like an authentic evolution of VPBank Prime.
View VPBank Prime’s previous website here
Previous website was a landing page
Approach
Research, Co-creation, then Execution
We structured our process into three distinct stages to ensure our design decisions were strategic, user-centered, and aligned with the client's vision.
01
Research & discovery
While the UX researcher conducted user interviews and competitor analysis, my primary responsibility was Design Research. I delved into:
- Branding Interpretation: I explored diverse ways to use the existing brand colors, typography, and logo in a digital context. This involved experimenting with gradients, color pairings, and typographic hierarchies that felt fresh and modern.
- Design Concepts & Mood Boards: I created multiple mood boards and design concepts to present different visual directions, from minimalist and elegant to bold and expressive.
- Pattern & Interaction Research: I analyzed best-in-class financial websites to identify effective UI patterns, interaction models, and animation styles that could enhance the user experience.
I actively participated in synthesizing findings from stakeholder interviews, which, combined with my design research, gave us a holistic understanding of the project's constraints and opportunities.
02
Co-create workshops & concept alignment
Armed with research insights, we facilitated a series of online workshops with the client. In these sessions, we presented our findings and I walked through the different design concepts. This collaborative approach was crucial for getting early feedback and ensuring stakeholder buy-in. Based on this alignment, we decided on a "rich storytelling" concept that would use immersive visuals and narrative-driven content.
03
UI/UX execution
This was where my role became central.
- Homepage design: I took the lead in designing the homepage, which served as the cornerstone of the new design language. I went through several iterations, refining the layout, interactions, and visual elements to perfectly capture our aligned concept.
- Design system & UI kit: To ensure consistency and scalability, I built a comprehensive UI kit. This included defining component libraries, UI patterns, typography scales, color systems, and animation guidelines. This system not only streamlined the development process but also provided the client with a flexible toolkit for future product design.
- Page execution: After the homepage was approved, I proceeded to design the remaining pages of the website, applying the established design system to create a cohesive and seamless user journey.
Outcome & takeaway
An engaging touch point for young affluent customers
Outcome
- Innovative brand storytelling: The new approach allowed the bank to communicate its value proposition in a more engaging and emotionally resonant way, appealing directly to the target younger audience.
- A new blueprint for branding: My work on the design system and UI kit provided the client with a new, digitally-native way to apply their branding. It demonstrated how the brand could be flexible and dynamic, creating a blueprint that could be applied to future digital products beyond just the website.
Takeaway
- This project was a testament to how a deep dive into design research and a collaborative process can unlock new potential within an existing brand, resulting in a product that is not only appealing but also strategically effective.
View current VPBank Prime website here
Revamped Homepage
Each persona has their own detail page with a distinct storyline
Each product has a detail page, providing detail on benefits & requirements
Knowledge hub
Demo animation for the “Digital X” page, focusing on Prime’s digital product offering
Foundation & UI kit
This website was created with Figma Site. View design file.
How the design solved bigger issues than just website UI
This case study outlines the journey of revamping the VPBank Prime website, focusing on how strategic UI/UX design solved core branding and engagement challenges.
UI/UX Designer
In charge of design concept, UI/UX execution, and graphic design
Web Scope
A new digital experience for VPBank Prime’s website
2023
5-month timeline, from initial research to final design delivery
Overview
Revamp to retell a story
The existing website was outdated, failing to connect with its target audience and reflect the premium nature of the service. Our goal was to deliver a complete visual and experiential revamp, creating a modern, engaging platform that would resonate with a younger demographic of affluent customers.
We operated as a lean, collaborative team with 01 Lead Designer, 01 dedicated UI/UX Designer (me), 01 UX Researcher, and 01 Project Manager
My role
UI/UX Designer
Project duration
5 months (Jan - May 2023)
Contribution
Design research, concept development, UI execution, UI kit
Challenge
Reimagining a constrictive brand identity
The core challenge was multi-faceted. The client was dissatisfied with their existing branding, feeling it was stale and uninspiring. However, they were not looking for a complete rebrand, but rather a new, creative interpretation of their existing assets.
Outdated brand guideline
The provided brand guidelines were print-oriented and not suitable for digital application. A direct translation to UI design resulted in a visually unappealing and dated interface.
Engaging a younger audience
The bank wanted to attract a younger, tech-savvy generation of priority customers. This required a new approach to brand storytelling that was more dynamic, engaging, and less corporate.
Finding a new visual language
We needed to develop a modern and sophisticated design style that pushed the boundaries of the current branding while still feeling like an authentic evolution of VPBank Prime.
View VPBank Prime’s previous website here
Previous website was a landing page
Approach
Research, Co-creation, then Execution
We structured our process into three distinct stages to ensure our design decisions were strategic, user-centered, and aligned with the client's vision.
01
Research & discovery
While the UX researcher conducted user interviews and competitor analysis, my primary responsibility was Design Research. I delved into:
- Branding Interpretation: I explored diverse ways to use the existing brand colors, typography, and logo in a digital context. This involved experimenting with gradients, color pairings, and typographic hierarchies that felt fresh and modern.
- Design Concepts & Mood Boards: I created multiple mood boards and design concepts to present different visual directions, from minimalist and elegant to bold and expressive.
- Pattern & Interaction Research: I analyzed best-in-class financial websites to identify effective UI patterns, interaction models, and animation styles that could enhance the user experience.
I actively participated in synthesizing findings from stakeholder interviews, which, combined with my design research, gave us a holistic understanding of the project's constraints and opportunities.
02
Co-create workshops & concept alignment
Armed with research insights, we facilitated a series of online workshops with the client. In these sessions, we presented our findings and I walked through the different design concepts. This collaborative approach was crucial for getting early feedback and ensuring stakeholder buy-in. Based on this alignment, we decided on a "rich storytelling" concept that would use immersive visuals and narrative-driven content.
03
UI/UX execution
This was where my role became central.
- Homepage design: I took the lead in designing the homepage, which served as the cornerstone of the new design language. I went through several iterations, refining the layout, interactions, and visual elements to perfectly capture our aligned concept.
- Design system & UI kit: To ensure consistency and scalability, I built a comprehensive UI kit. This included defining component libraries, UI patterns, typography scales, color systems, and animation guidelines. This system not only streamlined the development process but also provided the client with a flexible toolkit for future product design.
- Page execution: After the homepage was approved, I proceeded to design the remaining pages of the website, applying the established design system to create a cohesive and seamless user journey.
Outcome & takeaway
An engaging touch point for young affluent customers
Outcome
- Innovative brand storytelling: The new approach allowed the bank to communicate its value proposition in a more engaging and emotionally resonant way, appealing directly to the target younger audience.
- A new blueprint for branding: My work on the design system and UI kit provided the client with a new, digitally-native way to apply their branding. It demonstrated how the brand could be flexible and dynamic, creating a blueprint that could be applied to future digital products beyond just the website.
Takeaway
- This project was a testament to how a deep dive into design research and a collaborative process can unlock new potential within an existing brand, resulting in a product that is not only appealing but also strategically effective.
View current VPBank Prime website here
Revamped Homepage
Each persona has their own detail page with a distinct storyline
Each product has a detail page, providing detail on benefits & requirements
Knowledge hub
Demo animation for the “Digital X” page, focusing on Prime’s digital product offering
Foundation & UI kit
This website was created with Figma Site. View design file.
How the design solved bigger issues than just website UI
This case study outlines the journey of revamping the VPBank Prime website, focusing on how strategic UI/UX design solved core branding and engagement challenges.
UI/UX Designer
In charge of design concept, UI/UX execution, and graphic design
Web Scope
A new digital experience for VPBank Prime’s website
2023
5-month timeline, from initial research to final design delivery
Overview
Revamp to retell a story
The existing website was outdated, failing to connect with its target audience and reflect the premium nature of the service. Our goal was to deliver a complete visual and experiential revamp, creating a modern, engaging platform that would resonate with a younger demographic of affluent customers.
We operated as a lean, collaborative team with 01 Lead Designer, 01 dedicated UI/UX Designer (me), 01 UX Researcher, and 01 Project Manager
My role
UI/UX Designer
Project duration
5 months (Jan - May 2023)
Contribution
Design research, concept development, UI execution, UI kit
Challenge
Reimagining a constrictive brand identity
The core challenge was multi-faceted. The client was dissatisfied with their existing branding, feeling it was stale and uninspiring. However, they were not looking for a complete rebrand, but rather a new, creative interpretation of their existing assets.
Outdated brand guideline
The provided brand guidelines were print-oriented and not suitable for digital application. A direct translation to UI design resulted in a visually unappealing and dated interface.
Engaging a younger audience
The bank wanted to attract a younger, tech-savvy generation of priority customers. This required a new approach to brand storytelling that was more dynamic, engaging, and less corporate.
Finding a new visual language
We needed to develop a modern and sophisticated design style that pushed the boundaries of the current branding while still feeling like an authentic evolution of VPBank Prime.
View VPBank Prime’s previous website here
Previous website was a landing page
Approach
Research, Co-creation, then Execution
We structured our process into three distinct stages to ensure our design decisions were strategic, user-centered, and aligned with the client's vision.
01
Research & discovery
While the UX researcher conducted user interviews and competitor analysis, my primary responsibility was Design Research. I delved into:
- Branding Interpretation: I explored diverse ways to use the existing brand colors, typography, and logo in a digital context. This involved experimenting with gradients, color pairings, and typographic hierarchies that felt fresh and modern.
- Design Concepts & Mood Boards: I created multiple mood boards and design concepts to present different visual directions, from minimalist and elegant to bold and expressive.
- Pattern & Interaction Research: I analyzed best-in-class financial websites to identify effective UI patterns, interaction models, and animation styles that could enhance the user experience.
I actively participated in synthesizing findings from stakeholder interviews, which, combined with my design research, gave us a holistic understanding of the project's constraints and opportunities.
02
Co-create workshops & concept alignment
Armed with research insights, we facilitated a series of online workshops with the client. In these sessions, we presented our findings and I walked through the different design concepts. This collaborative approach was crucial for getting early feedback and ensuring stakeholder buy-in. Based on this alignment, we decided on a "rich storytelling" concept that would use immersive visuals and narrative-driven content.
03
UI/UX execution
This was where my role became central.
- Homepage design: I took the lead in designing the homepage, which served as the cornerstone of the new design language. I went through several iterations, refining the layout, interactions, and visual elements to perfectly capture our aligned concept.
- Design system & UI kit: To ensure consistency and scalability, I built a comprehensive UI kit. This included defining component libraries, UI patterns, typography scales, color systems, and animation guidelines. This system not only streamlined the development process but also provided the client with a flexible toolkit for future product design.
- Page execution: After the homepage was approved, I proceeded to design the remaining pages of the website, applying the established design system to create a cohesive and seamless user journey.
Outcome & takeaway
An engaging touch point for young affluent customers
Outcome
- Innovative brand storytelling: The new approach allowed the bank to communicate its value proposition in a more engaging and emotionally resonant way, appealing directly to the target younger audience.
- A new blueprint for branding: My work on the design system and UI kit provided the client with a new, digitally-native way to apply their branding. It demonstrated how the brand could be flexible and dynamic, creating a blueprint that could be applied to future digital products beyond just the website.
Takeaway
- This project was a testament to how a deep dive into design research and a collaborative process can unlock new potential within an existing brand, resulting in a product that is not only appealing but also strategically effective.
View current VPBank Prime website here
Revamped Homepage
Each persona has their own detail page with a distinct storyline
Each product has a detail page, providing detail on benefits & requirements
Knowledge hub
Demo animation for the “Digital X” page, focusing on Prime’s digital product offering
Foundation & UI kit
This website was created with Figma Site. View design file.