brunch

You can make anything
by writing

C.S.Lewis

by Ellies Pub May 22. 2021

한 끗 차이의 심리학! "A/B 테스트"

내맘데로킥고잉랜딩페이지 A/B 테스트 설계 [코드 스테이츠 PMB6]

사용자는 서비스를 만드는 기업의 모든 배경을 알지 못한다. 내가 디자이너 직군에서 일했을 때 가장 싫어하는 말 하나 있었다. "있어 보이게" 있어보인다......아.... 저 말을 듣는 순간 빡침이 올라온다. 갑자기 모든 일이 하기 싫어진다.

~~있어보이게가 아닌~~ 서비스를 어떻게 하면 쉽고, 편리하게 직관적으로 사용할 수 있는지에 초점을 두어야 하는게 서비스와 기업의 본질을 잘 표현할 수 있기 때문이다. 신생 단어(줄임말)를 넣는다던지, 기업만이 아는 문화를 억지로 끼워 넣는다던지...

그래서 기업은 끊임없는 A/B 테스트를 통해서 사용자에게 최적의 서비스를 사용할 수 있는 환경을 만들어야 한다.

마이크로 모빌리티 서비스를 선택한 이유는, 내가 살던 시애틀 다운타운에서는 쉽게 라임 서비스(킥보드, 자전거, 공유차) 너무 친근하고 익숙했다. 다운타운으로 이사하면서 더 이상 내 자동차가 필요 없어졌다. 그래서 자동차 처분하고, 대신 전기 킥보드를 소유했었다. 최근에 집 근처에 킥고잉 충전 스테이션이 설치되고 있는 걸 보고 문득 생각이 났다. 한국 마이크로 모빌리티 서비스에 대해서 궁금해졌다.

그래서,

A/B 테스트가 뭐예요?

A/B 테스트는 웹 또는 애플리케이션의 두 버전을 서로 비교하여 어떤 버전이 효과적인지를 판단할 수 있는 방법이다.

두 버전을 나누어 어떤 것이 성과가 좋은지를 정량적으로 평가하는 방식이며, 이 테스트에서 재방문율이나 구매전환율 등의 결과가 어떤 것이 성과가 더 좋은지 파악할 수 있는 기준이 된다.

A/B 테스트는 주로 웹페이지에서의 마케팅과 관련해서 많이 쓰이고 디자인이나 상품 배치, UI 등을 개선하기 위해서도 사용되고 모바일 애플리케이션이나 게임 분야에서도 다양하게 사용되고 있다.

이 테스트를 통해 웹사이트를 최적화하고 비즈니스의 성장을 위해 어떤 것을 선택할지 결정할 수 있다.

킥고잉 랜딩페이지 분석 (6단계)

+ CTA - 서비스 설명 - 유도(사용자 경험) - 기능 설명 - 안전 설명 - CTA 지역 설명(킥세권 제안)/기업정보

(* CTA - Call to Action)

1단계 CTA - 애플리케이션 다운로드 페이지

좌 : 킥고잉 / 우 : 리디자인(위치, 크기 변경)

킥고잉 웹사이트 들어가면 보이는 첫 메인 페이지이다. 크게 나쁘지는 않았다. 음..나에 개인적인 첫인상은 전체적인 슬로건, 서비스 이름, 애플리케이션 버튼 그리고 킥보드 이미지 모두가 사이즈가 비슷비슷해서 화면 구성의 흐름이 잘 읽히지 않다고 판단했다.

그래서 살짝 리디자인 해본 오른쪽 이미지에서는 슬로건인 이동에 즐거움을 더하다를 더 크게 보여주면서

킥보드 이미지 앞으로 위치되면서 활동성에 초점을 맞추고 싶었다. 메인 첫 이미지에서 훑어만 보고 '이탈을 줄이기' 위해서 애플리케이션 버튼을 키웠으며, 자연스럽게 위에서 아래 방향으로 흐름을 주면서 최종 목적인 애플리케이션 버튼을 클릭을 유도할 수 있도록 바꾸었다.

2단계 - 서비스 설명 페이지

기존 메인 카피 : 킥고잉과 함께 일상이 즐거워집니다 / 서브 카피 : 킥고잉은 길에 놓인 킥보드를 바로 이용하는 새로운 이동 서비스입니다.

좌 : 킥고잉 / 우 : 리디자인

2단계인 서비스 설명 페이지도 전체적으로 사이즈 비슷해서 전달력이 떨어져 보였다. 무엇을 첫 번째로 전달하고자 하는지 '우선순위'를 정해야 할 것 같다. 그리고 메인 카피와 서브 카피가 주저리 설명형으로 표기되어있다. 내가 생각하기에 메인 카피의 핵심은 언제나 즐겁게 일상 속에서 킥고잉과 함께 경험할 수 있다는 전달력을 짧게 포인트만 전달하기 위해 '언제나 즐거운 일상, 킥고잉'으로 바꾸고 폰트 크기를 키웠다. 또한 서브 카피는 아래 아이콘과 설명하는 것과 중복된다고 생각되어 '언제 / 어디서나 / 편리한' 3 단어를 핵심 키워드로 설정하였다.

흥미롭다. 매우. 디자이너 직군에서는 경험하기 힘들었는데.. PM직군에서는 전체 서비스를 바라보면 마이크로 카피까지 세세하게 Re-find 할 수 있음이 너무 재밌다.

3단계 - 유도 (사용자 경험 설명 페이지)

기존 메인 카피 : 아침, 버스 대신 킥고잉을 탑니다 / 서브 카피 : 5분 빨라진 것만으로도 하루를 시작하며 커피 한 잔 마실 여유가 생겼어요

좌 : 킥고잉 / 우 : 리디자인

사용자 경험을 강조해 애플리케이션을 다운로드 받도록 유도하고 있는 페이지로 이해했다. 첫인상은 커피? 랩탑? 펜? 메시지 전달? 나의 개인적인 생각은 킥고잉은 전반적으로 '작다'라고 느꼈다. 또한 전달하고 싶은 우선순위가 보이지 않는다. 나는 우선순위를 '아침에 킥고잉을 탔기 때문에 5분 빨라진 하루의 시작으로 커피를 마실 여유가 생겼다는 것'에 초점을 맞췄다. 뒤에 보이는 이미지는 메인 카피를 좀 더 빨리 이해시키는 도구로 우선순위를 뒤로 미뤘다. 또한 기존 메인 카피와 서브 카피를 핵심만 전달하기 위해 설명형 보단 키 메시지 전달형으로 리에디팅 했다.

4단계 - 기능 설명

기존 메인 카피 : 킥고잉은 쉽습니다 / 서브 카피 : 없음

좌 : 킥고잉 / 우 : 리디자인

내가 리에디팅 해본 마이크로 카피

메인 카피 - 쉽고 / 편리한 킥고잉

서브 카피 - How to use

'킥고잉은 쉽다'를 강조하고자 '쉽고 / 편리한 킥고잉'으로 리에디팅 해서 표현했다. 이유는 킥고잉은 쉽습니다 카피 뒤에 뭔가 따라올 것 같다는 느낌이 들었다. 그리고 없었던 'How to use'라는 서브 카피를 추가해 쉽고 / 편리한 킥고잉에 대한 페이지에 대한 사용법이라는 정보를 주기 위해 작게 표기했다. 또한 4가지로 분류된 기능을 '나열에서 순차 정열'로 리디자인해서 사용하는 법에 대한 순서를 알려주기 위한 아이콘으로 리디자인 해 보았다. 자연스럽게 킥고잉 찾기에서 환승하기까지 터치를 통해서 정보를 습득하도록 유도했으며, 이탈을 줄이기 위해 정보에서만 끝내지 않고 추가적으로 애플리케이션을 바로 다운로드할 수 있는 버튼을 다시 한번 추가했다.

5단계 - 안전 설명

기존 메인 카피 : 안전한 라이딩을 위해 꼭 확인해주세요

좌 : 킥고잉 / 우 : 리디자인

내 경험상 전기 킥보드는 상상하는 것보다 정말 속도가 빠르다. 이번 페이지에서 우선순위를 안전한 라이딩도 중요하지만, 안전한 라이딩을 위해서 아래 4가지 사항을 확인하는 것보다 꼭 '지켜야 한다고' 생각한다. 그래서 안전한 라이딩을 위해 꼭 확인해주세요라는 메인 카피를 ' 안전한 라이딩을 위해 꼭 지켜주세요!'로 강조형으로 리에디팅했다.

6단계 - CTA 지역 설명(킥세권 제안) / 기업정보

좌 : 킥고잉 / 우 : 리디자인

6단계는 '재정렬과 크기 조절'을 했다. 이 정보 페이지 또한 '작다.' 생각해 보자! 그리고 이 페이지에서 우선순위를 정해보자. 내 생각에는 365일 24시간 언제나 편하게 이동하세요 보다는 '서비스 사용 가능한 지역'을 첫 번째 우선순위로 택했다. 이유는 사용자가 킥고잉라는 웹사이트에 유입되었다는 것은 이미 킥보드라는 서비스군을 알고 들어 왔다는 가정하에 사용자가 거주하고 있는 '서비스 지역'에 더 우선순위로 정보를 알고 싶어 할 것이다라는 가정을 세웠다. 그래서 '킥세권 제안하기' 버튼 크기를 키운 이유가 바로 어? 왜 내 지역에는 킥고잉을 이용할 수 없지?라는 가설에서 리디자인했다.