ADOPE / Works
eCommerce Detail Page · Information Architecture

Collagen Coffee Detail Page

콜라겐과 액상 커피를 결합한 이너뷰티 브랜드 COLLFFEE의 상세페이지 기획 및 시각화입니다. 복잡한 원산지 비교와 흡수율 정보를 한눈에 읽히는 표와 다이어그램으로 재구성하고, 일상에서 바로 따라 할 수 있는 4가지 홈카페 레시피 가이드를 더해 구매 장벽을 낮췄습니다.

An eCommerce detail page strategy and visual system for COLLFFEE, an inner-beauty brand blending liquid coffee with marine collagen. We restructured intricate absorption charts into scannable data layouts and added four daily recipe guides to drive confident conversions.

Client
Della born
Role
상세페이지 기획 · 디자인
eCommerce Strategy · Detail Design
Category
eCommerce / Food & Health
Collagen Coffee Detail Wave Mockup
01 — Page Flow & Narrative

지루하지 않은 8단계 설득 흐름

An 8-Step Narrative Structure

상세페이지 상단에서 기존 콜라겐의 맛과 섭취 번거로움에 대한 페인포인트를 짚고, 즉시 액상 커피 포 형태의 직관적 해법을 제시합니다. 원료 원산지 비교 검증표와 홈카페 음용 가이드를 배치해 이탈 없이 결제까지 유도하는 구조를 설계했습니다.

The narrative begins with consumer fatigue around chalky collagen tablets, immediately positioning liquid stick coffee as the effortless daily answer. Backed by certified European ingredients and versatile recipes, every scroll depth serves a decisive reason to buy.

  • 01
    히어로 및 론칭 선언 Hero Announcement 세상에 없던 액상 콜라겐 커피의 첫인상과 비주얼 임팩트 Initial visual impact establishing the new liquid beauty coffee category
  • 02
    섭취 페인포인트 및 간편 관리 Consumer Pain Points 물에 타거나 씹어먹는 번거로움 해소, 하루 1포 루틴 제안 Overcoming traditional tablet fatigue with effortless 1-stick daily management
  • 03
    콜라겐 원산지 및 분자량 비교 Origin & Molecular Weight 생선 피쉬콜라겐 300Da 저분자 데이터와 흡수율 비교표 Low-molecular marine collagen data and comparative absorption metrics
  • 04
    타깃 진단 체크리스트 Shopper Checklist 피부 건조, 피로감, 영양제 거부감 등을 겪는 소비자를 위한 6가지 자가진단 6-item diagnosis checklist addressing daily hydration and morning fatigue
  • 05
    실제 음용 홈카페 레시피 4 Home Cafe Recipes Iced americano, cube latte, warm drip, and affogato 아이스 아메리카노, 큐브라떼, 따뜻한 커피, 아포카토 4종 가이드
  • 06
    유럽 프리미엄 원료 인증 European Sourcing Proof 이탈리아·프랑스·영국 등 원산지 투명 공개로 신뢰도 확보 Transparent sourcing disclosure certified from Italy, France, and UK
dellaborn.com/collffee/detail
Collagen Coffee Detail Strip
02 — Information Breakdown

정보의 3단계 시각적 분할

Three Strategic Pillars

상세페이지가 너무 길어지면 독자의 집중력이 급격히 떨어집니다. 문제 공감, 원료 데이터, 음용 시나리오의 3단 흐름으로 시각 정보를 규격화하여 모바일 화면에서도 끊김 없이 몰입되도록 다듬었습니다.

To maintain shopper focus across deep scrolls, information was grouped into three distinct zones: consumer empathy, clinical ingredient validation, and daily culinary integration.

Category Hero & Identity
01 — 카테고리 선언과 첫인상 01 — Category Redefinition 커피와 콜라겐이라는 이질적인 두 키워드를 미니멀한 타이포그래피와 정돈된 원두 텍스처로 연결했습니다. Harmonizing wellness and daily roasted coffee rituals through refined typography.
Formula and Ingredients
02 — 성분 근거와 흡수율 데이터 02 — Formula & Absorption Proof 콜라겐 분자 구조와 피쉬 추출물의 차이를 한눈에 비교되는 인포그래픽 표로 시각화했습니다. Transforming molecular density and fish-derived superiority into clean infographics.
Home Cafe Recipes
03 — 일상 속 4가지 음용 시나리오 03 — 4 Daily Home Recipes 아메리카노부터 아포카토까지 소비자가 바로 먹고 싶어지는 시각적 가이드를 제공해 구매 욕구를 극대화합니다. Inspiring immediate usage scenarios through crisp culinary visuals and step ratios.
Interactive QA Layout and Ingredient Cards
Conversion Strategy

의구심을 확신으로 바꾸는 Q&A 카드 시스템

Resolving Friction with Clear Q&A Modules

"커피 맛이 이상하지 않을까?", "카페인 함량은 얼마나 될까?", "하루 몇 포까지 마셔도 될까?" 등 소비자가 장바구니 담기를 망설이는 3가지 핵심 질문을 카드로 분리해 명쾌한 데이터를 제공했습니다.

Tackling immediate objections regarding taste, caffeine count, and daily safety through bite-sized, data-backed answer modules.

Sensory Art Direction

원두의 깊이감과 에센셜 퍼플 컬러의 조화

Balanced Palette between Coffee & Indigo Purple

어둡고 묵직하기 쉬운 커피 원두의 다크톤에 부드러운 라벤더 퍼플과 클린 화이트를 배색하여, 약품이나 단순 식품이 아닌 프리미엄 뷰티 루틴의 감성을 완성했습니다.

Grounding deep espresso roast tones with soothing periwinkle violet and architectural whites, evoking an elevated self-care ritual.

04 — Colour Palette
Dusky Periwinkle #555770
Soft Lavender #A5A7BC
Espresso Dark #28231D
Clean Paper #F4F3F0