사소한 영역이라도 개선이 필요해요

글. 최지윤(Yun) / UX Designer

안녕하세요. 여기어때 UX Designer 최지윤(Yun)입니다.

저는 FST팀(다양한 직군이 모여 특정 KPI 달성을 위해 함께 달리는 조직)에서 여기어때 GMV를 향상하는 프로젝트를 담당하고 있어요. 이번 글에서는 숙소 상세 페이지 쿠폰 UX 실험 여정을 소개해드리려 해요.

쿠폰 받기, 뭐가 문제일까?

FST팀 실험 백로그에 남아있던 문제점 중 쿠폰 받기 UI 개선에 대한 내용이 있었어요. 처음엔 쿠폰 받기가 정말 개선이 필요할 만큼 큰 문제일까 싶었어요.

마침 UX 팀원이자 여기어때 사용자인 릴리가 상품을 구매할 때 혼란스러웠던 경험담을 이야기해 줬어요. 마음에 든 상품을 구매하려고 결제 단계로 넘어갔는데, 상세 페이지에서 본 상품 가격과 결제 금액이 달랐다는 거였어요. 뭐가 문제인지 싶어 다시 상세페이지로 돌아갔는데 아까 본 가격과 다르지 않았던 거죠.

하지만 결제 금액은 여전히 더 높았고요. 알고 보니 상세 페이지에서 노출된 가격은 할인 쿠폰을 적용했을 때의 가격이었어요. 사용자가 그 가격으로 구매하려면 상품 페이지에서 노출되고 있는 쿠폰을 다운로드하여야만 결제 단계에서 쿠폰 할인이 적용된 가격으로 구매할 수 있었죠.

여기어때 앱에 익숙한 사용자도 쿠폰을 바로 인지하기 어려워 쿠폰 받는 경험이 불편한데, 라이트 사용자는 더 혼란스러울 수 있겠다 싶어 팀에 백로그에 있던 쿠폰 UX 개선을 진행하자는 제안을 드렸어요.

문제점 해체하기

대부분 사용자는 페이지 진입 시 상단영역에서 오래 머물지 않기 때문에 짧은 시간에 후킹 한 요소를 빠르게 전달할 수 있어야 해요. 그렇기 위해선 가격 혜택과 밀접한 쿠폰 받기 버튼의 경우 더욱 직관적으로 제공해야 하겠죠?

실험하기 전 기존에 노출되고 있던 쿠폰 UI는 아래와 같았어요.

상세페이지마다 다른 쿠폰 UI 형태

하나, 직관적으로 인지하기 어려운 쿠폰 영역

상세 페이지마다 쿠폰 UI가 제각각이라 쿠폰 인지뿐만 아니라 찾기도 어려웠어요. 예를 들어, 프리미엄블랙의 쿠폰은 검은색, 그 외 상품은 파란색, 또 선착순 즉시 할인은 빨간색으로 디자인이 제각각이었죠. 이로 인해 사용자는 매번 새로운 형태의 쿠폰을 접해야 했어요.

또한 쿠폰 UI 텍스트는 여기어때 잘난체 폰트를 사용하고 있어 자칫 마케팅 배너 영역으로 보일 수 있겠다는 생각이 들었어요. 실제로 마케팅 프로모션 영역에 잘난 체 폰트를 쓰고 있기도 하고요.

타사 리서치를 해보니 쿠폰 영역은 누가 봐도 내려받기 버튼 형태임을 빠르게 인지할 수 있었고, CTA 버튼 문구는 구매 동기를 고취할 수 있도록 명확한 라이팅을 지향하고 있었어요. (ex. 00님이 받을 수 있는 최대 할인가, 최대 00%를 할인받을 수 있어요.)

둘, 일관성 없는 사용 경험

페이지별로 다른 스타일의 버튼을 사용하고 있다는 문제점도 있었어요. 이는 사용자에게 일관된 UX 경험을 제공하지 못할 뿐만 아니라, 앱 사용성도 떨어뜨릴 수 있다고 생각해요. 여기어때는 디자인 시스템(이하 YDS)이 잘 구축되어 있어, 버튼에 쓰이는 폰트나 아이콘 스타일 등 사용자에게 일관성 있는 경험을 제공하고 있어요. 때문에 어떤 페이지에서든 일관된 타입으로 제공되고 있기 때문에, 쿠폰 영역은 이를 반영하고 있지 않아 버튼임을 인지하기 어려울 있겠다는 판단이 들었어요.

1-pager로 문제점 깎아내기

현재 운영되는 화면을 분석한 뒤 담당 PO와 함께 나온 문제점을 바탕으로 가설을 세우고 개선 방향을 정했어요.

타깃 사용자와 가설

• Target customer : 숙소 탐색을 위해 상세페이지에 진입한 사용자
• Hypothesis : 사용자가 PDP페이지 탐색할 때 쿠폰영역의 버튼 인지도를 높인다면, 쿠폰을 놓치지 않고 구매 페이지에 진입할 것이다.

개선 방향

1. 일관된 버튼 형태 제공을 함으로써 동일한 사용성 제공
2. 간결하면서 명확한 문구로 혜택 알려주기

추가로 FST UX팀에서는 여기어때 UX principle과 상충하는지 UX Health check를 확인하는데, 이 부분도 둘 다 해당하는 개선 포인트였어요.

UX 체크리스트

✓ AS-IS는 여기어때 UX Principle과 상충하나요?

• 사용자에게 불필요한 액션이나 고민을 요구하는 UX를 제공하고 있습니다. ( O )
• 여기어때의 다른 서비스들과 UX, UI 일관성이 없습니다. ( O )

또 , 어떻게 하면 심미적인 부분 개선과 동시에 클릭율을 높일 수 있을지, 개선 방향에 맞춰 다양한 아이데이션 해보았어요.

아이데이션 화면 중 일부

우선 타사 서비스(OTA, 오픈마켓 등) 벤치마킹을 통해 어떤 유형의 쿠폰이 있는지, 쿠폰 받기에서 전달하고 있는 내용은 어떻게 풀어내고 있는지, 어떤 UI 형태로 제공하는지 조사를 해봤어요.

그다음 사용자들은 숙소를 구매하기 전, 숙소 상세 페이지에서 어떤 정보를 중요하게 생각하는지 정성적, 정량적 데이터를 확인해 봤어요. 참고로 사용자들은 숙소를 구매하기 전 가격과 혜택, 리뷰 내용을 중요하게 생각한다고 해요. ATF 영역에선 숙소에 관한 많은 내용을 전달하고 있기 때문에, 사용자에게 쿠폰 혜택을 빠르게 인지할 수 있는 버튼 타입을 제공하는 게 중요했어요. 텍스트, 캡슐, 박스 버튼 등 여러 유형을 아이데이션 해본 결과, 박스 버튼 타입이 정보 우선순위 면에서 적절하다 생각되었어요.

YDS 기준 버튼별 적절한 사용 용도를 말씀드려 볼게요.

・ 텍스트 버튼 : ‘더보기’ 등 추가적인 기능을 필요로 하지만 메인 액션이 아닐 경우

・ 캡슐 버튼 : ‘필터’처럼 버튼이 연속적으로 나열될 경우

・ 박스 버튼 : 사용자가 취해야 할 가장 중요한 액션일 경우

이러한 이유에서 ATF 쿠폰영역에는 박스 버튼 타입이 적합하다 판단되었고, 그중에서도 솔리드 형태로 노출되어야 ATF 영역의 많은 정보 중 CTA 버튼으로 인지시킬 수 있을 거라고 생각했어요. 그리고 버튼을 제공할 땐 페이지 내 정보의 위계 및 중요도에 따라 적절하게 넣어야 해요.

이제 버튼 타입은 정해졌으니, UX 측면에서 어떻게 제공해야 사용자가 이 영역을 놓치지 않을지 고민해 봤어요. 여기어때 앱에서 노출되는 가격은 쿠폰 적용가로 노출되기 때문에, 쿠폰을 받아야만 노출되는 가격대로 구매할 수 있어요. 쿠폰 혜택이 아무리 중요하더라도, 상세페이지를 탐색하는데 방해 요소가 되어선 안 되기 때문에 페이지 진입 시 ATF 영역에서 고정형으로만 노출할지 아니면 고정형으로 노출하되 스크롤다운 시 플로팅 형태로 제공할지 등 여러 화면들을 그려봤어요.

플로팅 형태로 띄운다면 어떨까?

고안한 디자인 솔루션은?

여러 디자인 솔루션을 만들어 본 결과 좀 더 간결하고 직관적인 혜택 정보를 제공하기 위해 쿠폰 혜택과 행동 문구(쿠폰 받기)를 나뉘어 노출하기로 했어요. 기존에 버튼 안에 한 줄로 노출되던 텍스트를 혜택과 행동문구를 나눠 노출하니 혜택 정보가 한눈에 들어왔어요. 또한 쿠폰 영역의 꾸밈 요소(아이콘이나 일러스트 요소)는 최대한 배제하여, 상단 ATF영역의 복잡함을 덜어냄과 동시에 쿠폰 혜택 내용을 빠르게 캐치하도록 개선했어요.

A/B 테스트 시안

이번 실험에서는 UI 형태를 실험해 보는 게 목적이라 텍스트는 유지했어요. 그 결과 위와 같은 A/B테스트 화면을 만들었어요.

Test group A. 대조군(AS-IS)

Test group B. 실험군 2 (꾸밈 요소 제거 및 폰트 변경)

Test group C. 실험군 3 (폰트 변경 및 명확한 CTA 제공)

개선 후 결과는?

쿠폰 받기 UI 개선 후, 클릭한 사용자 비율이 17% 상승 (기준: Test group C / 2.14 ~ 3.2 (2주) 진행 결과)

쿠폰 받기 UI 개선 실험을 진행한 결과, Test group C 기준으로 선착순 할인 쿠폰 영역은 17%, 쿠폰 받기 영역은 16%로 클릭률이 상승되었어요.

이번 실험을 시작으로 결제 단계에서도 더욱 직관적인 쿠폰 사용을 제공하여 커머스의 궁극적 목표인 구매 전환율까지 영향을 줄 수 있는 방향으로 개선해 볼 예정이에요.

풀고자 하는 문제에 집중하다

이번 작업을 통해 심미적인 부분을 개선함으로써 클릭률에도 크게 영향을 미칠 수 있음을 실험을 통해 증명할 수 있었어요. 디자이너로서 작업할 때 시각적인 부분만 바뀌는 게 과연 영향을 미칠까? 의문을 가질 때가 많잖아요. 실제로 사용자는 보기 좋은 디자인을 더 사용하기 쉬운 디자인으로 인식하는 경우가 많다고 해요. 작은 영역일지라도 시각적으로 어떻게 제공하냐에 따라 효과를 극대화시킬 수 있고, 이는 디자이너의 필수 역량이라 생각해요.

물론 작업하면서 어려웠던 점도 많았어요. UI 일관성을 유지하되, 새로운 방향으로 제안하기 위해 기존 YDS(여기어때 디자인 시스템)를 어디까지 지키며 작업해야 하는지 혼란스러웠고 시스템 디자이너분들과의 sync 미팅이 잦았기 때문에 커뮤니케이션하는 시간이 굉장히 많이 소요되었어요.

그럼에도 새로운 시도에 적극 동의하는 디자인 시스템 팀 덕분에 현실적인 제약 안에서만 솔루션을 제안하기보다 다양한 아이데이션을 시도해 볼 수 있었어요. UI 일관성을 유지해야 한다는 틀 안에 얽매여서 정해진 리소스로 작업하기보단 먼저 제안해 보고 테스트를 통해 효용성을 체크하는 것도 중요한 부분인 듯해요.

특히 이번엔 쿠폰 받기 영역의 UI 형태를 실험하는 거라, 더없이 필요한 과정이었어요.

또한 UI 실험이기 때문에 각자의 시선에 따라 디자인 관련 피드백이 정말 많이 오갔는데요. 이 부분에서도 풀고자 하는 문제 방향성에 맞춰 명확한 피드백을 요청해야 하고, 그에 따른 피드백을 전부 수용하는 게 아닌 정의했던 문제점과 잘 판단하여 받아들여야 해요.

많은 시행착오가 있었지만 그만큼 성장할 수 있는 실험이었고, 클릭률 개선에도 기여할 수 있어 뿌듯했던 작업이었어요.

추신. 바쁘시다면 이것만 알아두세요!

✔️ 글쓴이를 더 알고 싶다면? 링크드인

편집: 이소연(Jetty) UX Writer

*해당 글과 이미지를 인용 또는 재가공 시 출처를 꼭 밝혀주세요.