UnnieBox
Premium landing page and UI system for a Korean beauty box subscription. Designed to build trust, highlight product value, and guide users through a simple and elegant purchase flow.
Korean Beauty
Beauty boxes from Korea, reimagined
UnnieBox is a subscription beauty service curating boxes with Korean skincare and cosmetics, shipped internationally. The challenge: design a complete landing page that builds trust fast, communicates product value visually, and guides users through a simple order flow.
I designed the full UI system — from logo and favicon to every button state, modal, and micro-interaction.
Featured products
Each box is curated with dermatologist-tested Korean beauty products. Clean formulas, certified ingredients — zero SLS, SLES, sulfates, or artificial dyes.
Cleanser
Moisturizer
SPF 50+
Problem and goals
Problem
Beauty subscription boxes live or die on trust. Users are asked to share personal details and pay before they've touched the product — so if the page doesn't immediately feel premium and credible, they leave. The challenge was to design a landing experience that earns trust fast, explains the offer clearly, and removes every reason to hesitate.
Goals
Design a premium landing page that communicates product value at a glance, guides users through a natural learn → trust → order flow, and converts hesitation into action. Every section needed to answer a real objection before the user even thought to ask it.
Process
I worked from research to reusable components. Each step focused on clarity, hierarchy, and conversion.
Market Overview
The Korean beauty subscription market is experiencing rapid global growth, driven by Gen Z and Millennial demand for personalized, clean skincare experiences.
Who buys beauty subscription boxes
Gen Z & Millennials spend annually on beauty online
look for natural / clean ingredients
of subscribers stay for personalization
Why trust-first design matters
User Persona
- Discover Korean skincare without hours of research
- Try products without risk of wasting money
- Build a consistent daily skincare routine
- Doesn't trust subscription boxes
- Overwhelmed by choice on Amazon and Sephora
- Wants clean ingredients but can't read formulas
- Finds products through TikTok and YouTube
- Reads 5–10 reviews before any purchase
- Makes decisions on-page — won't leave to Google
Competitive Analysis
| Feature | UnnieBox | Bomibox | Soko Glam | Ipsy |
|---|---|---|---|---|
| K-Beauty focus | ||||
| Clean ingredients | ||||
| Trust signals | Strong | Moderate | Strong | Strong |
| Modal UX flows | ||||
| Mobile optimized | ||||
| Price transparency | Clear | Unclear | Clear | Clear |
| Cancel anytime | N/A |
Every section answers a real user objection
What is this and is it worth my time? — answered in under 3 seconds.
What will I actually get? — shown visually, not described.
Are these products safe? — zero SLS, SLES, sulfates, artificial dyes.
Can I trust this brand? — real social proof.
I have a question but don't want to leave the page — modals keep focus.
Is checkout going to be complicated? — single modal, 3 steps max.
Information Architecture
Before any layout was wireframed, I mapped the full navigation structure — top-level sections, feature hierarchy, and how every screen connects. This defined how deep any action could go and where trust signals, confirmation, and error states needed to live in the flow.
Information Architecture — Site Map
Wireframe & User Flow
Before any pixel was styled, I mapped out the complete user journey and page structure. The wireframe defines every section layout; the user flow captures all 3 paths — direct buyer, hesitant user, and lead capture — so no edge case was left undesigned.
Wireframe — Full Page Layout
Colors and typography
A calm, clean palette with one strong blue for actions. Editorial headings create a premium vibe, while the UI font keeps details readable.
The complete landing experience
Full Landing Page
Instagram follow
Order form
UI kit
Reusable components designed for speed: buttons, cards, icons, tags, and input fields.
UI Kit — Full Component Library
Modal UX flows
Instead of pushing users away from the main flow, key interactions open in modals. This keeps focus on conversion.
Payment troubleshoot
Skin guide CTA
Instagram follow
Order form
Daily care tip
Mobile screens
The full landing and pop-up menu adapted for mobile — clean, thumb-friendly layouts optimised for small screens.
Mobile — Main Screen
Mobile — Pop-up Menu
Branding and mockups
The wordmark uses a simple gift icon replacing the "O" in BOX — making the idea instantly readable.
Logo — Dark
Logo — Light