바나프레소 UI UX 전략 뜯어보기
강남 직장인은 왜 출근길에 바나프레소를 갈까?
요즘 강남일대 직장인들의 출근길에는 항상 ☕️ 바나프레소의 커피가 들려있습니다.
어떤 전략으로 직장인들의 마음을 사로잡았을까요?
바나프레소의 UI UX 전략을 살펴보니 아래와 같았습니다.
1️⃣ 직관적이고 간편한 사용자 경험
2️⃣ 개인화된 고객 경험
*개인화된 고객경험(Personalized Customer Experience)
고객 개개인의 취향, 행동, 관심사 등을 바탕으로 맞춤형 서비스를 제공하는 경험을 의미합니다.
이는 고객이 제공하는 데이터(구매 기록, 검색 히스토리, 선호도 등)를 분석하여 고객이 원하는 것을 예측하고, 그에 맞는 제품, 서비스, 콘텐츠 등을 제공하는 방식입니다.
F&B 분야에서 요즘 핫한 바나프레소는 어떤 전략을 가지고 있을지 사용자 경험 중심으로 살펴보겠습니다.
1. 첫 진입화면(홈화면)
1. 다이나믹 카피
홈화면에 진입할 때마다 최상단에 있는 다이나믹 카피로 새로운 신선함을 받습니다.
메뉴 추천이나 기능 추천도 있지만, 시간대로 메뉴를 추천하는 카피도 보였습니다.
2. 간편 주문 메뉴
사용자가 저장한 간편 주문의 목록을 주문 지점과 저장명과 함께 노출해 반복되는 주문을 최소화된 선택으로 빠르게 처리할 수 있도록 돕습니다. 특히 출근길이나 바쁜 점심시간 활용해 효율성을 높일 수 있도록 했습니다.
3. 바텀네비게이션 바
사용자가 쉽게 사용할 수 있도록 직관적입니다. 자주 사용하는 메뉴 6개와 더 보기 메뉴가 한눈에 보이게 배치되어 있어 필요한 메뉴를 빠르게 찾을 수 있는 직관적인 UX를 볼 수 있습니다.
또한 스크롤 시 주문 메뉴 이외에는 미노출되는 방식을 택해 주문 메뉴를 강조하면서도 뷰포트 내에서의 답답함을 줄였습니다.
✢ Comment
보통 바텀네비게이션은 최대 5개 정도의 메뉴로 이루어져 있습니다. 사용자의 혼란을 피하기 위해서도 있지만, 그 이상으로 메뉴가 늘어나면 터치타겟 확보도 되지 않아 불편한 경우가 많기 때문입니다.
메뉴를 모두 꺼내어 사용자에게 Depth 없이 선택하려 함이 의도일 수 있겠지만,
메뉴가 너무 많아 사용자가 한눈에 볼 수 없거나 선택하기 힘든 경우도 고려하면 좋을 듯합니다.
2-1. 주문하기
주문하기 페이지 진입 시 탭을 통해 간편한 주문이 가능할 수 있도록 합니다.1. 탭 메뉴 - 매장선택
My 매장 탭이 디폴트로 사용자가 즐겨찾기 추가한 매장과 최근에 방문한 매장을 함께 노출합니다.
사용자 맞춤형 큐레이션을 통해 선택과정을 최소화하는 UX전략 인 셈으로,
인지적 부담(Cognitive Load)을 줄여 사용자가 보다 직관적인 탐색 경험을 할 수 있습니다.
2. 탭 메뉴 - 간편 주문
사용자가 설정한 메뉴 옵션을 저장해 둔 목록으로, 개인화된 주문 경험을 강화하는 UX 전략으로 볼 수 있습니다. 간편 주문을 기본 주문화면으로 선택할 수 있도록 하여, 사용자의 주문 프로세스를 최적화하고 반복적인 선택 과정을 최소화했습니다.
3. 탭 메뉴 - 최근주문
사용자가 별도의 추가 선택 없이 빠르게 최근 주문을 반복할 수 있도록 합니다. 이를 통해 주문 과정에서의 인지적 부담을 줄이면서 효율적인 재주문 경험을 제공해 사용자 편의성을 극대화했습니다.
2-2. 주문하기
1. 메뉴 검색
바나프레소의 메뉴 검색 기능은 상당히 정교하게 설계되어 있습니다.
단순히 메뉴 명 검색에서 나아가 음료의 특징을 태그화해 원하는 메뉴를 더 세밀하게 찾을 수 있습니다.
이러한 태그 기반의 탐색 방식은 세밀한 사용자 경험을 제공합니다.
2. 음료 온도 설정
바나프레소는 메뉴를 ICE와 HOT으로 구분 하지 않고, 사용자가 주문 시 음료의 온도를 선택하도록 설계되어 있습니다. 실수를 방지할 수 있는 UX접근법으로 보입니다. 음료 온도를 선택해야만 주문 버튼이 활성화되도록 해, 사용자가 주문하고자 했던 음료를 정확히 선택할 수 있도록 합니다.
✢ Comment
스타벅스의 경우, 메뉴를 ICE / HOT으로 구문해 아이스아메리카노와 일반 아메리카노를 별개의 메뉴로 제공하고 디폴트로 음료의 온도가 설정됩니다(바꿀 수 있음) 이러한 방식은 사용자가 빠르게 선택할 수 있도록 돕지만, 일부 사용자는 실수로 잘못된 음료 온도를 선택할 수 있습니다.
3. 음료 옵션 설정
음료 온도를 설정하면 아래에 나오는 옵션 메뉴로 음료를 커스터마이징 할 수 있습니다. 많은 서비스에서는 펄스널 옵션을 숨기거나 기본적으로 닫아두는 경우가 많지만, 바나프레소는 음료 온도 선택 후 자동으로 해당 옵션으로 넘어가게 해 사용자가 추가 설정을 쉽게 할 수 있도록 했습니다. 이러한 부분은 고객 맞춤형 경험을 강조하는 UX요소로 볼 수 있습니다.
3. 실시간 현황
1. 주문 전 실시간 매장 현황
주문 시 사용자 앞에 진행 중인 메뉴가 얼마나 있는지 알 수 있어 사용자가 시간을 예측할 수 있도록 돕습니다. 특히 출근 시간대와 같이 바쁜 시간에는 사용자에게 미리 주문을 하거나 시간을 조정할 수 있는 정보를 제공하여, 혼잡함을 피하고 더 나은 경험을 제공합니다.
✢ Comment
월요일과 같은 바쁜 날에는 종종 100잔이 넘는 음료가 이미 제조 중인 모습을 볼 수 있었습니다. 이런 날에는 출근길에 맞춰 미리 주문하거나, 혼잡한 시간대는 피해서 주문하는 방식으로 기다리는 시간을 최소화할 수 있었습니다.
2. 주문 후 실시간 제조 현황
주문 후에는 실시간으로 제조 현황을 보여줘 사용자에게 음료 준비 시간을 더욱 세밀하게 예측할 수 있는 기능을 제공합니다. 예를 들어, 내 앞의 주문이 모두 아이스아메리카노라면, 주문이 밀려있더라도 음료 제조 시간이 상대적으로 빠를 것임을 예상할 수 있게 됩니다.
4-1. 오프라인 경험 - 매장내부
1. 실시간 순서 노출
실시간 순서와 대기 상태를 내부 화면에 노출해 사용자에게 진행 상황을 명확하게 전달합니다. 사용자 닉네임과 프로필 이미지를 함께 보여주어, 앱을 사용하지 않던 고객도 해당 화면을 통해 앱을 설치하고, 닉네임과 프로필 이미지를 등록하는 자연스러운 유도 효과를 얻을 수 있습니다.
✢ Comment
닉네임으로 출근이 싫다 표현하는 사용자들도 많았고, 본인이 키우는 강아지나 고양이 이미지를 프로필 이미지로 설정해 강아지 고양이자랑을 하는 사용자들도 있었습니다. 이런 부분들은 사용자들의 힘든 아침에 작은 웃음을 주는 요소가 되었고 사용자 간의 소소한 소통을 도우면서 앱 사용경험을 보다 더 따뜻하고 친근하게 만들어주었습니다.
2. 월간 구매 랭킹 노출
월간 구매 랭킹을 공개함으로 사용자가 자신의 순위를 확인하고, 이를 기반으로 충성고객들 간의 랭킹경쟁을 유도합니다. 이러한 부분은 사용자의 참여를 독려하고 지속적인 이용을 유도하는 긍정적인 경쟁 요소를 제공하여 사용자의 충성도를 높이는데 기여할 수 있습니다.
4-2. 오프라인 경험 - 주문 라벨 활용
주문 옵션 확인 라벨에 랜덤으로 제공되는 오늘의 운세나 마음의 소리 같은 문구는 사용자들이 매번 새로운 문구를 기대하게 만듭니다. 사용자 경험에 작은 재미를 더하는 방식은 단순히 커피를 사는 경험을 넘어서, 같은 가격대의 저가 커피를 구매할 때 바나프레소를 선택하는 이유가 될 수 있습니다.
✢ Comment
바나프레소의 오늘의 운세는 출근 후 동료들끼리 서로 오늘의 문구를 공유하며 하루를 시작하는 즐거운 계기가 됐습니다. 운세를 맞춰보기도 하고, 동료와 아침에 가벼운 대화를 나누는 재밌는 순간을 만들어주었습니다.
