상점 리디자인
상점은 F2P 게임의 수익 창출에 가장 밀접하게 연관된 피쳐 중 하나입니다.
수익성 측면뿐 아니라, 플레이어가 게임 내 아이템의 구조와 기능을 이해하고, 명확한 목표를 설정하도록 돕습니다.
기간
약 6개월
구성원
게임 디자이너 1명, UX 디자이너 1명, UI 아티스트 1명, UI 프로그래머 1명, QA 1명
사용 툴
피그마, 컨플루언스, 미로
과정
문제 탐색
소프트 런칭 플레이 테스트
이전 플레이 테스트에서 상점 UI의 사용성 문제가 반복적으로 발견되었습니다. 게임 전반을 짧은 시간 안에 검증하는 플레이 테스트에서 UI 문제가 드러났다는 건 해당 문제가 시급하다고 볼 수 있습니다.
내부 피드백
상품 디자이너들은 소프트 런칭 플레이어를 대상으로 다양한 상품 판매 전략을 실험하고자 했지만, 기존 레이아웃은 제한된 개수의 상품만 보여줄 수 있어 어려움을 겪었습니다.
낮은 KPI 달성
플레이어당 평균 수익(ARPU)을 포함한 매출 KPI가 목표 수준에 도달하지 못했습니다. 다양한 요인이 있지만, 팀은 상점 UI의 낮은 사용성이 주요 요인 중 하나라는 가설을 세웠습니다.
핵심 인사이트
✔️ 플레이어는 상점 탐색 및 상품 종류 구분에 어려움을 겪고 있습니다.
✔️ 펙(가챠) 상품과 번들 상품을 자주 혼동합니다.
✔️ 상품 리스트에서 상품 상세 페이지로의 전환율이 낮습니다.
✔️ 상점에 들어간 이후 실제 구매로 이어지는 최종 퍼널 비율이 낮습니다.
문제 정의
어떻게 하면 우리는 상품 디자이너가 자유롭게 상품을 진열하면서,
무과금 & 과금 플레이어가 상점을 명확하게 탐색하도록 만들 수 있을까?
경쟁작 벤치마킹
비교를 통해 레인보우 식스 모바일에서 찾아낸 것
-
탭은 탭처럼 생겼으나 네비게이션 바처럼 사용되어 헷갈리고 불편합니다.
-
상품 개수가 증가할수록 전체 탐색을 위한 스크롤 길이가 길어집니다.
-
탭 종류별로 모아 볼 수 없어 원하는 종류의 아이템을 일일히 찾아야 합니다.
-
-
상품 리스트 화면은 상품 상세 정보를 살펴보도록 유도하는 요소가 부족합니다.
-
상품 상세 화면은 다양한 아이템 정보를 충분히 전달하지 못하고 있습니다.
추정 플레이어 여정 지도
일정과 작업 범위를 고려해, 메인 로비의 상점 버튼을 통해 진입하는 경로를 중심으로 여정을 정리했습니다.
해결
검증
플로우 차트
프로토타이핑
리서치 요구사항을 충족하기 위해 높은 비주얼 완성도의 프로토타입을 제작했습니다.
-
프로덕션 팀 요청에 따라 개발 예정 스팩만 제작했습니다.
-
상품 디자이너의 요청으로 상품 이미지의 전달력과, UI 아트팀 요청으로 사용성과 관련된 UI의 시각적 요소를 함께 검증했습니다.
최종 디자인
사용성 테스트에 기반해 디자인 반복 개선
할리팩스 유저 리서치 팀과의 검증
-
주도적으로 유저 리서치 팀과 협업하여 가설 및 프로토타입을 조율했습니다.
-
피그마 프로토타입을 활용해 사용성 테스트를 진행했습니다.
-
F2P 게임에서의 상품 구매 경험 · 레인보우 식스 모바일 & 레인보우 식스 시즈 플레이 경험이 있는 모바일 FPS 플레이어 10명을 대상으로 진행되었습니다.
성공적으로 달성된 주요 목표
-
플레이어들은 상점을 효율적으로 탐색하고 팩(가챠)과 번들을 명확히 구분했습니다.
-
몇가지 시각적으로 마이너한 이슈가 발견되어 이후 UI 아트 작업에 반영되었습니다.
상점 전반
모바일 친화적 레이아웃으로 리디자인
As-is
-
가로 스크롤은 한 손 조작이 어렵습니다.
-
탭과 터치 영역이 엄지 영역을 고려하지 않고 좌우로 분산되어 있습니다.
-
연관된 터치 요소들이 서로 멀리 떨어져 있습니다.
-
아이템 정보가 일관성 없이 화면 이곳저곳에 출력됩니다.
To-be
-
세로 스크롤을 활용해, 손가락 이동 대비 더 많은 정보를 탐색하고, 엄지 영역 안에서 상호작용할 수 있도록 요소를 배치했습니다.
-
플레이어의 터치 동선을 고려해 상품 탐색 요소와 구매 버튼을 인접하게 배치합니다.
-
다양한 정보를 확장성있게 표시할 수 있도록 아이템 정보를 왼쪽 영역에 배치합니다.
상점 진입하기
탭을 탭으로 사용해 확장성과 정보 위계 강화
As-is
-
탭 구성이 아이템 종류를 명확히 반영하지 않습니다.
-
탭이 네비게이션처럼 동작해 노출 가능한 상품 수가 제한됩니다.
-
‘Pack’과 ‘Bundle’ 용어가 유사해 혼동을 유발합니다.
To-be
-
플레이어가 자연스럽게 인지하는 정보 위계를 확인하고, 상품 종류를 중심으로 탭을 재구성합니다.
-
탭을 탭으로서 활용해, 상품 종류를 명확히 구분하고 더 많은 상품을 진열합니다.
-
“Pack”은 브랜드 맥락을 유지*하되, “Draw (돌리기)”를 병기해 가챠임을 암시합니다.
* 원작에서 가챠에 대한 반발을 완화하기 위해 Pack이라는 용어를 의도적으로 사용했습니다.
상점 탐색하기
상품 종류가 명확히 구별되는 컴포넌트 설계
As-is
-
상품 종류 상관없이 글자 위치, 정렬, 이미지 사용 등이 혼재되어 일관성이 없습니다.
-
상품 종류, 특히 펙과 번들을 구분하기 어렵습니다.
-
노티닷, 할인 태그, 가격 정보 등 연관된 정보가 분산되어 있습니다.
To-be
-
상품 종류별로 크기 차이를 적용해 빠른 구분이 가능하도록 했습니다.
-
펙 이미지를 직접적으로 사용함으로서 펙과 번들을 명확히 구분해줍니다.
-
정보 위치를 일관성있게 통일하고, 연관된 정보를 인접한 위치에 배치했습니다.
상품 탐색하기
상품 입장 화면에서 펙 · 번들 명확히 구분
As-is
-
모든 상품에서 첫 아이템이 자동 선택되어, 상품 종류를 인지하기 어렵습니다.
To-be
-
상품 종류별로 다른 입장 화면을 제공해, 플레이어는 진입 시점에 상품 종류를 명확히 인지할 수 있습니다.
-
선택된 아이템을 다시 터치하면 입장 화면으로 돌아가 상품 종류를 언제든 확인할 수 있습니다.
다음 단계
플레이어 그룹별 여정 · 맥락을 고려한 상품 진열
상점 리디자인은 플레이어와 상품 디자이너 모두를 위한 기본적인 사용성 개선이었습니다. 더 나아가 수익률를 향상시키려면, 저과금 · 고과금 등 플레이어 그룹별 여정과 맥락을 고려해 상점의 다양한 부분을 개선해야 합니다. 그 중에는 다음과 같은 예시가 있을 수 있습니다.
-
신규 무과금 플레이어에게는 상점 진입 화면에 최초 구매 시 가장 많이 선택된 상품 노출
-
구매 경험이 없는 고수 플레이어에게는 상점의 진입 화면에 플레이 시간이 가장 긴 오퍼레이터의 코스튬 세트 상품 노출
게임 전반의 아이템 정보 컴포넌트의 통합 · 개선
현재 레인보우 식스 모바일의 여러 피처에서는 동일한 아이템 정보가 서로 다른 방식으로 표시되고 있습니다. 이를 하나의 공통 컴포넌트로 통일하고 개선하면, 플레이어는 아이템의 가치를 더 잘 이해할 수 있고 이는 플레이어의 소유 욕구와 구매 결정에 긍정적인 영향을 줄 수 있습니다.
예를 들어, 플레이어가 아이템을 갖기 전 미리 게임 속 장착한 모습을 확인할 수 있거나, 코스튬 세트에 대한 정보를 명확히 안내하는 방법을 고려할 수 있습니다.