모바일 쇼핑 UX의 정수
티몬 모바일 상품 상세화면 UX 리뉴얼 제작기
상품을 구매하기 위해
가장 오랫동안 머무는 곳은?
UX를 다루는 디자이너가 가장 까다로워하는 분야가 모바일 쇼핑에 관련된 디자인 입니다.
드러내야 하는 정보의 양과 기능이 가득하고 즉각적인 매출과 관련이 있어 사업주체와 디자인과의 의견조율도 까다롭습니다. 자칫하면 촌스러워지기 일쑤이고 또 자칫하면 필요한 정보나 기능들을 제 위치에 놓지 못하는 경우도 많습니다.
그 까다롭다는 쇼핑몰 UX중에서도 가장 어렵다는 두가지! [상품 리스트]와 [상품 상세] 그 중에 오늘은 티몬이 리뉴얼한 모바일 [상품 상세 화면]에 관한 이야기 입니다. 구매 전환과 가장 밀접한 화면이며, '판매자'가 드러내는 상품설명과 '플랫폼'의 적절한 기능, '구매자'를 위한 고객의 편의등 고려할것이 다양한 상품 상세 화면의 디자인 제작기를 살펴보세요!
* 이번 티몬 4.0 개편에 맞춰 개편된 상세페이지는 현재 티몬의 슈퍼마트에 적용되어 있습니다.
RESEARCH
먼저, 유저 테스트 결과를 통해 문제점을 파악. 정보 노출의 유무, 중요시 여기는 정보, 구매에 영향을 미치는 정보 등의 수집으로 이를 토대로 상품 상세페이지를 어떻게 개편할 것인지에 대한 방향을 잡았습니다.
다음으로, 주요 구매패턴 분석에 따른 방향을 설정해 보았습니다. 다양한 구매형태 중 여러 상품들을 연달아 확인하며 카트에 담는 사이클형의 구매패턴이 높은 수준으로 구매전환과 가까웠음을 파악할 수 있었으며, 해당 행위에 편의성을 줄 수 있도록 고민하였습니다.
@리서치를 통한 개편 방향설정DESIGN
4.0 개편 타일에 맞춰 가볍고 심플해진 디자인.
투명한 상단 바로 인해 좀 더 시원시원하고 크게 이미지 영역이 확장되었어요.
투명상단바는 스크롤되며 자연스럽게 BG가 생성되며 정보를 노출하도록 구성되어 있습니다.
@상품상세 페이지 디자인-
내 위치를 알려주는 로케이션 바
스크롤을 내리면 상단바와 함께 현재 내가 보는 상품의 카테고리를 알려주는 로케이션 바도 함께 나타납니다. 로케이션 바로 언제든 원하는 카테고리로 이동할 수 있어요.
@이동이 편한 로케이션바-
모듈화가 가능한 박스 그리드 디자인
다양한 상품군이 존재하는 티몬에서는 필수 정보들이 상품군마다 매우 다양합니다. 그렇기 때문에 이러한 모듈화는 각 정보들의 위치나 순서가 바뀌어도 새로운 컨텐츠가 추가되어도 통일성을 유지할 수 있게 해줍니다.
@통일성을 주는 컨텐츠 박스-
숨어있던 필수 정보들을 앞으로!
상세정보 탭 안에 숨어있던 필수 정보들을 스크롤 한 번으로 모두 접할 수 있게 되었습니다.
상품 구매에 큰 영향을 주는 할인정보, 배송정보 그리고 상품후기/별점을 이젠 쉽게 스크롤만으로 찾아볼 수 있습니다.
@주요정보들이 한눈에!-
패스트 스크롤로 긴 옵션을 빠르게~
옵션이 너무 많아 보기 힘들었던 상품설명 탭 부분에 패스트 스크롤을 추가해 빠르게 내리고 빠르게 찾을 수 있게 되었습니다.
@빠르게 패스트 스크롤-
재밌는 인터렉션 추가!
통통 튀어 오르는 공유하기 메뉴들과 귀여운 티모의 찜하기 인터렉션 추가로 재미를 더했습니다.
귀여운 티모니가 기다리고 있으니 많이 많이 찜하고, 공유해주세요~
마치며
고객경험 분석과, 사용성테스트를 통해 단순히 디자이너의 직관만으로 구성된 디자인이 아닌, 아름다움과 유용함을 모두 충족하는 Good Design에 다가가려는 노력을 기울인 결과물입니다.
현재 슈퍼마트에만 적용이 되어있지만, 점차 전체 카테고리로 확대 개편하며 지속 보완할 예정입니다. 앞으로도 많이 기대해 주세요!
