결제 플로우와 GUI
정육각 사이트 내 결제 플로우를 관찰해 보면, 브랜드가 가진 UI 철학과 GUI의 시각 경향성 파악이 가능하다.
시각 경향성
정육각 BI는 로고를 기준으로 '라인'이라는 시각적 특성을 가지고 있다.(‘IT를 베이스로 한다’라는 브랜드 정체성이 반영되어있다.) 조형언어상 라인은 면보다 시각적 강도가 낮은 편이다. 최근 트렌드이기도 한 복잡도가 높은 페이지에서의 고스트 버튼(라인) 선호 역시 비슷한 맥락을 가진다. 정육각 브랜드 정체성을 따르다 보면 자연스레 라인을 이용한 GUI 스타일링이 되는데, 이점을 살려 CTA(Call to Action) 버튼에만 명시도가 높은 색면을 설정했다. 이는 페이지 내 시각적 복잡도를 컨트롤하기 위함이기도 하고, 강한 클릭 유도를 위함이기도 하다.
디자인 에셋들장바구니를 통한 결제 플로우 진입
사이트 메인 페이지 '베스트 상품 영역' 에는 정육각을 대표하는 상품들이 엄선되어있다. 이 영역에서 고객은 퀵 장바구니 담기 기능을 사용할 수 있다. 아이콘을 클릭하면 팝업이 뜨는데, 이때 수량 조절과 옵션을 선택할 수 있다. 옵션에는 육류의 두께 조절 같은 편의적 기능이 제공된다.
메인 페이지 베스트 상품 영역
장바구니 담기 팝업
장바구니 추가 후 애니메이션장바구니에 상품을 담으면 추가되었다는 애니메이션이 재생된다. 내비게이션 장바구니 아이콘 옆에 위치한 빨간색 수량 영역 변화만으로는 인식성이 떨어진다고 판단, 개선된 인터페이스 중 하나다. 내비게이션 장바구니 아이콘을 누르면 장바구니 페이지로 진입할 수 있는데, 개별 상품 수량 조절 및 상품 삭제가 가능하다. 페이지 우측에는 총 상품 금액과 총 배송비 요약이 존재한다. 본격적인 결제 플로우 진입 이전에 사전 컨펌을 할 수 있다.
장바구니 페이지정육각에는 흔히 있는 '얼마 이상 결제 시 무료 배송' 제도가 없다. 대신 고객이 상품 하나를 추가할 때마다 조금씩 할인이 적용되는 '신선 할인' 제도를 도입하고 있다. 배송비는 당일 배송 3,500원 / 우체국 배송 2,500원으로 책정되어있는데, 배송 유형에 상관없이 1개씩 담을 때마다 10%, 30%, 60%, 100%의 할인율을 제공한다. 위 장바구니 예시 이미지에서 나는 장바구니에 상품 3가지를 담아 30%의 '신선 할인' 혜택을 받았다. '할인 영역'은 시각적 위계가 다르게 설정되어야 했기 때문에, 지면 내 CTA컬러 레드의 보색 계열인 순색에 가까운 블루로 설정되었다.
주문하기 4단계
정육각 UI는 "1 page - 1 things"라는 콘셉트를 가지고 진행되었다. 한 페이지에서 고객이 목표로 가는데 방해되는 요소들을 삭제 및 병합하는 방식이다.
오컴의 면도날 원칙을 생각해보면, 동일한 현상을 설명하는 두 개의 주장 가운데 가정이 많은 쪽을 피하라는 이야기가 나온다. 가정 하나하나는 실현/비실현의 가능성 모두를 내재하므로, 가정의 수가 많아질수록 인과관계에 대한 추론이 진실과 멀어질 가능성이 크다는 것이다. 이를 UI에 적용해보면 시각적 복잡도를 대폭 낮출 수 있다. 그런 철학이 가장 잘 반영된 부분이 개인적으로 주문하기 4단계라고 생각한다.
장바구니 페이지에서 전체 상품 주문하기 버튼을 클릭하면 배송지 정보로 진입이 가능하다. 여기서는 보내고 받는 사람의 전화번호와 주소 데이터를 컨펌할 수 있다. 받으시는 분의 주소변경과 신규 주소 등록도 팝업을 통해 가능하다.
01. 배송지 정보 페이지가끔 고객 장바구니 속에 매진된 상품이나 배송 형식에 따라 받을 수 있는 요일이 정해진 '우유' 같은 상품이 다른 상품들과 함께 담겨있을 경우가 있다. 이런 경우 도착 희망일 페이지 진입과 동시에 팝업 형태로 '상품을 더 빨리 받을 수 있는 방법’에 대한 공지를 해준다. 이는 사용자의 예측가능성을 높이기 위해 고안된 형태다. 이 팝업이 없다면 수령일에 영향을 주는 상품이 어떤 것인지 모른 체, 배송일 지정 페이지로 진입해버리기 때문이다.(물론 이런 공지는 각 제품 상세페이지에 명시되어있다.) 팝업 상품 변경을 누르면 장바구니 페이지로 진입해 안내받은 상품을 수정할 수 있고, 나에게 맞는 배송 형태를 선택할 수 있다.
상품 변경 안내 팝업정육각은 현재 세 가지 배송 형태를 운영하고 있다.
1) [우체국 배송] 오후 4시 이전 주문하면 다음날 오후 6시 이전에 받아볼 수 있다.
2) [당일 배송] 낮 12시 이전 주문하면 당일 오후 8시 이전에 받아볼 수 있다.
3) [새벽 배송] 오후 8시 이전 주문하면 다음날 새벽 7시 이전에 받아볼 수 있다.
도착 희망일 페이지에 진입하면 세 가지 배송 형태와 받고 싶은 희망 날짜를 선택할 수 있다. 아래 예시에는 당일 배송이 막혀있는데, 낮 12시 이전 주문 마감 건에만 적용이 가능하기 때문이다.(이때 접속 시간이 오후 4시였다.) 가장 빨리 받을 수 있는 새벽 배송을 클릭해보면 배송비와 관련된 두 가지 영역이 활성화된다. 아래 좌측은 3,500원으로 한 달 4번 무료 배송받을 수 있는 '신선 플랜’ 영역이다. ‘신선 플랜’의 혜택을 받지 않으면 우측 영역 기본 배송비에서 '신선 할인' 부분만 계산된 배송비 합계가 표시된다.
02. 도착 희망일아래 예시처럼 '신선 플랜' 혜택 받기를 클릭하면 우측에 적용되었다는 문구와 함께 배송비가 0원으로 출력된다. 사용자가 각 영역을 클릭해보면서 내가 원하는 배송 유형과 배송비가 달라지는 것을 실시간으로 느끼게 하는 부분이 GUI차원에서 가장 중요했다.
신선 플랜 적용 시 인터페이스 변화만약 내가 새벽 배송을 선택하고 다음 단계로 넘어가려고 하면, 아래 예시처럼 새벽 배송 요청사항에 대한 팝업이 뜬다. 단독주택이 아닌 경우, 새벽에 택배 기사가 들어가야 하기 때문에 출입 방법에 대한 정확한 명시가 필요하다.(비밀번호, 경비실 호출, 세대 호출, 무인 택배함, 경비실로 배송, 자유 출입 가능, 기타 사항) 또한, 배송 요청 메시지 등록도 이 시점에 이루어진다.
새벽 배송 요청사항 팝업
03. 쿠폰 및 적립금
04. 결제방법3단계 쿠폰 및 적립금을 지나면 결제 플로우의 마지막 단계인 결제 방법 페이지가 나온다. 이 페이지에서는 결제방법과 주문내역, 배송정보를 최종 컨펌할 수 있다.
현재 정육각 결제 시스템은 카드/무통장 두 가지만 시행 중이다. 이는 정육각의 특별한 결제 시스템인 '신선 페이'와 깊은 관련이 있다. '신선 페이'는 상품 생산이 완료된 뒤 정확한 무게에 맞는 금액을 확정하고 결제하는 형식을 말한다. 예를 들어 기준 무게가 600g이고 기준 가격이 13,200원인 무항생제 삼겹살을 주문한 경우, 생산 과정에서 580g이 생산되면 12,760원이 결제된다. 610g이 생산되면 13,420원이 결제된다. 쉬운 예로 마트에서 장을 볼 때 상품 무게를 저울에 재고 라벨을 붙여 결제하는 방법을 그대로 온라인화 시켰다고 생각하면 쉽다.
오프라인 무게 측정방식
카드 결제를 선택하고 주문하면 생산이 완료된 후 무게에 따른 정확한 금액으로 결제가 진행된다. 무통장의 경우 기준 금액과 함께 추가 생산될 수 있는 최대 10%에 대한 보증금을 선입금받고, 차후 최종 생산된 무게에 맞는 금액을 제외한 차액을 환불해주는 방식이다. 그래서 환급계좌 등록의 시각적 위계가 높게 설정되어있다.
주문 내역 영역에서는 내가 결제한 상품 리스트를 마지막으로 자세히 볼 수 있다. 또한, 신선 플랜 적용 유무나 쿠폰/적립금 등이 적용된 최종 결제금액을 컨펌할 수 있다. 앞서 선택한 배송 형식에 따른 도착 예정 날짜와 도착 예정 시간도 한 번 더 확인 가능하다. 주문 확정을 누르면 결제 플로우 4단계가 끝나고, 제품 생산이 들어간다.
‘결제 플로우와 GUI’ 마침.
