B2C · Retail · Customization
JINS UX Redesign
진즈는 오프라인과 온라인 플랫폼을 통해, 맞춤형 렌즈와 아이웨어 솔루션을 제공하는 일본의 대표 안경 브랜드입니다.
기존 진즈 웹사이트는 상세한 정보를 한 화면에서 확인하고 싶어 하는 일본 유저의 니즈에 맞춰 방대한 상품 정보를 높은 밀도로 제공하고 있었습니다. 그러나 진즈가 미국을 중심으로 해외 사업을 확장하면서, 다양한 사용자가 상품을 쉽게 탐색할 수 있도록 개편이 필요했습니다.
따라서 이 프로젝트에서는 진즈 사이트 내의 정보 위계를 재설정하고, 상품 커스터마이징과 구매 플로우를 단순화하여 진즈의 글로벌 커머스 사이트를 리디자인했습니다.
UX Strategy
Core Problem
과도한 정보량
상품 상세 페이지에서 너무 많은 정보를 한 화면에서 노출하고 있었고, 버튼과 드롭다운, 옵션 정보 등의 요소가 비슷한 위계로 강조되어 있었습니다. 따라서 유저가 상품의 핵심 정보를 빠르게 파악하고 구매를 결정하기 어려운 구조였습니다.
복잡한 렌즈 미리보기
렌즈 옵션을 테스트하려고 미리보기에 진입했을 때, 하나의 렌즈 색상을 확인하는 데에도 다섯 번의 클릭이 필요했습니다. 또한, 색상, 코팅, 추가 옵션 등의 선택 박스가 동시에 제시되어 유저가 한 화면에서 너무 많은 결정을 내려야 했습니다.
불편한 구매 플로우
도수 처방 정보, 배송 옵션 등 유저의 결정이 필요한 핵심 영역이 반복적이고 긴 상품 정보 영역과 시각적으로 구분되지 않았습니다. 이로 인해서 필수 정보를 입력하지 않은 채 다음 단계로 넘어가려는 경우가 많았고, 높은 스크롤 피로도로 인한 구매 이탈도 발생했습니다.
UX Strategy
Design Direction
정보 위계 재구성
사용자가 핵심 정보를 빠르게 파악하고, 구매를 결정할 수 있도록 정보 위계를 재구성합니다.
인터랙션의 적극적 사용
조건별, 상황별로 유저에게 노출되는 정보를 축소하는 인터랙션 요소를 적극적으로 활용해, 렌즈 미리보기 등 주요 테스트 화면에서 한 번에 노출되는 정보의 양을 줄입니다.
유저 플로우 간소화
복잡한 구매 과정을 명확한 단계로 나눠, 사용자가 지나친 정보로 인한 혼란 없이 필요한 행동에 집중할 수 있도록 유도합니다.
EXPERIENCE DESIGN
Product Details
의사결정을 돕는 상품 정보
사용자의 의사결정 흐름에 맞춰 상품 상세 정보를 재구성했습니다. 핵심 정보의 시각적 우선순위를 높이고 보조 정보의 강조를 줄여 정보 과부하를 완화했습니다. 렌즈 커스터마이징과 같은 주요 기능을 구매 CTA 가까이에 배치해, 옵션 탐색부터 구매까지의 여정이 자연스럽게 이어지도록 했습니다.
EXPERIENCE DESIGN
Lens Preview
직관적인 렌즈 미리보기
렌즈 테스트 화면에 집중할 수 있도록 미리보기 구조를 정리했습니다. 선택한 렌즈의 가격과 옵션 정보는 최상단에 플로팅하고, 옵션 선택 영역과 미리보기 영역을 명확하게 분리하였습니다.
간소화한 커스터마이징 플로우
기존에 다섯 번의 조작이 필요했던 렌즈 색상 선택 단계를 두 번의 조작으로 줄이고, 코팅을 포함한 추가 옵션 선택은 CTA 버튼을 눌렀을 때 단계적으로 노출하도록 화면을 간소화했습니다. 옵션 변경에 따른 가격 변동은 CTA 버튼 상단의 알림으로 짧게 노출되어, 유저가 즉각 인지하도록 유도했습니다.
상품 목록에서 바로 사용하는 렌즈 미리보기
상품 상세 페이지로 일일이 이동하지 않고도 렌즈 색상을 테스트할 수 있도록, 상품 목록 상단에 플로팅 형태의 렌즈 색상 테스트 도구를 추가했습니다. 스크롤 중에는 지금 선택한 렌즈 컬러만 보여주도록 축소되어, 상품 탐색을 방해하지 않으면서도 언제든지 렌즈 컬러 테스트에 접근할 수 있도록 했습니다.
위시리스트 간소화
일본 유저는 구매를 결정하기 전에 위시리스트에 상품을 담아 비교하는 경우가 많습니다. 그러나 기존 디자인에서는 안경 프레임과 별개로 선택한 렌즈의 옵션마다 별도의 상품 항목이 생성되어 위시리스트가 불필요하게 복잡했습니다. 리뉴얼한 위시리스트에서는 렌즈 옵션을 위시리스트에서 선택하게 하지 않고, 구매 단계에서 추가하도록 변경해, 상품 목록을 간소화했습니다.
EXPERIENCE DESIGN
Checkout Flow
명확한 구매 단계
기존에는 반복적으로 정보를 노출하며 복잡하게 섞여 있던 결제 과정을, 명확한 단계로 나눠 유저가 한 번에 하나의 과제에 집중하도록 변경했습니다. 또한, 처방 정보 입력, 배송 옵션, 추가 상품 등 주요 선택 항목의 위계를 강화해 상품 정보 등 보조적인 내용과 분리하여, 직관적으로 구매 과정을 따라갈 수 있도록 설계했습니다.
Outcome
