디자인 가이드의 정성적 성과 데이터 분석하기
뷰저블로 디자인 가이드 개선안, MBO 항목으로 평가하기
여러분, 최근 MBO 수립 시즌이 다가오고 있지 않나요? 끝난 기업이 있는가 하면 한참 목표 수립중인 곳들도 많을 것입니다. 오늘 뷰저블은 '뷰저블을 활용한 UX 디자인팀 MBO 항목 수립'에 대해 이야기 나누고자 합니다.
MBO란, ‘회사의 비전과 중장기적 경영전략, 그리고 연간 사업계획을 달성하기 위해 본부와 부문, 팀, 팀원에 이르기까지 상급자와 하급자가 사전 협의를 통해 업무 목표와 달성 기준을 설정하고, 일정 기간이 흐른 후 그 결과를 평가하여 계획과 성과를 점검해 가는 자기 관리 시스템’을 의미합니다.
고객의 입장에서 MBO가 수립되지 못하는 UX 디자인
대다수 팀이 MBO 수립을 위해 정량적인 KPI를 수립하는 데에 어려움이 없습니다. CS팀이라면 고객 재인입율 축소, SCM팀이라면 물류센터 운영 비율 축소, 마케팅팀이라면 앱 푸시 열람율이나 객단가 향상 등을 예로 들 수 있습니다. 하지만 UX디자인팀이라면요?
구매전환율이나 장바구니 추가 수, 스크롤 도달율처럼 ‘여정 별 서비스 개선'을 통해 지표를 측정할 수 있는 부분이 있는가 하면 ‘디자인 가이드', ‘콘텐츠 변경' 같은 정성적인 측면에서 접근해야하는 운영성 업무들도 상당 비중을 차지합니다. 이 경우에는 MBO 항목으로 넣기가 애매하여 보통 ‘콘텐츠 개선 N건'으로 기준을 잡을 것입니다. 혹은 주요 의사결정권자(예: 각 팀장)가 콘텐츠 디자인 만족도를 5점 만점 중 N점으로 평가하도록 하죠.
이처럼 고객의 입장에서 MBO가 수립되지 못하고, 내부 이해관계자에 따라 디자인이 평가되고 있습니다. 뷰저블은 정성적인 측면에서의 디자인 운영 업무들을 ‘정량적으로 측정’하는 데에 도움을 줄 수 있습니다. 어떻게 분석하고 측정할까요? 지금부터 뷰저블의 아이디어를 공유합니다.
Q. 디자인 가이드가 변경되었어요.
데이터로 어떻게 평가할 수 있을까요?
‘디자인 가이드’는 일관된 브랜드 이미지와 사용성을 유지하고 공동 작업물에 대해 실무자가 커뮤니케이션 기준을 갖는 데에 일조합니다. UI 가이드라인, 디자인 시스템, UX 가이드라인 등 다양한 종류가 있는데요, 오늘은 그 중에서도 배너와 상품 촬영 이미지, 아이콘에 대해 성과 측정 아이디어를 말씀드리겠습니다.
(1) 메인 상단에 위치한 배너 디자인 가이드
대다수 서비스들이 디자인 가이드에 따라 통일성 있는 배너 디자인을 운영하고 있습니다.위 이미지는 SSG 닷컴의 메인입니다. ‘해피바이러스 LOVE SSG’라고 적힌 배너 영역을 확인할 수 있는데요, 보통 디자인 가이드를 변경한다고 하면 해당 배너의 폰트 사이즈를 변경할 수도 있고 배너 자체 크기를 줄이거나 늘릴 수도 있습니다. 또는 상품 위치를 바꿀 수도 있죠. e-커머스 또는 콘텐츠형 서비스의 매우 보편적이자 대표적인 배너 형태입니다.
분석 가이드
배너 디자인을 개선했다고 가정한 경우, 가이드 개선 전후 어떤 데이터를 살펴볼 수 있을까요?
아래 뷰저블 사이트 예시를 통해 살펴봅시다.
스크롤 히트맵과 어텐션 그래프를 비교하여 고객의 디자인 만족도를 평가할 수 있습니다.• 스크롤 도달율
메인 상단에 위치해 있기 때문에 해당 배너가 콘텐츠 하단으로 고객을 이동시키는 엔진 역할을 합니다. 개선을 통해 고객의 평균 스크롤 도달율이 얼마나 개선되었는지 살펴봅시다. 뷰저블의 스크롤 히트맵을 통해 비교해볼 수 있습니다. 75%, 50%, 25% 도달 지점이 어떻게 변화하였나요?
• 배너 위치의 평균 체류시간
디자인 가이드가 개선되면 고객은 해당 위치에 머무르며 콘텐츠를 소비하려 할 것입니다. 구간 내 평균 체류시간이 어떻게 변화하였는지 스크롤 히트맵 내 어텐션 그래프로 측정할 수 있습니다.
• 배너 위치 별 평균 노출%
롤링 형태의 배너는 순서에 따라 고객의 반응율이 달라집니다. 보통 배너의 클릭 수로 성과를 측정할 수 있다고 생각합니다. 하지만, 클릭 수는 배너 하나 하나에 대한 직접적인 성과이기 때문에 배너가 얼마나 고객에게 노출되었는지 ‘노출율%’로 성과를 측정하는 것이 바람직합니다.
뷰저블리의 ‘노출 히트맵'으로 쉽게 배너 위치별 평균 노출율을 구할 수 있습니다.스크롤 도달율과 마찬가지로 디자인 가이드가 개선된 것을 확인한 고객은 다른 배너로 넘겨보고 싶어하거나 오래 체류하며 다른 배너들까지도 살펴보고자 할 것입니다. 동일 순서의 배너 노출%가 어떻게 변화하였나요?
(2) 커머스, 금융 등의 상품 촬영 이미지
배너 영역 외에도 촬영된 상품 이미지에 대한 디자인 가이드도 예로 들 수 있습니다.상품 촬영 이미지 가이드라는 건 무엇일까요? 예시로 오늘회라는 서비스의 상품 촬영 이미지를 살펴보겠습니다. 배경이 전부 나무 질감의 따뜻한 느낌이고, 생선들과 대비되는 검정색 플레이트를 사용하고 있습니다. 또 모든 사진들이 정면으로 찍혀있네요. 이 상품 촬영 이미지의 가이드를 개선한다면, 상품 배경을 개선하거나 촬영 각도, 상품의 확대 정도 등을 예로 들 수 있습니다.
마치 배너처럼 촬영된 이미지를 한번 더 가공한 형태의 가이드도 존재합니다.또한 위 이미지처럼 통일된 단색 배경 이미지 위에 상품 이미지가 얹혀진 형태도 존재합니다. 배경이 없고 단색이라 상품에 대한 집중도가 올라가겠죠. 상품 이미지의 배경 색을 변경하거나 흰색으로만 처리하였을 때 등 다양하게 실험하여 성과를 비교해볼 수 있습니다.
분석 가이드
예를 들어, 사이트에서 상품 이미지를 변경한 경우, 어떤 요소를 보고 분석을 진행할 수 있을까요?
• 유입자 수 대비 전시 상품 클릭 수
이미지가 매력적으로 변화하였다면 고객 입장에서 상품 상세 페이지로 더 들어가보고자 하는 니즈가 높아질 것입니다. ‘(전체 전시 상품 클릭 수 / 유입자수)*100'을 통해 수치를 측정할 수 있습니다.
• 스크롤 도달율
마찬가지로 개선된 상품 촬영 이미지가 엔진이 되어 고객을 스크롤 하단으로 이끌 수 있습니다. ‘여기 상품들이 굉장히 맛있어 보이네? 다른 상품들은 또 무엇이 있지?’하고 말이죠. 스크롤 도달율을 함께 살펴보는 것도 성과 측정 방법의 한 예가 됩니다.
(3) 아이콘의 디자인 변경
마지막으로 아이콘 변경의 경우 전체 유입자 수 대비 해당 아이콘의 클릭율 (Click PV Rate)이 어떻게 변화하였는지로 성과를 측정할 수 있습니다. 고객의 주목을 ‘클릭'으로 해석하여 클릭율이 얼마나 변화하였는지를 측정합시다.
[Tip] Click PV Rate 란?
• Click PV(UniqueClick) / 전체 all PV(%)
• 해당 콘텐츠를 클릭한 PV 의 규모를 의미합니다. Click PV 또는 Unique Click(순 클릭)이라고 합니다.
뷰저블의 클릭 랭킹: 개선하고자 하는 아이콘의 클릭율이 어떻게 변화하는 지 살펴봐야 합니다.또는 고객의 Path를 분석하여 성과를 측정할 수도 있습니다. 예를 들어, 특정 아이콘 영역의 클릭이 8~10번째로 발생한 경우, 개선 후에 해당 아이콘의 클릭이 1~7번째로 발생하는 지, 고객의 클릭 우선순위가 높아졌는지를 살펴볼 수 있습니다.
뷰저블의 Path plot: 특정 아이콘 클릭 우선순위가 어떻게 변화하는 지 살펴봐야 합니다.모든 분석은 모수(유입 방문 수(UV) 또는 페이지 뷰 수(PV))를 함께 고려하는 것을 잊지 말아야 합니다. 마케팅 캠페인으로 특정 일자에 유입자수가 과도하게 많았을 수도 있기 때문입니다. 사실 가장 정확한 방법은 A/B Testing을 요소별로 점진적으로 실행하여 측정하는 것이지만 그러한 환경에 놓여져 있지 않은 기업의 경우에는 뷰저블이 제안하는 것처럼 개선 전/후의 동일 일자 내 성과를 비교하는 방법을 제안합니다.
이제부터는 고객의 입장에서 지표를 설정하고 측정하여 서비스 성장에 기여할 수 있습니다. 여러분의 디자인 가이드 개선안, 이제 MBO 항목으로 넣어 평가할 수 있습니다!
오늘은 디자인 가이드에 대해 어떻게 뷰저블을 활용하여 정량 측정할 수 있는지를 소개해드렸습니다. 다음 시간에는 e-커머스와 금융 서비스의 고객센터 페이지 분석에 대해 상세히 소개드리겠습니다. 이상 뷰저블이었습니다.
숫자 대신, 히트맵으로 시작하는 데이터 분석!
서비스의 중요한 고객들의 데이터를 한 눈에 보세요!
UX with Beusable.
