1분 안에 아이스크림 팔기
라라스윗 제품 상세페이지 디자인 진행기
온라인에서 아이스크림도 사 먹을 수 있는 세상이 되었다. 그중 라라스윗은 온라인 판매를 주력으로 하고 있는 회사이다.
방문자가 한 페이지에 머물러있는 시간은 고작 1분. 우리는 1분 안에 구매에 확신을 가질 수 있도록 도와야 한다. 그 역할을 하는 것이 제품의 정보와 스토리를 담고 있는 상세페이지일 것이다. 이번 딸기와 요거트 신제품 소개를 계기로 상세페이지를 리뉴얼을 고민하게 되었는데, 이번 리뉴얼을 진행하며 라라스윗이 고민했던 과정을 함께 공유해보려고 한다.
Background
라라스윗의 기존 상세페이지는 와디즈 펀딩에 사용했던 포맷이 토대였는데, 제품 상세페이지로 는 적합하지 않은 점이 있었다.
리뉴얼 전의 상세페이지AS-IS
기존 상세페이지의 문제를 크게 세 부분으로 정리해 보았다.
1. 너무 많은 특징 (기획)
'설탕도 적고, 칼로리도 적고, 맛도 있어요..!'
모든 장점을 말하려 하다 보니, 어느 장점하나 제대로 어필하지 못하는 문제가 있었다.
2. 동일한 패턴의 반복에서 지루함 (구조)
모든 특징을 동일한 비중(1:1:1)으로 담아 중요한 내용이 부각되지 않고, 레이아웃이 동일해 지루하다.
3. 한눈에 들어오지 않는다 (디자인)
- 많은 설명과 덩어리로 느껴지는 텍스트 문단은 눈에 들어오지 않을뿐더러 부담스러워 보인다.
- 2D 일러스트 스타일은 추상적이며 음식의 맛을 상상하기에 부족하다.
TO-BE
어떤 것 보다 ① 하나의 매력포인트는 꼭 기억나게 할 것 ② 끝까지 읽기 쉬운 상세페이지를 만들 것
위 목표를 가지고 리뉴얼을 시작했다.
1. 기획
변경된 상세페이지의 기획제품 페이지까지 들어온 고객들이 어떤 이유로 이탈할까?
라라스윗 - 아이스크림 - 음식이라는 분야로 넓혀 생각했을 때 답은 단순했다.
'맛있을까?'
결국 음식을 사게 되는 결정적 요인은 '맛'이다. 칼로리가 낮으면 맛도 영양도 가벼울 것이라고 생각할 수 있다.
그래서 우리는 '저칼로리임에도 맛있을 수 있다!'라는 생각으로 바꿀 수 있는 방법을 고민했다.
- 커버 이미지에는 라라스윗과 함께하는 일상 사진을 보여주며 공감을 유도하였다.(img_1)
- 원재료에 대한 구체적인 설명으로 제품에 대한 신뢰와 궁금증을 불러일으키도록 하였다.(img_2,3)
2. 구조
라라스윗 페이지 구조 전과 후- 전체 구조 : 동일한 비중(1-1-1)의 같은 패턴으로 보여주었던 이전의 상세페이지는 지루하고 경직되었다.
3:2:1로 비중에 차이를 주어 첫번째 메시지에 힘이 실릴 수 있도록 구조를 수정했다.
- 세부구조 : 챕터 당 페이지 길이가 길어진 듯 보이지만 이미지와 글이 차지하는 공간의 여백이 늘어나 글을 읽는 호흡이 쉬워졌다.
3. 디자인 & 그 외
라라스윗 페이지 디자인 전과 후이전 페이지에서는 일러스트 스타일은 단순하기도 했을뿐더러 식품의 특징을 설명하기에 한계가 있었다.
이를 해결하기 위해 사진을 이용했다. 설명이 필요한 부분은 키워드로 보충설명을 더했다.
전체적으로 글의 양을 줄이고 강조가 필요한 키워드는 사진과 함께 배치했다.
'글을 읽는다'라는 느낌보다 '그림을 본다'라는 느낌이 들 수 있도록 배치를 구상했다.
라라스윗 딸기 아이스크림 만드는 움짤더불어 시선을 끌어야 하는 설명 중간중간 움짤을 배치했다.
움짤은 제품의 특징을 강조하는데 좋은 역할을 하기도 하고, 쉽게 설명할 수 있는 보충 자료 역할을 하기 때문이다.
마치며
같은 페이지를 매일 보면 눈에 익어버리기 때문에 어떤 문제가 있는지 파악하기 쉽지 않다.
이럴 때일수록 사용자의 패턴을 유심히 관찰해야 하는 것 같다. 오프라인에서 마주해 라라스윗을 설명해드릴 수 있는 그날까지, 라라스윗의 상세페이지 개선은 지속될 것이다.
라라스윗 아이스크림에 대해 더 궁금한 정보나 피드백이 있으시다면 언제든지 감사합니다 :)
