Figma로 로켓펀치 회원가입 과정 개선 하기
[코드스테이츠 PMB 11기] 와이어프레임과 Figma
사실 진짜 취업을 해야겠다!라고 마음먹은 지는 얼마 되지 않았기 때문에 잡코리아나 사람인, 워크넷과 같은 대형 커리어 사이트를 제외하고는 잘 알지 못했다. 코드스테이츠 PMB 과정을 진행하면서 여러 기업들을 찾아보기도 하고, 진짜 취업준비라는 것을 해보자 라는 생각으로 여러 커리어 관련 기업들을 알게 되었는데, 그중 내 마음속에 거슬리는 기업이 있었으니 바로 '로켓펀치'라는 기업이다.
내가 '로켓펀치'가 거슬렸던 이유는 바로
바로 뭐만 하면 맨날 회원 가입하라고 하기 때문이다...
난 괜히 이런 거에 반항심이 생기는 사람이라(쓸데없음) 지금까지 회원가입을 안 하고 볼 수 있는 자료만 보곤 했다. 그런데 이번 과제는 지금까지 내가 분석해본 적이 없는 새로운 서비스를 해보라는 말에 지금까지 거슬렸던 로켓펀치! 내가 한 번 가입하고 써보겠다!라는 마음으로 오늘은 로켓펀치의 사용자 플로우에 대해 이야기해보고자 한다.
생각지도 못한 난관에 부딪히고 마는데... 나의 원래 계획은 로켓펀치를 회원 가입하고, 앱을 이용하면서 개선되면 좋을 것 같은 포인트들을 찾으려고 했다. 그런데 회원가입 과정부터 나(=유저)를 너무 힘들게 만든 것이다...^^ 아니 맨날 회원 가입하래서 기대했더니 나한테 이러기 있어 지금...? 그래서 이용은 고사하고 회원가입의 플로우를 분석하고, 와이어프레임을 만들어보겠다.
1. 로켓펀치 페이퍼 프로토타입
유저 스토리
WHO : 취준생은
WHY : 새로운 커리어를 찾고, 커리어 커뮤니티를 이용하기 위해
WHAT : 회원 가입할 때부터 많은 정보를 입력하고 싶지 않다.
로켓펀치에 처음 가입하는 '나'를 대상으로 유저 스토리를 작성했다. 내가 한 경험을 토대로 작성한 유저 스토리이고, 왜 이렇게 유저 스토리를 작성하게 되었는지 페이퍼 프로토타입과 함께 정리해보겠다.
페이퍼 프로토타입
일단 크게 나누면 회원가입 과정은 회원가입> 프로필 설정으로 나눠져 있다. 세부적인 단계로 보면 핸드폰 번호 인증-비밀번호 입력-프로필 작성 단계-이름 입력-프로필 사진 등록-취업상태 선택-학교 입력-전공 입력-학위 입력-재학기간 입력-활동분야 선택으로 구성되어있다.
단계수로 따지면 총 11단계인데 다른 화면으로 갔다가 다시 전환하는 단계로 인해 프로토타입으로는 15단계가 나왔다. 회원가입은 2단계, 나머지 13단계는 모두 프로필 작성하는 단계이다. 처음 회원가입을 시작할 때는 가볍게 시작했지만 계속 회원가입이 끝이 나지 않자 나는 8단계 정도에서부터는 이거 진짜 끝이 어디지...? 언제까지 계속 작성해야 하는 거지?라는 생각이 들기 시작했다. 특히 프로필 사진, 최종 학교, 전공, 학위, 재학기간까지 입력하지 않고 다음 단계로 넘어갈 수 있는 선택지가 없었다. 나는 로켓펀치를 한 번도 써본 적 없는 신규 유저로 이 앱을 계속 사용할지, 사용한다면 어떤 용도로 사용할지, 앱 내부가 어떻게 구성되어있는지 하나도 모르는 상태로 계속 내 정보를 내놓으라는(?) 느낌을 지울 수 없었다. 더하여 프로필 사진을 업로드하고 나면 화면 중앙에 다음으로 가는 버튼이 생기는데, 다른 단계에서는 계속 오른쪽 상단에 있는 다음 버튼을 눌러야 했다. 통일성 있는 버튼이 필요하다고 느껴졌다.
내가 회원가입을 하면서 느낀 Pain Point 3가지를 우선 순위대로 정리하면 다음과 같다.
1. 절차 스킵 버튼이 없음.
2. 다음 단계 진행 버튼이 있다가 없다가 함.
3. 현재 단계가 전체 단계 중 어느 정도 왔는지 모르겠음.
타 커리어 커뮤니티 비교
Pain point에 대한 개선안을 와이어프레임을 만들기 전에 경쟁사를 찾아보기로 했다. 나는 지금까지 구인구직 서비스에는 가입을 해본 적이 있었지만, 커리어 커뮤니티 가입은 처음이었다. 커리어 커뮤니티는 다 이렇게 기본 정보를 많이 요구하는 것일까? 하는 의문이 들어 비슷한 커리어 커뮤니티 앱인 '커리어리'의 회원가입 절차를 살펴보았다.
커리어리를 가입절차를 확인하고 나니 로켓펀치의 회원가입 절차가 정말 복잡한 편이라는 것이 확 와닿았다. 심지어 내가 로켓펀치를 가입하면서 필요하다고 느꼈던 기능인 절차 스킵 버튼과 현재 진행 과정을 알려주는 진행 바, 통일성 있는 버튼 모두 커리어리에는 있었다...(사실 더 좋은 아이디어 point도 있었지만 지금 이야기하면 더 길어질 것이기 때문에 여기까지...) 덕분에 좋은 레퍼런스를 얻었다고 생각하고 와이어프레임을 만들어보자!
2. 로켓펀치 개선안 와이어프레임(Mid-fi)
내가 개선하고 싶은 UX는 3가지였지만, 그 3가지를 다 해결하는 와이어프레임을 만들었다가는 오늘 안에도 못 끝낼 것 같아서 1. 절차 스킵 버튼 만들기 2. 통일성 있는 다음 버튼 이 2가지만 반영하여 와이어프레임을 만들고 사용자의 flow를 빨간색 화살표로 표시해보았다.
처음에 페이퍼로 프로토타이핑보단 많이 줄어든 회원가입 단계를 볼 수 있다. 이렇게 봐서는 내가 개선한 것이 무엇인지 잘 보이지 않아서 개선된 화면의 스토리보드의 디스크립션 써보고자 한다.
일단 나의 개선안이 적용된 것은 오른쪽 상단에 있던 '다음' 버튼이 사라졌고, 대신 하단에 '비밀번호 입력하러 가기'라는 직관적으로 다음 단계를 알려주는 버튼이 생긴 것이다. 위의 와이어프레임을 보면 '다음'버튼을 누르지 않아도 될 화면을 제외하고는 모두 하단에 버튼이 생긴 것을 확인할 수 있다.
두 번째 개선안인 '다음에 입력' 버튼을 추가하는 것으로 이번 단계를 스킵하는 기능이다. 이 단계로 인해 전체적인 단계가 대폭 감소되었다는 느낌이 들었다.
다른 화면들도 '다음 단계' 버튼과 '다음에 입력' 버튼을 추가했지만, 그거 하나하나 다 스토리보드 만들었다가는 진짜 날밤 샐 것 같아서... 주요하게 변형된 2개의 스토리보드를 보여드린다는 것에 양해의 말씀을 드린다:')
오늘의 후기
디스크립션... 사실 더 상세하게 적어야 할 것 같은데... 그렇게 적다간 정말 한도 끝도 없을 것 같아서 더 디테일하게 적어야 한다는 것을 알면서도 흐린 눈으로 과제를 끝마쳤다. 피그마... 솔직히 재미가 없는 것은 아니었는데 뭐 조금만 하면 1시간 지나있고, 시간이 순식간에 날아가버렸다...☆ 그리고 하다가도 이게 잘하고 있는 것이 맞나...?라는 의문과 마음만 같았으면 회원가입 진행 단계도 집어넣고, 회원가입 완료 후에 홈 화면에서도 개선하고 싶은데... 의 마음이 공존했는데... 어쨌든 과제를 다 끝마친 기준으로는 잘했는지는 모르겠고 더 파고 싶었는데 너무 아쉬운 마음이 더 크다...ㅠㅅㅠ 기회가 된다면 다른 과제에서 로켓펀치... 다시 다뤄주겠어...! 그럼 이만 4주 차 과제도 끝!
