brunch

You can make anything
by writing

C.S.Lewis

by 이상현 Aug 19. 2022

정말 불편한 게 없을까?

[코드스테이츠 PMB 13기] | '카카오톡 선물하기' UX/UI 개선



W4D2 토론은 꽤 재미있는 토론이었다. 평소 사용하는 서비스 중 UX 개선이 필요한 사례를 선정하고, 디자이너/개발자에게 전달하기 위해 어떤 내용을 준비해야 하는지 이야기를 나눠야 했다. 각자 전날 분석했던 서비스를 꺼내놨고, 그중 인지도가 가장 높고 모두가 사용해 본 '카카오톡 선물하기' 기능의 UX/UI 개선점을 찾아보기로 했다. 


처음엔 '별로 불편한 게 없는 것 같은데..'란 생각이 들었지만, 동기분들과 얘기를 나누다 보니 '나도 느꼈지만 무심코 넘겼던' 꽤 많은 불편함을 찾을 수 있었다. 토론 중 발견했던 불편함 중 가장 개선해보고 싶었던 점을 선정해 분석해보려고 한다.





'카카오톡 선물하기' - UX/UI 개선이 필요한 부분



'받은 선물'을 확인하고 사용하기까지의 유저 플로우에 개선이 필요하다고 생각한다. 설명에 앞서 현재 받은 선물을 확인하기까지의 플로우를 살펴보자.


카카오톡 메인 화면에서 받은 선물 확인까지


ⓛ [카카오톡 메인 화면] -> 하단 [더보기] 선택 

② [더보기] 화면 -> [선물하기] 선택

③ [선물하기] 화면 -> [선물함] 선택

④ [선물함] 화면 -> [받은 선물] 선택

⑤ [받은 선물] 화면 -> 선물 선택


받은 선물 한 번 확인하는데 화면을 5개나 봐야 한다. 토론 중에 '그럼 왜 이렇게 불편하게 만들어놨을까'에 대해 이야기하던 중, 한 분이 "선물을 받는 사람보다 실제 비용을 지출하는 '주는 사람'이 우선순위이다 보니 아직 개선되지 않은 게 아닌가"하는 의견을 주셨다. 일리 있는 말씀이었는데 개인적으로 의아한 점이 생겼다. 


연락이 뜸했던 지인이, 카카오톡 선물하기를 통해 생일 선물을 보내는 경우가 있다. 고맙기도 하고, 사람인지라 '받은 만큼은 줘야지'하는 생각에 최대한 그 사람 생일에 나도 답례를 하게 된다. 다만 친지들의 생일을 챙길 때처럼 시간을 많이 쏟을 여력은 없어서, 비슷한 금액대의 기프티콘을 골라 보내곤 했다. 다들 비슷하지 않을까 싶었다. ''카카오톡 선물하기'를 통해 선물을 받은 경험을 쾌적하고 좋았다면, 주는 경험으로도 더 쉽게 이어지지 않을까'란 생각이 들었다.


출처 : @ 카카오 선물하기의 급성장을 만든 4개의 변화


찾아보니 이것이 카카오 커머스가 말하는 '네트워크 확산 모델'이었다. 실제로 카카오 선물하기를 접한 고객의 70%가 선물을 받는 행위로 선물하기를 처음 경험하고, 그들은 다시 카카오 선물하기를 누군가에게 선물을 하는 사람이 돼 더 많은 사람에게 선물하기를 전파한다고 한다. 


나를 포함한 유저들이 느낀 Pain Point와 '네트워크 확산 모델'을 기반으로, '받은 선물'을 확인하고 사용하기까지의 유저 플로우에 개선을 통해 좀 더 쾌적한 UX를 경험하고, 결과적으로 고객가치와 사업가치를 동시에 획득할 수 있는 방향으로 개선해보도록 한다.




UX/UI 개선 - 프로토타입 제작


앞서 언급한 UX 개선을 쪼개 보면 1) '받은 선물을 확인'하는 Flow / 2) '받은 선물을 사용'하는 Flow가 개선돼야 한다.




 [카카오톡 메인 화면] 우측 상단에 '카카오톡 선물하기'로 바로 이동할 수 있는 아이콘을 추가했다. 기존에 '카카오톡 선물하기' 화면으로 진입할 수 있는 루트는 총 2가지였다.

  

[메인 화면] -> 화면 하단 [더보기] 선택 -> [선물하기] 선택 

[메인 화면] -> 화면 하단 [쇼핑] 선택 -> 화면 좌상단 [선물하기] 선택            



② [카카오톡 선물하기] 화면에 [받은 선물] 화면으로 이동할 수 있는 CTA 버튼([받은 선물 확인하기])을 추가한다. 기존 [받은 선물] 화면으로 이동하는 루트는 아래와 같다.

  

[카카오톡 선물하기] 홈 화면 -> 우상단 [선물함] 선택 -> [받은 선물] 선택            


: 기존에 유저가 선물을 주고 싶어 탐색이 필요한 경우 [메인 화면] -> [더보기] -> [선물하기 홈 화면]의 3가지 루트만 거치면 됐지만, 본인이 받은 선물 리스트를 확인해야 할 경우 5개의 페이지를 거쳐야 했다.


받은 선물을 손쉽고 빠르게 확인하는 좋은 UX를 경험하게 하고, 이 경험이 '주는 경험'으로 이어져 카카오 커머스 역시 비즈니스적 가치를 얻을 수 있도록 과정을 축소, 홈 화면까지 3개의 페이지만 거치면 받은 선물 목록을 확인할 수 있게 했다.



③ 받은 선물 중 하나를 선택하면 

-> ④ 팝업 화면으로 선물명과 바코드, 유효기간과 사용 가능 금액을 확인할 수 있도록 했다. 


: 유저가 오프라인에서 바코드를 이용해 기프티콘을 사용해야 하는 경우, 받은 선물을 선택해 상품 정보 화면으로 이동해야 했다. 약 1초 정도의 로딩 시간이 필요했고, 해당 페이지엔 유저가 결제에 필요한 정보 외에 상품 설명이나 상세 정보(교환처, 선물 주문일, 주문번호 등) 등 결제 당시에는 확인할 필요가 없는 정보들이 담겨있다.


이를 토스트 팝업 형태로 화면에 띄워 결제 시 바로 확인/처리가 필요한 정보만 안내할 수 있도록 하고, 추가 상세 정보 확인이 필요한 경우 '선물 확인하기' 버튼을 클릭해 이동할 수 있도록 했다. (팝업으로 불러올 정보가 적어 로딩 시간도 단축할 수 있을 것으로 추측한다.)




개선점을 적용한 서비스 기획 산출물



서비스 기획 산출물(PRD, Product Requirement Document) 중, 와이어프레임(화면)과 기능 구현을 위한 기능 정의서(기능)를 함께 정리한 화면 설계서(Storyboard)의 형태로 개선 사항 부분을 작성해보았다.





참고 자료


https://byline.network/2020/11/25-111/




*코드스테이츠 PMB 과정을 수강하며 과제로 작성한 내용입니다. 사실과 다르거나 부족한 부분이 있을 수 있으니 자유롭게 피드백주시면 감사하겠습니다!



매거진의 이전글 현대카드 앱이 세련돼 보이는 이유
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari