[개인프로젝트] 스파르타 랜딩페이지 UX디자인 개선

☑︎ 과제내용 : 스파르타 코딩클럽 UIUX 부트캠프 랜딩 페이지를 활용하여 심층 인터뷰와 A/B 테스트를 설계

 * 워크플로우 플랜

  - 유저리서치를 통해 랜딩 페이지를 사용하는 유저의 문제점을 정의 -> 문제 해결 가설 수립 -> 가설 검증 A / B 테스트 설계

   ※ 랜딩페이지에 유입된 이후 전환에 이르기까지 부트캠프 참가 신청을 하는 과정에서 유저가 무슨 문제를 겪는지 파악하기

 

1. [DISCOVER]

• 문제 발견 : 스파르타 UXUI 랜딩페이지 유입 이후, 유저들이 교육 참가 신청 전환율이 높지 않음을 발견. → 문제로 정의한 이유 : 많은 유저가 랜딩페이지에서 이탈률이 증가한다면, 효과적인 유저 휙득이 어려워 매출에 큰 타격으로 이어질 수 있다.
• 원인 찾기 : 랜딩 페이지에서 유저가 원하는 정보를 놓치거나, 교육 참가하기를 할 만큼 매력적으로 보이지 않아 전환율이 높지 않았다.
• 필드 리서치
  • 인터뷰 목적 : 부트캠프 참여 전환율을 높이기 위해 유저가 어떤 문제를 겪는지 심층 인터뷰를 통해 파악하기
• 인터뷰 기록

인터뷰 기록 | Notion

 

2. [DEFINE]

• 필트 리서치_인사이트 정리 내용

• 비전공자가 해석하기에 어려운 용어
  • 비전공자가 보기에 어려운 용어가 있어 이해하기 어려움이 있음.
  • 타 직군(A직군, B직군 등)에 대한 정보가 없어 설득력 있는 콘텐츠 제공에 문제가 있음.
• 랜딩 페이지의 상세 내용이 부족
  • 스파르타에서 제공되는 정보가 많이 부족하여 부트캠프 참가 신청 전환율에 문제가 있음.
  • 커리큘럼과 튜터진의 상세한 정보가 없어 신뢰성이 떨어진다는 문제가 있음.
• CTA버튼 문구의 부정적인 요소
  • 하단 버튼의 범위가 커서 내용에 집중하지 못하고 불편하다는 문제가 있음.
  • 선착순이라는 문구가 압박감이 더해져 교육기간의 부정적인 이미지를 느낀다. 부트캠프 참가 신청 전환율에 문제가 생길 수 있는 우려가 있음.
  • 선착순이라는 문구가 표기되었지만 남은 일정 및 확정 인원이 없어 불편하다는의견들이 있음.
• 취업지원 섹션 부적절한 UXUI
  • 네비게이션 버튼 움직임이 크고 채도가 강해, 온전히 콘텐츠 내용에 집중하기 어렵다는 문제가 있음.
  • 텍스트와 이미지를 제공하는 부분에 이미지가 이미지 답지 않고 중복적인 내용들이 많아, 원하고자 하는 정보를 얻지 못함.

 

3. [DEVELOP]

• 가설 설정
  • {Option 1} : CTA - 하단 플로팅 버튼
    • 문제 정의(원인 찾기) : CTA버튼의 범위가 크고 적절하지 않는 문구로 전환율 올라가지 않아 이탈률이 확인.
      • 가설 : CTA버튼의 범위축소와 신뢰감 있는 문구로 변경 시, 클릭률 증가로 참가 전환율이 오를 것이다.
  • {Option 2} : 콘텐츠 영역 - 취업 지원 섹션
    • 문제 정의(원인 찾기) : 위계가 잡혀있지 않는 채도와 과도한 모션감으로 인하여 온전히 콘텐츠에 집중할 수 없어 이탈률이 발생.
      • 가설 : [Step 1]버튼의 색상과 모션의 위계를 감소하면 섹션 내용을 집중적으로 바라볼 수 있어 이탈률이 감소할 것이다.
  • {Option 3} : 콘텐츠 영역 - 자주 묻는 질문
    • 문제 정의(원인 찾기) : 자주 뭍는 질문의 배경색과 텍스트의 명도가 비슷하여 가독성이 떨어진다는 문제발견, 궁금증이 해소가 안되어 전환율에 영향이 끼쳤을거라 판단.
      • 가설 : 가독성을 높이게 된다면 스파르타의 대한 신뢰감과 유저의 혼란을 줄여 전환율이 오를 것이다.

 

• 해결 방법
  • {Option 1} : CTA - 하단 플로팅 버튼
    • Test Option : ‘CTA’ 버튼 요소 스케일, 텍스트 수정
    • FAB - 하단 플로팅 버튼 범위를 축소시켜 콘텐츠에 집중 할 수 있도록 개선
    • 텍스트 - 교육기관의 책임감과 신뢰성을 부여하기 위해 신뢰감 있는 문구를 사용함

• • {Option 2} : 콘텐츠 영역 - 취업 지원 섹션
    • Test Option : [Step] 버튼 요소 위계 정리
      • Navigation Tabs 버튼의 시각과 모션감을 덜어 콘텐츠 내용에 방해받지 않고 정독을 할 수 있도록 시야확보 및 위계 정리
      • 현재 위치

• • {Option 3} : 콘텐츠 영역 - 자주 묻는 질문
    • Test Option : 텍스트 요소 명도 수정
      
      • ‘Text Field’ 요소의 명도를 낮추어(어둡게 처리) 텍스트 가독성을 높임
      • 텍스트 박스(배경)와 텍스트의 대비를 위해 텍스트 박스 명도 낮춤

 

• 실험군 설정
  • 샘플 사이즈
    • 기본 방안(대조군) 기준 전환율 : 20%
    • 대안(실험군) 기대 전환율 : 25% 추측(예상) → 대조군 : 실험군 5%로 유의미한 결괏값인 샘플사이즈 1030
    • 샘플사이즈 결괏값 링크
• 모니터링 지표 정의
  • 성공지표 (전환율)
    • 랜딩페이지 진입 후, 참가 전환율이 B군에서 25% 이상일 경우 성공한 것으로 볼 것.
  • 가드레일 지표 (참가 철회율, 소요시간)
    ※ 다음의 경우 성공 지표를 달성하더라도 전면 적용 논의 필요
    • 실험군에서 철회율이 5% 이상일 경우
    • 실험군에서 취업 지원 섹션 체류(소요) 시간 15% 이상일 경우
    • 실험군에서 ‘자주 묻는 질문’ 내용으로 문의하기 30% 이상일 경우