서비스 이름: Asana (asana.com)
서비스 소개: 기업 내 여러 부서의 업무 현황을 한 눈에 볼 수 있는 업무 협업툴. 다른 부서 간 혹은 부서 내 팀원들 간에 협업에 드는 시간과 의사소통 비용을 최소화하고 효율적으로 목표를 달성할 수 있게 돕는다.
스터디 주제
- 스터디 주제: 결제하기 페이지
- 스터디 대상 페이지(플로우)의 목표: 유저는 선택한 요금제를 결제하기 위해 필요한 카드 정보를 입력하고 결제를 완료한다.
스터디 주제에 대한 서비스만의 특징
- 결제 방식은 두 가지 방법 중 하나를 선택한다. 하나는 간편결제 서비스인 페이팔 사용, 나머지 하나 카드 정보를 직접 입력하는 방식이다. 그 중 카드 정보를 직접 입력하는 방식이 우선 선택된다.
- 카드 정보를 직접 입력하는 경우 결제요금 청구서를 받기 위한 주소 정보를 같이 입력해야 하는데, 주소 정보를 입력하는 인풋 필드(Input Field)를 처음부터 모두 노출하지 않는다.
- 결제하기 버튼을 클릭하기 전, 결제하려는 요금제의 상세 정보를 다시 한 번 요약해서 보여준다.
🧾요금제 요약 정보
1. 요금제를 적용할 작업 공간(워크스페이스)
2. 선택한 요금제의 이름
3. 결제 주기
4. 작업 공간의 사용자 수
4. 결제 처리를 위한 개인정보 수집 및 이용 동의 여부를 유저가 적극적으로 표시(ex. 체크박스 표시)하는 방식이 아닌, 단순 안내로 대신하고 있다.
서비스의 좋았던 UI
- 결제 정보를 입력하는 영역의 오른쪽에는 선택한 요금제의 주요 특징을 유저가 궁금해하는 정보를 중심으로 잘 요약해서 보여주고 있다.
- 카드 정보보다 상대적으로 덜 중요한, 주소 정보를 입력하는 인풋 필드는 최소한의 내용만 보여준다.
- 유저는 많은 정보를 입력해야 한다는 부담감을 덜 느낄 수 있다.
- 유저가 추가 정보를 입력해야 하는 시점에서는 이미 필요한 정보의 절반 이상을 입력한 상태이므로, 유저가 카드 정보를 입력하는 과정에서 결제 페이지를 이탈할 확률도 낮아질 것이다.
- 요금제 비교 및 선택 페이지로 돌아갈 수 있는 Edit 버튼이 있어서, 유저가 원한다면 결제하려는 요금제를 언제든지 변경할 수 있도록 배려하고 있다.
- 유저가 결제 전 자신에게 정말 필요로 하는 요금제를 선택했는지 검토할 수 있는 여유를 주는 것은 결제 성공율을 높이는 방식이 될 수 있다.
서비스의 아쉬웠던 UI
- 결제 수단의 선택지가 많지 않아서 라디오 버튼으로 선택하는 방식을 사용하고 있다. 결제 방식을 선택하는 UI가 해당 기능의 중요도에 비해 눈에 띄지 않는 것 같았다.
- 의도: 해외 프로덕트가 결제 수단 선택지가 많지 않은 이유를 추측해보자면, 국가 별로 선호하는 결제 수단에 모두 대응하기 어렵기 때문인 것 같다. 그래서 카드 정보를 직접 입력받는 옵션이 결제 방식으로 우선 선택되는 경우가 많이 보이는 게 아닐까? (*결제 방식으로 간편결제 수단인 페이팔, 스트라이프(stripe)를 사용하는 곳도 꽤 있다.)
- 적용할 점: 글로벌 비즈니스를 영위하는 프로덕트라면 국내 프로덕트처럼 다양한 결제 수단 선택지를 강조하기보다는, “카드정보 직접 입력”을 선택했을 때 나타나는 입력 폼(Form) 영역이 화면의 중심이 되어야 할 것 같다.
- 요금제 비교 및 선택 페이지로 돌아갈 수 있는 Edit 버튼이 있어서, 안 그래도 많은 정보를 요구하는 페이지에서 유저에게 너무 많은 선택지를 제공하고 있다. 유저에게 한 페이지에서 너무 많은 선택지를 제공하는 것은 페이지의 목표에 집중하기 어렵게 하고 이탈할 확률을 높인다.
- 유저 입장에서는 결제 처리를 위해 개인정보 이용 및 제공 동의를 받는다는 내용이 CTA 버튼 아래에 있어 지나치기 쉽다는 점이 아쉽다.
- 적용할 점: 유저에게 결제 처리를 위한 개인정보 수집 및 이용 동의를 받는 방식에 대한 UI 디자인 규정이 국내와 해외가 다를 수도 있다. 국내 프로덕트에서 이러한 UI를 사용해도 되는지는 법적인 이슈 측면에서 좀 더 알아볼 필요가 있다.