brunch

매거진 코드스테이츠 PMB 7기

라이킷 23 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 박형준 Jun 28. 2021

내가 스타벅스 앱 PM이라면

[코드스테이츠PMB 7기]

- 대문 출처 : https://www.chrischae.kr/starbucks-strategy/

[코드스테이츠 PMB 7기 4주차 2강 과제]

<A-B 테스트 설계하기>

1. 앱 서비스(혹은 웹 서비스) 1가지를 선택하여 랜딩 페이지를 분석해주세요.
2. 현재 랜딩 페이지에서 개선해야 할 부분과 그 이유에 대하여 이야기해주세요.
3. As is - To be 를 통해 테스트하고 싶은 내용에 대해 이야기해주세요.
4. 테스트 과정을 세부적으로 스케쥴링해주세요.
5. 테스트 내용, 테스트 디자인을 상세히 작성해 A/B 테스트 설계를 완성합니다.

1. 들어가며

저는 스타벅스의 애플리케이션(구, 사이렌 오더)을 자주 이용합니다.

음료를 주문할 때 여러 옵션을 조정하기 때문입니다.

아메리카노는 디카페인 옵션에 샷을 하나 빼고, 물을 약간 더 넣어서 주문
카페라테는 디카페인에 무지방 우유로 변경한 뒤, 우유 양을 적게 해서 주문

사실 몇 년 전까지만 해도 스타벅스를 많이 이용하지는 않았는데, 크게 세 가지 이유 때문이었습니다.

1. 커피 맛이 내가 선호하는 맛이 아닌 점 (아메리카노는 너무 썼고, 카페라테는 너무 느끼했음)
2. 매장에 사람이 너무 많아서, 커피를 주문하다가 자리가 없어지는 경우가 종종 있는 점
3. 진동벨이 없어서 메뉴가 준비될 때까지 픽업대 근처에서 기다려야 하는 점

그러던 어느 날,

지인이 스타벅스 애플리케이션(이하 스타벅스 앱)을 통해 스마트폰으로 메뉴를 주문하는 것을 보게 되었고, 얼마 지나지 않아 저는 스타벅스의 마니아가 되었습니다. 스타벅스를 잘 이용하지 않던 이유들을 스타벅스 앱이 모두 해결해 줬기 때문입니다.

1. 내가 원하는 대로 옵션을 바꿔서 맛을 변경할 수 있음
2. 눈치 보지 않고 선 착석, 후 주문 가능
3. 픽업대 앞에서 기다릴 필요 없이 휴대폰 푸시 알림을 보고 메뉴를 픽업하러 가면 됨

오늘은 스타벅스 앱을 자주 사용하는 '사용자' 입장에서, 스타벅스 앱을 첫 화면을 중심으로 분석해 보고, 어떤 부분이 불편하고, 왜 불편한지, 어떻게 개선하면 좋을지 분석 해 보고자 합니다.

2. 스타벅스 앱 화면 분석

2-1. 블록 및 구조

스타벅스 앱 메인 화면 (1)

스타벅스 앱 메인 화면 (2)

스타벅스의 앱 화면을 보면서 아래와 같은 특징을 발견할 수 있었습니다.

1. 행동을 유도하는 버튼이 거의 없음

- 딜리버리 버튼, 새 소식 블록의 알림 정도

- 행동을 이끌어내기보다는, 정보(특히 신제품, 시즌 상품 등 새 소식)를 제공하는 UI가 많음

2. 개인화된 경험을 준다는 느낌

- 들어갈 때마다 달라지는 웰컴 메시지

- 여러 블록 중 상위에 배치된 "나를 위한 추천 메뉴"

경쟁사의 애플리케이션(Application)과 비교했을 때, 목적성이 약하다는 느낌을 받았습니다.

UX의 목적과 목표가 "메뉴 주문" 이 아닌 스타벅스라는 "브랜드를 탐험" 하는 데 있다는 생각이 들기도 했구요.

"주문"을 유도하기 위한 이미지 배치와 카피라이팅 / 할리스커피 앱

2-2. 스타벅스 앱은 어떤 문제를 해결해 주고 있을까?

경쟁사와 비교해, 스타벅스의 메인 페이지가 확실히 더 아름다웠습니다.

하지만 한 가지 의문이 제 머릿속을 떠나지 않았는데요.

고객은 스타벅스 앱의 '아름다움'을 왜 필요로 할까?

그저 아름답기만 하면 사람들이 스타벅스를 많이 이용하는 걸까?

메인에 배치된 새 소식들이 스타벅스 고객의 어떤 문제를 해결해 주는 걸까?

Jobs to be Done 관점으로 바라보기

JTBD(Jobs to be done)의 관점에서 사람들이 제품을 사용하는 이유는 다음과 같습니다.

Customers want to "hire" a product to do a job
고객은 과업(job)을 수행하기 위해 제품을 "채용" 한다.

- Clayton M. Christensen

사람들은 송금을 위해 토스를, 배달 음식을 먹기 위해 배달의민족을, 잠을 자기 위해 침대를, 시원해 지기 위해 에어컨을 구매하고 사용합니다.

모든 제품은 기본적으로 '문제 해결'이라는 토대 위에 '부가기능'이 들어갑니다.

토스가 만보기 기능을 추가했다고 해서, 토스의 핵심 기능이 바뀌는 것은 아니죠. 토스의 핵심 기능을 더 많은 사람들이, 더 자주 이용할 기회를 늘려주는 하나의 '부가기능'이 추가된 것일 뿐입니다.

이러한 관점에서, 스타벅스 앱은 아름다운 UI와 다양한 부가기능을 가지고 있지만, 고객의 핵심 문제 무엇을 해결해 줄 수 있는지 분명하게 느껴지지는 않았습니다.

3. 개선할 점

3-1. 문제 정의

가장 먼저 앱의 핵심 목적, 고객의 어떤 문제를 해결할지 정해야 합니다.

우선 저의 JTBD에 맞춰서 고객의 문제를 생각해 보았습니다.

출처 : https://www.intercom.com/blog/using-job-stories-design-features-ui-ux/

- Situation : 사무실 밖에서 업무 할 공간이 필요해 스타벅스에 방문한 상황에서,
- Motivation : 남들보다 빠르게 콘센트가 있는 좌석에 자리를 잡고 원하는 옵션의 커피를 주문하고 싶었기에,
- Expected Outcome : 스타벅스 앱을 실행하여 줄 설 필요 없이 빠르고 편리하게 주문하고 싶다.

JTBD : 스타벅스에서 다양한 옵션의 메뉴를 빠르고 편리하게 주문하고 싶다.

위 JTBD를 기반으로 스타벅스 앱을 사용하는 본질적인 이유를 찾을 수 있었습니다.

"메뉴 주문"

제가 아름다운 메인 페이지에서 무언가 위화감을 느꼈던 이유는, "메뉴 주문"이 쉽지 않았기 때문이었습니다. 그래서 저처럼 주문 기능을 주로 이용하는 고객을 위해서, 메뉴 주문의 불편함을 줄이는 방향으로 제품의 개선안을 생각 해 보았습니다.

"주문 성공"의 전환율을 높이면 매출도 늘어날테니까요!

3-2. 개선 방안

고객의 희망을 달성해 주는 제품을 팔아서 돈을 벌자!

(출처 : https://medium.com/tradecraft-traction/your-customers-dont-care-about-your-product-they-care-about-progress-74beec116071)

현재 스타벅스 앱의 "주문"은 크게 두 가지 형태가 있습니다. Order(구 사이렌 오더, 매장에서 주문), Delivers(배달 주문)입니다. 두 기능의 전환율을 높여 매출을 늘리는 것을 목표로, 스타벅스 앱의 디자인을 수정해 보았습니다.

#1. 메인 페이지 수정

(좌) 기존 화면 / (우) 리뉴얼 화면

앞에서 제품(스타벅스 앱)의 목적을 "고객이 스타벅스 메뉴를 보다 빠르고 편리하게 주문할 수 있게 돕는 것"으로 설정하였죠. 이에 "주문"에 필요한 정보들을 메인 페이지에 추가하고, 상대적으로 "주문"과 거리가 먼 정보는 축약하거나 아래로 내리는 형태로 개선안을 만들어 보았습니다.

추가/변경된 부분에 대한 가설은 다음과 같습니다.

- 카드 잔액 추가 : 잔액이 있다는 사실을 확인하면 보다 빠르게 주문 의사결정을 할 수 있을 것이다.

- 주문 CTA 추가 : 내비게이션 바 하단의 Order는 접근성이 떨어진다. 메인에서 잔액을 확인한 후 바로 주문할 수 있도록 CTA버튼을 추가하면, 보다 빠르고 편리하게 주문할 수 있을 것이다.

- e-프리퀀시 면적 축소 : 프리퀀시는 주문을 유도하는 아주 매력적인 리워드 프로그램이지만, 주문과 직접 관련이 있지는 않다. 따라서 정보를 줄이고 면적을 조금 줄이면 고객이 주문에 집중할 수 있고, 주문 성공율이 높아질 것이다.

- e-프리퀀시 D-Day 추가 : 적립기간, 증정 기간은 중요한 정보이지만, 눈에 잘 띄지 않는다. 적립 기간 기준으로 D-day를 설정해서, 마감이 얼마나 임박했는지 쉽게 인지할 수 있도록 하면 프리퀀시 적립을 위한 음료 구매율이 높아질 것이다.

- e-프리퀀시 스티커 목표치 추가 : 프리퀀시 스티커 적립 숫자와 목표 숫자 모두를 메인 페이지에서 바로 확인할 수 있다면, 더 빠르게 주문을 유도할 수 있을 것이다.

#2. Order & Delivers 진입 방식 통일

(좌)기존의 오더, 딜리버스 진입 방식 / (중)개선안, 오더&딜리버스 모두 한 버튼으로 진입 / (후)주문 방식 선택

최근 스타벅스 앱에 Delivers(딜리버스) 라는 배달 기능이 추가되었습니다.

고객 입장에서는 집에서 배달시켜 먹든, 매장에 방문해서 먹든, 결국 스타벅스 앱을 통해 메뉴를 "주문" 한다는 행위와 목적은 동일합니다. 따라서 주문으로 이어지는 '진입로'를 한 곳으로 통일하고, 주문 단계에 진입한 뒤 주문 방법을 설정하는 식으로 플로우를 변경해 보았습니다. 이를 통해 고객이 어디서 무엇을 해야 하는지 보다 명료하게 인지하여 주문에 실패할 확률을 낮추고자 하였습니다. 또한 매장에 방문하여 스타벅스 앱으로 메뉴를 주문하는 고객에게도 딜리버스라는 새로운 기능이 있음을 인지시킬 수 있을 것이라고 생각하였습니다.

#3. 메뉴 검색 수정

(좌)기존안, 카테고리 부터 선택해야 한다. / (우)개선안, 검색 중심으로 결과를 노출한다.

스타벅스 앱에서 "메뉴"를 고르기 위해서는 먼저 음식의 "카테고리"부터 선택해야 합니다. 먹고자 하는 음료가 에스프레소인지, 티 인지, 드립 커피인지 등을 먼저 선택하고 세부 메뉴를 고르는 것이죠.

대분류를 먼저 선택하고 이후 소분류를 선택하는 방식은 논리적입니다. 하지만 음료에 대해 잘 알지 못하는 고객 입장에서는 혼란스러울 수 있습니다. 카페라테를 주문하고 싶은데 에스프레소 카테고리에 들어가야 할지, 드립 커피 카테고리에 들어가야 할지 잘 모를 수 있는 것이죠. 여러 카테고리를 전환해 가며 주문에 필요한 시간과 노력이 늘어날 수 있고, 극단적으로 "그냥 카운터 가서 주문할래" 라는 결론이 날 수도 있습니다.

보다 쉽고 빠르게 메뉴를 선택할 수 있도록, 위 사진처럼 메뉴 검색 기능을 중심으로 화면을 수정해 보았습니다.

사진으로 첨부하지는 않았지만, 검색어가 입력되지 않았을 경우 ①즐겨찾기 해 둔 메뉴 ②최근 주문했던 메뉴 ③추천 메뉴를 우선 노출하게 만들면, 검색 없이도 빠르게 메뉴를 선택할 수 있을 것이라 생각했습니다.

#4. 프리퀀시, 쿠폰에서 Order 유도

(좌)기존안, 별 리워드 진입 화면 / (우)개선안, 주문하고 별 적립하기 CTA버튼 추가

(좌)기존안 / (우)개선안, 주문하고 스티커 적립하기 CTA 버튼 추가

스타벅스에서는 음료를 12잔 마시면 음료 1잔을 제공해 주는 쿠폰 리워드와, 특정 기간에 특정 수량만큼 음료를 마시면 제공되는 e-프리퀀시를 운영하고 있습니다. 모두 사람들의 구매욕을 자극하여 음료를 마실 수 있도록 촉진하는 정책입니다.

하지만 정작 리워드 페이지, 프리퀀시 페이지 에는 음료 섭취를 유도하거나 권장하는 어떤 문구도 없었습니다. 따라서 간단하게 각 리워드 페이지에서 주문 페이지로 넘어갈 수 있는 CTA(Call to Action, 행동 유도) 버튼을 하나씩 배치해 보았습니다.

이를 통해 누적 리워드 확인으로 구매 욕구가 생겼을 때, 더 쉽고 빠르게 제품 주문 화면으로 넘어갈 수 있을 것이라고 기대하였습니다.

#5. 딜리버스 사용 유도 앱 푸시 알람

이번엔 화면 개선과 관련된 내용은 아닙니다.

최근 확대하고 있는 "딜리버스" 기능 활용에 대한 제안을 해 보고자 하는데요.

스타벅스 딜리버스는 스타벅스 앱을 통해 메뉴를 주문하면 고객 위치까지 메뉴를 배달해 주는 스타벅스 전용 배달 서비스입니다. 지난해 겨울 한국 매장에 시범 도입 후 올해 6월부터 수도권 지역에 본격적으로 확장하고 있는 서비스이기도 합니다.

'스타벅스 헤비 유저들에게 딜리버스 사용을 권유하는 앱 푸시 알람을 보내면 딜리버스 사용량과 매출이 늘지 않을까?'라는 생각이 들었습니다. 만약 제가 있는 곳이 딜리버스 가능 지역이고, 주문 시 e-프리퀀시와 별 리워드 적립이 가능하다면, 딜리버스를 이용해 스타벅스 메뉴를 주문해서 먹을 것 같다는 생각이 들었기 때문입니다. 특히 바쁜 직장인들이 점심시간에 활용하기 좋을 것 같다는 생각을 했습니다.

딜리버스 앱 푸시에 대한 내용은 아래의 A/B테스트에서 보다 자세히 기획 해 보겠습니다.

4. A/B 테스트

4-1. A/B 테스트란?

두 그룹의 사용자들에게 서로 다른 페이지를 보여준 뒤, 어떤 그룹에서 더 좋은 성과가 나타나는지, 긍정적인 사용자 경험을 제공할 수 있는지 여부를 지속적인 시험을 통해 정량적으로 평가할 수 있는 테스트 기법

- 김아영 님의 브런치

A/B 테스트는 As is to be Test의 약자로, 제품의 현재 상태와 새로운 상태를 서로 비교해 보는 테스트입니다.

새로운 아이디어가 떠오를 때 마다 전체 고객을 대상으로 제품의 기능과 정책을 바꾸면 어떻게 될까요? 대단한 천재 거나 미래를 읽는 능력이 있지 않는 이상, 변화로 인해 제품이 잘 될 가능성만큼이나 제품에 문제가 생길 가능성도 높아집니다. 어쩌면 사용자에게 불안정한 제품 이라는 인상을 줄 수도 있구요.

A/B테스트는 이런 불확실성을 줄여줄 수 있는 방법 중 하나 입니다. 전체 고객이 아닌, 일부 고객을 추려서 변화하고자 하는 기능이나 정책을 빠른 시간에 검증해 볼 수 있기 때문입니다. 이미지, 문구, 색상 등 아주 간단한 요소의 변화에 따른 성과도 A/B테스트로 측정할 수 있기에, 최소한의 비용으로 빠르게 사용자가 원하는 바를 파악할 수 있다는 점에서 효율적인 검증 도구라고 할 수 있습니다.

4-2. A/B 테스트할 내용

앞에서 스타벅스 앱의 목적을 "메뉴 주문"으로 정하고, 현재 제품에서 개선되면 좋을 5가지 부분을 제안하였습니다.

1. 메인 페이지 변경

2. 주문 방식 통일

3. 메뉴 선택 방식 변경

4. 리워드 콜 투 액션 추가

5. 딜리버스 모바일 푸시 알람

이 중에서 가장 적은 자원을 투자해 가장 큰 효과를 확인할 수 있는 것은 "딜리버스 기능 모바일 푸시 알람"이라고 생각합니다. 비록 화면의 개선은 아니지만, 제품과 비즈니스 성장에 가장 크게 기여할 수 있는 방법이라 생각하기 때문입니다. 별도의 개발이나 디자인 비용에 대한 투자 없이, 메시지 송출만으로 고객의 메뉴 구매를 이끌어 낼 수 있다는게 가장 큰 장점일 것입니다.

아래의 A/B 테스트 계획으로, 리뉴얼된 스타벅스 앱에 대한 글을 마무리 하겠습니다.

감사합니다.

4-3. A/B 테스트 계획

1. A/B테스트 내용
    (1) 가설 : 푸시 알람을 통해 딜리버스 사용을 독려하는 앱 푸시를 받은 고객은, 그렇지 않은 고객에 비해 딜리버스 서비스를 더 많이 이용할 것이다.
    (2) 목표 : 기간 내 대상 고객의 딜리버스 구매 전환율 00% 상승
    (3) 기간 : 2일
    (4) 대상 : 딜리버스를 통한 구매 경험이 없는 수도권 거주 고객 중, 21년 6월 스타벅스 앱 사용 시간 상위 20%인 고객
    (5) 측정 지표 : (앱 푸시를 통한) 유입 전환율, 주문 시작률, 주문 이탈률, 구매 전환율, 딜리버스 매출(보조)

2. 테스트 대상자를 무작위로 A, B 두 그룹으로 분류한다.

3. A그룹에게는 아무것도 하지 않는다. B그룹에게는 현재 딜리버리 이용률이 가장 높은 시간에 맞춰 앱 푸시 알람을 보낸다.

5. 알림 후 24시간 동안 고객 반응을 데이터로 모은다.

6. 측정 지표들을 확인하고, 통계적 유의성(P-Value)을 계산한다.

7. 결과를 분석하고 성공/실패를 판단한다.

<Wrap-up>

1. 제품 : 스타벅스 앱
2. 개선안
    - 제품 목적 설정 : 고객의 "메뉴 주문"을 쉽고 편리하게 만들기.
    - 랜딩페이지 개선 : 주문 CTA 버튼 추가, 카드 잔액 추가, 주문 외 정보 축약, 고정 정보 변경
    - 주문 플로우 개선 : Order와 Delivers 버튼 통합 -> 주문 방법 선택 시 분류
    - 메뉴 선정 개선 : 검색을 통한 선택으로 변경
    - 리워드 페이지 개선 : 리워드 페이지에서 주문할 수 있도록 CTA 버튼 추가
    - 딜리버스 앱 푸시 알람 : 딜리버스 사용량을 높이기 위한 푸시 알람 발송 제안
3. A/B테스트 기획
    - 주제 : 앱 푸시 알람
    - 대상 : 스타벅스 앱 헤비유저 중 딜리버스 무경험자
    - 방법 : A그룹 푸시 알람 발송, B그룹 미발송. 이후 푸시를 통한 유입~전환 지표 분석&비교