눌러보고 싶은 동그란 버튼
문제를 해결하는 디자이너 관점의 다양한 해법
이번 PXD에서 접근성과 심미성을 놓치지 않으면서도 비즈니스 목표에 부합해 지표도 성장한 좋은 사례가 있어 과정과 결과를 소개합니다.
7월, 프리즘 메인의 ‘배너’ 영역을 개선했습니다.
이 영역은 보통 플랫폼 첫 화면에서 헤더와 피드 사이 중앙에 있고, 비즈니스에 중요한 순서로 정렬해 사용자의 빠른 접근을 유도합니다. 주로 프로모션이 많은 커머스에서 시기에 맞춰 ‘기획전’이나 주요 ‘카테고리’로 이동합니다. 접근성이 좋아 전략적으로 플랫폼의 서비스를 홍보하는 핵심 영역입니다.
비즈니스 목표
AS IS
프리즘에도 이 영역에 현재 가장 중요한 비즈니스로 연결되는 배너가 있었습니다. 기여도가 큰 카테고리를 전략적으로 최대 2개를 운영했습니다. 단기간이 아니라, 정성껏 준비한 서비스를 잘 브랜딩 된 영상으로 내용을 전달하고 있었습니다.
TO BE
프리즘이 빠르게 성장하면서 더 많은 비즈니스 접점이 생겼고, 중요한 진입 경로가 필요해졌습니다.
각 카테고리를 대표하는 프로그램 쇼룸으로 이동이 가장 적합했습니다. 메인에서 쇼룸으로 쉽게 진입할 수 있는 플로우를 설계했습니다. 쇼룸은 사용자들의 유입과 체류 시간이 높고, 팔로우 액션 후에는 리텐션도 좋은 중요한 페이지입니다.
프리즘의 라이브 프로그램은 각 카테고리를 대표합니다. ‘check IN’은 ‘여행/호텔’, ‘Moments’는 ‘문화/공연’입니다. 카테고리 성격에 맞게 잘 브랜딩 된 쇼룸 페이지에는 스토리 콘텐츠와 큐레이션 된 상품이 진열되어 있습니다.
어디서나 일관된 메타포
새로운 UI는 쇼룸 페이지로 이동하는 뾰족한 목표에 맞게 디자인 컨셉을 프로필 디자인의 메타포인 원형으로 좁혔습니다.
원형은 플랫폼 어디서나 쇼룸(프로필)을 상징하고 있기 때문에 사용자가 쉽게 인지할 수 있습니다.
조형의 기본 감각을 활용한 트랜지션
주목도를 높이기 위해 이 영역에 트렌지션으로 엣지 포인트를 주었습니다.
원형은 다양한 물리적인 특성이 있습니다. 풍선처럼 가볍게 떠오르거나 무게가 있어 중력의 힘으로 떨어질 수도 있습니다. 탄성이 있다면 튀어 오를 수도 있고요. 그중, 가로의 좁은 지면을 고려해 굴러들어 오는 힘을 사용하였습니다. 더 자연스럽게 표현하기 위해 탄성도 주었습니다.
프리즘 메인에 진입하면 메인의 중간 영역이 열리며 여러 개의 공들이 밀리듯 굴러들어 옵니다. 이 공들은 앞의 공에 살짝 부딪히고 제 자리에 안착됩니다.
정보를 복잡하지 않게 세련되게 전달하기
많은 경우 이런 형태의 UI는 썸네일 하단에 설명 레이블을 사용합니다. 하지만 레이블을 UI요소로 추가하면 화면 중앙에서 텍스트가 많아져 시각적으로 훨씬 복잡합니다. 디자인실의 미션은 항상 요소를 뺄 수 있을 때까지 빼는 최소화 원칙이 있습니다. 중요한 건 사용자의 명확한 정보 인지이기 때문에, 썸네일에서 그 역할을 하면 충분합니다.
썸네일 내에서 긴 이미지가 슬라이드 애니메이션되는 방법으로 해결했습니다. 복잡함을 낮추고, 읽고 싶은 유인 요소로도 효과적입니다. 쇼룸의 로고와 명확한 레이블이 아래위로 슬라이드 되며 사용자는 자연스럽게 내용을 인지할 수 있습니다.
500% 상승
런칭 후 결과는 예상보다 더 좋았습니다. 전체 CTR이 5배 높아졌습니다. 화면에 잘 보이는 쇼룸뿐 아니라, 뒤쪽에 배치된 요소도 모두 클릭률이 좋았습니다.
비즈니스 전략을 사용자 경험에 잘 녹여낸 좋은 사례였습니다. 특히 메타포의 일관성과 주목성 높은 트랜지션, 또 복잡하지 않고 명확히 정보를 인지시키는 슬라이드 애니메이션이 잘 어우러져 더 좋은 결과로 이어졌습니다.
문제를 해결하는 디자이너 관점의 다양한 해법
문제를 해결하는 디자이너 관점의 다양한 해법
좋은 자리에 좋은 요소가 자리했을 때, 좋은 성과를 낼 수 있었습니다.
어디서나 볼 법한 흔한 UI지만, 쉽게 접근하지 않고 넓은 시야로 고민하면 문제를 해결하는 방법은 다양합니다. 기간에 맞춰 요구 사항만을 구현하다 보면 자칫 디자이너로써 지켜야 할 원칙을 지키지 못할 수도, 더 다양한 아이디어로 접근하지 못할 수도 있습니다.
그럴수록 디자이너는 더 깊고, 넓은 관점으로 시각화를 고민해야 합니다. 디자이너만의 다양한 아이디어와 표현 스킬을 발휘하면 사용자에게 유용성을 넘어서 만족감까지 전달하고, 제품의 엣지 포인트를 만들어낼 수 있습니다.
Written by Summer (Bomi Sa) | Product Design
Motion by Patexum (Taegwon Kim) | Brand Design
ⒸPRIZM
