화산귀환을 좋아하는 사용자라면 신청안하고는 못배깁니다(?)
* 이 글은 운영 중인 UX 스터디 내 챌린지 참여를 위해 운영자인 제가 작성한 글입니다.
얼마전에 네이버웹툰을 보다가 홀린듯이 카드를 하나 발급하게 되었는데 온라인과 오프라인에서의 경험이 너무 인상깊어서 공유해봅니다 :)
우선 딱 카드의 타겟에도 맞는, 딱 필요로 할만한 사용자에게 아주 적절한 위치에 해당 UI를 보여줍니다.
딱 맞는 사용자가 적절한 맥락에 UI를 발견하게 되며
멘트도 매력적이라 사용자의 참여까지 잘 유도하고 있습니다.
(1) 카드 설명 : 네이버 웹툰에서 쿠키를 결제할 때 50%페이백, 결제시 네이버포인트 적립등의 혜택이 있는 카드입니다.
(2) 타겟 고객 : 네이버웹툰에서 쿠키를 결제하는 사용자 / 네이버페이 포인트를 적립 및 사용하는 사용자가 주요 타겟입니다.
(3) UI 노출 위치 : 네이버 웹툰 내 쿠키결제화면 상단 (실제로 쿠키를 결제하는 상황에서, 쿠키 결제 시 50% 페이백을 해주는 카드를 마주치게 됩니다) 에서 배너형태의 UI가 보입니다.
(4) 노출 방식 : “쿠키값 절반으로 줄여주는 마법같은 카드” 라는 문구 + 유명한 웹툰 “화산귀환”의 케릭터를 함께 사용합니다. 화산귀환을 하는 사람이라면 한 번 더 눈여겨 볼 것 같아요!
위의 UI를 보고 누르면 카드 발급 과정으로 이동하게 되는데
참여 과정이 일반적인 카드 발급 과정과 너무 달랐고 '네이버웹툰'의 성격이 드러나서 인상적이었습니다 :)
처음에는 아래처럼 보통의 카드 소개 페이지 처럼 카드를 신청했을 때 얻을 수 있는 혜택 + 하단 버튼이 보이며 '카드 신청하기' 버튼을 누르면 본격적으로 카드 신청 과정이 시작됩니다.
본격적인 카드 발급 UX가 시작되면 우선 카드의 디자인을 커스텀 할 수 있는데 그 선택지가 웹툰이라는 도메인에 맞게 유명한 웹툰 2가지를 테마로 한 카드와 기본카드 1개, 총 3가지의 선택지를 제공하고 있습니다.
여기서부터 인상깊은 요소들이 가득했는데요,
각 카드를 선택하면 하단에서 웹툰을 테마로 한 큰 UI가 떠오르고 짤막한 애니메이션이 보입니다.
예를 들어 화산귀환을 테마로 한 카드를 눌렀을 때는 “ 자 화산파 입문을 위한 절차를 시작한다! 잘 따라오도록!” 이라고 주인공이 외칩니다.
카드 신청 과정을 마치 화산파(주인공의 문파)에 입문하는 것처럼 묘사해서 신선하고 앞으로의 과정이 궁금했습니다. 정말 평범한 과정을 특별하게 묘사했으니까요!
('화산파 입문을 시작한다!' 라는 멘트와 컨셉은 밑에서 소개할 오프라인에서의 경험으로도 쭉 이어집니다)
그리고 이 웹툰을 좋아하는 사람의 입장에서 “ 카드 신청하는데 이런 멘트는 반칙이지..!! 그렇지만 가보자..!!” 이런 생각이 들었습니다.
이후 카드 신청 과정은 보통의 카드 신청과정과 동일하게 다양한 정보를 요청합니다.
(1) 약관 동의 -> (2) 이름 주민등록번호 등 정보 입력 -> (3) 신분증정보 입력 -> (4) 금융소비자법에 따른 계좌 정보 등록 -> (5) 입력한 내용 재확인 - > (6) 본인인증 -> (7) 자택 및 직장정보 입력 -> (8) 카드 이용정보 추천 및 선택 (명세서 받는 법, 카드 신청한도 설정 등) -> (9) 카드 비밀번호 설정 -> (10) 부가서비스 신청 (후불 하이패스, 통신요금/관리비 등 정기결제) -> (11)모바일 심사 (챗봇을 통한 인증) 의 과정으로 진행되었습니다.
위처럼 총 10단계의 절차를 통해 카드를 신청하게 되며
지루할만한, 이탈할만한 긴 과정이지만 각 스텝에서 주인공이 나타나 “신청을 위해 필요한 정보다! 잘 입력하도록!” 과 같이 적절한 안내멘트를 말해주며 사용자의 참여를 독려합니다.
저도 지루해서 "다음에 할까?" 라는 생각이 들기도 했지만 소소한 재미요소와 문구덕분에 지치지 않고 신청단계를 이어나갈 수 있었습니다 :)
+ 중간에 신분증 정보 입력 시 증명사진 부분 / 부가서비스 신청 과정속에 또다른 케릭터의 얼굴이 포함되는 소소한 재미요소까지도 있었습니다 :)
위에 적은 것 처럼 온라인에서의 발견 및 카드 신청 과정도 즐거웠지만
마지막으로 오프라인에서 카드를 받는 순간까지도 특별한, 팬심을 자극하는 디테일들이 숨어있었습니다.
카드의 앞면과 뒷면은 다음과 같이 생겼습니다. 여기에 어떤 요소들이 숨어있는걸까요?
우선 카드의 앞면에는 한자와 IC 칩, 그리고 꽃을 연상케하는 로고가 상단에 그려져있습니다.
이 각각에 대해 의미를 알고나면 더 흥미로운데요, 우선 IC칩의 옆에는 저 카드의 테마인 웹툰 '화산귀환'의 제목과 '재경각' 이라는 한자가 같이 적혀있습니다. '재경각'은 무협지에 자주 나오는 용어로 일종의 행정기관! 이라고 이해하면 쉽습니다.
그리고 이 IC칩이 화산귀환 & 재경각이라는 한자와 같이 붙어있어 마치 직인/인장과 같이 보입니다.
그리고 이것은 카드의 신청 UX에서 처음으로 보였던 멘트인 "화산파 입문을 위한 절차를 시작한다!" 라는 멘트와 컨셉과 이어지는 디자인입니다.
화산파 입문을 시작한다! 라는 멘트로 카드를 신청한 뒤 -> 오프라인에서는 입문이 성공적으로 되었다는 직인이 찍혀있는 증명패인 카드를 받는 셈이죠!
써있는 한자가 궁금해서 찾아보고 의미를 고민했는데
이런 뜻과 의도가 숨어있는 것 같아서 정말 감탄했습니다.
그 밑에는 화산귀환에서 주인공의 문파의 상징과도 같은 매화꽃 (우리나라로 치면 무궁화 같은거죠!) 이 로고처럼 박혀있고, 우측 하단에는 네이버웹툰의 로고가 배치되어 있습니다 :)
좋아하는 브랜드의 로고가 박힌 제품을 소비하는 것 처럼 '화산귀환'의 로고가 박혀있는 카드인거죠.
그리고 카드의 후면에는 특정 인물들의 서명이 상단에 보입니다.
이 역시도 한자를 찾아보니 장문인 / 재경각주 라는 뜻으로
장문인은 무협지에서 문파의 수장이라는 뜻, 재경각주는 행정기관의 대장! 과 비슷한 뜻입니다.
이 서명은 장문인과 재경각주가 카드 신청인의 화산파 입문을 허락한다는 의미가 담겨있는 셈입니다.
카드 발급 과정에서 '화산파 입문을 시작한다!' 라는 멘트와 쭉 이어지는 디테일이긴 하지만
웹툰에서 장문인과 재경각주를 맡은 케릭터가 매력적으로 그려져있기 때문에
웹툰 화산귀환을 좋아하는 사람이라면 그 의미를 떠나
이 케릭터의 서명이 있다는 것 만으로도 웃음을 지을만한 것 같아요!
따뜻하지만 금쪽이 주인공 때문에 해탈한 장문인과 돈을 참 좋아하는 웃음벨 재경각주
'카드를 발급한다!' 라는 행동 이후에 이어지는 사용자 경험은
온라인에서 신청과정 부터 오프라인에서 카드를 받고 사용하는 과정을 포함합니다.
이 때 좋은 경험을 제공하려면 커머스에서 물품을 구매했을 때 처럼
온라인 뿐 아니라 오프라인까지도 연결된 & 좋은 경험을 줄 수 있도록 설계해야 한다는 뜻이죠.
그래서 이 카드의 발급 및 사용 경험이 더 특별하게 다가왔던 것 같습니다.
첫 번째로 네이버 웹툰이라는 앱의 특징, 타겟 사용자의 특징, 광고하고자 하는 카드의 특성등을 모두 잘 고려한 특화된 UI가 적절한 위치와 타이밍에 노출되어 있었고
두 번째로 어쩌면 평범할 수 있는 카드 발급 과정을 정말 특별하게 만들었고, 지루할만한 과정에 재미요소를 넣어 사용자 입장에서 허들을 낮추고 끝까지 단계를 이어나갈 수 있게 유도하고 있었습니다.
그리고 마지막 오프라인에서 실제로 받아봤을 때도
정말 특별한, 웹툰을 좋아할만한 사람이라면 감탄할만한 디테일들 숨어있었고
'화산파 입문을 시작한다!' 라는 온라인에서의 멘트가 입문을 허락하는 컨셉의 카드를 받아보는 오프라인의 경험까지 쭉 이어지는, 연결된 좋은 경험을 할 수 있었습니다.
또한 카드 발급량 증가 / 발급과정에서 이탈률 감소 등 비즈니스적인 목표까지도 잘 달성할 수 있으면서도 그 방식은 사용자의 입장에서 재밌게 설계되있는 것 같습니다 :)
Q. UX / UI 스터디에 관심이 있으신가요?
Q. 다양한 레퍼런스를 접하고 분석하는 역량을 키우고 싶으신가요?
* 이 글은 스터디 운영자인 제가 직접 챌린지 참여를 위해 정리한 내용을 바탕으로 작성되었습니다.
* 스터디에는 현재 170명 이상의 멤버분들이 참여하고 계시며, 매주 UX/UI리뷰, 북리뷰, 아티클공유 중 원하는 방식으로 챌린지에 참여하며 함께 성장하고 있습니다.
*기획자,디자이너,취준생 등 직군 연차 관계없이 UX UI에 관심있다면 누구나 스터디에 참여할 수 있습니다. 관심 있으시다면 스터디에 합류해보세요!