🎨

[디자인] UI, UX 개선내용과 그에 따른 결과 (워터스플래시)

개요

지난 5월에 있었던 워터스플래시 대규모 업데이트의 결과를 UI, UX 개선의 시점으로 되돌아보고자 한다.

개선된 UI 및 UX 내용

1. UI 디자인 개선

개선된 UI 디자인

워터스플래시 유저 피드백을 파악하여 이를 기반으로 UI 디자인을 변경했다. "Water"라는 특성에 맞춰 밝은 물을 연상시킬 수 있는 맑은 푸른빛의 UI 톤으로 변경하여 신선한 느낌을 주고자 했다. 유저 피드백 중, 아이콘 등이 작거나 대비가 불분명하여 보기 힘들다는 피드백에 대해서는 대비를 좀 더 주고 밝은 톤으로 바꿔 잘 보일 수 있도록 변경해 유저의 니즈를 맞췄다.

개선된 워터스플래시의 스크린샷

이에 따라 스크린샷과 소개 영상 역시 신규 UI를 반영한 이미지로 변경하여 스토어에서의 유저 유입을 유도했다.

2. UX 개선

사용성이 개선된 UX 디자인

워터스플래시의 개편은 UI 디자인을 새로이 하는 것에 그치지 않고 사용성을 높이는 UX 개선을 통해 유저의 편의를 도모했다. 워터스플래시의 경우 좌, 우측에 컨텐츠 아이콘이 추가되어 레벨 볼을 누르기 어려운 점이 있었다. 그래서 레벨로 진입할 수 있는 스타트 버튼을 중앙 하단에 추가하여 유저가 현재 도전하고 있는 레벨을 바로 시작할 수 있도록 했다. 이로 인해 유저의 편의성이 한층 더 높아졌다. 이와 더불어 상점 버튼으로 진입하는 버튼을 왼쪽 하단에 추가하여 로비에서 유저의 상점 진입을 도왔다. 이는 사용성뿐 아니라 수익성 증대를 위함이기도 했다. 사용성 개선의 마지막은 우측의 탭 숨김 기능이다. 워터스플래시를 구성하는 작은 콘텐츠들이 산재해 있었지만 이 역시 레벨 볼 터치를 방해하여 게임 시작이 용이하지 않아 숨김 기능을 추가했다.

광고수익화를 위해 개선된 UX 디자인

유저의 사용성을 개선하는 것과 더불어 가장 중요한 것은 광고 수익화를 위한 UX 개선이다. 우선 레벨 시작 팝업에서 광고 리워드 버튼을 우측에 배치하여 더 많은 터치를 할 수 있게 이끌어 냈다. 위치 변경뿐 아니라 버튼의 크기도 키워 좀 더 터치에 용이할 수 있도록 개선했다. 인게임 화면에서 광고 아이템 역시 같은 성격을 가진 아이템 위치에 놓았다. 기존에는 게임 화면 위로 올라와 마치 버그 같은 인상과 어떤 내용의 보상인지 파악하기 어려워 유저들의 터치를 이끌어내는 데에는 어려웠을 것이라 추정된다. 그런 애로사항을 고려하여, 보상내역을 보여주고 위치 역시 적절한 카테고리로 묶어 변경했다.

참고: 워터스플래시 유저 피드백 분석 (출처: @노수원)

결과: DAU 상승과 이에 따른 IAA수익 증가

AOS DAU 지표

IOS DAU 지표

워터스플래시는의 1차 업데이트 내역은 UI, UX의 개선과 함께 레벨 난이도 개선이었다. 결과적으로 이 업데이트 이후 DAU는 안드로이드 12% 증가, IOS 11% 증가라는 결과를 가져왔다. 현실적으로 초기 DAU 상승에는 레벨 난이도 개선 내용보다는 UI, UX 개선이 주효했다고 볼 수 있다.

워터 스플래시 업데이트 결과 요약 (IAA, DAU)

상단에 첨부한 결과를 보면, DAU 상승과 더불어 광고수익(IAA)까지 상승한 것을 알 수 있다. (꾸준한 DAU 유지가 UI, UX 개선만이 아닌 레벨 난이도 조절의 효과도 있지만) 하루 활동 유저가 많아지면서 광고 시청 횟수가 자연스레 늘어 결과적으로 수익 증대의 효과까지 동시에 얻은 것이다.

결론

UI와 UX의 개선만으로도 충분히 DAU 상승이라는 결과를 이끌어 낼 수 있고, 동시에 광고 수익의 증대까지 끌어올릴 수 있다. 전통적인 시각으로는 디자인이 수익에 결정적인 역할을 하기에는 한계가 있다는 것이 중론이지만, 위에 첨부한 지표를 참고하면 그렇지 않다는 것을 알 수 있다. 이러한 결과는 디자이너의 입장에서 어떻게 받아들여져야 하는가? 디자이너 역시 회사의 수익에 큰 기여를 하며 그렇기에 보다 책임의식을 느끼며 보다 유려한 디자인, 사용성을 높인 UX 개선을 위해 노력해야 할 것이다.

WRITTEN BY Mina (UI Design, NSTAGE) / 20211214