'스타벅스' 사이렌오더
UI를 바꿔보자
[코드스테이츠 PMB 8기] UI/UX 와이어프레임과 프로토타이핑
(위의 내용에서 이어집니다.)
지난번에 '스타벅스' 앱의 좋은 UX와 안 좋은 UX를 고객 핵심 활동을 통해 알아보았다.
스타벅스 사이렌 오더 결제 고객 핵심 활동사이렌 오더를 이용하는 고객의 경우 앱 사용시간이 길기 때문에 발생되는 안 좋은 UX들이 생겼다. 그래서 사이렌 오더 결제 고객의 핵심 활동을 통해 안 좋은 UX들의 우선순위를 다음과 같이 선정했다. (Bad 한 소비자 사용 경험을 겪는 결제, 그리고 SoSo 한 소비자 사용 경험을 겪는 둘러본다, 그다음 HAPPY 한 소비자 사용 경험을 느끼는 사이즈, 컵, 퍼스널 옵션 선택과 메뉴를 고른다 순으로 우선순위를 선정)
스타벅스 앱의 (사이렌 오더 결제 고객) 안 좋은 UX
1. 결제 - 사이렌 오더 취소 불가능, 결제 페이지에서 경고 텍스트 위계 불분명
2. 둘러본다 - 자주 이용하는 메뉴, 지난번에 이용한 메뉴 확인 불가능
3. 사이즈, 컵, 퍼스널 옵션 선택 - 퍼스널 옵션을 선택 후 개별 취소 불가능(초기화 후 다시 선택해야 함)
4. 메뉴를 고른다 - 메뉴 자체만 저장 좋아하기 기능은 없고 사이즈, 컵 선택해야 함. 나만의 메뉴를 선택하고 주문 시 변경 불가능
추가적으로 사이렌 오더 주문 시 주문하기 UX가 중복된다는 사실을 알았고 이런 UX까지 함께 개선해 보고자 한다.
'스타벅스' 사이렌 오더 주문 UX/UI 개선
페이퍼 프로토타입으로 작성하기
사이렌 오더 주문 기존 방식
사이렌 오더 주문 개선 페이퍼 프로토타입사이렌 오더 주문 고객이 어떤 방식으로 앱을 통해 주문을 하는지 스토리를 따라 개선점을 파악해 보자.
•둘러본다 / 메뉴를 고른다
처음 앱 화면에 들어갔을 때 자주 이용하는 메뉴, 지난번에 이용한 메뉴 확인 불가능한 UX가 있었고 이를 개선하기 위해 '00님이 최근 즐겨 찾는 메뉴입니다.' '00님의 취향과 비슷해요'와 같은 카피 문구를 변경한 UI를 추가했다. 그리고 메뉴를 고른 뒤 선택을 하게 되면 주문하기 버튼이 나온다. 하지만 이때 주문 뒤에 바로 사이즈, 컵, 퍼스널 옵션을 선택하는 화면이 나오고 다시 다시 주문하기 버튼을 눌러야 한다. 중복적으로 나오는 주문하기 버튼 카피 문구는 사용자에게 혼선을 줄 수 있기 때문에 '옵션 선택하기'와 같은 문구를 변경한 UI를 추가했다.
•사이즈, 컵, 퍼스널 옵션 선택
그다음 옵션을 선택하러 들어가서 드롭 다운 리스트를 펼쳐보면 각각의 퍼스널 옵션을 선택할 수 있다. 하지만 이 각각의 퍼스널 옵션 중 휘핑크림을 선택하는 경우는 적용하기를 누른 뒤 다시 취소를 할 수 없다. 취소를 하기 위해서는 퍼스널 옵션 메인화면에서 초기화 버튼을 눌러야 한다. 사용자는 퍼스널 옵션 메인화면과 휘핑크림 화면을 번갈아가며 눌러야 하기 때문에 UX가 복잡해진다. 그래서 각 퍼스널 옵션마다 초기화 버튼을 달아 이러한 부분을 개선하고자 한다.
•결제 옵션 / 결제
기존 사이렌 오더 결제 마지막 화면기존에는 결제 버튼을 누르면 어디 매장에서 주문하는지 확인을 하고 결제 및 주문하기 버튼을 누르는 방식으로 되어있다. 하지만 '광주 월산 DT점으로 주문하시겠어요?'와 같은 매장 안내에 대한 문구가 마지막 CTA와 너무 떨어져 있고 현재 사이렌 오더에 대한 설명 내용의 위계가 약하게 표시되어 있다. 결제 및 주문하기 버튼에 '결제와 함께 주문전송이 돼요! 주문을 다시 한번 확인해 주세요!'라는 경고 문구가 보이지만, 제일 중요한 '주문 완료 후에 일체의 주문 변경 또는 취소가 불가하다'라는 내용이 빠져있다. 가장 중요한 내용이 빠져있기 때문에 사용자는 사이렌 오더 이용 시 이 부분을 잘 인지하지 못할 가능성이 커 이러한 UI를 개선하고자 한다.
변경된 UI에서는 매장 사진을 최 상단으로 올리고 그다음 사용자가 마지막에 꼭 확인해야 할 매장, 주문내역 순으로 확인할 수 있도록 구성했다. 매장에 대한 위치와 그 옆에 '매장에서 받기, 차량에서 받기' 문구를 표시해 매장 이용정보를 확실하게 알 수 있도록 구성했다. 그리고 주문내역은 이전에 한번 확인한 상항이기 때문에, 너무 많은 내용이 한 페이지에 담기지 않게 하기 위해서 드롭 다운 리스트로 주문내역을 확인할 수 있도록 UI를 개선했다.
그리고 그다음으로는 CTA 버튼과 가깝게 안내 문구를 기입해 기존 문제를 개선했다. 안내 문구를 말풍선 모양에 넣고 '매장과 주문내역이 맞습니까?'라는 문구 바로 위에 위치하도록 구성했다. 이러한 UI를 통해 매장과 주문내역을 확인할 때 무언가 숙지해야 하는 상황이 있다는 느낌을 사용자가 받을 수 있도록 했다. 마지막 질문에 '네, 맞습니다'로 확인하면 자연스레 확인에 대한 동의를 받게 된다. 또한 이미 결제하기 버튼을 눌렀기 때문에 사용자는 결제 UX를 중복으로 경험하지 않아도 된다.
'스타벅스' 나만의 메뉴 주문 UX/UI 개선
페이퍼 프로토타입으로 작성하기
그리고 마지막 우선순위로 있었던, 나만의 메뉴로 저장했던 음료의 사이즈와 컵 옵션을 바꾸지 못하는 부분의 UI를 개선해 보았다.
나만의 메뉴 기존 방식 (옵션 선택을 할 수 없었다)
나만의 메뉴 옵션 변경 페이퍼 프로토타입기존에는 나만의 메뉴에 들어가서 담기 혹은 주문하기를 누르면 바로 결제 페이지로 이동하도록 구성되어 있었다. 그래서 결제하기 바로 전에 옵션 창을 하나 추가했다. 나만의 메뉴에서 주문하기 버튼을 누르면 사이즈와 컵을 선택할 수 있는 옵션이 나오도록 구성했다. 나만의 메뉴 자체가 이미 저장해둔 퍼스널 옵션을 기반으로 구성되어 있기 때문에 퍼스널 옵션은 생략했다. 상단에 내가 주문한 메뉴를 보여주고, 그 밑으로 내 상황에 맞게 변경 가능한 사이즈, 컵 선택 옵션 UI만 간단하게 추가함으로써 기존 UX를 개선했다. 결제하기 버튼 이후에는 위에서 개선한 내용을 따라 주문과 결제를 완료할 수 있도록 했다.
건축을 설계하다 서비스까지 설계하는 본 투 비 설계자의 PM도전 프로젝트
