구독은 내가 할게, 관리는 누가 할래? 왓섭 앱 리뷰
Adobe XD를 활용한 UX/UI 개선 기획 [코드스테이츠 PMB4]
잃어버린 카드를 찾습니다.
최근 비상용 체크카드를 잃어버렸다. 얼른 정지 신청을 한 뒤 재발급받아 두었는데 머지않아 구독 모델 어플들의 청구 오류 메일 폭탄을 받게 되었다.
결제할 카드를 변경해야 하는데 문제는 내가 어떤 어플을 구독하는지, 정기 결제일은 언제인지 따로 리스트업을 해두지 않아 기억이 잘 안나는 것이었다. 그러다 우연히 다른 동기분을 통해 신개념 구독 관리 앱 [왓섭]을 알게 되어 직접 사용해보았다.
케이뱅크 은행은 되는데 비자카드는 안돼요.
결론부터 얘기하면 여기저기 흩어진 구독 모델의 결제 관리에 용이하다. 하지만 모든 은행사, 카드사가 되는 건 아니다 보니 통장 연동은 되는데 카드 연동이 안 되는 아쉬움이 있었다.
또 처음으로 내가 은행사 아이디만 있고 카드사 아이디는 없다는 것을 알게 되었다. 나는 각 은행 앱에서 결제하기 때문에 그 차이가 존재하는지도 몰랐다. 그래서 잘못된 로그인으로 인증수단이 계속 추가되는 불편함과 카드사 홈페이지에 새로 가입을 해야 하는 번거로운 과정을 겪게 되었다. 이 부분을 '왓섭에서 로그인을 시도할 때 알려주면 좋았을 텐데' 하는 마음을 담아 Adobe XD로 UX/UI를 개선하는 기획을 해보았다.
왓섭 앱의 카드 등록 플로우
1. 기본 홈 화면
새파란 메인 컬러와 화이트의 조합에 나는 [토스]를 떠올렸다. 개인적으로 토스는 '쉽고 빠른 송금'의 느낌인데, 나는 왓섭을 통해 흩어진 구독 모델을 한 번에 모아 '절약'을 하고 싶은 마음이 더 컸다. 그래서 '돈', '가계부'와 같은 느낌을 주는 초록색 계열로 메인 컬러를 바꿔보았다. (디자인 연습을 위해 일부러 바꿨다!)
메인 카피는 절약을 강조해 앱 사용을 유도하고, 서브 카피는 카테고리의 용도를 확실히 기재해 '돈 관리'의 느낌을 더했다.
하단 바의 경우 [문의하기]와 [설정]을 추가해 직관성을 높였다. 실제로는 왼쪽 상단 프로필을 클릭해야 해당 기능을 사용할 수 있다.
2. 구독 서비스 등록 방법 선택
우선 [공인인증서로 한 번에 등록하기]만 '한 번에'라는 쉽고 간편한 느낌을 주는 카피와 컬러를 주어 강조한 점이 눈에 띄었다. 하지만 얇고 긴 바가 직관성이 떨어진다고 생각해, 짧고 뭉툭한 바로 바꾸고 로고와 기능 제목이 잘 보이게 사이즈를 키웠다.
또 왓섭을 이용하는 이유가 간편하게 구독 결제를 관리하기 위함인데 [직접 등록하기]는 우선순위보다는 추가적인 기능이라고 생각해 맨 마지막으로 배치하는 등 순서를 조정했다.
[추가적인 피드백]
- 직접 클릭하는 오른쪽 엄지손가락의 위치에 은행이나 카드 등록이 있었으면 더 좋았을것 같다는 의견.
3. 등록할 카드사 선택
2번과 마찬가지로 얇고 길던 바에서 짧고 뭉툭한 바로 바꾸고 로고와 기능 제목 크기를 늘렸다. 왼쪽 실제 [왓섭]과 오른쪽 내가 기획한 화면, 둘 다 동일하게 8개의 카드사를 담고 있다.
우리카드와 현대카드는 살짝 잘리게 위치해 자연스럽게 스크롤을 위아래로 움직이도록 유도했다.
카드사의 경우 보다 더 쉽게 찾을 수 있도록 ABC, 가나다 순으로 배치했다. 외부 결제 연동 사이트가 아닌 자체적인 기능이라 가능하다고 판단했다.
[추가적인 피드백]
- ㄱㄴㄷ순 보다는 고객이 많은 카드사 순으로 나열하는게 더 좋지 않았을까?
순서를 바꿀 때 데이터에 기반한 의사결정이면 더 좋았을것 같다는 의견.
-> 매번 결제를 위해 카드사를 선택해야 한다면 고객이 많은 순이 좋겠지만,
카드 등록을 위해 한번 거쳐가는 화면이라면 찾기 쉬운 ㄱㄴㄷ 순이 더 좋지 않을까?
이 글을 보고 있는 기획자 선배님들 (...) 도와주세효,,
4. 선택할 카드사 로그인
로그인의 경우 보이는 것처럼 [아이디 입력] - [비밀번호 입력]이 나뉘어 있다. 과정이 복잡하지 않도록 느껴지게 화면을 나눈 것 같았다. 하지만 로그인에서 중요한 점은 '은행사와 카드사 정보는 다를 수 있다', '3회 이상 로그인 오류 시 은행으로부터 인증 수단이 추가된다.'와 같은 정보 고지가 필요하다고 느꼈다. 간편하게 하려다 시간이 더 지체되어 번거로움을 느꼈기 때문이다.
이 같은 폐인 포인트를 해소하고자 '은행사와 카드사 정보는 다를 수 있다'는 컬러로 강조했고 아이디를 입력할 때 '3회 이상 로그인 시 인증 수단이 추가된다'는 정보를 볼 수 있도록, 비밀번호를 입력할 때 리마인드 문구를 넣어 강조를 더했다.
또 고객이 직접 입력해야 하기 때문에 키보드 화면이 바로 나올 수 있도록 기획했다. 지금 생각해보니 한글 대신 영어가 바로 나오게 기획했으면 더 좋았을 텐데 (...) 브런치에 리뷰하면서 또 한 번의 수정 포인트를 발견했다.
5. 카드사를 통한 구독 정보 등록
같은 화면에서 카피가 바뀌는 [왓섭]
진행 중인 과정을 바와 달리는 아이콘으로 직관적으로 표현해 보았다.1분 정도 예상되는 시간 동안 왓섭은 진행 과정을 알려주어 기다림의 지루함을 덜어주었다. 좀 더 직관적으로 '진행 과정'을 표현하면 좋겠다고 생각해, 메인 카피를 재치 있게 바꾸고 로딩바 대신 달려가는 아이콘으로 바꿔보았다. 디졸브 애니메이션으로 나름 진짜 달려가는 것처럼 표현해 보았는데 이는 본문 하단 프로토타이핑 링크를 통해 확인할 수 있다.
6. 등록 완료 팝업
등록이 완료되자 저렇게 알림이 왔다. 자연스럽게 이를 클릭해 메인 화면으로 넘어가긴 했는데 '좀 더 격하게 축하하면 어떨까!' 하는 마음으로 크게 만들어 보았다. ㅎㅅㅎ. 좋은 건 크게 보자.
직관적인 축하 폭죽 아이콘과 함께 '6개의 구독이 발견되었어요'라는 숫자와 문구를 더해 클릭을 유도했다.
사실 클릭해야 하는 배너 문구는 좀 더 키치 한 카피를 쓰고 싶었는데 내 돈을 믿고 맡기는 느낌을 유지하고 싶어 참았다,, 어렵다 브랜딩,,
7. 카드 등록된 홈 화면 조회
우선 메인 카피 밑 안내사항은 하단 알림바에 빨간 강조를 주며 대체했다. 등록하자마자 일부 기능이 중지되었다는 문구를 보는 것보다는 추후에 확인하는 것이 더 좋을 것 같았다.
서비스 날짜의 경우 '요일'을 더했다. 그래서 '3월 13일이 언젠데?!' 하는 폐인 포인트를 한 글자로 해소할 수 있다.
갱신을 앞둔 우리은행 적금의 경우 '내일'이라는 아이콘과 더불어 컬러 배너를 통해 강조했다.
마지막으로 도시가스 역시 잘리게 배치하여 자연스럽게 스크롤을 유도하도록 기획했다.
[추가적인 피드백]
- 고객이 업데이트 내용을 누락할 수 있으니 기존대로 공지사항을 보여주는게 신뢰를 얻기 좋을것 같다.
-> 해당 화면은 신규 고객의 입장에서 설계한 기획이라 부정적인 느낌을 주지 않는 것에 초점을 둠.
기존 고객에게는 원래 어플대로 공지사항을 보여주는 방향이 더 좋다고 생각함.
Adobe XD를 활용한 왓섭 앱 UX/UI 개선 기획
GIF가 브런치 모바일에서는 되는데 pc는 멈추네요,,8시간 만에 다시 기획하고 툴을 익혀 애니메이션 효과까지 주려니 아쉽긴 하지만 처음으로 결과물을 만들어 뿌듯했다.
개인적으로 내가 영상편집에 익숙하다 보니 처음 사용하는 툴이지만 크게 어렵진 않았다. 단축키가 비슷했고 한글을 지원하고 있었다 :')
Adobe XD의 아쉬운 점은 링크나 파일로 공유할 때 아이폰 이모지가 자동으로 숨김 처리되어 아이콘을 다시 따로 구해야 했다. 아마 저작권 때문인 것 같다. 그래도 미리 이슈를 케어해주는 것 같아서 무료 툴인데도 퀄리티가 좋다고 느꼈다. 어도비 쵝오.
지난 포스팅에서 내가 친구들에게 페이퍼 프로토타이핑을 보여주자 유치원생의 과제를 보는 것 마냥 아무 말 없이 웃으며 고개를 끄덕였다고 했는데 ㅠㅋㅋㅋ 확실히 UI 디자인 툴을 이용하니 내가 원하는 기획 방향과 의도를 명확하게 전달할 수 있어 좋았다. 역시 배움은 언제나 즐겁고 옳다 :')
p.s. 해당 프로토타입은 여기를 클릭하시면 직접 보실 수 있습니다! 얼른 비자카드도 업데이트 되기를!!!
+) 해당 글 작성 후 왓섭에 미팅 다녀온 후기
브랜드를 사랑하는 앱등이로 시작해, 제품이 아닌 가치를 파는 잡스병을 거쳐
혁신을 꿈꾸는 프로덕트 매니저에 도전하다. 코드스테이츠 PM 부트캠프, 그 100일간의 기록
김긍정 brunch.co.kr/@positive-kim
