Zellio Logo
Healthcare & Pharmaceuticals/ Website

Batugin

Official Company Profile website for the Batugin healthcare product line. Presents trusted product information with a clean, professional, and educational medical design.

Next.jsTailwindCSSFramer Motion
Visit Website
Batugin Preview
Batugin Cover

Project Overview

Batugin is a herbal information portal focused on providing education about kidney and urinary tract health to the Indonesian public. As a leading pharmaceutical product, Batugin requires a digital representation that is trusted, interactive, and easily accessible by various age groups. The platform is designed to present product information, health articles, a daily water intake calculator, and a nearby pharmacy directory. A hygienic, clean, and medically oriented visual design is combined with fast loading performance so readers get critical health info without friction.

Challenges
& Solutions

How we turned complex technical problems into elegant, structured digital solutions.

Problem & Response — Stage 011 / 3
Challenges

Building credibility for a herbal medicine brand in the digital space by presenting scientific information that is easy for laypeople to understand.

Solutions

Using Next.js Static Site Generation (SSG) to ensure articles can be indexed by search engines instantly with load speeds under 1.2 seconds.

Problem & Response — Stage 022 / 3
Challenges

Optimizing SEO performance so Batugin's health articles rank at the top of Google searches related to kidney health.

Solutions

Applying HTML5 semantic markup structure and structured JSON-LD schemas to optimize medical article SEO.

Problem & Response — Stage 033 / 3
Challenges

Integrating an interactive hydration calculator feature that is responsive and lightweight to access from low-spec mobile browsers.

Solutions

Designing a React Hooks-based hydration calculator that calculates fluid needs instantly on the client side with zero network overhead.

Zellio Approach

Workflow

01
Phase 01

Consultation

Analyzing medical branding requirements, targets of herbal medicine consumers, and educational content modules.

02
Phase 02

Planning

Mapping the health article sitemap, hydration calculator, and structured SEO metadata.

03
Phase 03

Development

Frontend development with Next.js and TailwindCSS with smooth Framer Motion transitions.

04
Phase 04

Quality Assurance

Auditing Core Web Vitals with performance scores above 95% and cross-browser compatibility testing.

05
Phase 05

Launch & Support

Deployment on reliable cloud servers and setting up periodic SEO performance monitoring.

Screenshots Gallery

A glimpse into the interface and user experience we meticulously designed.

Batugin Screenshot 1
Batugin Screenshot 2
Batugin Screenshot 3
Batugin Screenshot 4
Batugin Screenshot 5
Batugin Screenshot 6
Project Impact

Achieved Results.

Lightning Fast Access

Page load time decreased from 4.2 seconds to 1.1 seconds, reducing bounce rate by 28%.

Organic Traffic Surge

The Next.js architecture update boosted organic search traffic by 34% in the first quarter.

High-Traffic Stability

The system now processes over 50,000 active daily visitors with zero downtime.

Inspired by this project?

Let's discuss how Zellio can bring your company's digital vision to life.

Start Your Project