UX/UI 분석 및 개선 케이스 스터디2-스타벅스
개선점 도출
두번째 스터디는 개인사정으로 인해 1주차에 참여하지 못했다. 따라서 팀원들이 정리해준 개선점을 가지고 2주차 과제를 진행했다.
1주 - 앱서비스 1개 선정해 서비스 UI와 UX의 장점과 단점 분석 / 서비스 분석
2주 - 분석한 단점을 보완할 수 있는 UI 디자인 제안
두번째 프로젝트는 스타벅스다.
2주차는 기존 스터디 방식처럼 UX, UI의 장단점을 적기 보다는, UX, UI 전반의 개선사항을 한번에 도출했다.
크게
1. 홈 개선점
2.Order 개선점
3. 쿠폰관련 개선점
세 가지가 가장 큰 개선점이라고 생각하고 진행했다.
이 개선점은 팀원들끼리 1차적으로 개선할 점을 논의하고, User Test를 통해서 한 차례 근거를 입증했다.
본 게시물에서 유저 테스트의 내용은 생략했지만, 개선안은 유저 테스트를 진행한 후에 최종적으로 도출한 시안이다.
1. 홈 개선점
홈 개선점(1) 각종 광고, 이벤트 배너들로 인한 과도한 스크롤 길이
스타벅스는 홈화면의 문제점이 많았다. 이미지 속 왼쪽은 스타벅스 홈화면의 길이와 타 카페 브랜드 어플의 길이를 비교해놓은 것이다. 왼쪽부터 순서대로 할리스커피, 메가커피, 투썸플레이스의 홈화면이고, 마지막에 위치한 것이 스타벅스다. 한 눈에 봐도 두배 이상의 스크롤 길이 차이가 있다. 그렇다고 타 브랜드 앱보다 스타벅스가 많은 서비스를 포함하고 있느냐? 그것도 아니다. 공통적으로 중심 기능인 스마트 오더 기능과 이외에 딜리버리, 마이페이지, 페이, 더보기 , 이벤트, 쇼핑 등 타 어플에서도 찾아볼 수 있었으며 스타벅스가 기능의 수가 월등히 많았던 것도 아니다.
저렇게 긴 홈화면을 구성해야만 했던 이유는 뭘까. 오른쪽의 확대 화면을 보면, 홈화면에 쿠폰, 레벨 지수를 제외하고는 모두 광고성 배너가 차지하고 있다. 상단의 광고 배너, 추천메뉴, 이벤트 배너, 혜택 배너, 추천 음료, 캠페인 배너, 스타벅스 스토어 배너, 스타벅스 리저브 소개 배너 등, 대략 13개 정도의 광고 배너가 자리하고 있다. 앱의 얼굴이기도 한 홈에 모든 광고와 이벤트를 섞어놓았으니, 상단의 광고 배너에 대한 주목도는 현저히 떨어진다. 이전의 런드리고 홈화면에서 광고 배너가 가졌던 주목도와는 큰 차이가 난다. 너무 많은 정보의 양으로 선택과 집중이 전혀 반영되지 않은 UI를 보여주고 있다.
광고를 보고자 스타벅스 앱을 설치하는 사용자는 없을 것이다. 현재의 홈화면은 주 기능인 주문과 배달 버튼의 주목도가 다소 낮다. 따라서 주 기능인 Order 를 홈화면에서 강조하고, 배너의 수를 줄이고, 중요한 소식은 팝업 알림, 홈 화면 상단 배너, What’s New 메뉴에서만 제공해 불필요하게 길어지는 홈화면의 길이를 줄이는 방법을 고안했다.
홈 개선점(2) Delivers의 낮은 주목도
Orders와 Delivers는 단연 스타벅스 앱의 주요한 기능이다. 현재 스타벅스 홈에서는 Order를 하나의 페이지로 제공하고, Delivers는 홈화면의 하단에 플로팅 버튼으로 확인할 수 있다. (*2023년 12월 이후 Orders > 매장 선택 시 Delivers를 고를 수도 있음. ) 사이렌오더가 유저들이 실질적으로 많이 사용하는 기능인 것은 맞지만, 커피 브랜드가 자체적으로 배달까지 한다는 것은 정말 큰 메리트인데, 이 기능이 너무 돋보이지 않는다고 생각했다.
여느 배달 앱과 같은 구성을 가진 스벅 Delivers.
* 지나가다 본 글. Delivers 버튼이 잘 안 보인다는 의견결론적으로 홈에서의 개선점은
(1) 각종 광고, 이벤트 배너들로 인한 과도한 스크롤 길이
(2) Delivers의 낮은 주목도
정도로 정리할 수 있다.
이를 바탕으로 홈화면을 개선해보았다.
1. 홈 개선
홈화면 개선안개선한 점
1) 닉네임, 스타벅스 리워드를 강조하고 이외의 왓츠 뉴, 쿠폰, 알림 재배치
왓츠 뉴의 경우 아래에 펼쳐져있던 이벤트 배너들과 다른 점을 찾지 못해 이벤트 , 뉴스 배너로 통합했다. 또한 쿠폰과 알림은 중간에 배치하는 것 보단 우측 상단으로 옮겼다. 일반적으로 알림은 우측 상단에 위치하기 때문에 쿠폰과 알림을 우측 상단으로 빼는 것이 무리한 결정은 아니고 오히려 깔끔함을 더할 구성이라고 생각했기 때문이다.
2) 이벤트 & 뉴스로 모든 배너 통합
현재는 너무 과도한 스크롤 길이와 불필요한 정보들이 넘치기 때문에 최상단의 배너와 하나의 이벤트, 뉴스 탭이면 충분하다고 판단 하에 압축했다. 화면 길이가 실제로 3배 이상 줄어들었다.
3) 오더와 배달 재구성
사이렌 오더와 배달이 목적인 앱인 만큼 다른 부가적 요소 보단
오더와 배달을 중심적으로 보여주고자 했다. 현재는 ‘오더' 탭이 따로 있는데 배달은 플로팅 버튼으로 홈에 구성한 점에서 두 가지의 중요도가 너무나 다르게 느껴졌다. 배달 버튼은 가시성을 높이고, 사이렌 오더의 경우에는 'Order' 페이지로 한 차례 들어가야 하는 뎁스를 줄이고자 했다.
홈 중앙에 오더와 딜리버리를 통일된 아이콘으로 제공한다.
이때 오더와 딜리버리가 주 기능임을 확실히 인식할 수 있다.
어플에 접속한 목적을 실행하는 데에 더욱 빠르게 접근할 수 있을 것이다.
+ 부가적으로 추가 및 개선한 요소
4) 가까운 매장 제공
가까운 매장이나, 현재 있는 매장 같은 경우는 기존 앱의 하단 부에 일시적으로 올라오고 사라지는 형식으로 나타났다. 하지만 ‘오더’ 탭에 들어가거나 주문 페이지에 접속할 때만 매장을 보여주는 것 보다는 처음 접속했을 때 주문 가능한 매장을 거리 순으로 보여주어서 배달, 주문에 대한 생각이 1차적으로 들 수 있게끔하는 것이 중요하다고 생각했다.
이전에 도출한 홈화면에서의 개선점이 어느정도 해결된, 간결하고 주 기능의 목적은 충실하게 보여주는 홈화면으로 개선했다.
2. 오더(Order)탭 개선점
메뉴 선택화면이 상당히 길다.오더탭 개선점(1) 메뉴를 찾는 과정의 어려움
스타벅스 어플을 자주 사용하는 유저로서 원하는 메뉴를 찾기가 다소 어려웠던 경험이 있다.
스타벅스를 사용하면서는 잘 느끼지 못해도, 이렇게 보니 왜 세로로 모든 정보를 나열하려고 하는지 이해가 되지 않는 부분이 있었다. 스크롤 길이가 길어지다보면 오히려 밑에 위치하는 제품군은 노출되지 않을 가능성이 높다. 또한 'Trenta', '브루드 커피'등 한 눈에 메뉴 카테고리의 특성을 파악할 수 없는 경우도 있었다. 왼쪽에 이미지를 같이 제공하고 있어도, 그 하나의 메뉴가 모든 메뉴를 설명할 수는 없을 것이다. 안그래도 세로로 길게 나열되어 있어 피로도를 유발하는데, '추천'과 같이 굳이 필요하지 않은 카테고리도 보인다.
카페 스마트오더 앱 중 메가커피의 사용성이 스타벅스보다 좋았던 경험이 있다. 간결함이 장점으로 다가왔는데, 그 이유는 이미지를 보면 한 눈에 파악할 수 있다. 각각 메가커피, 스타벅스 앱을 통해 '커피 메뉴를 확인했다가 다시 프라푸치노(프라페) 메뉴를 확인해보기' 의 미션을 수행해보고 그 동안 확인할 수 있는 페이지 수를 캡쳐했다.
모두 같은 오더 탭에서 거쳐야 하는 액션의 수를 살펴보니 메가커피는 1번, 스타벅스의 경우는 3번이었다.
메가커피는 카테고리가 가로로 옮겨가며 선택할 수 있는 구조로 카테고리를 선택할 때, 해당 카테고리의 탭으로 이동하는 것이 아닌, 전체 메뉴가 변경되는 형식이었고, 스타벅스는 세로로 길게 늘어선 카테고리 중 원하는 카테고리를 선택하면 해당 카테고리의 탭으로 이동하고, 다시 뒤로가기 버튼을 눌러 다시 오더의 기본 화면으로 돌아와야 했다.
이렇게 구성했을 때의 문제점은, 먹고 싶은 메뉴를 염두해두고 들어간 유저와 메뉴를 탐색하며 고르는 유저 모두에게 불편한 구조인 것. 선택하는대로 메뉴가 전환되는 메가커피와 반대로 하나의 페이지에 들어갔다가 나와야 하는 식의 구성은 메뉴를 찾는 데에 시간을 많이 소요해야 할 것이다. 또, 아래로 내리면서 여러 메뉴를 확인하는 스타벅스는 한 화면에 4개의 메뉴를 인식할 수 있는 반면에 메가커피는 하나의 카테고리에 들어있는 음료 메뉴들을 한 눈에 확인할 수 있어 한 번에 6개의 메뉴를 동시에 확인할 수 있다. 아래로 내리면서 메뉴를 확인하는 구성보다 한 눈에 많은 메뉴들을 확인할 수 있도록 한다.
따라서 스타벅스의 카테고리 세부 탭을 제거하고, 상단에서 카테고리를 가로로 넘기면서 선택할 수 있는 구성으로 변경하는 것이 목표이다. 오더탭 속 메뉴 선택의 불편함이 더욱 의아한 점은 사이렌 오더(To-go, 매장 이용)과 Delivers(배달) 가 각각 다른 메뉴 선택 화면을 제공하고 있다는 점이다.
오더 탭은 세부 메뉴 확인까지 한 번 더 뎁스가 있는 반면에 Delivers는 메가커피의 메뉴선택 화면과 비슷한 구성을 가지고 있었다. 한 눈에 알아볼 수 있도록 임의로 카테고리 범위에 따라 1차 카테고리(음료/푸드/상품), 2차 카테고리인(추천 / 피지오 / 에스프레소 / 블론드 / 디카페인커피 / 프라푸치노...) 그리고 2차 카테고리를 구성하는 세부메뉴인 3차 세부 메뉴로 각각 분류했다. Order 탭의 경우, 가장 상단에 전체메뉴/ 나만의 메뉴 / 홀케이크 주문이 한 차례 더 존재하고 있음을 감안해도 세로로 길게 늘어진 2차 카테고리와 페이지가 독립적으로 존재하는 3차 세부 메뉴들은 세 개의 그룹을 동시에 보여주는 Delivers의 화면 구성보다 간결하지 않은 느낌을 준다.
기존의 Order화면이 Delivers와 같다면, 지금 이렇게까지 장황하게 설명을 하지는 않았을텐데 ...
오더탭 개선점(2) 주문 프로세스의 불편함
*(2023년 12월 업데이트로 해결됨)
매장선택을 첫번째로 유도하지 않아 '주문초기화'의 불편함을 겪어야 하는 상황두번째로는 '주문'이 가장 주가 되는 어플이라면 매우 중요한 지점인 바로 주문 프로세스이다.
스타벅스 매장의 근처 또는 스타벅스 안에 있다면, 사용자의 위치를 기반으로 자동으로 매장이 하단부에 팝업으로 뜨고 매장 선택이 되면서 음료를 고를 수 있는 화면으로 넘어가는 구조이다.
하지만, 만약 매장 근처가 아닌 경우에 주문할 때에는 하단에 ‘주문할 매장을 선택해주세요.’ 라는 문구가 뜬다. 이때 매장이 아닌 음료를 먼저 선택하고 '주문하기' 버튼을 누르면, '주문할 매장을 선택해주세요.'라는 팝업창이 뜬다. 이때 문제는 내가 담았던 메뉴들은 모두 초기화가 되고 매장 선택화면으로 넘어간다는 점이다. 매장 선택을 완료하고 다시 주문 과정을 이어가고 싶은 유저는 다시 메뉴를 재선택해야한다.
이때, 문제점은 스타벅스는 아예 매장 선택 과정이 선행되어야 한다는 것을 전혀 유저에게 인지시키지 못 하고 있었다는 점이다. 매장 선택이 화면 하단에 위치하기에 매장 선택이 먼저 돼야 하는지 전혀 알 수 없는 구조이다.
따라서 정리하자면,
1) 음료선택이 먼저일 때의 과정 : 음료 선택 > 주문하기 > '주문할 매장을 선택해주세요'> 매장선택 > 주문 초기화 > 메뉴 재선택
2) 매장 선택이 먼저일 때의 과정 : 매장선택 > 음료선택 > 주문 O
매장을 먼저 선택했을 때가 매끄러운 서비스 플로우를 가졌다. 사실 상 매장 선택이 먼저 되는 것이 첫번째 조건이라는 것과 같은데, 매장선택을 첫번째로 유도하지 않은 것인지에 대한 의문이 든다.
또한 To- Go 와 매장이용 / 딜리버스를 첫 매장 선택 시에 선택하면 그대로 고정된다. 중간에 포장을 매장으로 변경하고 싶어도 주문하는 과정 상에서 변경 안 된다는 것이다. 갑자기 매장을 이용하고싶은 유저는 주문 과정을 취소하고 다시 주문하는 방법밖에는 없다는 것이다.
주문 과정에서 유저가 옵션을 바꾸고 싶을 때, 다시 돌아가야한다던가, 이전의 넘어간 과정을 수행하고 왔을 때, 주문하려던 메뉴가 초기화되어버리는 상황이 발생한다면 그 앱의 사용성은 과연 괜찮은 것인가?
그런데 또, 스타벅스는 이미 Delivers 탭에선 순차적으로 프로세스를 잘 구성해놓았다.
처음부터 주문 과정을 따라가도록 구성한 Delivers홈화면에서 Delivers 버튼을 눌렀을 때 가장 먼저 '어떤 매장에서 배달해드릴까요?'의 문구가 눈에 띄는 매장 선택화면이 나타난다. 여기서 유저는 매장을 선택하고 다시 한 번 매장을 확인한다. 매장을 선택하고 나서야 메뉴의 카테고리를 확인한다. 메뉴를 선택하고 주문한다. 일반적이면서도 이상적인 흐름이다.
매장 선택을 1순위로 배치해 과정 중에서 헤매거나, 다시 돌아와서 선택해야하는 일이 없도록 깔끔하게 구성했다.
메가커피의 '스마트 오더' 주문 과정비슷하게 메가커피 또한 '스마트 오더'를 선택했을 때 매장 선택이 먼저나오고 매장을 재확인한 뒤에야 메뉴를 고를 수 있는 환경이다. 학교 다니면서 메가커피 메가오더를 자주 사용했었는데, 정확하고 간결한 과정 덕분에 바쁜 와중에도 계속해서 찾게 되었던 것 같다.
* 그런데 이 문제의 경우, 2023년 12월 스타벅스 앱 업데이트로 개선되었다.
이벤트 & 뉴스 화면위의 매장 선택이 먼저 나오지 않아 생기는 혼란을 방지할 수 있도록 Order를 누르면, 매장 선택 화면이 우선적으로 뜨게 된다. 아마 같은 점으로 불편함을 느낀 이들이 있었을 듯 싶다. *스터디 날짜(10월) 기준 2개월 뒤에 변경되었음.
오더탭 개선점(3) 나만의 메뉴의 등록의 불편함
나만의 메뉴란 사이렌오더를 지속적으로 사용하는 고객을 위해서 기본 메뉴에 퍼스널 옵션(샷추가, 우유변경, 휘핑크림 유무 등..)을 설정한 메뉴들을 말 그대로 '나만의 메뉴'로 저장시켜놓고 바로 주문할 수 있는 기능이다.
여기서 한 가지 주목할 점은 나만의 메뉴는 나만의 메뉴를 확인할 수 있는 곳과 등록 할 수 있는 곳이 다르다.
* 나만의 메뉴를 확인할 수 있는 곳
1) Order탭 > '나만의 메뉴'
2) Other 탭 > '나만의 메뉴'
*나만의 메뉴를 등록할 수 있는 곳
1)Order > 주문과정> 퍼스널 옵션 선택 과정
Order탭의 나만의 메뉴 탭에 들어가면 최초 등록 전에 메뉴 등록에 대한 설명이 나와있다. 주문과정에서 하트를 누르는 방법인데, 이는 옵션을 모두 선택하고 주문하기 버튼 왼쪽의 하트를 누를 때를 말한다.
2)주문 완료 페이지
주문을 완료한 뒤, 자연스럽게 이 메뉴를 사용자가 나만의 메뉴로 설정할 수 있게끔 유도한다.
3)홈 화면('Home화면에 표시' 선택 시)
나만의 메뉴 설정 이후 'Home 화면에 표시'를 선택할 경우홈화면의 경우에는 나만의 메뉴 설정 후에 'Home 화면에 표시'를 ON으로 바꾸면 홈화면 중앙부에 'Quick'메뉴가 생성되게 된다. 이때 홈화면의 퀵 메뉴에서 내가 주문했던 메뉴들을 보여주는데, 오른쪽 상단에 위치한 하트로 나만의 메뉴를 생성할 수 있다.
중앙부의 'Quick'에 최근 주문 순과 함께 하트가 뜬다.하지만 하트의 가시성이 다소 낮고, 나만의 메뉴를 확인할 수 있는 1) Order탭 >'나만의 메뉴' 탭 또는 2) Other > '나만의 메뉴' 에서 바로 메뉴를 추가할 수 없다는 점이 아쉬웠다. 나만의 메뉴를 확인한 사용자가 메뉴를 추가하고 싶다고 해도 바로 할 수 있는 것이 아닌 다시 등록을 위해 여러 과정들을 거쳐야 한다는 것이다. 나만의 메뉴를 '등록'할 수 있는 곳은 1, 2, 3곳 모두 주문 과정 중에, 또는 주문 후에 나타난다.
그도 그럴 것이 퍼스널 옵션이란 '내가 주문했던 메뉴'만을 등록할 수 있게 만들어 놓은 기능이기 때문이다. 자주 사용하는 고객들 만이 이 기능에 접근할 수 있게 된다.
하지만 *나만의 메뉴를 등록할 수 있는 곳 3가지가 메뉴를 주문한 경험이 있는 이들만을 고려해 타겟 범위가 너무나 좁다고 생각했고, 그 타겟층 마저도 접근하기 어렵기에 더욱 이 기능에 접근하기 용이하도록 개선할 필요성을 느꼈다.
결론적으로 Order탭 에서의 개선점은
(1) 메뉴 선택의 불편함
(2) 주문 프로세스의 불편함
(3) 나만의 메뉴의 등록의 불편함
정도로 정리할 수 있다.
이를 바탕으로 오더화면을 개선해보았다.
2. 오더 개선
1) 오더 프로세스 개선(매장 선택 우선 배치)
*이 문제의 경우, 2023년 12월 스타벅스 앱 업데이트로 개선되었다.
그래도 적어보자면, 기존 오더 프로세스에서 매장 선택순서를 유저가 마음대로 설정할 수 있어 메뉴 선택 후에 매장 선택을 할 때는 메뉴가 초기화된다는 문제점이 있었다. 이를 개선하기 위해 Order를 누르자마자 '매장 선택'이 첫번째로 노출되어 유저가 매장을 먼저 선택하고 주문 과정을 이어갈 수 있도록 구성했다.
2) 카테고리 배치방식 변경
이어지는 메뉴 선택 탭에서는 카테고리 배치 방식을 변경했다.
아래 사진은 기존 스타벅스의 메뉴 카테고리이다. 1차 카테고리 > 2차 카테고리가 하나의 뎁스, 3차 카테고리가 하나의 뎁스로 유저가 먹고 싶은 메뉴 하나를 선택하기 위해서는 뎁스가 총 2개 들어가게 된다.
개선한 페이지에서는 페이지가 새롭게 등장하고, 뒤로가기 액션이 들어가야 하는 뎁스를 없애고,
상단에 1,2차 카테고리를 배치해서
메뉴 카테고리 안에서 옮겨다니는 시간을 단축할 수 있다. 특히 2차 카테고리(빨강)를 가로로 스크롤링할 수 있게끔 하여 기존 너무 많은 카테고리가 있었던 스타벅스의 메뉴를 효과적으로 보여줄 수 있다.
그리고 메뉴 하나하나가 세로로만 구성되어 있어서 스크롤을 많이 내려야 했던 이전과는 달리
한 화면에 최대 9개를 노출시킬 수 있는 앨범 형식으로 레이아웃을 변경했다.
한 눈에 많은 정보를 읽음으로써 유저는 더 많은 선택지를 한번에 비교하여 고를 수 있으리라 생각한다.
어디까지나 나의 가설일뿐이지만.
Order탭 개선안3) Order > 나만의 메뉴> 히스토리 탭 추가
굳이 Other 페이지에 가서 히스토리를 보지 않고도 '히스토리'를 확인하고 바로 담거나, 나만의 메뉴로 지정할 수 있도록 개선했다.
4) Order > 나만의 메뉴 속 플로팅
Order 과정 중에서 접하는 나만의 메뉴에서 바로 메뉴를 추가할 수 있도록 구성했다.
나만의 메뉴에서는 플로팅 버튼을 추가해 나만의 메뉴를 추가할 수 있고, 메뉴를 터치했을 때, 커스텀 옵션을 설정할 수 있는 페이지로 넘어갈 수 있도록 구성한다.
5) Other > 히스토리의 하트 추가
다음은 Other 탭에서의 개선점이다. 모두 나만의 메뉴와 관련된 사항으로 오더개선점으로 카테고라이징되어있다.
Other에서 볼 수 있는 '히스토리'에 들어가면 이전에 주문했던 내역들을 볼 수 있다. 이때, 우측에 하트 아이콘을 배치해 이전 주문사항을 바로 나만의 메뉴로 만들 수 있도록 했다.
6) Other > 나만의 메뉴 속 플로팅 버튼
비교적 쉽게 접근할 수 있는 중앙부의 나만의 메뉴로 들어가면, 기존의 내가 설정한 나만의 메뉴를 볼 수 있고, 이를 '삭제'만 할 수 있도록 되어있다. 여기서 '커스텀'(수정)과 '추가'도 가능하도록, 메뉴를 눌렀을 때, 옵션을 커스텀할 수 있도록 했고, + 플로팅 버튼을 배치했다.
결론적으로 Other 탭에서 접근 가능한 '나만의 메뉴' 에서도 나만의 메뉴를 '추가'할 수 있도록 구성했다.
스타벅스 앱은 정말 많은 이들이 개선안을 제안하는 앱 중 하나다.
직접 경험해 보니, 주문 과정이나 나만의 메뉴가 불필요하게 복잡한 느낌을 주고 있었다.
찾아본 레퍼런스들 중 다른 스마트오더 카페 앱들과는 다르게 많은 시간을 소요하게 되는 것 같다.
이 부분에는 메뉴 카테고라이징, 옵션 선택 프로세스가 큰 비중을 차지할 것이라고 생각한다.
(실제 User Test에서 실시한 Task 결과가 그러했다.)
이미 편한 것 같은데? 라고 생각했던 앱들도 다시 한번 두드려 보아야 할 것 같다.
은근히 잘 보이는 허점들 덕분에 개선 프로젝트 중에서는 가장 많은 시간과 노력을 썼다.
이 프로젝트를 전개하던 중에 실제 업데이트로 개선 되는 지점들도 볼 수 있었는데,
역시 인간이 느끼는 불편한 지점은 다 같음을 알게되었다!
몇개월 전에 진행했던 개선 프로젝트여서 부족한 부분도 많이 보이지만, 불편한 점을 찾기위해 치열하게 노력했다는 점은 칭찬해주고 싶다.
