brunch

You can make anything
by writing

C.S.Lewis

by Amy Aug 17. 2017

온라인 정기결제, 똑똑하게 관리하기

정기 결제 관리를 위한 가상 챗봇 "캐시봇" UI 디자인 작업 과정

최근에는 구독형 모델이 정말 많은데요. 넷플릭스, iCloud, 드롭박스, 멜론, tving, 미미박스 등등. 생산성 분야부터, 뷰티 / 푸드 / 엔터테인먼트 / 디자인 등 다양한 서비스에 정기 구독 모델이 적용되고 있습니다. 


이번 프로젝트는 매월 정기결제 서비스들의 자동 결제 문자를 받을 때마다 "오늘이 정기결제 날일 줄 알았다면 플랜을 바꾸거나 취소했을 수도 있을텐데!"하는 아쉬움에서 출발한 프로젝트입니다. 온라인 정기결제를 똑똑하게 관리하기 위한 챗봇 "Cash Bot" 의 가상 Mock-up 디자인 작업 과정을 공유합니다.


- 핵심 기능
1) 내가 사용하는 정기결제 서비스(넷플릭스, iCloud 등)의 결제일 등록
2) 정기 결제일의 1일 또는 3일 전 알림 설정
3) 매 달 정기 결제 사용 금액 리포팅
4) 신규/인기 정기 결제 서비스 탐색 및 발견
5) 정기 결제 서비스 취소 및 플랜 변경 가이드
01. 페이스북에서 Cash Bot을 친구로 추가합니다.
02. 캐시봇이 친구로 추가되면 처음에 먼저 말을 겁니다.
03. 사람들이 많이 쓰는 정기결제 목록을 카루젤 형태로 보여주어, 쉽게 추가할 수 있습니다.
04. 리스트에 사용하고 있는 정기결제가 없을 경우, 더보기로 탐색하여 내가 사용하고 있는 정기결제를 추가합니다.


05. 유튜브 레드를 추가하는 샘플 화면입니다. 플랜 세부 정보를 입력하고, 언제 알림을 받을지 선택합니다.
06. 내가 등록해둔 정기결제 정보는 언제든 수정/삭제 할 수 있습니다.


07. 캘린더뷰를 통해, 이번 달에 결제될 예정 목록을 한 눈에 확인할 수 있습니다.



08. 가끔씩, 새롭게 오픈한 정기결제 서비스 또는 사람들이 많이 사용하고 있는 정기결제 서비스를 추천해줍니다.
09. 매달 초에는 지난 달 정기결제 되었던 모든 서비스들을 리포팅 받을 수 있습니다.



10. 프로필을 통해 설정을 변경할 수 있습니다. 



캐시봇의 브랜딩을 위한 컬러 팔레트입니다.



- 작업 기간: 2017년 5월 ~ 7월
- 사용 도구: Sketch + Invision
- 대상 디바이스: iOS
- 대상 플랫폼: Facebook Messenger 
- 디자인 참고 자료: FB Messenger Kit


작가의 이전글 주니어 개발자의 코딩공부 시작하기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari