뱅크 아닌 유전자 샐러드 사용기
뱅크샐러드의 유전자검사 UXUI 프로세스 분석하기
글쓴이의 게으름으로 인해 본 글에 등장하는 스크린은 2022년 초 기준으로 현재와 다를 수 있습니다.
재작년까지만 해도 돈 관리를 위해 토스와 뱅크샐러드를 동시에 쓰고 있었다. 작년부터 다른 사이트들의 결제 페이지에서 토스페이를 사용하는 경우가 많아졌고, 자연스럽게 토스를 메인으로 쓰게 되었다. 그렇게 뱅크샐러드는 내 핸드폰 속에서 잊혀갔다. 그러던 어느 날 지인의 인스타그램 스토리에서 뱅크샐러드 유전자 검사 후기를 접하게 되었다.
2013년, 안젤리나 졸리가 유전자 검사 후 유방암에 걸릴 확률이 높아 예방차원에서 미리 유방암 절제 수술을 받은것을 접하고 꽤나 충격을 받았던 기억이 있었다. 국내에서도 이미 상용화가 되었다는 것은 들은 바가 있었지만 그래도 여전히 비싼 검사로 알고 있다. 이것을 무료로 해준다는 사실에 바로 이벤트에 참여하게 되었다.
하루에 신청 가능한 인원이 정해져 있었기 때문에 거의 피켓팅으로 참여했고 3일째 되는 날 운 좋게 신청에 성공을 하게 되었다. 그리고 검사를 끝내기까지의 과정에서 온오프라인을 넘나드는 프로세스가 흥미가 생겨 글을 쓰게 되었다.
먼저 본인은 이 이벤트 자체가 정말 흥미로웠다. 그 이유는 다른 이벤트들에 비해 해당 이벤트의 허들은 훨씬 높기 때문이다.
우리가 흔히 볼 수 있는 이벤트를 보면, 마케팅 광고 등을 통해서 앱에 유입되는 부분과 이벤트 응모를 위한 로그인 또는 회원가입 등이 허들이 될 수 있다. 하지만 이 모든 과정은 온라인으로 해결할 수 있다.
하지만 뱅크샐러드의 유전자 검사의 경우 온라인으로 이벤트 신청을 하더라도 오프라인의 과정이 남아있다. 심지어 반송을 해야 하는 과정이 있어 불편할 수 있다. 이와 유사한 프로세스는 온라인에서 구매한 제품의 환불 교환 프로세스이다. 그간의 경험을 비추어 보아 이 과정은 굉장히 불편한데, (단순히 프로세스만 보았을 때 동일하다는 것이다. 당연히 부정적인 감정을 가진 상태이기 때문에 심리적으로 느껴지는 부분은 매우 다르다.) 이것과 유사한 프로세스라 볼 수 있는 이벤트를 진행한다니, 정말 신기할 수밖에 없었다.
아래는 뱅크샐러드 유전자검사를 하면서 본 스크린 페이지들을 나열한 도표이다.
뱅크샐러드 유전자검사 전체 플로우플로우들을 살펴보면 확실히 일회성 이벤트라기에는 상당히 긴 시간이 걸리며 수많은 프로세스를 거쳐간다. 또한 온오프라인을 넘나들어야 하며 그 상황에 맞추어 앱 화면을 보여주어야 한다.
이벤트 당첨 이후의 프로세스를 <유전자 검사 신청 플로우>, <유전자 검사 키트 배송 알림>, <유전자 검사 키트 사용>, <검사 결과 확인>으로 분류하여 분석해보자.
배송 전
1. 유전자 검사 신청
위에서도 말한 것처럼 '검사 신청 플로우'는 고객에게 허들이 될 수 있다. 은행 앱을 통해 계좌 개설을 할 때와 유사하게 많은 약관과 개인정보를 입력해야 하기 때문이다. 하지만 신청 당시에는 전혀 길다는 생각을 못하고 빠르게 테스크를 수행하였다. 이후 분석을 위해 펼쳐보고 나서야 수많은 테스크와 화면 정보들을 지나왔다는 것을 알 수 있었다. - 총 3개의 Bottom sheet와 9개의 페이지 (Full screen pop up 3개, Page 6개)
왜 이렇게 느낄 수 있었을까? 개인적인 판단을 나누어보자면 이렇게 세 가지로 나눌 수 있었다.
1. [심리적] 긍정적인 감정으로 인한 판단 : 선착순 500명에 들었다는 긍정적인 감정에 의해 테스크를 수월하게 수행했다.
2. [인지적] 생각보다 적은 수행해야 하는 과제 : 이미 등록되어있는 정보들이 많으며 사실상 약관 동의와 주소 등록, 사인이라는 테스크만 수행하면 되었다.
3. [행동적] 공통된 버튼 위치 : 주소 등록을 제외한 모든 페이지에서 Bottom sheet(기본 페이지 위로 덮이는 팝업 화면, 팝업 화면이기 때문에 보통 전체 페이지를 덮지 않는다)이 CTA(Call To Action)(랜딩페이지와 웹사이트에 방문한 사람에게 우리가 원하는 반응을 유도하는 장치, 예를 들어 '로그인하기' '확인하기'등의 버튼이 있다.)가 같은 위치에 있어서 생각하지 않고 누를 수 있었다.
2. 유전자 검사 키트 배송 알림
해당 키트에 대한 배송 알림 화면은 우리가 익히 경험하는 커머스의 배송 조회 화면과 유사했다.
뱅크샐러드 배송내역 화면과 커머스 어플인 29cm, 쿠팡의 배송내역 화면배송상태와 배송내역도 흔히 볼 수 있는 영역에 위치해 있었다. (이 부분은 고객 입장에서 배송 내역보다 배송상태가 화면 내의 우선순위가 높기 때문에 동일한 위치를 사용했다고 유추할 수 있다.) 또한 배송 상태에 따라 해당 영역이 변경되는 것도 동일하다. 뱅크샐러드의 경우, 검사 키트가 도착한 후 [반송 접수] 버튼이 추가되었다. 커머스들 또한 배송이 완료된 시점에서 앱 화면이 배송 완료로 바뀌며 [리뷰 쓰기] [교환 및 반품] 등의 버튼이 추가된다. 앱 푸시도 배송상태에 따라서 전송되었고 이 또한 커머스와 동일하게 볼 수 있었다.
배송 후
3. 유전자 검사 키트 사용
키트 사용은 생각보다 어렵지 않았다. 반품을 위한 택배 봉투와 운송장 스티커도 동봉되어있었으며, 특히나 반품접수 버튼 하나로 기존에 등록한 주소로 배송 수거를 해가니 더욱 편했다.
다만, 본인의 경우에는 키트를 수령한 시점으로부터 30일이 지나서 이렇게 간편한 과정을 거치지 못했다. 30일이 지날 경우 직접 접수를 해야 한다는 사실을 뒤늦게 알았기 때문이다. 사실 본인 같은 케이스는 드물 것이다. 그럼에도 불구하고 이 부분을 개선해본다면 키트 수령일로부터 30일이 임박하는 시점 쯔음 앱 푸시 메시지 또는 유전자 검사 현황 페이지에서 이 부분을 알려줬으면 어떨까 했다.
기존 컴포넌트들을 활용하여 대략적으로 잡아본 시안4. 검사 결과 확인
아래 이미지는 유전자 검사 결과를 볼 수 있는 화면이다. 보통 결과가 도착했다는 것을 이미지화한다면 우편을 모티브로 한 일러스트나 인터렉션을 보여준다. 하지만 뱅크샐러드의 경우에는 카드 3장이 보인다. (마치 타로카드처럼 보이기도 한다.)
이렇게 카드 3개를 보여주는 이유는 바로 '내 능력 보러 가기' 버튼을 통해 알 수 있다.
뱅크샐러드의 유전자 검사 프로세스에서 개인적으로 가장 좋았다고 느꼈던 점 중 하나가 바로 이 페이지이다. 아래 첫 번째 이미지는 뱅크샐러드의 유전자 검사를 맡고 있는 기관인 '마이크로젠'의 검사결과지 샘플이다. 건강검진 이후 받게 되는 pdf처럼 유전자 검사 결과지도 유사한 형태라는 것을 알 수 있다. 잘 정리가 되어있지만 지면보다는 스크린에 익숙한 본인에게는 한눈에 바로 들어오지 않는다.
하지만 뱅크샐러드는 유전자 검사 결과를 토대로 3개의 특징을 '능력'이라고 표현하여 간추려 보여준다. 이는 마치 마블 코믹스의 히어로 같기도 하고, 게임에서 랜덤으로 뽑는 능력 카드 같기도 하다. 각 카드별 타이틀도 재치 있다. 본인의 경우에는 악력이 유전자 결과 상 높게 나왔는데, 마블코믹스의 타노스 장갑을 모티브로 뽑아와 '파괴의 손아귀'라고 타이틀을 달아뒀다.
각 카드의 하단에는 공유하기 버튼이 있고, 이 버튼을 통해 카카오톡을 비롯한 SNS를 통해 바로 공유가 가능하다. 이 검사를 받게 된 계기를 마련해준 인스타그램 스토리에도 깔끔하게 공유가 된다.
(뱅크샐러드 검사 결과 첫 페이지의 '파괴의 손아귀'스크린 샷을 보면 하단 공유하기 버튼이 없는데, 이 스크린 샷은 3월에 캡처된 화면이다. 이후 공유하기 기능이 추가되고 카드 하단의 설명란도 더 정리가 된 것을 알 수 있다.)
마무리를 하기 전 개인적으로 가장 마음에 들었던 부분을 뽑아보자면, 이벤트 소개 페이지의 CTA 카운팅 기능이다. 위에서 실컷 이벤트 신청 후에 과정에 대해 이야기하고 이제 와서 맨 앞부분이 마음에 들었다니? 아이러니하겠지만 중요한 것은 마지막에 이야기하는 게 기억에 잘 남지 않는가?!
이 글을 읽고 있는 대부분의 사람들은 대학교 수강신청, 콘서트 티켓팅, 명절 기차 예매 등의 '선착순 신청/예매'를 해본 적 있을 것이다. 그때마다 해당 사이트와 우측에는 네이비즘 사이트 창을 띄워두고 시작시간을 기다렸다. (제보에 따르면 인터파크 또는 멜론 티켓에서 CTA 카운트다운 기능을 제공하고 있다.) 하지만 뱅크샐러드는 그런 수고스러움이 필요 없었다. 바로 CTA에 카운트다운 요소를 사용하였기 때문이다.
기존 예약 사이트와 뱅크샐러드의 화면 스크린 샷기존 CTA의 기능은 누르는 행위이다. 또한 CTA위에는 누르면 나타날 상황에 대한 설명을 적어준다.
누를 수 없는 상황일 때 (예를 들어 로그인 페이지인데, 아직 아이디 비밀번호를 입력하지 않은 상황 등) 보통 회색으로 누를 수 없다는 것을 암시한다. 보통은 이 버튼 레이블에는 활성화되었을 때의 문구가 그대로 노출되거나 누를 수 없는 상황에 대한 설명을 하는 영역으로 사용된다. (예를 들어 로그인 페이지에서 '로그인하기' 또는 '로그인 정보를 입력해주세요'등으로 보인다. )
뱅크샐러드에서는 이 누를 수 없는 상황에 카운트다운 기능을 결합하여 고객이 이화면에서 원하는 것을 확실하게 파악하여 사용했다고 생각된다.
대게 이 모든 과정을 거치는데 짧으면 1-2주 길면 한 달이 걸리기도 한다. 조금이라도 더 빠르게 하기 위해 새벽 배송, 한집 배달 등이 기본이 되어가는 이 시점에서 이 긴 시간을 고객이 문제없이 진행하게 하다니, 정말 대단한 것 같다. 당시 코로나로 인해 검사 결과가 2주 정도 지연되었는데도 전혀 이 과정이 기분 나쁘지 않았다. 지연에 대해 명확히 알림을 해준 부분도 있었을 것이고, 준비되어있는 물건이 아닌 '검사'라는 것이 기쁘게 기다릴 수 있게 해 준 게 아닐까 한다.
