케이스 스터디 정보
브랜드 : 자라
유형: App
UX UI 케이스 스터디 파트: PF / PD 페이지
관련 링크
자라 앱 다운 (ios): https://apps.apple.com/kr/app/zara/id547951480
ZARA
차별화된 글로벌 SPA 패션 브랜드 자라, 자라 온라인 쇼핑몰, 여성, 남성, 자라 키즈, 재킷, 셔츠, 팬츠, 아웃웨어, 스커트, 슈즈, 가방, 악세서리 등 제품 및 매장 안내. 접근 권한 안내 필수적 접
apps.apple.com
0. 개요
자라 (zara)는 글로벌 패션 기업 inditex에서 운영하는 전세계에서 가장 유명한 SPA 브랜드 중 하나 이다.
자라는 디지털 트랜스포메이션을 성공적으로 이룩한 브랜드 중 하나인데, 잡지를 보는 듯한 유려한 앱 디자인 UX 구성 , AR 기능 , 옴니채널 기능 등을 zara 앱에 잘 녹여내었는데, 그 중에 PDPF 페이지의 UXUI를 살펴 보려한다
1. PF 페이지
*PF:Product Filter 제품 필터 페이지로, 한가지 단위의 제품을 들어가기 전에 카테고리 등을 확인하는 페이지.
자라의 PF 페이지는 복합적인 페이지로 이동하는 허브의 역할을 수행하고 있음
대체로 메인 페이지를 제외하고 PD페이지까지 약 3 Depth로 구성함.
유저 플로우 유형은 크게 3가지로 보임.
1) 메뉴 - 카테고리 선택 - 카테고리 PF - PD
2) 메뉴 - 에디토리얼 - PD
3) 메뉴 - 상세 PF - PD
1) 메뉴 카테고리 카테고리 PF PD
2) 메뉴 - 에디토리얼 - PD
3) 메뉴 - 상세 PF - PD
개인적으로 느끼는 자라 앱의 UX 핵심은 “제품을 얼마나 까리하게 보여주느냐”인거 같다.
메인 페이지의 슬라이더도 대부분 해당 카테고리의 가장 대표적인 화보로 구성하고 해당 PF 페이지로 이동하는 구조를 띈다.
제품을 얼마나 까리하게 보여줄까?
이는 PF에서도 다르지 않는데, 슬라이더로 제품 나열을 전환하거나, 에디토리얼 자체를 PF로 사용하는 경우도 많기 때문이다.
하나하나 살펴 보겠다
1) 슬라이더 제품 나열 전환
주요 특징 및 인사이트
- 일반적인 UI인 드롭다운 형태가 아닌 슬라이더라는 새로운 UI로 유저가 하이라이트 - 2:2 - 4:4 순으로 제품 나열을 할 수 있음
- 상단 세부 카테고리는 터치 방식으로 전환
- 하이라이트가 세부 카테고리에서 안되는 걸로 보아, 제품 Pd 등록시 하이라이트 체크가 가능하도록 컴포넌트 개발 한 듯함
2) 에디토리얼 복합 PF 패이지
주요특징
- 에디토디얼과 PF를 복합적으로 보여주기 위해 페이지 레이아웃을 항상 새롭게 구성하는 것으로 보임.
- 다만, PD와 연결 시킬 수 있도록 PD랜딩 컴포넌트는 다양한 유형으로 개발한 것으로 보임.
- 잡지를 보는 듯한 페이지를 구성하고 이를 PD로 잘 이어지게 하는 UX가 훌륭함.
2. PD페이지
*PD: Product Detail 페이지, 제품의 상세정보를 확인하고 구매로 이어지는 페이지
자라 앱의 PD 페이지는 일반적인 PD페이지와 다른 UXUI가 특징인데, 상세 페이지가 없고 PD페이지의 썸네일 영역의 상하 스와이프로 유저가 제품 사진을 확인할 수 있다.
좌우 스와이프시 이전 PF페이지에 노출된 순서대로 다른 제품 PD로 자연스럽게 전환된다.
위아래 스와이프가 끝날경우 PF로 돌아가거나 (위) 유의사항 등이 나온다 (아래)
추가적으로 추천 제품을 노출함으로서 추가 매출을 발생시키는데, 주로 PD페이지에서 코디한 아이템을 추천하는 듯하다.
이외에도 유사한 아이템을 추가 제안하여,구매가 이뤄지지 않을 경우도 고려한 모양세다.
주요 특징
- 위아래좌우 스와이프 자라 앱은 터치 기반 인터페이스 보다 슬라이드 인터페이스를 선호하는 듯하다. 아마 물흐르듯 흘러가는 UX를 유저에게 제공하여 좀 더 많은 제품을 보도록 하기 위함인듯
- PD 페이지는 항상 어울리는 제품 / 유사한 제품을 가지고 있는데, 어울리는 제품은 관리자가 수기로 입력하는 것으로 보이고 / 유사한 제품은 자라 앱이 가진 AI 기능으로 서포트 하는 것 같다 (그 이유는 모든 제품을 관리자가 유사한 제품으로 제안하는 게 불가하기때문)
또한 뷰티 제품군 중 색조 제품은 AR 기능을 통해 테스트가 가능한데,
테스트 버튼을 통해 라이브/스틸사진 업로드 선택이 가능하다
아쉬운 점
- 스와이프 기반은 재미도 있고 세련된 느낌이었지만 가끔 좌우 상하를 잘못 인식할때가 있어 유저의 불편이 발생할때도 있었음
- 글로벌 통합 앱으로 각 지역병 지사가 번역 형태로 서비스하는 것으로 보이는데, 그래서 그런지 리뷰 콘텐츠가 없는 것이 아쉬움. 이는 유니클로와 다른 부분.
'회사가 돈 쓰는 것들 > 기획 스터디 글 모음' 카테고리의 다른 글
| [사업 케이스 스터디] 네이버웹툰 <재혼황후> 화보 프로젝트, 사진 스튜디오의 확장? (0) | 2023.06.02 |
|---|---|
| [UX스터디] 당근마켓 새상품 광고 매체 (0) | 2023.05.31 |
| UI/UX Study 네이버 자동차 로딩창 애니메이션 (0) | 2022.09.27 |
| [모바일 웹 페이지 레퍼런스]H&M hotel henes (0) | 2022.04.13 |
| [웹 Casestudy] 배민 신춘 문예 사전 홍보 모바일 페이지 (0) | 2022.03.16 |
