10회. 공차 키오스크 UX 프로젝트
빨리 만들어서 사용자에게 피드백 받기
공차 서여의도점에서 키오스크로 음료를 주문하는 고객<Tech보다 UX>는 짧은잡지 형식으로 매월 2회 발행을 목표로 하고 있습니다.
기술만을 강조하다 보면 기술의 함정에 빠지기 쉽죠.
이미 나온 기술이더라도 UX 관점에서 어떻게 조합하느냐에 따라서 사용하기 편리하고 나아가 새로운 개념의 제품이 탄생하기도 합니다. 이런 Needs에 따라BANGLAB.(www.banglab.com)에서는 최근 인기를 끌고 있는 제품들을UX 관점에서 토론해 보고 그 결과를 정리해서 공유합니다.
이번 열 번째 이야기에서는 지난 10월 공차 서여의도점에 선보인 키오스크와 디지털 메뉴 보드의 UX 프로젝트를 진행한 이야기를 준비해 보았습니다.
기획 단계부터 고객이 기민하게 참여한 사례로, 프로젝트 시작부터 매장에 선보이기까지 3개월이란 시간이 걸렸지만 실제로 키오스크와 메뉴 보드의 UX와 UI를 도출하여 요구사항으로 만들어내기까지는 하루밖에 소요되지 않았습니다. 이 때문에 그 과정을 공유하고자 열 번째 이야기로 선정했습니다.
UX로 마술을 부리는 그 열 번째 이야기 시작합니다.
D-6. 공차 프로젝트의 시작
새로 시작하는 프로젝트에 프로토타이핑 워크숍을 하고 싶어요. 작년에 저희 앱에서 진행하셨던 paper prototyping을 통해 3시간 만에 산출물이 나오고, 그 산출물을 바탕으로 의사결정을 했던 것이 매우 인상 깊었어요.
프로젝트를 진행하다 보면 "요구사항이 분명하지 않아요", "기획에서 좀 더 디테일한 요구사항까지 전개해서 전달하면 좋겠다."는 말을 개발팀으로부터 종종 듣습니다.
제품이 만들어지는 전 과정을 봤을 때, 요구사항이 그저 추상적인 한 줄짜리 문장이 아니라 좀 더 구체적이고, 실제로 만들어질 제품/서비스처럼 눈으로 볼 수 있다면 기획자와 개발자 간 이해도의 차이가 좀 더 줄어들 수 있다고 생각합니다. 제품을 좀 더 완성도 있게 만들려면 기획자와 개발자가 이해한 것에 공백이 안 보일 정도로 간격이 좁혀져야지만 만족스러운 결과물을 얻을 수 있습니다.
그래서 제가 진행하는 워크숍의 산출물이 하드웨어 제품을 만들어 내는 기획자의 영역에서 기본적으로 만들어내야 하는 산출물로 인식했으면 좋겠다는 생각에 흔쾌히 이번 일을 함께하기로 했습니다.
D-5.사전미팅
잘 정리된 보고용 자료 안에는 요약된 문장과 함축된 그림이 들어있어요. 하지만 제품을 만드는 데 필요한 것은 잘 정리된 문장이 아니라, 문장 사이에 생략된 내용과 전체적인 맥락이죠.
워크숍에 앞서 사전 미팅을 1.5시간 가졌습니다. 그 전에 잘 정리된 보고 자료를 미리 받았습니다.
보고용으로 작성된 자료는 요약된 문장과 함축된 그림으로 빼곡하게 정리됩니다. 이러면 문장 사이에 생략된 내용과 전체적인 맥락이 표현되지 않기 때문에 직접 만나서 이야기 나누는 것을 선호합니다. 궁금하거나 더 파악해야 할 내용은 질문으로 빠르게 알아낼 수 있고, 중요해 보이는 내용은 재확인할 수 있으니까요.
사전 미팅이 진행되는 동안 '우리가 하려는 사업이 어떤 분야인지', '프로젝트가 시작된 계기','그동안의 진행 상황' 등에 대해 들을 수 있었습니다. 더불어 고객이 원하는 바와 우리가 만들고자 하는 것이 무엇인지 파악했습니다.
공차 프로젝트의 목표는 두 가지였습니다.
1) 고객이 몰리는 peak time에 주문이 늦어지는 고객 유출을 막기 위해 키오스크 도입
2) 눈에 잘 띄지 않는 종이 메뉴 보드를 디지털 메뉴 보드로 교체
워크숍은 phase 1, 2로 키오스크와 메뉴 보드를 나누어 진행하기로 했습니다. 사전 자료와 미팅 중 확인한 내용을 바탕으로 지점 선택과 타겟 고객에 대해 몇 가지를 제안하기도 했습니다.
D-Day. 키오스크 사용자 시나리오 도출 워크숍
1. 참석자
워크숍에는 기획자 2명, 고객사 3명(실제 매장에서 일해본 직원, 개발자, PM)이 참석했습니다. 저는 퍼실리테이터 겸 Business Analyst 역할을 맡았습니다.(BA는 실리콘밸리에서는 흔합니다만 국내에서는 잘 알려지지 않았습니다. 기획과 개발의 공백을 줄여주는 역할을 합니다)
Tip) 워크숍 참석자는 산출물 도출에 기여할 수 있는 사람을 선정해야 합니다.
이번엔 매장에서 일해본 직원이 참여함으로써 음료 구매 시에 주문을 어떻게 받고, 어떤 과정으로 포스에 입력하는지 일련의 과정을 자세히 알 수 있었습니다. 그 경험이 실제 사용자 시나리오 도출하면서 순서를 정할 때 정말 큰 도움이 되었습니다.
2. 워크숍 진행 순서
워크숍 진행 순서는 다음과 같습니다.
워크숍이 끝나고 나면 키오스크의 UX flow와 화면이 산출물로 만들어집니다.
3. 공차 과제에서 풀어야 할 것들
가장 먼저 한 일은 공차 프로젝트에서 풀어야 하는 것을 가시화하는 일이었습니다.
워크숍 진행 중에 나오는 내용은 모두 벽에 붙여두고 참석자들이 계속 인지하도록 하여 키오스크의 UX에 녹여냈습니다.
Tip) 워크숍을 진행할 때 나온 내용은 참석자들이 볼 수 있는 곳에 글과 그림으로 적어둡니다. 말로 설명하는 것보다 글과 그림을 눈으로 계속 보는 것이 참석자들 간의 눈높이를 맞추는 데에 매우 중요한 역할을 합니다.
4. Persona 만들기
키오스크가 설치될 서여의도점의 주요 고객인 직장인을 persona로 선정
다른 persona는 이후에 설치매장 확대 시 활용할 수 있도록 참고자료로 사용함
persona들이 느끼는 pain point와 needs 중 키오스크에 공통 반영할 내용 점검하기
5. Pain point, needs & solution 도출
좌측의 분홍색은 pain point, 파란색은 needs입니다. 우측의 파란색만 있는 내용은 pain point와 needs를 해결하기 위한 solution입니다.
Tip) Pain point와 needs는 포스트잇 색상으로 구분합니다.
6. 키오스크 UX 시나리오 만들기 (Paper prototyping)
워크숍의 핵심인 키오스크 시나리오 만들기입니다. Paper prototyping으로 진행되며, 크게 세 단계로 진행됩니다.
1. 메인 시나리오 선정
2. 화면 그리기
3. 시뮬레이션
3.1. 시뮬레이션
3.2. 추가/수정할 내용 반영
1. 메인 시나리오 선정 (11단계 도출)
01. 키오스크 앞에 선다
02. 주문 창 활성화
03. 수량 선택
04. 음료 선택
05. 사이즈 선택
06. 토핑선택
07. 당도 선택
08. 얼음 선택
09. 결재– 카드 & 티머니
10. 멤버십 적립
11. 영수증 출력 + 대기번호
2. 화면 그리기
앞서 전개한 메인 시나리오를 바탕으로 각각을 한 장의 화면으로 그립니다.
화면을 그리던 중 03부터 08까지 나열되어 있던 옵션 선택 화면에 대해 의견이 분분했습니다. 우리는 실제 고객들이 어떠한 순서로 주문하는지 확인하여 고객 중심적인 UX를 반영하고자 5개 단계를 합쳐 한 화면에서 옵션사항을 모두 선택하게 했습니다.
1. 키오스크 앞에 선다
2. 음료, 수량 선택
3. 옵션선택
3-1. 사이즈
3-2. 토핑
3-3. 당도
3-4. 얼음
4. 결재 : 카드 & 티머니
5. 멤버십 적립
6. 영수증 출력 + 대기번호
이러한 결정은 매장에서 일한 경험이 있는 직원이 매장에서 직접 주문을 받을 때 고객과 어떤 대화를 나누는지 들어보는 것에서 비롯됐습니다.
이번 프로젝트가 풀고자 했던 문제는 “고객이 가장 많이 몰리는 peak time에 고객 유출을 막자"는 것이었습니다. 그 해결 방안으로 선택한 것이 주문을 빠르게 할 수 있는 키오스크였습니다.
공차 서여의도점의 주요 고객은 직장인입니다.
Peak time인 점심시간에는 여러 명의 단체고객이 매장을 방문하고, 그중 한 명이 대표로 여러 잔의 음료를 주문합니다. 실제로 공차 매장에서 직원이 주문을 받을 때 먼저 음료를 모두 선택하고 각각의 옵션을 이후에 선택하여 포스에 입력합니다. 선택해야 하는 옵션이 다른 경쟁사보다 많기 때문이죠.
실제 매장 경험이 없었다면 주문을 어떻게 하고 받는지 그 흐름을 알 수 없었을 것입니다. 그랬다면 공차 키오스크는 다른 일반적인 키오스크와 비슷해졌을 것입니다.
3. 시뮬레이션
각각의 화면을 빠르게 완성한 후 실제 키오스크를 사용하는 것처럼 시뮬레이션을 해보니 몇 가지 화면이 더 필요했습니다.
1. 키오스크 앞에 선다
2. 음료, 수량 선택
3. 옵션 선택
3-1. 사이즈
3-2. 토핑
3-3. 당도
3-4. 얼음
4. 주문정보확인
5. 결재 : 카드 & 티머니
6. 멤버십 적립
7. 적립내용 확인
8. 영수증 출력 + 대기번호
9. 메시지 ‘공차를 찾아주셔서 고맙습니다.’
4. 최종
추가된 화면을 포함하여 실제로 키오스크로 주문하는 것처럼 다시 시뮬레이션합니다. 이 과정에서 새로이 추가할 내용과 뺄 내용을 포스트잇에 적어 각 화면에 붙입니다.
이번엔 전체적인 화면 구성보다는 세부적인 부분에 대한 의견들이 나옵니다.
바로 반영해야 하는 것과 다음 phase로 넘겨 진행할 것에 대해 우선순위를 정하고, 그 자리에서 각자 할 일과 일정을 정했습니다.
키오스크에 구현된 실제 UI 화면
석 달 후 실제 키오스크에 구현된 화면은 2.5시간 동안 paper prototyping을 통해 나온 산출물과 같았습니다. 워크숍을 진행한 입장에서 산출물과 실제 구현된 결과물이 똑같이 나오니 ‘워크숍이 정말 의미 있게 잘 진행됐구나’ 하는 생각이 들어서 기분이 좋았습니다.
실제 구현된 공차 키오스크 & 키오스크로 음료를 주문하는 고객이후 계획
워크숍에서 산출물이 나왔을 때 참석자들이 모두 합의한 것은, 오늘 이 산출물이 우리의 최종 결과물은 아니라는 점이었습니다. 우리는 Lean과 Agile 방법으로 이번 프로젝트를 진행하고자 했고, 따라서 매장에 설치한 이후 고객이 실제로 키오스크를 어떻게 사용하는 과정을 보며 키오스크의 소프트웨어도 변경하는 실험을 하고자 했습니다.
아무리 고객 조사를 열심히 했더라도 상황과 타이밍에 따라 그 결과물은 조사했을 때와는 다른 결과가 나올 수 있습니다. 프로젝트를 하다 보면 흔히 볼 수 있는 광경이죠. 계획했던 대로 이루어진다면 좋겠지만, 그것도 같은 일을 여러 번 반복했을 때에 비로소 계획이 좀 더 치밀하게 짜진다는 것을 우리는 알고 있습니다.
이번 공차 키오스크 프로젝트처럼 우리가 처음 도전하는 일인 경우, 오랫동안 계획을 세우는 것보다 일단 지금까지 고민한 것들로 시작점을 만들고 다음 단계를 하나씩 만들어나가는 방법이 오히려 risk를 감소시키는 방법이지 않을까 합니다. 그래서 Lean Startup들이 사용하는 방식을 사용했고요.
키오스크는 공차 서여의도점에서 만날 수 있습니다.
사용해보신 분들의 경험을 공유해주세요 :)
원본 : http://www.banglab.com/articles/techux-10
그 이후 이야기
2017년 1월,
우리가 재작년에 했던 공차 키오스크는 어떻게 됐냐고 물었더니, 실제 사용하면서 사용자 피드백이 몇 가지 나왔다고 한다. 그중 가장 흥미롭고 고객과 업체 모두에게 도움이 되었던 피드백은 이거다.
(고객) "골라야 하는 게 이렇게 많은 줄 몰랐어요. 줄 서서 주문할 땐 뒤에 사람들이 기다리니까 빨리빨리 주문하려고 늘 먹던 것만 먹었는데, 키오스크로 주문하면서는 새로운 메뉴와 옵션을 시도해서 다른 메뉴도 맛있다는걸 알게 됐어요."
(공차) "고객이 더 비싼 다른 옵션들을 선택함으로 인해 객단가가 높아졌어요. 공차의 메뉴 조합을 합치면 수백 가지가 되는데, 기존엔 그걸 알리기가 참 힘들었거든요. 결국 이 과제를 통해 공차의 콘셉트를 자연스럽게 알리고 싶었는데, 그게 해결된 거죠."
그리고 그 당시의 PM은 이사님으로 승진하셨다고 한다. 같이 워크숍을 하고, 이후에 이야기를 좀 더 나누면서 일을 잘하시는 분이란 느낌을 받았으니 아마 키오스크 때문만은 아닐 것이지만 말이다.
공차 서여의도점 이용 후기 : https://blog.naver.com/hayeoncandy/220979111014
2019년 3월,
WOW! 키오스크가 각 매장으로 확산됐나봐요!
http://blog.naver.com/kong_92/221457837082
