VIB- "The Talking Card" Innovation in Vietnam

Virtual characters in marketing are an effective alternative to actual individuals and are easily adaptable in appearance to fit branding campaigns. VIB has developed Vie with the aim of bridging the gap between users and the bank. The virtual expert conveys information about banking services in a unique and easily accessible manner.
 

Idea and Concept  

VIB has implemented a campaign to refresh the features and appearance of their Mastercard credit cards, aiming to continuously optimize the benefits for the cardholders' real spending needs. In this latest refresh, VIB specifically utilizes augmented reality (AR) technology. Through the phone's camera, the virtual financial expert, Vie, is ready to appear whenever customers request, providing advice and direct guidance on card usage and updated card offers in the most visual and engaging way.

Through the collaboration with Marvy, VIB has brought Vie closer to each cardholder by displaying the 3D animated character in an AR environment. VIB has taken the lead in introducing the "talking card" technology to Vietnamese users, offering an unprecedented and exciting experience for cardholders.

Let's join Marvy to explore the power of Vie!

Visual Concept

UX/UI Design

The AR experience is integrated into nine types of VIB cards, allowing the user base to be unrestricted in terms of customer profiles. As long as they are VIB cardholders, they can fully enjoy this technology. Marvy ensures accuracy and consistency in content, as well as the visual appeal of the images. The content is guided by a gentle voiceover, ensuring that users can focus their attention more on the AR component.

UI Design (User Interface: User Interface)

• Prioritizing a familiar upright interface for smartphone users
• The character images are meticulously designed with VIB's predominant colors of blue and orange.
• The focus is on developing visuals and information about various service categories to make it easy for users to navigate, grasp information, and experience AR.

UX Design (User Experience: User Experience)

• Users only need to scan the QR code integrated on the back of the VIB card and select the AR experience to begin.
• There is no need to enter any information to start the experience.
• Meet VIE, the virtual financial expert.
• Explore more information about VIB services such as card activation, card usage benefits, and card payments.
• The forward button directs users to a comprehensive experience, accompanied by modern background music programmed to play throughout the experience.
• The button also leads to activation methods: downloading the VIB app, making a phone call, or sending a text message to the VIB hotline number.

3D Modelling

Representative character - Vie

The Marvy team has designed the 3D model of VIE based on its prototype to create the closest resemblance, generating body movements that make the VIE character appear like a real assistant. From hand gestures to mouth movements, every design detail has been skillfully executed by the Marvy team to deliver the most authentic and polished experience for customers.

Steps to design 3D models of VIE

To create a VIE model that appears more realistic than fictional, Marvy's designers have professionally optimized it to ensure performance when used in real-time applications that require minimizing resource usage.

The models are constructed with only 500–1000 polygons per model, delivering beautiful and rounded visuals while still maintaining performance for players on mobile devices. This step is crucial because any small errors during the pre-production process can greatly impact the product's performance.

Web AR Programming

• Utilizing AR World and AR Space technology, which displays virtual content on a combined plane with a vibrant real-life space, With this technology, users simply need to identify a flat surface to initiate the interaction by pointing their phone's camera toward the surface. With AR technology, once the AR interaction position is determined, users can freely move closer to examine the design details from various angles.
• Programming sparkling particle effects that embody a modern, youthful style, representing the digital era.
• Implementing the feature to zoom in and out of AR models, adapting to the desired size and scale according to customer preferences
• Optimizing the quality of each 3D model through programming, ensuring that the AR experience meets requirements in terms of visuals, colors, and spatial representation when customers engage with it.

AR Experience Programming

1. Granting Access

Upon accessing webAR, users will be prompted to grant camera access permissions for their mobile devices.

2. Scan Flat Surface

After being granted camera access, depending on the type of card the customer is using, an augmented reality (AR) image of the same type of card will appear on the screen. Users will be guided to scan a flat surface to anchor the AR model in place.

3. Meet VIE

Users select an appropriate position and press the "Meet VIE" button to begin their journey of experiencing the intelligent assistant.

• VIB Logo Appears:

The VIB logo appears within 15 seconds, accompanied by sparkling particle effects, showcasing a modern design with the dominant blue color of VIB. Users can zoom in and out of the 3D images to suit their desired scale.

• VIE Appears: 

After the VIB logo, the modern VIE character will gradually appear and introduce herself. Users can interact with VIE from different angles, such as zooming in and out on the character and rotating the character 360 degrees.

In addition, the logos introducing VIB's services will be displayed sequentially, synchronized with VIE's introduction.

4. Introducing VIB's services 

By clicking on "Start," the VIE character will disappear. However, there will be popup boards displaying information and services provided by VIB, accompanied by VIE's voice.

VIB's services include a card activation guide, card usage benefits, an introduction to VIB's partners, and card payment instructions.

5. Link to VIB application

After experiencing the entire AR journey, users will be directed to three service platforms of VIB: the VIB application, the VIB hotline, and texting VIB for consultation and support.

CMS System Programming

The CMS system is designed for VIB's management side, allowing administrators to modify features within WebAR, such as:

• Statistical parameters: number of users experiencing AR, number of complete AR views, number of users downloading the VIB app after viewing AR, etc.
• Replacement of image files, 3D icons, and background music.
• Changing font color and font style.

 Technology and creativity are the shortest bridges to Gen Z.

VIE is the first virtual financial character of VIB in Vietnam and represents the youth of today. VIE has cleverly represented VIB to tell financial stories in a creative way, making these stories more interesting and relatable to young users.

By implementing modern technology-driven marketing campaigns, especially AR technology, businesses can make innovative and significant strides in reaching this young customer base. With the rapid development of technology today, the integration of technology and creativity opens new doors and brings great opportunities for businesses. If you are looking for a way to reach the Gen Z generation, consider using AR technology and other technologies to create creative and advanced marketing campaigns.