티몬 앱 v4.1.0
티몬 앱 v4.1.0 디자인 제작 후기
지난 8월 31일 티몬 앱 v 4.1.0을 출시했습니다. (안드로이드 기준)
단순히 새 옷으로 갈아입은 것이 아닌
모바일 기기 변화에 맞는 디자인 구성의 변화, 데이터를 기반으로 한 흐름의 변화, os 특성에 맞는 구현의 변화가 이번 개편의 핵심이라고 할 수 있습니다.
그럼 티몬의 새 얼굴 v4.1.0 사용자 경험 디자인 사례를 소개하도록 하겠습니다.
작업 방향
기능과 탐색의 명확한 정의와 분리
사용자의 흐름을 유지하며 적은 자극으로 다양한 콘텐츠 제공
다양한 타입의 카드 제공, 학습을 제시하고 보상으로 데이터 수집
끊임없는 탐색 속 사용자가 상품을 발굴하며 즐길 수 있도록 유도
카테고리를 단순 버튼이 아닌 하나의 콘텐츠로 소비할 수 있도록 유도
최소 스펙으로 점진적인 개선
구성의 변화
모바일 디바이스 사용자 중 85%가 엄지손가락으로 사용한다고 합니다.
엄지손가락을 사용한다는 것은 그만큼 디바이스의 터치 영역이 좁아진다고 볼 수 있는데요.
자료 참고 : http://gsrealdesign.tistory.com/189
엄지손가락 사용 시 thumb zone이 아래와 같이 생기게 되며 붉은색은 엄지손가락의 접근성이 떨어지고 녹색이 접근하기 쉬운 위치입니다.
그럼 기존의 티몬과 v4.1.0의 thumb zone을 비교해보도록 하겠습니다.
티몬 앱 thumb zone 비교기존의 티몬은 좌측 이미지에서처럼 thumb zone에서 벗어난 영역이 있어 사용성이 떨어졌던 반면 v4.1.0의 경우 탭과 중요 버튼 모두 thumb zone에 위치하고 있어 단점을 보완하고 있습니다.
또한 thumb zone에서 벗어난 영역은 info. zone으로 활용함으로써 주요 정보를 효과적으로 전달하게 되었습니다.
흐름의 변화
기존 티몬의 경우 추천 탭에 총 8가지의 다양한 리스트 타입이 존재했습니다.
각 카테고리 특성에 맞게 디자인되었으며 그 디자인은 그 카테고리를 가장 잘 표현한 디자인이었죠.
기존 티몬 추천탭 콘텐츠 뷰하지만 티몬의 사용자 데이터는 이런 "다양한 뷰가 정답이 아닐 수도 있지 않을까?"라는 의문을 가지게 만들었습니다. 뷰 타입이 변할 때마다 페이지 이탈자의 수는 점점 증가하고 최종적으로 최하단에 있는 콘텐츠를 보는 사용자는 극히 일부였던 것입니다.
우리의 과한(?) 사용자의 배려가 고객의 자연스러운 탐색을 거스르게 된것이죠.
이번 v4.1.0의 카드 타입입니다.
기본 딜 카드를 기본으로 하여 각 카테고리 특성에 맞도록 콘텐츠를 더하거나 빼서 사용자들의 시각적 자극의 높낮이를 최소화 함으로써 티몬의 상품을 사용자가 물 흐르듯이 자연스럽게 상품을 탐색할 수 있도록 유도하였습니다.
이런 방법은 sns에서 흔히 볼 수 있는데요. 모듈화 시킨 카드 타입은 적은 시각적 자극으로 무엇을 하겠다는 의지 없이 그냥.. 그냥.. 자연스럽게 콘텐츠를 탐색하다 내가 좋아하는 콘텐츠를 발견했을 때 자세히 보거나 댓글을 달거나, 혹은 다시 원래 페이지로 돌아오거나 합니다. 그렇듯이 티몬에서도 자연스럽게 상품을 탐색하다 내가 좋아하는 타입의 옷, 가고 싶던 여행지의 특가 패키지, 사고 싶었지만 비싸서 엄두도 못했던 상품의 슈퍼 꿀딜 등 모르면 손해 보는 티몬만의 특가 찬스를 흐름 속에서 찾기를 유도하는 것입니다.
기존 티몬앱과 v4.1.0 콘텐츠 뷰 비교기존 티몬과 v4.1.0의 콘텐츠 뷰 화면을 나란히 보니 이해가 되시나요?
다양한 콘텐츠의 뷰와 모듈화 된 콘텐츠의 뷰. 사용해보시고 많은 의견 부탁드립니다!!
인터렉션
디자인뿐만 아니라 이번 v4.1.0에서는 인터렉션에 대한 고민도 심도 있게 진행했습니다.
"어떻게 하면 불편함 없는 쇼핑의 탐색을 유도할 수 있을까?"
"os의 특성으로 인해 다르게 보이는 부분은 어떻게 하면 좋을까?"
"손맛을 살리는 방법은??"
"변경된 구성을 효과적으로 보이게 하려면..."
"흐름의 탐색을 끊이지 않게 유도하려면.."
"흐름의 방향성은??"
"새로고침은 지금의 상태가 가장 효과적일까?"
.
.
.
말과 래퍼런스만으로 체감하기 어려웠던 부분을 저희는 framer로 목업 작업을 시작해 경험과 수정을 반복했습니다. 그 결과 우리의 배려가 사용자의 불편함과 스트레스일 때도 있었고, 우리의 스트레스가 사용자의 편리함이 되기도 했습니다. 또한 실제 개발 구현 때도 "쫌 더 빠르게", "xx 하는 느낌으로" 등과 같이 애매모호한 표현보다 "xx 값을 y로 변경 " 등과 같이 명확한 커뮤니케이션을 가능하게 하였습니다.
위 동영상은 framer로 제작된 목업 동영상입니다.
티몬 앱을 설치하셔서 목업과 실제 개발된 화면의 차이를 확인해보시겠어요?
마치며
남들도 이렇게 하니 우리도 이렇게 하자!!
가장 보편적인 것이 가장 좋은 방법이야!!
내 생각인데 이렇게 하는 게 좋지 않을까?
디자인을 하면서 가장 자주 하게 되고 자주 듣는 말이기도 합니다.
하지만 이번 티몬 앱 v4.1.0에서는 모바일 기기 변화에 맞춰 구성을 변경하고 , 데이터를 바탕으로 사용자 경험을 추측했으며, os 특성에 맞는 구현을 시도했습니다.
비록 우리의 추측이 잘 못될 수도 있고 사용자들에게 불편함을 초래하여 비판을 받을 수도 있습니다.
그럼 그때그때마다 사용자의 목소리에 귀기울여 반성하고 다시 고민하고 연구해서 더 좋은 사용자 경험을 만들어 가도록 하겠습니다.
우리가 하는 디자인은 끊임없는 과정이니까요.
