Floridina Coco WebAR Experience: Transforming Beverage Packaging into an Interactive Brand Experience

Project Overview

Client	Floridina
Parent Company	Wings Group
Industry	FMCG / Beverage
Product	Floridina Coco
Location	Jakarta, Indonesia
Event	Jakarta Fair / Pekan Raya Jakarta
Service	WebAR Development
Solution	Interactive AR Packaging Experience
Campaign Year	2023
Development Time	Approximately 3 Months
AR Experience Duration	Approximately 47 Seconds
Developed By	InReality Solutions

On This Page (14)

1. Bringing Augmented Reality to Floridina Coco Packaging
2. The Challenge: Creating an Interactive Experience Around a Physical Beverage Bottle
3. The Solution: A Browser-Based WebAR Packaging Experience
4. Going Beyond a Flat AR Animation
5. The Unexpected Technical Challenge: Tracking a Uniquely Curved Bottle
6. Approximately Two Months of Tracking Optimization and Testing
7. Improving Stability Through Creative and Technical Adaptation
8. Testing the WebAR Experience Across More Than 15 Devices
9. Designing WebAR for a Mass-Market Consumer Audience
10. From a Three-Week Animation Project to Three Months of Development
11. The Results: 13,724 AR Experience Activations
12. Extending Engagement Beyond the Event Booth
13. Geographic Reach Beyond Jakarta
14. What the Floridina Project Demonstrates About AR Packaging

Bringing Augmented Reality to Floridina Coco Packaging

In 2023, InReality Solutions approached Floridina, a beverage brand under Wings Group, with an idea: transform the physical packaging of Floridina Coco into an interactive augmented reality experience.

Floridina was preparing to participate in Jakarta Fair, also known as Pekan Raya Jakarta or PRJ, and saw an opportunity to introduce visitors to an innovative way of interacting with the brand.

Rather than relying solely on conventional displays and promotional materials, the campaign would allow visitors to point their smartphones at a Floridina Coco bottle and watch the physical product come alive through augmented reality.

The objective was to create a memorable visual experience that captured the refreshing and tropical personality of Floridina Coco while giving visitors another reason to interact with the product at the event.

What initially appeared to be a relatively straightforward AR packaging project, however, became one of the most technically challenging WebAR experiences InReality Solutions had developed at the time.

The Challenge: Creating an Interactive Experience Around a Physical Beverage Bottle

Floridina wanted an energetic augmented reality experience that reflected the characteristics and personality of Floridina Coco.

The creative brief called for tropical visual elements including animated juice splashes, nata de coco, swaying palm trees, promotional messaging, and other elements that would communicate the refreshing nature of the product.

The experience needed to transform the Floridina Coco bottle into the center of the animation.

But there was another important requirement.

The experience was being developed for a major consumer event and needed to be accessible to a broad range of visitors using different smartphones.

Requiring users to download a dedicated mobile application would introduce unnecessary friction into the experience.

InReality Solutions therefore developed the campaign using WebAR technology, allowing visitors to access the experience directly through a compatible smartphone browser.

This meant balancing several requirements simultaneously:

• Visual quality and animation complexity
• AR tracking stability
• Fast loading and manageable file sizes
• Compatibility across Android and iOS devices
• Performance across smartphones with different hardware capabilities
• Ease of access in a busy event environment

Achieving that balance would ultimately become one of the most important parts of the project.

The Solution: A Browser-Based WebAR Packaging Experience

InReality Solutions developed an approximately 47-second interactive WebAR experience centered around the Floridina Coco bottle.

Visitors discovered the activation at the Floridina booth during Jakarta Fair.

A QR code displayed within the booth allowed visitors to access the experience. After scanning the QR code, the WebAR application opened through their smartphone browser.

No dedicated application download was required.

Visitors could then point their smartphone cameras toward a Floridina Coco bottle to activate the augmented reality experience.

The physical packaging became the centerpiece of an animated tropical environment.

Juice splashed dynamically around the experience.

Animated nata de coco elements appeared around the product.

Palm trees moved within the scene.

Promotional messages emerged around the bottle.

Animated juice flowed around the physical packaging.

Together, these elements transformed an ordinary product interaction into a visually engaging brand experience.

Going Beyond a Flat AR Animation

From the beginning, InReality Solutions wanted the experience to feel dimensional rather than simply placing a flat animation over the Floridina Coco label.

The animated assets were therefore separated into multiple visual layers.

Different elements were positioned in front of, behind, and around the physical bottle.

This created a stronger sense of depth and allowed the physical packaging to appear integrated into the digital environment.

However, creating this effect introduced additional technical challenges.

For the illusion to work convincingly, the WebAR experience needed to understand where the physical bottle should appear in relation to the digital content.

InReality Solutions therefore created a 3D representation of the Floridina Coco bottle and implemented 3D occlusion within the experience.

This allowed specific animated elements to be visually hidden behind the bottle while others appeared in front of it.

The result was a more immersive experience in which the physical product appeared to exist within the animated environment rather than simply underneath a digital overlay.

The Unexpected Technical Challenge: Tracking a Uniquely Curved Bottle

The initial animations and creative assets were completed within approximately two to three weeks.

The complete project took approximately three months.

The primary reason was the physical shape of the Floridina Coco bottle.

Many image-based augmented reality experiences use flat markers or conventional straight-sided cylindrical packaging.

The Floridina Coco bottle was different.

Its distinctive shape narrowed around the middle and widened toward the upper and lower portions of the bottle.

Although the Floridina label itself provided a visually distinctive image target, the geometry of the physical packaging created significant difficulties in maintaining accurate and stable AR tracking.

The experience could perform correctly on one smartphone and behave differently on another.

Tracking that appeared stable on an Android device could experience issues on an iPhone.

Animations could shake or move instead of remaining convincingly anchored to the physical bottle.

What had initially appeared to be a relatively simple AR packaging experience therefore became an extensive technical development and optimization process.

Approximately Two Months of Tracking Optimization and Testing

InReality Solutions spent approximately one and a half to two months addressing the tracking and stability challenges created by the bottle.

The process involved repeated cycles of testing, adjustment, optimization, and redevelopment.

Tracking parameters were repeatedly modified.

The image target was optimized.

Different approaches to animation delivery were explored.

Animation positioning was adjusted.

The relationship between the physical packaging and digital content was repeatedly tested.

The team also experimented with different technical approaches to improve performance and visual quality.

For some animated elements, chroma-key techniques were explored. Green-screen approaches created complications because of colors already present within parts of the visual content. Blue-screen alternatives were subsequently tested but introduced different conflicts when elements containing similar colors were keyed.

Alternative animation formats and techniques, including Lottie animations, were also explored as the team worked to balance visual quality, compatibility, stability, and performance.

The development process became an exercise in continuous problem-solving.

A solution that worked successfully on one device could introduce problems on another, requiring the team to continue testing and refining the experience until acceptable performance could be achieved across a broad range of devices.

Improving Stability Through Creative and Technical Adaptation

Two different versions of the Floridina Coco experience were developed during the project.

The initial approach positioned many of the animated elements behind the physical bottle.

During development and testing, the team determined that bringing the primary visual elements toward the front of the bottle created a stronger visual experience.

The change also helped address some of the challenges associated with anchoring and tracking stability.

The final version therefore placed more of the animated splashes and visual effects toward the front of the physical product.

This demonstrated an important aspect of developing augmented reality experiences for real-world campaigns: creative and technical decisions cannot always be treated independently.

The visual composition, physical packaging, tracking technology, device performance, and user experience all needed to work together.

Rather than continuing with an approach that was visually attractive but technically less effective, InReality Solutions adapted the creative execution based on the results of extensive real-world testing.

Testing the WebAR Experience Across More Than 15 Devices

The Floridina Coco experience was not being developed for a controlled demonstration environment using a single high-end smartphone.

It needed to work for real consumers.

The project was therefore tested across more than 15 different devices.

These included:

• Entry-level and mid-range Android smartphones
• Premium Android smartphones
• Multiple Samsung devices
• Smartphones from Chinese manufacturers
• Different iPhone models
• iPads

The testing process revealed significant differences in how the experience performed across devices and operating systems.

An implementation that worked successfully on Android could behave differently on iOS.

A tracking configuration that appeared stable on one smartphone could require further optimization for another.

Cross-device testing therefore became a critical part of the development process.

Designing WebAR for a Mass-Market Consumer Audience

One of the most important considerations throughout the project was accessibility.

Floridina is a mass-market Indonesian beverage brand, and Jakarta Fair attracts visitors using smartphones across a broad range of hardware capabilities and price points.

The experience therefore could not be designed exclusively for flagship devices.

InReality Solutions needed to balance the visual complexity of the 47-second animation with file size, loading performance, AR stability, and compatibility.

The experience also needed to be accessible without requiring visitors to install a dedicated mobile application.

WebAR provided a practical solution.

Visitors could scan a QR code, open the experience through their browser, point their cameras toward the Floridina Coco bottle, and begin interacting with the augmented reality content.

Removing the requirement to download an application reduced friction and made the experience more accessible within the event environment.

From a Three-Week Animation Project to Three Months of Development

One of the defining aspects of the Floridina project was the difference between creating the visual content and making that content work reliably as a real-world augmented reality experience.

The primary animations and creative assets were completed within approximately two to three weeks.

The complete project required approximately three months.

Most of the additional development time was dedicated to solving technical challenges involving:

• Curved packaging tracking
• Cross-device stability
• Android and iOS compatibility
• Animation optimization
• Image target optimization
• 3D occlusion
• Layered visual composition
• File size and performance
• Extensive device testing

The experience demonstrated that successful commercial AR development involves significantly more than producing visually attractive digital content.

The technology needs to work reliably for the actual consumers, devices, physical products, and environments in which it will be used.

The Results: 13,724 AR Experience Activations

The Floridina Coco WebAR experience was launched as a limited-time activation during Jakarta Fair.

According to campaign analytics, the experience generated:

13,724 total scans and AR experience activations.

The average time spent on the experience page was:

87 seconds.

This is particularly significant considering that the complete AR animation lasted approximately 47 seconds before looping.

The average engagement time therefore substantially exceeded the duration of one complete animation cycle.

The experience generated:

11,665 scans from Android devices.

And:

2,059 scans from iOS devices.

Approximately 85% of all scans therefore came from Android devices, reinforcing the importance of optimizing and testing the experience across a broad range of Android smartphones.

Extending Engagement Beyond the Event Booth

According to feedback received from Floridina, the WebAR experience became an attraction within the booth itself.

Visitors could see other people pointing their smartphones toward Floridina Coco bottles and reacting to the animated content.

This generated additional curiosity around the activation and encouraged more visitors to discover what was happening.

Floridina reported that visitors enjoyed interacting with the experience and, in some cases, purchased bottles to take home and demonstrate the AR activation to friends and family.

The physical packaging therefore had the potential to continue carrying the interactive brand experience beyond the immediate event environment.

Rather than the interaction ending when visitors left the booth, the bottle itself became part of a shareable experience.

Geographic Reach Beyond Jakarta

Although the campaign was centered around Jakarta Fair, analytics recorded activations from several Indonesian cities.

The geographic data included:

• 12,626 scans from Jakarta
• 412 scans from Bandung
• 145 scans from Depok
• 137 scans from Semarang
• 110 scans from Surabaya
• Additional scans from other locations

This suggests that interaction with the experience extended beyond the immediate location of the event.

Because the activation was browser-based, users who had access to the Floridina Coco bottle and campaign URL could interact with the experience outside the booth environment.

What the Floridina Project Demonstrates About AR Packaging

The Floridina Coco project demonstrates how augmented reality can transform physical product packaging into an interactive digital touchpoint.

For FMCG and beverage brands, packaging is traditionally used to communicate product information, branding, and visual identity.

Augmented reality introduces an additional interactive layer.

With WebAR, consumers can use their smartphones to access animations, branded experiences, games, product information, promotions, educational content, and other interactive experiences connected directly to physical packaging.

However, successful AR packaging campaigns require more than creative content.

Physical packaging geometry, image tracking, smartphone performance, browser compatibility, animation complexity, file size, user accessibility, and real-world testing can all affect the final experience.

The Floridina Coco project required InReality Solutions to address each of these factors while developing an experience intended for a broad consumer audience.

The result was a limited-time WebAR activation that generated 13,724 scans and an average engagement time of 87 seconds.