UX 개선사례조사

출처

쏘카 차량 예약 퍼널 단계 개선 사례

쏘카 PM의 차량 예약 퍼널 단계 개선기(feat. AB TEST)

HOTH 홈페이지 개선 사례

Redesigning the homepage to just a signup form | AB Test Cases

강남언니 로그인화면 개선 사례

실패를 통해 배우는 AB테스트

쏘카 차량 예약 퍼널 단계 개선 사례

상황정의

• 쏘카의 '부름 서비스'의 예약량 지표가 정체되어 있다. → 사용자가 서비스를 잘 쓰지 않는다.

문제정의

1. 문제 찾기

 

* 쏘카 부름을 이용하는 [부름 사용자] 찾기

 

* '결제정보 확인' 페이지까지 도달 전환율 확인

쏘카존: 20%

부름 PIN: 70%

→ 사용자는 [부름 차량을 빌려야지]라고 명확히 결심한 상황에서 부름 서비스를 이용한다.

출처: 소카 블로그

 

사용자 Segment 확인

 

* 차량 예약 데이터 확인

출처: 소카 블로그

• 부름 사용자의 3~40대 비중이 약 10% 높다.
• 부름 차량의 예약시간이 2.3배 더 길다.

* 전화 인터뷰(In-depth interview)

• 차에 실어야 할 짐이 있거나, 승차할 동행이 많은 경우, 야간에 대여를 시작하는 경우 등 특정한 *TPO에 차를 불러서 이용하다는 패턴이 있었다.
• 명확하게 부름을 쓰러 앱에 들어오며, 쏘카존까지 걸어가지 않아도 되는 부름 서비스의 장점을 느꼈다.

* TPO (Time Place Occasion)
기본 용어: 시간과 때에 맞게 옷을 입어야 한다는 용어 (시간, 장소, 상황)
마케팅 용어: 효과적인 콘텐츠 전달을 위해 필요한 요소
- T(Time) 적절한 타이밍
- P(Place) 메시지(위치)에 적합한 미디어 선정
- O(Occasion) 어떤 상황에 놓인 유저 (Segment)
→ 맥락은 모두 비슷하게 쓰이지만 지금 쏘카 내에서 TPO의 의미는 어떤 상황에 놓인 유저가 적절한 타이밍에 위치(Place)를 선정하였다. 라는 의미로 사용되었다.

 

→ 정리: 부름 서비스를 이용하는 고객은 다르다.

• 3~40대 비중이 높다.
• 예약 후 차를 이용하는 시간이 길다.
• 명확하게 부름을 쓰러 앱에 들어오는 유저가 많다.
• 차에 실어야 할 짐이 있거나, 동행이 많거나, 야간에 대여를 시작하는 경우 등에 부름 서비스를 이용한다.

부름 서비스의 사용성 테스트

사용자의 허들을 높이는 UX를 짚어내기 위함

 

* 대상: 부름 서비스를 한 번도 안 써본 사람 & 부름 서비스에 익숙한 사람

 

* 결과 (특징적 부분 위주)

 

* 부름 서비스를 한 번도 안 써본 사람

• 처음에 둘러보기는 했으나 이해하기 어려워 사용하지 않았다는 피드백이 다수

* 부름 서비스 1회 이용자

• 사용자들이 제품 기획 의도와 다르게 받아들이고 있는 UI 화면을 발견
  핀 UI: 어떤 때는 뜨고 어떤 때는 뜨지 않는다. → 기준을 모르겠고, 무슨 뜻인지 모르겠다.

→ 정리
부름 서비스는 처음 사용자가 이해하기 어려운 부분이 많다.

플로우를 쏘카존과 공유하고 있어 핀 UI의 기준이 불분명하게 느껴진다.

 

2. 정의하기

• 사용자는 앱에서 부름이 정확히 무슨 서비스이고, 무슨 장점이 있어 예약해야 하는지 알기 어렵다.
  사용성 테스트: 부름을 한번도 이용해보지 못한 사용자에게서 '처음에 둘러보기는 했으나 이해하기 어려워 사용하지 않았다.'는 피드백을 다수 들었다.
• 부름을 한번도 써보지 않은 상태에서 차를 지정한 장소로 부를 때 드는 걱정들이 어떻게 해결되는지, 쏘카가 어떤 방지책을 제공하는지를 알기 어렵다.
• 한 번도 부름을 써보지 않은 사용자의 고통이 부름 이용 경험자 보다 크게 나타난다.

* 해결방법

예약량 확대를 위해서는 사용자에게 부름만의 매력을 직관적으로 전달하면서(=*PMF 찾기)

불안감을 낮출 수 있는 예약 경험을 주어야 한다.

*PMF(Product/Market Fit)
타깃을 만족시키는 제품을 가능성 있는 시장에 제공하는 형태

가설 수립

• 지금처럼 왕복과 똑같은 Flow가 아닌 [부름 사용자] 관점에서 설계한 부름 전용 예약 Flow를 제공한다면, 결제 전환율의 차이와 기분 좋은 예약 경험 두 가지를 확인할 수 있을 것이다.
  → 차량을 예약할 때 내 앞에 바로 차를 부르고 싶은 사용자의 마음의 흐름에 맞추어 독립적인 부름 서비스 전용 신규 예약 페이지를 새로 구현해보자.

해결 방법

수정 과정

1. 수집된 인사이트(사용성 테스트)를 바탕으로 와이어 프레임 스케치

2. 가벼운 프로토타입으로 만들어 주변 동료들에게 써보도록 하기

3. 이러한 과정을 통해 UX가 기존 사용자 문제를 해결하는지 확인하기

4. 개발하기



수정된 와이어프레임 및 플로우

• 페이지 진입 후 바로 서비스에 대한 직관적인 설명이 *ATF 영역에 노출
  : 부름 서비스에 대한 처음 사용자의 이해를 위함
• 서비스르 나타내는 워딩 사용
  : 비즈니스 모델을 바로 이해 가능
• 서비스에 대한 안내 문서를 하단 배너에 바로 노출
• 부름 서비스를 쏘카 왕복 서비스와 별계의 플로우로 만들어 메인페이지에 따로 TPO를 둠
  : 부름 서비스를 사용하기 위해 쏘카에 접속하는 사용자들의 특성을 반영

좌측: AS-IS 우측: TO-BE 출처: 소카 블로그

검증 과정

A/B TEST 적용

• 실험군
  • 부름용 '신규 예약 페이지'를 통해 예약하는 그룹
  • 전체 앱 접속자의 5%
• 대조군
  • 기존과 공일한 화면을 통해 예약하는 그룹
  • 전체 앱 접속자의 5%
• 목표: 실험군은 대조군 대비 22% 이상을 목표로 한다. (통계적 유의미성을 띄는 규모 + BO의 매출 기대치 반영)

결과

[결제 확인] 페이지에서 [차량 예약]을 한 예약 전환율: +21.8% p

• 부름에 대해서 관심 있는 사용자만 남아 결제 가능성은 높아짐

 

HOTH 홈페이지를 단순한 가입 양식으로 재설계한 사례 

(Hittem Over The Head의 약어)

문제정의

• HOTH 홈페이지를 사용자들이 가입하지 않는다.
  • HOTH는 게스트 게시 및 링크 구축과 같은 *화이트 라벨 SEO 회사
  • 트래픽은 많으나 홈페이지 가입률은 1.4%에 불과 → 대부분의 트래픽이 추천, 입소문 및 직접 트래픽에서 발생한다고 분석
    : 대부분의 방문자는 이 회사에 대해 잘 알고 있을 것
  • 고려사항
    • 제품의 복잡성: 사람들이 서비스에 대해 명확하지 않으면 가입하지 않는다.
    • 가입 약속: 무료 가입에는 구매보다 설명이나 설득력이 덜 필요하다.
    • 신뢰: 방문자는 이미 HOTH에 대해 익숙하므로 신뢰 구축이 덜 필요하다.
    • 주의 산만 및 집중: 긴 양식은 답변보다 더 많은 질문을 제기한다. 또한 상단에는 가입만이 존재하고, 일반적으로 긴 페이지에 여러 가입이 권장되는 곳이다.

가설 수립

• 긴 형식의 홈페이지를 단순한 가입 양식으로 변경하면 방문자가 이미 브랜드에 익숙하기에 계정 가입이 늘어날 것이다.
  + 더 많은 정보를 추가하면 주의가 산만해지거나 추가 질문이 제기될 뿐이다.

해결 방법

• 원래는 많은 정보가 노출되어 있는 홈 화면의 CTA 버튼 및 콘텐츠, 네비게이션의 내용을 모두 걷어내고, 로그인에 필요한 정보만을 중앙에 두었다.
  → 이 회사에 대해 잘 알고 있는 사용자의 니즈를 반영

좌측: AS-IS 우측: TO-BE 출처: ABTestcases

검증 과정

A/B 테스트를 통해 가입 전환율 분석

결과

기존 홈페이지 전환율: 1.4%

새 홈페이지 전환율: 13%

→ 새 홈페이지에서의 전환율이 매우 높게 나와 가설이 유의미한 것으로 검증되었다.

 

강남언니 사례: 일본 유저가 사용하는 로그인 화면 설계

문제 정의

• 마케팅을 통해 유저를 많이 모아왔으나, 회원가입 창에서의 이탈이 많아 회원가입으로 이루어지지 않는다.
  → 로그인 화면을 보는 유저 수에 비해 회원가입까지 완료하는 유저의 수는 59.9%로 절반 조금 넘는 회원들만 가입을 한다.

1차 가설설정

• 일본 유저들은 액션을 취하려면 정보가 필요하다. 기존의 회원가입/로그인 화면(Control)에서 주는 정보의 양이 너무 적기 때문에 유저가 다운로드한 앱이 무슨 앱인지 파악하기 어려워 전환이 되지 않을 것이다.
  → 일본 유저들에게 회원가입 단계에서 앱에 대한 정보를 제공해 전환율을 높이도록 하자.

1차 해결과정, 검증과정, 결과

 

해결과정

• 개선된 ABC안을 만들면서 집중했던 점은 앱에 대한 정보를 다양하게 전달해주는 것
• 유저의 가입 전환율을 높이기를 중점으로 설정: 이벤트강조안(A), 앱 기능 강조안(B), 앱 내용보여주기안(C)를 설정
• 추가로 시작하기 버튼이 너무 다양해 무엇을 눌러야할지 모르는 유저를 위해 고민하는 시간을 줄여준다는 가설 설정
  → 일본에서 가장 많이 사용하는 SNS 버튼만을 강조 후 나머지 버튼의 시각적 중요도를 낮춤

출처: 강남언니 블로그

검증과정

A/B 테스트 방식으로 진행

 

결과

A 기존안이 가장 높은 전환률로 모두 하향평준화 되어버림

 

이유

• 변수가 너무 많았다.
• 유저 테스트 시 통제 변수 1개를 정해서 가설을 검증해야 하지만, 위 테스트에 경우 '일본 유저들은 액션을 취하려면 정보가 필요하다.'와 '버튼이 많아서 로그인 전환이 힘들었을 것이다.'의 2 가지 변수를 사용하였다.
• 적은 모수에 너무 많은 시안을 테스트했다.

2차 가설

• 유저는 소셜로그인 버튼이 부담스러웠을 수 있다.
  : 유저정보가 성형관련 어플에서 드러날 수 있을 것이라는 우려에 거부감을 느꼈다는 유저 인터뷰 반영

2차 해결방법, 검증과정, 결과

해결방법

출처: 강남언니 블로그

• 하단의 버튼 갯수, 위치, 문구를 제한 → 위에 컨텐츠만 변화를 줌
• 하단에 'SNS에 공유되지 않으니 안심하세요.'라는 문구를 추가해 한번더 안심하고 전환될 수 있도록 마이크로카피 추가

검증과정

• 갯수를 줄여 A/B 테스트
• 로그인 화면에 들어온 유저를 세 그룹으로 나누어 한 그룹에는 A안, 두번째 그룹에는 B안, 마지막 그룹에는 기존 페이지를 노출하였다.

결과

• 두 번째 그룹이 병원을 보는 수는 기존 그룹보다 3.58% 더 높게 나타났다.
• 유저의 가입 퍼널을 1년동안 여러 테스트를 거쳐 개선한 결과 회원가입 전환율이 1년 대비 20% 상승한 결과를 얻을 수 있었다.

출처: 강남언니 블로그