Alfian

Full-Stack Development & Product Design

GlowHub - K-Beauty E-commerce Platform

GlowHub adalah platform e-commerce yang menghubungkan konsumen Indonesia dengan produk Korean beauty authentic. Challenge utama: membangun trust dalam pasar yang dipenuhi produk palsu, sambil memberikan experience yang seamless dari product discovery hingga post-purchase.

RoleLead Developer & UX Designer
Year2024
Duration4 months
2.3s
Average page load time (dari 8.1s)
41%
Increase in conversion rate
156%
Growth in mobile transactions
4.2 min
Average session duration (up from 1.8 min)
GlowHub - K-Beauty E-commerce Platform hero screenshot

The Challenge

Client punya inventory 500+ SKU K-beauty products tapi website lama built dengan WordPress + WooCommerce yang sudah tidak scalable. Specific pain points: (1) Load time 8+ detik di mobile, (2) Search hanya by product name tanpa filtering by skin type/concern, (3) Checkout process 7 langkah dengan form validation yang broken, (4) Tidak ada product verification system untuk authentic guarantee, (5) Zero personalization - semua user lihat catalog yang sama.

The Approach

Build from scratch menggunakan modern stack: Next.js 14 dengan App Router untuk optimal performance, implemented smart caching strategy dengan React Server Components, PostgreSQL dengan proper indexing untuk fast queries, dan Algolia untuk instant search with faceted filtering. Checkout flow di-redesign jadi 3 steps dengan auto-save progress dan guest checkout option.

Tech Stack

frontend
Next.js 14TypeScriptTailwind CSSFramer MotionZustand
backend
Next.js API RoutesPostgreSQLPrisma ORMRedis
services
Algolia SearchCloudinaryMidtransVercel
tools
FigmaPostmanGitHub Actions

Project Gallery

A visual walkthrough of screens and interactions built for this project.

Project screenshot 1
Project screenshot 2
Project screenshot 3
Project screenshot 4
Project screenshot 5

Key Features

The core functionality that makes this project stand out.

01

Smart Product Recommendations

Built collaborative filtering engine yang analyze user behavior + purchase history. Implemented "Complete Your Routine" feature yang suggest complementary products based on Korean skincare step methodology.

  • Collaborative filtering algorithm
  • User behavior tracking
  • Purchase history analysis
  • "Complete Your Routine" feature
02

Skin Analysis Quiz

Interactive 8-question quiz dengan conditional logic untuk determine skin type & concerns. Results disimpan untuk personalize product catalog dan recommendations.

  • 8-step conditional quiz flow
  • Skin type classification engine
  • Personalized catalog view
  • Persistent user profile
03

Authenticity Verification

Setiap product dilengkapi QR code verification system. Customers dapat scan untuk check batch number, manufacturing date, dan import documentation.

  • QR code per-product generation
  • Blockchain-based batch tracking
  • Import documentation viewer
  • Anti-counterfeit layer
04

Express Checkout

One-page checkout dengan real-time shipping calculation dari 3 courier APIs. Auto-fill address via postal code lookup. Support untuk save multiple addresses.

  • 3-courier real-time pricing
  • Postal code auto-fill
  • Multi-address save
  • Guest checkout option

Development Process

A structured approach from discovery to launch.

01

Discovery & Research

2 weeks
  • User interviews dengan 12 existing customers
  • Competitive analysis 5 major K-beauty platforms
  • Technical audit existing WordPress site
  • Define product requirements & success metrics
02

Design & Prototyping

3 weeks
  • Wireframing key user flows
  • High-fidelity mockups di Figma
  • Interactive prototype testing dengan 8 users
  • Design system creation
03

Development

10 weeks
  • Setup Next.js project & database schema
  • Implement product catalog & search
  • Build checkout flow & payment integration
  • Admin dashboard untuk inventory management
04

Testing & Launch

3 weeks
  • Load testing dengan k6
  • UAT dengan client team
  • Soft launch ke 100 beta users
  • Full launch & monitoring

Technical Challenges

Image Performance Bottleneck

Problem: Setiap product punya 5-8 high-res images. Initial load mencapai 15MB per product page.

Solution: Implemented custom image pipeline: Sharp untuk compression + WebP conversion, Cloudinary untuk CDN + on-the-fly resizing, dan Next.js Image component dengan blur placeholder. Result: 93% reduction in image payload.

Complex Product Filtering

Problem: Users perlu filter by skin type, concern, ingredient preferences, price, brand - dengan real-time update.

Solution: Integrated Algolia search dengan custom ranking algorithm. Built reusable filter UI dengan debounced queries dan optimistic updates. Added URL state sync jadi filters dapat di-share via link.

Payment Gateway Integration

Problem: Indonesia market butuh support untuk 10+ payment methods (e-wallet, bank transfer, installment).

Solution: Integrated Midtrans payment gateway dengan proper webhook handling, idempotency keys untuk prevent double charging, dan comprehensive error states dengan retry mechanism.

Client Testimonial

"

"Alfian tidak hanya build aplikasi yang cepat dan bagus, tapi juga deeply understand our business needs. The smart recommendations feature alone increased our average order value by 35%."

S
Sarah Wijaya
Founder & CEO, GlowHub Beauty Co.
✓ Verified Client

Interested in Similar Work?

Let's discuss how I can help with your next project.

View Live Project