CS 담당자를 감동시키는 로그인/가입 UX개선기
라프텔 UX 개선기
안녕하세요. 라프텔 프로덕트 디자이너 샐리입니다. 이번 블로그에서는 라프텔의 로그인/가입 플로우를 개선한 과정을 공유해보려고 합니다.
배경
로그인/가입 화면은 유저들이 원활하게 로그인을 하거나 가입할 수 있도록 하는게 가장 중요합니다. 복잡하거나 불친절한 프로세스는 사용자의 이탈을 유발할 수 있어 간단하고 직관적인 UX로 유저가 프로세스를 이해하고 완료하기 쉽게 만들어줘야 하는데요.
이번 프로젝트는 신규 유저는 빠르고 쉽게 가입 화면에 접근할 수 있도록 하고, 기존 유저의 경우 로그인한 수단을 잊지 않도록 하는 것을 목표로 시작하게되었어요.
User Goal
신규 유저 : 쉽고 편리하게 회원가입을 하는 것
기존 유저 : 자신의 계정에 쉽고 빠르게 로그인하는 것
막힘없는 ‘로그인/회원가입’ 페이지가 되도록 유저 플로우 개선 및 UI 개선, 로그인 및 가입 버튼 통합 등 전체적인 UX개선을 진행했고 이제 아래에서 개선된 것들을 하나씩 보여드릴게요.
로그인/가입 과정에 불필요한 뎁스 줄이기
라프텔의 보관함은 로그인한 유저에게만 제공되는 기능으로, 신규 유저는 보관함 기능에 대한 안내를 확인하고 버튼을 눌러 로그인/가입 랜딩 화면으로 이동할 수 있었어요. 사용자 경험측면에선 UI를 복잡하게 만들 수 있는 불필요한 뎁스는 최소화하고, 사용자에게 필요한 정보나 기능에 빠르고 쉽게 접근할 수 있게하는 직관적이고 단순한 인터페이스를 제공하는 것이 중요한데요. 여기서 저는 유저에게 로그인/가입을 더 빠르게 도와줄 수 있도록 바로 랜딩 화면으로 보내는 개선점이 있을 수 있겠다고 생각했어요.
또한 로그인/가입 랜딩화면에선 이메일 외 소셜 계정 로그인 수단들은 [다른 방법으로 계속] 버튼을 한 번 더 클릭하고 들어가야 했는데 이 부분도 뎁스를 줄일 수 있을 것 같았습니다.
불필요한 뎁스를 줄이기 위해 로그인이 필요한 화면엔 바로 로그인/랜딩 화면으로 이동할 수 있도록했고 소셜 계정 수단들을 화면 하단에 원형 아이콘 UI로 배치하여 뎁스를 줄이는 작업을 진행했습니다. 또한 가장 많이 사용되는 소셜 계정들을 순서대로 배치해 중요한 버튼에 대한 우선순위를 높였습니다.
추가적으로 로그인과 가입 과정은 유저들에게 첫 인상을 남기는 중요한 단계이기때문에 랜딩화면에 유저들이 흥미로워할만한 카피와 작품들로 백그라운드 인터페이스를 재구성하여 개선시켰습니다.
로그인과 가입 버튼을 하나로!
두 번째는 랜딩 화면의 단순하고 직관적인 인터페이스를 위해 이메일 로그인과 이메일 가입을 이메일로 시작하기라는 버튼 하나로 통합했어요. 이메일 입력 후에 계정 유무 판별을 거쳐 로그인 플로우 혹은 가입 플로우로 타게끔 개선한거죠.
하지만 로그인과 가입을 하나의 버튼으로 통합 시키는게 유저에게 자연스러울지 우려스럽다는 팀원들의 의견이 있어 프로토타입을 만들어 의사결정을 진행했습니다. 그리고 프로토타입을 만들어보니 별다른 문제없이 플로우가 자연스러워 통합하는걸로 결정하게 됐습니다.
왼쪽 : 가입 → 메일 입력 후 가입 플로우 화면으로 이동
오른쪽 : 로그인 → 이메일 입력 후 하단 비밀번호 텍스트 필드가 자연스럽게 생성
다양한 소셜 계정이 낳은 부작용
기존 사용자가 다시 로그인할 때, 로그인 정보가 기억나지 않는다는 VOC가 지속적으로 접수되고있었어요. 사실 유저 입장에서는 소셜 계정을 통한 로그인이 간편하지만, 이메일을 포함해 페이스북, 트위터, 구글, 카카오, 애플까지 총 여섯 가지 방식으로 다양한 로그인 수단을 제공하다 보니, 로그아웃 후 다시 로그인할 때 로그인 수단이 헷갈릴 수 있는 부작용이 생기게된거죠. 더 나아가서는 계정을 착각하고 멤버십이 사라졌다고 분노하는 VOC들도 있었어요.
실제 VOC 일부
“멤버십을 사도 이틀만에 광고 틀고 멤버십 추가구매하라하고,,내역복구할랬더니 없다니요”
”돈은 계속 빠져나가고 있는데 로그인이 계속 안되고 실패했다고 뜨니까 결제 취소도 불가능하고…” ”월 9,900원에 멤버십내고 봤는데 광고 안보면 안보여준다는 논리를 펼치네요.”
툴팁으로 마지막으로 로그인한 수단을 알려주기
로그인 정보가 기억나지 않는다는 VOC를 줄이기위해 마지막으로 로그인한 수단을 툴팁으로 안내해 로그인을 시도하는 사용자가 막힘없이 빠르게 로그인할 수 있도록 개선했어요. 이 개선은 유저들뿐만 아니라 저조차도 필요했던 기능이라 꽤나 만족스러웠던 UX개선이었답니다.
잘 대응되지 않고 있던 에러 케이스
아래 왼쪽 모달은 가입 시도시 입력한 이메일이 중복 이메일인 경우에 뜨는 화면인데요. 괄호 안의 내용을 명확하게 파악하기 힘들뿐더러 유저에게 적절한 해결 방안을 제시하고 있지 않았어요.
또한 오른쪽 모달은 로그인/가입에서 쓰이고 있는 공통 에러 모달인데 소셜 계정으로 로그인을 중도에 취소할때에도 해당 모달이 뜨고 있었어요. 유저입장에선 뜬금없는 UX Writing이라 좋은 유저 경험은 아니겠다고 생각했습니다.
예외 케이스에 대한 적절한 UX Writing 제공
첫 번째로, 이미 사용중인 이메일인 경우 유저에게 적절한 해결방안을 제시하는 명확한 문구로 수정을 했어요.
두 번째로는 소셜 계정 로그인 취소시에 뜨던 공통 에러 모달을 케이스에 맞게 로그인 취소 토스트로 변경을 하는 작업을 진행했습니다.
그 외 자잘한 로그인 UX 개선
- 비밀번호 보기 및 감추기 기능 추가
사실 로그인하거나 가입할때 비밀번호 잘못치는 경우가 되게 많잖아요. 실수 방지를 위해 입력한 비밀번호를 확인할 수 있도록 비밀번호 보기 및 감추기 기능을 추가했습니다.(사실 인풋필드의 기본적인 UX지만 이번 개선을 통해서야 해결할 수 있게되서 너무 기뻤습니다.야호)
또한 로그인 화면에서 비밀번호 찾기 버튼이 잘 보이도록 액션 버튼 상단 중앙으로 위치를 변경하고 조금 더 친절한 UX Writing으로 개선을 진행했어요. [비밀번호 찾기 → 비밀번호를 잊으셨나요?]
결과
훨씬 단순해진 유저 플로우
개선 전과 개선 후 유저 플로우를 비교해 보면 한 눈에 봐도 정말 간단해진걸 확인할 수 있어요. 다양한 케이스들이 복잡하게 얽혀있던 유저 플로우가 오로지 로그인/가입에 유저 골에만 집중할 수 있도록 간단하게 정리가 되었어요.
또한 개선 전과 개선 후의 채널톡 로그인 계정 문의에 대한 조회수를 분석을 해보았는데 조회율이 약 19%에서 12%로 개선이된 걸 확인할 수 있었어요! 계정과 관련된 자잘한 UX 개선들이 많았는데 성공적인 개선이라는 생각이 들었습니다.
개인적으로는 단순히 기획에서 요청 받은 개선사항(사용자가 쉽게 로그인하고 가입할 수 있는 것)외에도, 운영팀의 리소스를 줄이는 방안도 함께 고민해 개선시키고 반영한 경험들이 꽤 의미있었던 것 같아요. 유저에게 도움이되는 안내 추가와 뎁스 간소화, 작지만 디테일한 UX 개선 등을 통해 목표를 달성할 수 있었고 좋은 사용자 경험을 제공하면서도 내부 팀원들의 인력부담을 줄일 수 있는 효율성을 높힌 프로젝트였습니다. 그래서 배포 후 운영팀 팀원들의 반응이 정말 좋았어요.
런칭 6개월 후 운영팀 의견
워니 : 개선 후 계정 관련 VOC가 체감이 될 정도로 준 것 같아요!
그린 : 가입한 계정에 구매이력이 없어졌다는 CS가 많이 줄었어요. 최근 로그인한 수단을 알려주는 툴팁이 도움된 것 같고 이로인해 다른 CS에 더 집중할 수 있게됐어요. 프로덕트 디자인팀 진짜 최고최고!
로그인과 가입은 서비스와 사용자 간의 연결을 시작하는 지점이라고 생각합니다. 앞으로도 라프텔은 더욱 간편하고 사용자 친화적인 사용자 경험을 제공하기 위해 지속적으로 고민하고 노력할 예정입니다.
Written by Seunglee Seo, Laftel Product Design Team
라프텔 프로덕트 디자인팀의 다른 이야기
