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


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.
Building credibility for a herbal medicine brand in the digital space by presenting scientific information that is easy for laypeople to understand.
Using Next.js Static Site Generation (SSG) to ensure articles can be indexed by search engines instantly with load speeds under 1.2 seconds.
Optimizing SEO performance so Batugin's health articles rank at the top of Google searches related to kidney health.
Applying HTML5 semantic markup structure and structured JSON-LD schemas to optimize medical article SEO.
Integrating an interactive hydration calculator feature that is responsive and lightweight to access from low-spec mobile browsers.
Designing a React Hooks-based hydration calculator that calculates fluid needs instantly on the client side with zero network overhead.
Workflow
Consultation
Analyzing medical branding requirements, targets of herbal medicine consumers, and educational content modules.
Planning
Mapping the health article sitemap, hydration calculator, and structured SEO metadata.
Development
Frontend development with Next.js and TailwindCSS with smooth Framer Motion transitions.
Quality Assurance
Auditing Core Web Vitals with performance scores above 95% and cross-browser compatibility testing.
Launch & Support
Deployment on reliable cloud servers and setting up periodic SEO performance monitoring.
Consultation
Analyzing medical branding requirements, targets of herbal medicine consumers, and educational content modules.
Planning
Mapping the health article sitemap, hydration calculator, and structured SEO metadata.
Development
Frontend development with Next.js and TailwindCSS with smooth Framer Motion transitions.
Quality Assurance
Auditing Core Web Vitals with performance scores above 95% and cross-browser compatibility testing.
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.






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.