30번 실험 끝에 성공한 여기어때 상품 카드 UX 개선기
글. 이태서(Marc) / UX Desinger
여기어때는 상품 카드 UI를 셀러카드라고 부릅니다. 혹시 예전의 여기어때 셀러카드를 기억하시는 분 계실까요? 아마 사용자 입장에선 주의를 많이 기울이지 않기 때문에 무의식적으로 지나갔을법한 UI였을 거예요. 하지만 이 카드는 주의를 깊게 기울이지 않더라도 사용자가 무의식적으로 빠르게 흝어보는 퍼널이기 때문에 구매 결정에 상당히 중요한 역할을 합니다.
올해 약 3개월을 걸쳐 카드 UI를 플랫폼 통틀어 일관성을 만들어내기 위해 문제 정의부터 아래 AS-IS와 TO-BE로 A/B테스트까지 무사히 마쳤는데요. 결론부터 말씀드리면 개선된 UX 솔루션은 성공적이었습니다. 구매전환율과 매출이 상당한 수치로 오르며 저희 팀이 하반기 여기어때 Product 총괄의 Biggest Impact상을 수상했답니다 (뿌듯). 이 성대한 성공 뒤에는 무수히 길고도 험한 여정이 있었기 때문에 오늘 그 설득과 개선 이야기를 공유해보려 합니다.
개선을 위한 땅 다지기
작년 40~50개가 넘는 A/B테스트를 진행하면서 크고 작은 실패와 성공을 모두 겪었습니다. 실험이 실패하면 고민이 많아졌고, 성공을 하면 환호했었죠. 마치 주식 시장 같았어요. 사실 이 수많은 실험들에서 제일 중요한 건 우리가 어떤 러닝들을 가져갈 수 있느냐였어요. 그래서 모든 실험이 끝날 때마다 A/B테스트 리뷰를 리더십과 진행하고, 론칭과 러닝에 대해 논의했습니다. 그렇게 작년부터 이어온 수많은 작은 개선들의 결과들에서 특정 패턴이 보이더라고요. 이로부터 공통된 인사이트 하나를 도출할 수 있었습니다.
“사용자에게 불필요한 정보는 제거하고, 필요한 정보만 강조하면 사용자 구매 경험에 긍정적인 영향을 미쳐 구매전환율과 매출 상승에 도움이 된다”
어떻게 보면 IT 회사에선 너무나도 당연한 원칙이자 인사이트일 수도 있지만 마치 뉴런싱크가 되듯 모두가 한마음으로 공감하기는 쉽지 않죠. 그 뒤엔 실험 데이터가 뒷받침을 했기에 가능했다고 생각합니다. 그렇게 국내숙소 UX 디자이너와 PO들은 리더십들에게 이제 작은 개선보다는 프로젝트의 사이즈를 키워 그동안 모아 왔던 인사이트를 활용해 카드 디자인 개선을 논했습니다. 이 인사이트에 대해 리더십 분들도 쉽게 공감이 되었던 터라 설득은 수월했죠. 이건 마치 스노우볼 효과를 눈앞에서 직접 보는 것 같았고 더불어 Laws of UX에 나오는 모든 UX 원칙들을 하나하나 손수 증명해 내는 것 같았습니다.
이 스노우볼 효과는 곧 두 가지 목표를 가지고 선행 프로젝트로 이어졌습니다.
하나. 여기어때 플랫폼의 다양한 서비스를 포용할 수 있는 일관성을 만들어 낸다.
둘. 여기어때 카드 UI의 근본적인 사용자 문제 해결을 한다.
모든 리소스를 활용해 방향성 잡기
문제 정의하기
AS-IS 카드 UI로부터 수없이 많은 문제점이 발견되었습니다. 카드의 근본적인 사용자 문제를 해결하기 위해선 모든 요소 하나하나의 문제점을 정의해야 했었는데요. 아래 스크린샷처럼 각 컴포넌트 별로 최대한 UX 관점과 UI 관점으로 문제점을 써 내려갔습니다. 그렇게 모든 작은 문제점들을 합쳐 요약해 봤을 때 여기어때의 카드의 문제점은 ‘사용자가 셀러카드에서 숙소 비교에 필요한 주요 정보를 빠르게 파악하기 어렵다’ 였습니다. 앞서 얘기했던 “필요한 정보를 강조하면…”과 매우 상충되는 문제점이었기 때문에 문제점은 명확했습니다. 하지만 카드를 통째로 개선하기 위해선 사용자에게 어떤 정보가 주요 정보이고 불필요한 정보인지 파악하는 게 중요했죠.
벤치마킹 활용
문제점을 정의하고서 벤치마킹까지 진행했었는데요. Booking.com과 Agoda의 리스트 안의 카드 UI를 살펴보니 의문이 들었습니다. 두 플랫폼들의 특징 중 하나는 디자이너 입장에서 봤을 때 정말 단순함보다는 복잡해 보이지 않을까?라는 생각이 들었죠. ‘도대체 왜 타사의 카드에 비해 이 두 개의 해외 플랫폼들은 카드 안에 이렇게 많은 정보를 집어넣으려고 했을까?’ 그리고 ‘Airbnb는 왜 극단적으로 정보를 줄여 카드를 디자인했을까?’ 단순 simplicity라는 디자인 원칙 때문은 아니라고 생각했어요. 이 질문들의 해답을 찾기 위해선 그들의 구매여정을 카드뿐만 아니라 전체 여정을 살펴봐야 했습니다.
그들의 전체 여정을 살펴본 결과 Booking.com과 Agoda의 리스트화면의 JTBD와 Airbnb의 JTBD는 극과 극으로 다르다고 판단했습니다. 전자의 JTBD는 사용자들이 리스트 화면의 카드를 보며 최대한 정보를 많이 흡수해 리스트화면 안에서 구매 결정을 이미 한 상태로 상세페이지로 진입 유도하는 반면, 후자의 JTBD는 빠르게 주요 정보만 파악하여 더 많은 숙소 상세페이지로 진입을 유도하게끔 하는 것이 목표였다고 결론을 내렸습니다.
그런데 타사 카드 UI의 JTBD를 파악하면 뭐가 좋을까요? 사실 그다음 질문은 “그럼 우리는 어떤 방향성을 가져가야 할까?”였습니다. 고민은 그리 길지 않았어요. 과거 실험들이 방향성을 설정하는 데 정말 많은 영양분이 되었기 때문이죠. 특히 과거 리스트 화면에서의 작은 개선들은 실패를 많이 한 반면에 숙소 상세페이지에서의 실험들은 성공이 비교적 많은 것을 보아 여기어때 사용자들은 리스트화면보다는 상세페이지에서 더욱 집중을 하는구나라고요. 그렇다는 건 여기어때 사용자는 대부분 리스트화면에서 보다는 상세 페이지에서 구매결정을 내리며 리스트화면에선 빠르게 숙소 간의 비교를 한다는 결론을 내릴 수 있었습니다.
그렇게 PO와 JTBD를 아래와 같이 정리해볼수 있었습니다.
상품 리스트에서 제휴점의 주요 정보를 빠르게 인지할 수 있게 전달하여 고객이 원하는 숙소를 쉽게(effortlessly) 판단할 수 있게 한다.
구체적인 방향성과 함께 설계하기
불필요한 정보 확인은 과거 실험으로
커머스 플랫폼들의 특징상 작은 개선으로도 매출이 오르락내리락할 수 있기 때문에 위험부담이 따라요. 정보를 줬다 뺐다 하는 경험은 늘 좋다고 볼 수 없거든요. 그 뜻은 불필요한 정보를 무작정 제거한다고 하면 매출뿐만 아니라 여러 가지 이슈가 생길 수가 있다는거죠. 문제가 커지는 것을 방지하기 위해선 과거 A/B 실험을 적극 활용해 사용자에게 불필요한 정보가 무엇인지 파악해야 했습니다.
과거 UT 내용에 따르면 사용자가 집중적으로 확인하는 정보중 하나는 최종 가격이었습니다. 사실 솔루션은 간단해요. 정말 말 그대로 ‘사용자가 최종 가격이라는 정보를 한눈에 볼 수만 있으면 된다’예요. 하지만 모두가 알다시피 커머스의 특성상 할인율을 잘 보여주는 게 중요한데요, 우리 플랫폼은 다른 곳과 달리 이만큼의 할인을 해주고 있어 같은 메시지가 전달되지 않는다면 차별성이 떨어지기 마련이죠. 저에겐 큰 난관이었어요. 사용자와 비즈니스적인 목표를 둘 다 달성하려는 의지 때문에 막 다른 길에 도달은 것 같았죠. 오죽하면 고민이 되어서 주변 마트를 돌아보며 가격표의 정보 구성이 어떻게 형성되어 있는지 확인할 정도였으니까요.
“사용자가 최종가격에 집중할 수 있는 방법이 뭘까?”를 고민하던 중 이전의 인사이트로 다시 돌아가 불필요한 정보를 제거하는 것을 최우선으로 두기로 했어요. 카드 UI에서 불필요한 정보를 제거한 과거 AB 실험 기록들을 실패 실험까지 포함해서 파헤쳐보고 재분석을 해봤어요. 그러던 중 이전에 할인율, 원가, 최종가격, 쿠폰 적용 여부 등 카드 내 정보를 제거해 봤던 실험들을 확인해 보니 할인율을 제거해 본 카드가 다른 요소들에 비해 상대적으로 클릭률이 덜 하락했음을 확인할 수 있었어요. 일부 정보의 단순 노출여부에 대한 실험이었기에 UI를 동시에 개선해 보면 할인율을 제거하는 것이 사용자가 최종가격에 집중할 수 있는 방법 중 하나라고 판단했고, 커머스 플랫폼들의 절대적인 어필요소였던 할인율을 과감하게 제거하기로 결정하게 되죠.”
필요한 정보 검증은 UX Research로
물론 UX Research팀의 UT 내용은 불필요한 정보를 파악하는데도 도움이 되었지만 특히 어떤 정보를 강조해야 하는지 방향성을 잡는데 큰 도움이 되었습니다. TO-BE 디자인에서 가장 눈에 띄는 변화는 사진의 사이즈와 리뷰 UI 변화예요. 이 개선은 과감하기도 하고 위험부담에 대한 논의가 이루어질수도 있었지만, UX 리서처분들의 과거 UT 자료로 이해관계자들을 수월하게 설득할수 있었습니다. 구체적으로는 UT 내용에 의하면 리서치팀은 사용자의 구매 여정중 사진, 최종가, 리뷰 3가지 정보 요소들을 가장 관심 있게 찾았으며 앞으로 해당 요소들을 집중해서 발전시켜 볼 것을 제안했습니다. 저는 그 제안을 적극 활용해 사용자가 가장 찾는 요소들을 디자인으로 강조했습니다. 그렇게, 저희의 불필요한 정보는 제거하고 필요한 정보는 강조한다는 이로서 완성되었습니다.
참고. 여기서 핵심은 PO와 논의하며 어떤 부분은 UT 결과로, 어떤 부분은 실험 결과로 크로스체크하며 정보를 제거할지 정하고 그 이후 추가 설계를 진행했어요.
험난한 여정에서 배운 점
- UX Designer, 리더십과 실무자 간의 브릿지 역할을 하다
4년 차 UX Designer가 된 올해, 규모 있는 프로젝트를 이끌게 되었어요. 실무의 역할도 중요했지만 결국 중간관리자가 나의 역할이구나 하는 깨달음과 함께 더욱 성장할 수 있었어요. 제일 고민되었던 부분은 디자인 프로세스 속 어느 시점에서 어떤 이해관계자를 초청해 리뷰를 해야 할지 전략적으로 진행해야 했어요. 이 모든 과정이 재밌으면서도 긴장의 연속이었죠. 어떤 이해관계자를 설득해야 하느냐에 따라 스토리텔링 전략이 달라져야 했어요. 예를 들면, 리더십에게는 카드 내 정보 재배치에 대한 근거를 구체적으로 설명하고, 어떤 방향성으로 가면 좋을지에 대한 고민을 함께했다면, 사업부에게는 조금 더 넓은 개념으로 왜 우리는 해당 프로젝트를 진행하고 싶은지에 대한 근거와 스토리텔링이 필요했죠. 모든 설득 과정은 PO와 지속적으로 긴밀하게 이야기하며 어떤 방식으로 이해관계자를 들을 설득할지 논의하며 우리만의 스토리를 만들어 갔습니다. 정말이지 리더십과 타 부서가 설득되었을 때 쾌감은 이루 말할 수 없어요!
타 부서뿐만 아니라 사실 해당 프로젝트의 1번 목표였던 “여기어때 플랫폼의 다양한 서비스를 포용할 수 있는 일관성을 만들어 낸다”가 있었기 때문에 타 도메인 디자이너들과 아주 긴밀하게 커뮤니케이션했습니다. 돌아보면 이번 프로젝트는 절대 저 혼자만의 힘으로는 끝내지 못했을 거예요. 디자인 시스템의 일관성과 발전을 도와주신 제이디, 지니, 소피, 그리고 해외숙소 디자인을 담당하신 셰리까지 모두 힘을 합쳐 이번 카드 디자인의 탈바꿈을 적극적으로 도와주셨기 때문에 가능한 부분이었습니다. 이렇게 중간 역할을 하며 디자인 발품을 팔고 논의하며 결과물을 다져가고 하는 과정을 반복하며 실험을 진행한 결과는 매우 성공적이었습니다. 수많은 실험을 하며 실패를 맛봤지만 실패는 성공의 어머니라는 말을 손수 경험해 볼 수 있었던 제 소중한 프로젝트였다고 생각합니다.
2. 사용자가 반응하는 대로만 움직인다
사용자는 거짓말을 하지 않는 것 같아요. 카드의 문제점이 뭔지 알아내는 과정에서 저는 실험 데이터와 UX 리서치 결과대로만 움직이며 방향성을 잡았을 뿐인데 결과가 좋았었던 거죠. 특히 과거 실험 데이터는 사용자에게 불필요한 정보를 깎아내는데 큰 도움이 되었고, UX리서치와 벤치마킹은 어떤 방향으로 사용자가 필요한 정보를 강조할지 결정하는데 큰 도움이 되었죠. 말 그대로 저는 사용자가 행동하는 대로 따라갔고 거기에 맞게 카드가 형성이 되었던 거예요. 이번 프로젝트를 진행하며 저는 더욱 사용자의 말과 행동을 유심히 듣고 봐야 하는구나라는 레슨을 실감했습니다. 더불어, 사실 해당 실험이 ‘성공’했다고는 하지만 iteration 과정은 끝나지 않았어요. 사용자들의 행동은 계속 변하기 때문에 앞으로도 계속 사용자의 행동 패턴을 관찰하며 개선해 나가야 해요. 결론적으로 완전한 성공은 없고 이 실험 또한 iteration의 과정 중 하나였던 거죠.
3. 조직문화의 중요성
마지막으로, 이번 프로젝트는 갑작스럽게 진행된 프로젝트가 아닌 작년에 돌아가던 실험공장의 결실이 아닐까 라는 생각을 했어요. 누적되고 누적되던 실험 데이터와 UX리서치의 결과들을 끌어 모아 이룰 수 있었던 성공이었거든요. 실험들은 끊임없이 진행되었고, 실패들은 끊임없이 공유되었고, UX 리서치의 결과들은 계속해서 기록되며 공유되었죠. 그 순간순간들을 놓치지 않으려고 노력했고, 여기어때 프로덕트의 조직이 형성한 실패를 두려워하지 않고 계속해서 배워나가려는 문화가 4년 차 UX 디자이너인 저에게 너무나도 큰 영양분이 되었고 성장할 수 있는 기회를 만들어줬습니다.
✔️ 글쓴이를 더 알고 싶다면?: 링크드인
구성 및 편집: 이소연(Jetty) UX Writer
그래픽 도움: 한동현(Noah) Product Brand Designer
- 해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.
관련 글
・ A/B테스트를 실패해도 괜찮은 이유
