WebsiteE-commerceAI-ThemedDigital Product

Boonari

2026Personalized Storybook PlatformPublished / Live

Case Study

Overview

A personalized children storybook platform for Indonesian families, with preview-led storytelling, product education, and conversion-focused ordering.

Role

Product website implementation, UI integration, multilingual content structure, and conversion flow planning.

Scope

Personalized Storybook Platform

Status

Published / Live

The Problem

A personalized book product needs to explain a custom production flow quickly, build parent trust, and make the first preview action feel low-friction.

The Goal

Create a warm product website where the child, story preview, physical book, and ordering promise are clear from the first screen.

Depth Pass

How the product node was shaped.

Context

Boonari introduces a personalized physical storybook product, so visitors must understand both the emotional value and the production process quickly.
The site needs to speak to parents, explain preview-before-production, and support bilingual discovery for Indonesian families.

Approach

Built the first viewport around the child-as-hero offer, supported by product mockups, family imagery, and concrete promise cards.
Structured the page around how it works, editable preview expectations, delivery reassurance, catalog browsing, and direct preview creation.

User Flow

Parent lands on the offer, understands the personalized storybook promise, then starts a free preview or explores catalog options.
Secondary reassurance blocks explain shipping, preview editability, and no-production-before-approval so the CTA feels safer.

Design Direction

Warm editorial style with serif display typography and soft product imagery to feel premium, family-friendly, and giftable.
Rounded cards and calm CTAs keep the flow approachable without making the product feel generic.

Core Features

Product surface and system layer.

Personalized preview CTA

Product education sections

Bilingual interface

Family-focused commerce flow

Stack & architecture notes

The website is designed as a conversion and education layer that can later connect deeper preview generation, catalog, order, and production management systems.

Next.jsProduct WebsiteCommerceAI Flow

Result / Impact

What the build makes possible.

Clarifies a non-standard product model in the first screen: personalized story, editable preview, and approval before production.
Creates a scalable base for catalog pages, articles, pricing, preview flows, and future production dashboards.

Future Layer

Where it can expand next.

Connect preview generation, order tracking, payment, and production status into one customer journey.
Add story templates, occasion-based catalog segmentation, and post-purchase parent account features.