User Flow로 찾아본 마켓컬리의 UIUX 개선점
코드스테이츠 PMB 17기 W4D3
유입이 늘어서 보니 제 글이 서플이란 사이트에 소개되었습니다! (무려 두개나! ㅎㅎ)
서플 - 매일 성장을 도와주는 시작페이지 (supple.kr)
오늘 살펴볼 프로덕트: 마켓컬리
자동 업데이트를 해두지 않아 대부분의 앱을 구버전으로 사용하다가, PMB를 수강하며 앱들을 하나둘 업데이트 하고 있다.
오랜만에 마켓컬리 또한 업데이트하고 들어가보니, '포토 리뷰 미리보기' 기능과 '포토 리뷰만 모아보기' 기능이 생겨있었다. 하나씩 리뷰를 선택해 사진을 확인해야 하는게 컬리의 가장 큰 불편함 중 하나였는데, 민망하게도 무려 4개월 전 생긴 기능이었다. 4개월 동안 번거롭다고 욕한 것이 미안하니 오늘은 마켓컬리를 뜯어보며 가짜 번거로움이 아닌 진짜 번거로움을 찾아보기로 했다.
마켓컬리 주문자의 User Flow를 그려보자
이미 마켓컬리 앱에 로그인이 되어있는 유저가. 상품을 고르고 결제까지 완료하는 user flow를 작성했다.
참고로 '구매하기'와 '장바구니 담기'는 실제 클릭하는 버튼의 이름이다.
('장바구니 담기'에서 No라면 해당 버튼을 클릭하지 않았다는 의미)
유저의 입장에서 유저 플로우를 그려보니, '왜 이렇게 뎁스가 깊어져야 하지?' 싶은 포인트들이 있어 그 부분을 중심으로 살펴보고자 한다.
개선이 필요한 UX는?
1. '장바구니에 상품을 담았다는 확인 창'에서 장바구니로 바로 갈 수 없다.
우선 컬리는 '구매하기'를 눌러도 바로 구매할 수 없고, 모든 상품을 장바구니에 담아야 한다.
이 부분은 어차피 일정 금액 이상을 구매해야 배송비가 무료고, 대부분의 유저는 다양한 상품을 한번에 구매할테니 크게 문제가 되지는 않을 것이다.
하지만 '장바구니 담기'를 선택한 후에도 장바구니로 바로 갈 수 없다는 점이 번거롭게 느껴졌다. (실제 앱스토어 리뷰에서도 비슷한 의견을 찾아볼 수 있다.)
아래의 사진처럼, '구매하기' 클릭 -> '장바구니 담기' 클릭 -> 장바구니에 상품을 담았다는 확인 창이 순서대로 뜬다. 유저는 실제 물품을 구매하러 장바구니에 가려면 저 확인 창을 닫고 다시 상단의 장바구니 아이콘을 클릭해야 한다. 이는 불필요하게 길어진 여정이라는 느낌이 들었다.
2. '추천 상품 상세페이지'에서 홈 화면으로 가려면 타고 넘어간 페이지를 하나씩 꺼줘야 한다.
컬리는 상세페이지나 장바구니 담기 확인창에서, 다른 고객이 함께 본 상품/함께 구매한 상품을 추천하고 있다.
하지만 이 추천 섹션에서 상품을 클릭해 타고 들어간 후에 바로 홈 화면으로 갈 수 있는 방법이 없다. 상세 페이지를 하나씩 끄고 원래 보던 상품의 상세 페이지로 돌아와야 비로소 홈 화면으로 나갈 수 있다. 만약 추천 상품을 계속 타고 여러 상품을 보았다면 그만큼 많은 페이지를 하나씩 지워야 홈화면으로 갈 수 있었는데, 이 과정이 굉장히 번거롭게 느껴졌다.
이해를 돕기 위해 해당 플로우의 화면을 녹화했다.
더 시급하게 개선해야 할 UX와 UI 개선 와이어프레임
각 UX의 불편함으로 인해 발생하게 될 문제를 생각해 봤을 때 아래와 같이 정리할 수 있었다.
장바구니로 가는 과정이 불편하다 -> 결제로 이어지는 과정이 길어짐
홈 화면으로 가는 과정이 불편하다 -> 추가 상품을 찾는 과정이 길어짐
결제로 이어지지 않는 것이 수익을 창출하는 기업에게 훨씬 치명적이라고 생각해, '장바구니 확인 창에서 장바구니로 바로 갈 수 없음'이 더 시급하게 개선되어야 할 UX라고 판단했다.
따라서 왼쪽의 As-Is에서 오른쪽 사진과 같이 바로가기 버튼을 추가했다.
장바구니에만 넣고 결제는 다음에 하려던 유저도, 해당 버튼을 통해 한번이라도 더 장바구니 페이지에 도달한다면 결제로까지의 전환율도 높아질 것이라 생각한다.
+ 우선순위에서 밀렸지만, 2번 문제는 '추천 상품 상세페이지'의 상단에 홈화면 아이콘을 배치함으로써 UX를 개선하고 싶다.
추천 상품을 쭉 본 후 이전에 본 상품을 구매하고 싶은 유저도 있을테니, 페이지를 하나씩 닫아야 하는 것은 개선되어야할 UX는 아닐 수도 있다. 하지만 바로 홈 화면으로 가서 다른 상품을 탐색하고 싶은 유저에게는 선택권을 주어야 하기에 아래와 같이 홈화면 버튼을 추가하고 싶다.
PRD를 작성해 팀원들에게 전달해보자
내가 마켓컬리의 PM이 되었다고 가정하고 팀원들에게 왜 이러한 기능과 개선이 필요한지 PRD를 통해 전달해보자.
요약 및 배경
현재 User Flow를 살펴보면, 유저들은 상품 상세페이지에서 장바구니 페이지까지 가기 위해 5 depth를 지나야 합니다. ('구매하기' 클릭 -> '장바구니 담기' 클릭 -> '장바구니에 상품을 담았다는 확인 창' -> 창 닫은 후 상세 페이지로 돌아가기 -> 장바구니 클릭)
장바구니 페이지는 결제의 바로 직전 단계이기 때문에 장바구니 페이지에 유저가 자주 도달하는 것 또한 중요합니다. 따라서 장바구니까지 가는 과정을 간소화하고자 합니다.
주요 사용자
마켓컬리의 주요 사용자는 4050 여성분들입니다. 앱 사용에 능숙한 2030에 비해 직관적이고 간단한 UX가 특히 중요합니다.
핵심 사용자 여정
개선 후 유저는, 상품을 장바구니에 담자마자 장바구니로 이동하는 선택권이 주어집니다. 특히 마지막 상품을 담은 유저는 굳이 확인 창을 끄고 장바구니를 선택할 필요가 없어져 더 빠르게 결제할 수 있습니다.
그 외에도, 상품을 장바구니에 담은 후 결제를 다음으로 미루려던 유저가 앱을 이탈하기 전에, 장바구니로 연결을 유도해 결제를 앞당길 수 있습니다.
기능적 요구사항
To 디자이너: '장바구니에 상품을 담았다는 확인 창'에서 장바구니로 바로 연결될 수 있도록 디자인해주세요.
To 개발자: '장바구니에 상품을 담았다는 확인 창'에서 '바로가기' 버튼 클릭시 장바구니로 연결되도록 해주세요. (디자니어가 '바로가기' 버튼을 추가하는 솔루션 채택했다고 가정)
