본문 바로가기

사전캠프(23.11.20~12.15)/UXUI 사전캠프 데일리 미션 - 3주차

[화]▸ 앱 서비스 선정 (ex. 토스, 29cm) 및 회원가입 프로세스 분석 및 개선 아이디어 정리

1. 앱 서비스 선정

가장 최근까지도 많이 사용했던 골프로그 앱 "TheGrint"이다. TheGrint는 사용자들끼리 스코어를 공유하고 경쟁할 수 있는 기능을 제공하며, 점수 기록과 통계, 핸디캡 계산 등 다양한 기능을 제공한다. 또한, 코스 정보와 날씨 정보를 확인 할 수 있어서 라운딩을 더욱 편리하게 즐길 수 있다.

 


2. UI/UX 디자인 분석

(1) 회원가입 제공 시점 
앱 실행 이후, 바로 'Join for free'과 'Login' 버튼을 선택할 수 있는 창이 뜬다.
- 회원가입 버튼에는 색을 넣어서 강조하고 엄지손가락이 쉽게 닿을 수 있는 위치에 놓음. 

(2) 회원가입 프로세스 : 유저 플로우
(https://www.figma.com/file/o6Qp3gciLcFw6j2e6qPqtJ/1205-%EC%86%A1%EB%AF%BC%EC%A7%84-%EC%95%B1%EC%9C%A0%EC%A0%80%ED%94%8C%EB%A1%9C%EC%9A%B0?type=design&node-id=0%3A1&mode=design&t=umuSRnHBKKBjTFzN-1)

TheGrint App User Flow Chart

(3) 화면별 구성
1. 로그인 화면 구성 :
Login 버튼을 누르면 나오는 화면이다. 가입했을 확률이 높은 Google과 Apple 계정의 e-mail로 간편 로그인 할 수 있다. 또는 그 외 이메일 주소와 비밀번호 입력으로 로그인 할 수 있다. 
2. 회원가입 화면 구성 : 
USGA(미국 골프 협회), Google 계정, Apple 계정으로 간편 회원가입 가능, 그 외에 다른 e-mail 계정으로 회원가입 가능 하다.

(좌)로그인 화면 / (우)회원가입 화면



3. 회원가입 계정 선택 후, 사용자의 정보 제공 회면이다. 이 화면에서 생년월일의 정보는 셀렉트 박스(Select Box)로 되어 있어서 유저의 이탈을 방지한다. 그 이후 성별, 핸디의 정보는 라디오 버튼(Radio BTN)의 형식으로 간편한 터치를 제공하고 있다.



4. 이용 약관 동의 팝업(Pop-up)을 띄워 체크박스(Check Box)를 클릭하도록 유도한다. 이용 약관 등은 스크롤이 긴 텍스트로 제공된다. 유저가 이를 읽고 마지막에 동의 버튼을 누르기 까지 앱 이탈이 발생하기 쉽다. 때문에 간편하게 체크 박스를 선택하도록 유도하고 있다.



5. 위치 기반 시스템 앱이기 때문에 위치 사용 허용이 필수이다. 팝업(Pop-up)으로 필수적으로 선택 할 수 있게 한다.


6. 가장 중요한 콜투 액션 버튼(CTA, Call to Action) 유도. 복수의 CTA버튼 중 가장 중요한 버튼의 색상 및 디자인을 강조함으로써 유저의 주목을 끌어준다. 유료 회원 유도 버튼은 노란 테두리를 주고 크기를 크게 키워 중앙에 위치한다. 그 밑에 다소 사소해 보이는 작은 문구 "무료 회원(Continue as free member)"은 눈에 잘 보이지 않는다.

 

(4) 인상깊은 UI/UX와 이유
1. 이메일 에러 : 아주 인상적이게도 이 잘 만들어진 앱에서도 에러가 존재한다. 회원가입 화면에서 간편 회원가입 버튼 세 개 중 Apple 계정을 선택한 회원 가입 하기 화면이다. 이메일 박스가 존재하지 않고, 메일 주소를 입력하라는 메세지 팝업창이 뜬다.(OMG)


2. 친구 추가(유저 이탈 방지) : 회원가입 시에 사용자 정보를 제공하고 나서 바로 친구를 추가할 수 있는 페이지 창이 뜬다. 이는 유저가 이탈하지 않게 방지하는 장치이다. 유저가 친구를 추가하면 이탈 확률이 낮아지는 것을 잘 활용했다.또한, 3명의 친구를 등록 했을 시에 3명은 무료회원에서 유료회원 혜택을 받을 수 있다.


3. 비밀번호 자동 생성(유저 이탈 방지) : 비밀번호 생성 시에 필수로 요구하는 사항이 많이 있다.(대소문자 구분, 특수문자 포함, 8자리 이상, 중복된 숫자 불가, 생년월일 사용 불가, 주요 정보 포함 불가 등등) 이러한 점 때문에 가입하다가 뒤로가기를 클릭하는 유저들이 발생한다. 자동으로 비밀번호를 생성해서 핸드폰 단말기에 저장하는 형식으로 간편하게 비밀번호를 생성해주어 유저 이탈을 방지하는 장치를 제공하고 있다.




3. 개선 아이디어

  1.  Email Box 오류
    • 개선할 점 : Apple 계정으로 회원가입 시에 Email Box 누락
    • 개선 아이디어 :
      1. Apple 계정 가입 시에 발생하는 Email Box 누락된 부분을 수정해준다. First name, Last name Box 밑에 부분에 Email Box를 생성한다.
  2. 회원가입 시에 비밀번호 자동 생성
    • 개선할 점 : 회원가입 화면에서 Name, Email을 입력하면 Password, Confirm Password Box가 자동으로 채워짐
    • 개선 아이디어 :
      1. Password Box 밑에 수동 입력 버튼을 추가 한다.
      2. Email 입력 창 위에 휴대 전화 번호를 입력할 창을 추가 한다.
  3. "Did a Grinter refer you to us?" 화면
    •  개선할 점 :  "Did a Grinter~?" 화면에서 TheGrint User name, Email Box 검색창 수정
    • 개선 아이디어 :
      1. User name, Email Box 검색창에 Phone number Box를 추가 한다. 내 연락처에 있는 휴대폰 번호를 자동으로 가져와서 추천한다.
  4. CTA 화면
    • 개선할 점 : 회원가입 CTA 화면 수정
    • 개선 아이디어 : 
      1. . 회원가입 마지막 단계에 있는 CTA 화면에 정보 수정 버튼을 생성해서 마지막 수정(First name, Last name, User name, Email, Phone number)을 할 수 있게 한다.