핑거박스를 디저트를 고르는 앱이 아닌, 언제 받을 수 있는지가 먼저 보이는 당일 배송 서비스로 설계하였습니다.

상황

핑거박스(FINGER BOX)는 전국의 프리미엄 디저트와 베이커리를 당일에 배송하는 모바일 서비스입니다. 루프, 옹근달, 더베이커스테이블, 몽소, 구욱희씨, 클럼지베이커리처럼 줄을 서야 살 수 있던 디저트를 앱 하나로 주문하고, 그날 저녁에 받아 볼 수 있도록 하였습니다. 슬로건은 Pick Up Your Sweetness입니다.

스튜디오포크를 설립하기 이전, 이전에 함께 일한 인연이 있는 스타트업 대표가 새 사업을 시작하며 합류를 제안하였고, 크리에이티브 디렉터로 참여하였습니다. 서비스 기획과 사용자 앱 디자인을 함께 맡았으며, 서비스는 실제로 출시되었습니다.

디저트 배송은 일반 쇼핑과 구조가 다릅니다. 주문하는 고객, 디저트를 만드는 매장, 매장에서 디저트를 픽업해 전달하는 피커가 같은 주문 안에서 각자의 시간에 맞추어 움직여야 합니다. 이에 따라 범위를 고객이 쓰는 앱에 한정하지 않고, 매장이 쓰는 파트너 어드민과 피커가 쓰는 피커 어드민까지 함께 설계하였습니다.

발견

고객이 좋아하는 디저트를 사지 못하는 이유부터 정리하였습니다.

• 디저트 맛집을 찾았지만 멀리 있습니다.
• 찾아가도 몇 시간씩 줄을 서야 하고, 차례가 오면 품절입니다.
• 지금 유행하는 디저트를 어디서 찾아야 할지 모릅니다.

세 가지 모두 메뉴를 몰라서 생기는 불편이 아닙니다. 거리와 시간의 문제입니다. 또한 핑거박스가 다루는 디저트는 당일 생산 제품이며, 12시간 안에 전달하는 것을 품질 기준으로 삼았습니다. 갓 만든 디저트의 품질은 결국 시간이 결정합니다.

핑거박스가 파는 것은 디저트 이전에, 오늘 받을 수 있다는 약속이었습니다.

방향을 정립하는 과정

무엇을 살까보다, 언제 받을까를 먼저

일반적인 쇼핑 앱은 상품을 먼저 보여 주고 배송은 결제 단계에서 확인하게 합니다. 핑거박스는 순서를 바꾸었습니다. 홈 화면 맨 위에 배송지와 도착 일시를 두고, 고객이 상품을 보기 전에 ’이 주소로, 언제 받을 수 있는가’를 먼저 정하도록 설계하였습니다. 배송지마다 도착 시각이 달라지고, 배송이 불가능한 주소는 목록에서 바로 구분됩니다.

주문 마감 시각인 오전 11시를 기준으로 상품 상세, 장바구니, 주문 완료 화면을 각각 두 가지 상태로 설계하였습니다. 11시 이전에는 당일 도착을, 이후에는 다음 날 도착을 화면마다 같은 자리에서 알려 줍니다. 원하는 날을 고르는 예약 배송도 같은 흐름 안에 두었습니다. 이를 통해 고객은 결제 직전에 배송일을 알고 실망하는 대신, 처음부터 받을 수 있는 시간을 알고 디저트를 고릅니다.

맛을 고르는 기준을 숫자와 단어로

디저트는 사진만으로 맛을 판단하기 어렵습니다. 이에 따라 상품마다 맛을 설명하는 공통의 기준을 세웠습니다.

• 달콤레벨 | 단맛을 1(매우 낮음)부터 5(매우 높음)까지 다섯 단계로 표시합니다.
• 특성 | 프루티, 초코, 플레인, 글레이즈, 크리미, 민트, 넛티
• 식감 | 부드러움, 바삭함, 퍼지함, 겉바속촉
• 건강 | 비건, 슈가프리, 저칼로리, 글루텐프리

속성은 여러 개를 함께 고를 수 있고, 새로운 항목을 더할 수 있도록 열어 두었습니다. 판매자가 직접 쓰는 ’핑믈리에 팁’을 상세 화면에 더해, 만든 사람이 권하는 맛의 포인트를 함께 전달합니다.

같은 기준은 추천으로 이어집니다. 마이페이지에서는 최근 한 달 동안 주문한 디저트 종류로 ’취향저격 디저트 베스트 5’를 보여 주고, 랜덤박스는 취향 설문과 구매 내역을 바탕으로 디저트를 골라 담아 보냅니다. 랜덤박스는 인원에 따라 12인용, 34인용, 4~5인용의 세 가지로 구성하였습니다.

하나의 주문을 세 사람이 함께 처리하도록

고객 앱의 주문은 매장과 피커의 화면으로 그대로 이어집니다.

1. 고객이 주문하면, 파트너 어드민의 실시간 주문관리에 준비 전 상태로 들어옵니다.
2. 매장은 포장을 마치면 준비 완료로 바꾸고 픽업을 요청합니다. 준비가 늦어진 주문은 지연 상태로 따로 표시됩니다.
3. 피커 어드민은 지도 위에서 픽업할 매장을 보여 주고, 매장별로 포장 완료, 픽업 완료, 배송 중, 사고 발생을 구분합니다.

이를 통해 고객이 보는 도착 시각과 매장의 준비 시각, 피커의 이동 시각이 하나의 상태값으로 연결됩니다.

한 일

사용자 앱

모바일 사용자 앱은 홈, 검색, 상품, 장바구니와 주문, 회원가입과 로그인, 마이페이지로 구성하였고, 상태별 화면을 포함해 100여 개의 화면을 설계하였습니다.

• 홈 | 배송지와 도착 일시를 맨 위에 두고, 베스트, 신상품, 한정판매, 선물하기 좋은 디저트, 랜덤박스, 특가와 혜택 순서로 이어집니다. 화면 중간에는 “디저트샵을 운영 중이신가요?“라는 입점 안내를 두어, 고객 앱 안에서 새로운 매장을 만날 수 있도록 하였습니다.
• 상품 상세 | 상품설명, 리뷰, 정보고시를 탭으로 나누고, 달콤레벨과 속성, 포장 타입(상온, 냉장, 냉동), 알레르기 정보와 유통기한을 한 영역에 정리하였습니다. 한정판매 상품은 남은 수량을 보여 줍니다.
• 장바구니와 주문 | 포장 타입별로 상품을 묶고, 무료 배송까지 남은 금액을 알려 줍니다. 주문 완료 화면에는 결제 정보보다 도착 예정 일시를 먼저 두었습니다.
• 마이페이지 | 주문 내역, 리뷰, 쿠폰, 마일리지, 회원 등급, 배송지, 결제 수단, 문의를 정리하였습니다. 입점을 원하는 매장을 고객이 직접 추천하는 화면과, 여러 곳으로 나누어 보내는 대량 주문 문의 화면을 따로 두었습니다.

브랜드와 출시

앱 런처 아이콘과 스플래시, 메인 배너와 서비스 안내 상세페이지를 같은 언어로 정리하였습니다. 분홍색 크림이 흘러내리는 형태를 포장 박스와 앱 아이콘, 스플래시에 공통으로 사용하여, 문 앞에 도착한 박스와 휴대폰 속 앱이 같은 브랜드로 읽히도록 하였습니다.

돌아보며

서비스는 출시되었지만, 운영을 이어 가며 처음부터 다르게 설계했어야 했던 부분도 분명히 확인하였습니다.

화면보다 운영 규칙이 먼저였어야 합니다

화면 설계를 먼저 진행하고, 정산 방식과 파트너 승인 절차, 매장 휴무와 주문 불가일의 기준은 출시 이후에 다시 정리하였습니다. 그 사이 배송 방식은 당일, 예약, 새벽 배송에서 핑거배송과 택배로 바뀌었고, 오전 11시 기준은 상품 상세, 장바구니, 주문 완료 화면마다 따로 두 벌씩 존재하게 되었습니다. 규칙 하나가 바뀔 때마다 여러 화면을 함께 고쳐야 하는 구조였습니다.

화면은 운영 규칙이 겉으로 드러난 결과입니다. 누가 언제 무엇을 승인하고, 어떤 날 주문을 받지 않으며, 돈이 어떤 순서로 정산되는지가 먼저 정해져야 화면이 단순해집니다.

혜택 구조도 브랜드의 언어로 설계해야 합니다

출시 당시의 회원 등급은 전월 실적으로 매달 새로 정해지는 BASIC, MANIA, GOURMET의 세 단계였습니다. 운영 중 다시 살펴보니, 매달 처음부터 다시 쌓아야 하는 구조는 오히려 다음 구매의 동기를 떨어뜨릴 수 있었고, 등급의 이름도 핑거박스라는 브랜드와 연결되지 않았습니다.

이에 따라 등급 기준을 지난 3개월의 누적 금액으로 바꾸고, 핑거박스의 이름을 살려 손가락 다섯 개부터 한 개까지로 등급을 표현하는 안을 다시 제안하였습니다. 혜택과 등급은 숫자로 설계하는 영역처럼 보이지만, 고객이 브랜드를 가장 자주 확인하는 장면이기도 합니다.

두 가지 모두 지금 스튜디오포크가 일하는 순서의 바탕이 되었습니다. 화면과 디자인보다 운영 구조와 기준을 먼저 정하고, 숫자로 정하는 부분까지 브랜드의 언어로 설계합니다.

결과물

모바일 사용자 앱(홈, 검색, 상품 상세, 장바구니와 주문, 회원가입과 로그인, 마이페이지, 랜덤박스, 회원 등급 등 100여 개 화면).

파트너 어드민(대시보드, 상품과 재고 관리, 실시간 주문관리, 주문 내역), 피커 어드민(주문 목록, 매장별 픽업 상태, 지도, 메시지, 현황판).

앱 런처 아이콘과 스플래시, 메인 배너, 서비스 안내 상세페이지.