<버튼, 네비게이터, 상품 CMS 카드> UI 디자인 일관성 더하기

프로모션 02. 동일한 사용 경험 ‘UI 디벨롭’

가이드화 적용된 <버튼, 네비게이터, 상품 CMS 카드> UI 디자인

앱에 등장하는 수많은 프로모션 페이지들, 한 달에도 수십 개씩 라이브되죠.

유저가 구매까지 이어지는 동안 다양한 정보를 얻을 수 있는 프로모션 페이지.

다채로운 프로모션 페이지들을 볼 때, 항상 반복되어 비슷한 성격으로 등장하는 것들을 발견했어요.

크게 <버튼, 네비게이터, 상품 CMS 카드> 이렇게 3가지예요.

현재까지 진행되어왔던 UI 디자인에 대해 알아보고,

새롭게 업데이트된 것들을 함께 보며 이야기를 해보려고 해요.

먼저, 버튼에 대해 알아볼까요?

1. 누르고 싶은, 누르기 쉬운, 버튼👆

AS-IS 마케팅 관점에서 각각 컨셉에 따라 다양한 비주얼 스타일로 적용했던 버튼 UI

TO-BE 동일한 사용경험을 위한 버튼 UI 가이드화 적용

버튼은 유저가 액션을 취하는 UI 구성 요소 중 하나에요.

간단한 터치 한 번으로 유저가 원하는 작업을 즉각적으로 수행해야 하기 때문에, 직관적이고 일관성 있는 형태로 버튼이라는 인지성을 심어주는 게 좋죠.

위의 AS-IS 이미지를 살펴보면, 기존에는 마케팅 관점에 초점을 두고 진행되어 각 프로모션 페이지별 콘셉트에 맞춰 다양한 스타일로 제공했다면,

TO-BE 현재 버전은 동일한 사용 경험을 위해 문구 길이 제한, 동일한 버튼 크기와 마진, 동일한 화살표 아이콘 적용 등으로 규정해 가이드화시켜 제공하고 있어요.

2. 원하는 정보를 빠르게, 네비게이터👀

AS-IS 마케팅 관점에서 각각 컨셉에 따라 다양한 비주얼 스타일로 적용했던 네비게이터 UI

TO-BE 동일한 사용경험을 위한 네비게이터 UI 가이드화 적용

네비게이터는 유저가 원하는 정보의 위치로 이동하는 편의성을 제공하고,

주요 혜택을 한눈에 파악할 수 있기도 해서 이탈률과 전환율에도 영향을 주는 요소에요.

네비게이터 또한 위의 버튼과 마찬가지로, 기존에는 마케팅 관점에 초점을 두고 진행되어 각 프로모션 페이지별 콘셉트에 맞춰 다양한 디자인의 네비게이터를 제공했다면,

현재 버전은 동일한 사용 경험을 위해 디자인을 통일하고 규정해 가이드화 시켜 제공하고 있어요.

서로 다른 장점을 가진 전/후 네비게이터를 비교해서 보는 것도 재밌네요.

3. 중요한 정보 순서대로, 상품 CMS 카드💵

앱 내 상품 셀러카드와 동일한 사용경험을 위해 변경된 상품 CMS 카드

많은 상품들이 나열되는 프로모션 페이지에서는 할인율이 높거나 주제별로 소개하고 싶은 상품들을 묶어 카드 형식으로 나열시켜 보여줘요.

이렇게 보이는 상품 카드에는 명확한 상품과 가격 정보들을 확인할 수 있어요.

앱 내에서 상품과 가격정보를 제공하는 셀러 카드와 비슷한 정보 제공 역할을 하고 있죠.

이런 유사한 역할을 하는 셀러 카드와 동일한 사용 경험을 위해 디자인 결을 맞추는 작업을 했어요.

각각 제공하는 정보들이 완벽히 동일하지는 않지만 유사한 성격을 가진 내용들의 위치와 디자인을 변경했어요.

하나의 앱 안에서 유사한 역할을 하고 있는 것들을 맞추는 작업 또한 동일한 사용 경험의 과정이죠.

지금까지 제한적인 프로모션 페이지 안에서의 유저의 관점에 초점을 두고 시도해 보았던 “UI 디자인 일관성 더하기”에 대해 알아보았는데요.

여기에 대해 더 궁금한 사항이나 추가로 업로드되었으면 하는 이야기들을 댓글로 남겨주시면 참고해 볼게요😄

그럼 다음 글에서 또 만나요🙌

Written by. Leica