4060 사용자 경험 방해 없이 모달 설계 및 디자인
3회 차 스프린트 경험 설계
앞 장에서 우리 팀은 왜 고객들이 구매를 하지 않을까에 대해 강구해 보며, 제품 탐색 경험 중에 있는 고객에게 모달 설문을 통해 데이터를 얻는 방법을 선택하게 되었다.
여기서 고려해야 할 점은 두 가지가 있었다.
01. 모달로 인한 탐색 경험 저하를 최소화
고객들에게 모달을 노출시킨다는 것 자체가 탐색 경험에 방해요소를 넣는 것이지만, 서비스가 성장하고 다양한 데이터를 얻기 위해서는 필연적인 과정이고, 투입 리소스 대비 전환 퍼널에 있는 문제점을 알 수 있는 좋은 방법이라 판단했기에 탐색 경험 저하를 최소화하며 실험을 진행해야 한다.
02. 4060 고객의 모달 접근성 보장
모달 특성상 스크린의 가로 폭을 모두 사용하는 것이 아닌, 기본 가로 폭 보다 한정된 지면에서 정보를 노출시켜야 한다. 그렇기에 텍스트의 크기나, 상호작용 요소가 기본 스크린 대비 작아지고 간격이 비좁아져 접근성이 떨어질 수 있는 문제가 있다.
더군다나, 우리 서비스의 고객분들은 4060 고객이기에 작은 텍스트와 클릭하기 어려운 요소들은 탐색 경험 저하와 서비스 이용 경험에 큰 영향을 미칠 수 있기에 해당 부분을 고려하여 설계되어야 한다.
두 가지 고려할 점을 기반으로 고객들에게 어떤 시점에서 모달을 노출시킬지는 어떻게 보여줄지는 다음과 같이 기획 및 디자인을 했다.
기획
모달로 인한 탐색 경험 저하 최소화 방안
실제 데이터를 기반으로 상세페이지에 접속하는 빈도수를 확인해 본 결과 고객들이 제품을 3회 이상 탐색한다는 것은 고객이 제품을 구매하기 위한 탐색 행동이라고 유추할 수 있었다.
그 과정에서 이탈, 즉 뒤로 가기를 누른 고객에게만 설문 모달을 노출시킨다면, 해당 고객은 제품 구매 의사결정 과정에서 구입하지 않음을 선택한다는 것이기에 순도 높은 테스트 결과를 얻을 수 있을 것이고,
단순, "이탈 = 모달 노출"의 설계를 기피함으로써 기타 다른 목적으로 서비스를 탐색하는 사용자들의 경험 저하를 최소화할 수 있을 것이라 판단 후 기획을 진행했다.
디자인
접근성을 보장하는 설문 모달 디자인 설계
Color
명도 웹 접근성 가이드
웹 접근성은 장애인이나 고령자는 물론 어떤 사용자들도 서비스에서 제공하는 정보를 비장애인과 동등하게 접근하고 활용할 수 있도록 하자는 개념이다. 그로 인해 저시력자, 고령자 등도 인식할 수 있도록 텍스트와 배경 간의 명도 대비는 4.5:1 이상이어야 함을 기준으로 컬러 스키마를 설계했다.
Text + Button
텍스트는 개발 친화적인 환경 구성을 위해 최소한의 폰트 크기와 스타일을 사용하도록 위계를 부여했다. 4060 고객분들도 무리 없이 텍스트를 읽을 수 있도록 디폴트 폰트 크기를 16px로 하며, caption과 같은
작은 텍스트는 최소 14px을 사용했다.
버튼 또한 단순 아이콘 사이즈의 클릭 영역이 아닌, 아이콘 크기 영역보다 5~6px을 늘리고 텍스트 영역까지 모두 포함하여 설계해 고객분들의 인지에 맞춰 버튼이 편하게 클릭될 수 있도록 설계했다.
Modal Design
앞 장에서 스쿼드 팀원들과 5 Whys를 통해 도출한 인사이트를 설문 리스트로 넣었고 리스트는 다음과 같다.
제품 이해도
제품 신뢰도
제품 취향
제품 진행 시간
제품 가격
해당 설문 리스트를 UIUX 원칙들과 에셋들을 바탕으로 모달 디자인해 배포까지 완료했고 약 2주간의
고객 데이터를 받았다.
실험 결과는
어떻게 나왔을까?
5개의 설문 리스트 중 "제품 진행 시간이 맞지 않아 구매하지 않음"이 가장 많은 데이터로 쌓이게 되었다.
실험 설계 당시 고객들이 제품을 구매하지 않는 이유가 산발적으로 데이터가 축적될 것을 우려했으나, 우리의 우려와 달리 한 가지 데이터로 집약되었고, 우리 구매 전환율에 어떤 문제가 있기 때문에 구매 퍼널까지 랜딩이 되지 않는지에 대한 이유를 파악할 수 있었다.
현재는 구매 전환율을 높이기 위해 제품 시간이 맞지 않음을 프로덕트 단계에서 어떻게 하면 해결할 수 있을지 설계하고 있는 단계에 있다.
우리는 해당 문제를 해결하기 위한 프로덕트 기능을 개선이 완료된 후, 이번에 설계한 모달을 다시 같은 방법으로 노출시켜, 과연 우리 구매 전환 문제가 개선된 기능을 통해 소거가 될 수 있을지 지켜보기로 했다.
다음 장에서는 해당 결과에 대한 정보를 공유해보려 한다.
