[스타벅스앱] 사용성 테스트(UT), 디자인 개선
스타벅스앱으로 UT를 진행 후 인사이트를 도출해 개선 디자인 작업을 해보았다. 아래와 같이 두 가지 테스크로 다섯명의 참여자와 UT를 진행하였다.
UT 결과성공은 모두 했지만 사실 도움 요청을 가능하게 했기 때문에, 도움 요청 기회가 없었다면 실패가 분명 나왔을 것이다. 도움을 주더라도 끝까지 진행하도록 해서 테스크를 수행하기 위한 프로세스 뒷부분까지 어떤 문제점이 있는지 확인하고자 하였다.
UT를 진행하며 오류는 어디서 났는지, 사용자의 표정은 어떤지 노트테이킹을 계속 진행하였고 UT이후에는 테스크를 수행하며 어떤 감정을 느꼈는지 물어보았다
TASK 1 - 사이렌오더로 돌체라떼 주문하기
문제 : "에스프레소"가 커피류라고 생각되지 않는다.
TASK 1에서는 참여자 모두가 같은 부분에서 오류를 보였다. 돌체라떼를 찾기 위해서는 에스프레소 카테고리로 진입해야하는데, 참여자 모두 에스프레소 카테고리에 돌체라떼 메뉴가 있을 것이라고 예상하지 못했다. 2명은 도움 요청으로 들어갔고, 나머지 두명은 검색 기능을 활용하여 돌체라떼를 찾았다. 한 명만 에스프레소에에 진입하여 돌체라떼를 찾았는데 이전에 다른 메뉴를 4번이나 들어갔다 나오는 오류가 있었다.
이 테스크가 끝나고 인터뷰를 하였을 때 에스프레소 카테고리에 어떤 게 있을 것 같았는지 물어봤을 때, 진짜 에스프레소만 있을 것 같았다고 답한 사용자가 있었다. 에스프레소 카테고리는 에스프레소 함류음료, 즉 커피류를 뜻하는 것인데 사용자들은 진짜 에스프레소 메뉴를 생각한 것이다. 사용자 입장이 아닌 판매자 입장의 라이팅으로, 대표적인 UX 라이팅 실패사례라는 생각이 들었다.
사용자가 원하는 음료를 찾기 편하도록 개선하였다.
1. UX 라이팅 변경 : 에스프레소 -> 커피
헷갈리는 "에스프레소"가 아닌 "커피"라는 이름으로 바꿔 좀 더 이해하기 쉬운 라이팅을 사용했다.
2. 각 메뉴(카테고리)에 들어가지 않아도 바로 음료
가 보이도록 한 Depth 제거
기존의 방식대로 카테고리에 들어가야 각 카테고리의 메뉴가 보이는 형식으로 한다면, 원하는 음료를 찾기 위해 각 카테고리 페이지를 들어갔다 나왔다 하는 액션이 생길 가능성이 높다. 그래서 각 카테고리를 위에서 가로로 스크롤 하며 볼 수 있고, 아래 메뉴는 세로 스크롤로 바로 찾아볼 수 있도록 하였다. 즉 카테고리 페이지에 들어가야 메뉴가 보이는 뎁스 하나를 삭제하였다.
3. 한 줄에 메뉴 두개씩 배치
한 화면에 더 많은 메뉴가 배치되면 한 눈에 더 많은 메뉴를 볼 수 있고, 원하는 메뉴를 찾기 위해 스크롤 하는 과정이 상대적으로 줄어들 것이다.
TASK 2 - 나만의 메뉴 등록하기
나만의 메뉴란? 스타벅스는 샷 추가, 시럽 추가, 얼음 양 조절 등 다양한 퍼스널 옵션이 있어 개인 취향에 맞게 메뉴를 커스터마이즈할 수 있다. 나만의 메뉴는 퍼스널 옵션을 저장하고 이후 퍼스널 옵션이 저장된 메뉴를 바로 주문할 수 있도록 하는 기능이다.
카라멜 프라푸치노 - 그란데 사이즈, 저지방 우유로 옵션 변경 후 나만의 메뉴 이름을 “카라멜 그란데 저지방” 으로 등록하는 것이 task 2였다. 이 테스크에서는 총 3가지 문제를 발견할 수 있었다.
나만의 메뉴는 메뉴 선택후 주문하기에 들어가 퍼스널 옵션을 적용하고 왼쪽 하단의 하트를 눌러 원하는 이름을 적고 저장할 수 있다.
문제 1 : 하트가 너무 작다!
UT에서 한번에 하트를 찾은 사용자는 한 명 밖에 없었다. 한참 해맨 뒤 이건가? 하며 눌러보고 겨우 발견하는 느낌이었다. 하트가 좀 더 잘 보이도록 오른쪽 상단으로 위치를 바꾸고, '나만의 메뉴'라는 텍스트도 추가해 하트의 기능을 명확히 알 수 있도록 했다.
문제 2: 주문하기를 통해서만 나만의 메뉴 등록이 가능하다.
스타벅스 앱을 자주 사용하던 사용자가 이 테스크를 수행한 뒤 이런 기능이 있는지 몰랐다며 굉장히 편하고 좋은 기능인데 너무 숨겨져있는 것 같다는 의견을 주었다.
일단 나만의 메뉴 페이지에서는 나만의 메뉴를 등록할 수 있는 기능이 없다. 나만의 메뉴를 등록하기 위해서는 '주문하기'를 선택해야만 한다. 나만의 메뉴를 등록할 수 있는 경로가 너무 숨겨져 있다보니 좋은 기능을 많이 사용하지 못하는 것 같았다. 그래서 개선 디자인에서 나만의 메뉴를 등록할 수 있는 경로를 두 가지 추가했다.
첫번째는 상단에 "주문했던 메뉴를 나만의 메뉴로 등록해보세요"라는 문구의 버튼을 선택하여 히스토리에서 나만의 메뉴를 등록하는 방법이다. 히스토리에서는 메뉴명과 적용한 퍼스널 옵션을 볼 수 있고 하트를 눌러 나만의 메뉴를 등록할 수 있게 하였다.
두번째는 나만의 메뉴 페이지 아래 + 아이콘의 플로팅 버튼으로 바로 등록하는 방법이다. 해당 버튼을 선택하면 order 페이지와 똑같이 메뉴 탐색을 할 수 있다. 대신 주문하기와 다르게 메뉴 선택후 퍼스널 옵션을 적용하면 우측 하단 버튼이 '주문하기'가 아닌 '나만의 메뉴 등록하기'로 이어진다.
문제 3: 나만의 메뉴 저장 후 어떤 퍼스널 옵션을 적용했는지 알 수 없다.
퍼스널 옵션 적용 후 나만의 메뉴를 등록해놓으면 나만의 메뉴 페이지에 사용자가 지정한 이름으로 저장되게 된다. 하지만 어떤 퍼스널 옵션을 적용해놨는지는 보여지지 않는다. 여러 퍼스널 옵션을 적용해놨을 때 이를 이름에 반영하기도 쉽지 않기 때문에 적용한 퍼스널 옵션을 보여주는 디자인으로 개선했다.
평소 자주 쓰던 스타벅스앱이었는데 UT와 개선 작업을 하게되서 재밌었다. 스스로 앱을 분석하는 것도 좋지만 역시 UT는 할 때마다 여러 사용자의 시선으로 어떤 불편함이 있는지 알 수 있어 새로운 인사이트를 주는 것 같다.
