brunch

매거진 만들어내는 사람

라이킷 47 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Summer Bom Dec 04. 2023

눌러보고 싶은 동그란 버튼

문제를 해결하는 디자이너 관점의 다양한 해법

안녕하세요. 이번에 접근성과 심미성을 놓치지 않으면서도 비즈니스 목표에 부합해 지표도 성장한 좋은 사례가 있어 과정과 결과를 소개합니다.

7월, 프리즘 메인의 ‘배너’ 영역을 개선했습니다.

이 영역은 보통 서비스 첫 화면에서 헤더와 피드 사이 중앙에 있고, 비즈니스 중요한 순서로 정렬해 사용자의 빠른 접근을 유도합니다. 주로 프로모션이 많은 커머스에서 시기에 맞춰 ‘기획전’이나 주요 비즈니스 ‘카테고리’로 이동합니다. 접근성이 좋아 서비스가 비즈니스 전략을 위해 사용자에게 홍보하는 서비스의 광고 구좌입니다.

비즈니스 목표

AS IS

프리즘에도 이 영역에 현재 가장 중요한 비즈니스로 연결되는 배너가 있었습니다. 비즈니스 기여도가 큰 카테고리를 전략적으로 최대 2개를 운영했습니다. 단기간이 아니라, 정성껏 준비한 비즈니스를 잘 브랜딩 된 영상으로 내용을 전달하고 있었습니다.

TO BE

곧이어 서비스가 빠르게 성장하면서 더 많은 비즈니스 접점이 생겼고, 중요한 진입 경로가 필요해졌습니다.

각 카테고리를 대표하는 프로그램 쇼룸으로 이동이 가장 적합했습니다. 메인에서 쇼룸으로 쉽게 진입할 수 있는 플로우를 설계했습니다. 쇼룸은 사용자들의 유입과 체류 시간이 높고, 팔로우 액션 후에는 리텐션도 좋은 중요한 페이지입니다.

프리즘의 라이브 프로그램은 각 카테고리를 대표합니다. ‘checkIN’은 ‘여행/호텔’, ‘Moments’는 ‘문화/공연’입니다. 카테고리 성격에 맞게 잘 브랜딩 된 쇼룸 페이지에는 스토리 콘텐츠와 큐레이션 된 상품이 진열되어 있습니다.

어디서나 일관된 메타포

새로운 숏컷 UI는 쇼룸 페이지로 이동하는 뾰족한 목표에 맞게 디자인 컨셉을 프로필 디자인의 메타포인 원형으로 좁혔습니다.

원형은 서비스 어디서나 쇼룸(프로필)을 상징하고 있기 때문에 사용자가 쉽게 인지할 수 있습니다.

조형의 기본 감각을 활용한 트랜지션

주목도를 높이기 위해 이 영역에 트렌지션으로 엣지 포인트를 주었습니다.

원형은 다양한 물리적인 특성이 있습니다. 풍선처럼 가볍게 떠오르거나 무게가 있어 중력의 힘으로 떨어질 수도 있습니다. 탄성이 있다면 튀어 오를 수도 있고요. 그중, 가로의 좁은 지면을 고려해 굴러들어 오는 힘을 사용하였습니다. 더 자연스럽게 표현하기 위해 탄성도 주었습니다.

서비스에 진입하면 메인의 중간 영역이 열리며 여러 개의 공들이 밀리듯 굴러들어 옵니다. 이 공들은 앞의 공에 살짝 부딪히고 제 자리에 안착됩니다.

정보를 복잡하지 않게 세련되게 전달하기

많은 경우 이런 형태의 UI는 썸네일 하단에 설명 레이블을 사용합니다. 하지만 레이블을 UI요소로 추가하면 화면 중앙에서 텍스트가 많아져 시각적으로 훨씬 복잡합니다. PXD팀의 미션은 항상 요소를 뺄 수 있을 때까지 빼는 최소화 원칙이 있습니다. 중요한 건 사용자의 명확한 정보 인지이기 때문에, 썸네일에서 그 역할을 하면 충분합니다.

썸네일 내에서 긴 이미지가 슬라이드 애니메이션되는 방법으로 해결했습니다. 복잡함을 낮추고, 읽고 싶은 유인 요소로도 효과적입니다. 쇼룸의 로고와 명확한 레이블이 아래위로 슬라이드 되며 사용자는 자연스럽게 내용을 인지할 수 있습니다.

500% 상승

런칭 후 결과는 예상보다 더 좋았습니다. 전체 CTR이 5배 높아졌습니다. 화면에 잘 보이는 쇼룸뿐 아니라, 뒤쪽에 배치된 요소도 모두 클릭률이 좋았습니다.

비즈니스 전략을 사용자 경험에 잘 녹여낸 좋은 사례였습니다. 특히 메타포의 일관성과 주목성 높은 트랜지션, 또 복잡하지 않고 명확히 정보를 인지시키는 슬라이드 애니메이션이 잘 어우러져 더 좋은 결과로 이어졌습니다.

문제를 해결하는 디자이너 관점의 다양한 해법

좋은 자리에 좋은 요소가 자리했을 때, 좋은 성과를 낼 수 있었습니다.

어디서나 볼 법한 흔한 UI지만, 쉽게 접근하지 않고 넓은 시야로 고민하면 문제를 해결하는 방법은 다양합니다. 기간에 맞춰 요구 사항만을 구현하다 보면 자칫 디자이너로써 지켜야 할 원칙을 지키지 못할 수도, 더 다양한 아이디어로 접근하지 못할 수도 있습니다.

그럴수록 디자이너는 더 깊고, 넓은 관점으로 시각화를 고민해야 합니다. 디자이너만의 다양한 아이디어와 표현 스킬을 발휘하면 사용자에게 유용성을 넘어서 만족감까지 전달하고, 제품의 엣지 포인트를 만들어낼 수 있습니다.

이 글은 PRIZM Design 브런치에도 발행되었습니다.

keyword

Summer Bom 소속 직업 디자이너

아침에 깰 때마다 설렐 이유를 찾습니다. 아침으로 먹기 위해 사놓은 빵이기도 하고, 저녁에 몰래 예매한 영화일 수도 있고. 어제 마지못해 덮었던 책장이기도 합니다.

구독자 757

매거진의 이전글 생동감을 표현하는 인터랙션, 자이로 센서

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari