네번째, 케이스 스터디 주제는 쇼핑이다.
▶ 주로 트렌디하고 유니크한 스타일의 여성 의류를 판매하는 온라인 패션 브랜드
1. 홈 구조
▶ 강조 요소
첫 화면에서 시즌성 프로모션(OUTER WEEK)를 크게 배치
*사용자 진입 시점에 할인 혜택 바로 인지 가능
↔ *웹사이트 첫 진입 스크롤 불가
노트북 화면 가득 'OUTER WEEK'의 이미지만 보이고, 아래로 스크롤 하라는 표시도 없다.
→ 스크롤하라는 아이콘만 추가해도 사용자들은 신상품, 인기상품에 더 잘 노출될 수 있을 것이다.
↔ *카테고리 접근성 낮음
중앙의 이미지에 시선을 뺏겨서 상단 메뉴바를 확인하는 시간이 다소 걸린다.
→ 시즌성 프로모션 강조를 조금만 줄여도 접근성이 좋아질 것이다.
▶ 시각적 전략
*브랜드 무드 강조
모델 룩북 스타일의 이미지 = 스트릿 / 모던
▶ 상품 추천
스크롤해서 내려가면 '신상품', '인기상품'섹션으로 이어져
*구매 유도 흐름이 자연스럽게 구성
2. 카테고리 & 검색
▶ 카테고리 구조
Shop에 들어가면 New(신상품), Best(인기상품), 자체제작 등 키워드가 배치
*핵심 카테고리가 명확
↔ *세부 분류(상의/하의) 접근성 낮음
2차 메뉴로 Shop을 한 번 더 눌러야 카테고리별로 볼 수 있어 탐색 과정이 한 단계 더 늘어났다.
→ 신상품, 인기상품 아래에 세부 분류도 같이 배치했어도 괜찮았을듯
▶ 검색 기능
인기검색어를 노출하여 흐름을 *빠르게 파악
▶ 장바구니 /위시리스트
지난 흐름을 *반복하지 않고 접근 가능
▶ Account
서비스 사용자 흐름 과정에서 필요한 정보, 로그인, 최근 기록 등을 확인할 수 있게 모여있다.
3. 상품 상세 페이지
▶ 이미지 구성
착용, 확대, 디테일 등 다양한 제품 이미지 제공
*직관적이고 충분한 정보 전달
▶ 텍스트 구성
맨 아래 부분에 SIZE INFO, PRODUCT INFO, DETAIL INFO 등 눈에 잘 보이는 타이포 사용
*원하는 정보 빠르게 파악 가능
▶ 사이즈 비교
키, 몸무게를 입력하면 비슷한 체형의 다른 사용자들의 구매내역을 바탕으로 사이즈 추천
*사이즈 실패 가능성 낮음
▶ 리뷰 & 상품 비교
리뷰 시스템 존재 (포토, 텍스트) + 별점
하단에 유사상품 추천
▶ 구매 페이지로 전환흐름
메인 페이지 이미지가 커서 시선이 뺏겨
상품 옵션, 구매 버튼이 상대적으로 작게 느껴진다.
색 강조가 구매에 되어있지 않아 ’쇼핑백에 담기‘ 버튼에 시선이 뺏긴다.왜 구매하기 버튼보다 더 강조된건지… 가끔 헷갈려서 구매하기 누르려는게 장바구니 담기를 누르게 된 적이 있다.
*구매로 이어지는 전환이 낮을 수 있다.
4. 결제 페이지
▶ 맨 윗부분에 현재 등급, 적립금 / 예치금 / 쿠폰 현황을 잘 보여준다.
*결제 시 사용에 유용
▶ 배송정보 입력
배송정보 입력 시, 최근 배송지를 두개까지 보여주고 체크할 수 있게 해서 *배송정보 입력 시간 단축
▶ 할인/ 부가결제
각 항목별 사용가능 현황을 자세히 보여준다.
▶ 결제수단
사용자들이 많이 사용할만한 결제수단이 매우 많다. *편안한 결제
4. 결제 페이지
▶ 적응형 웹 화면으로 웹 사이즈에 따라 시즌별 프로모션 이미지 및 요소들이 사이즈에 맞는 이미지로 바뀐다.
💭 웹사이트 케이스 분석은 처음이라 어플과 다르게 볼 요소들이 조금 더 많았다.
'스터디 > 케이스 📱' 카테고리의 다른 글
| [케이스 스터디] (웹) TIVING 티빙 (0) | 2025.10.23 |
|---|---|
| [케이스 스터디] (앱) 카카오 웹툰 (0) | 2025.10.19 |
| [케이스 스터디] (앱)스카이스캐너 (1) | 2025.09.24 |
| [케이스 스터디] (앱)우리은행 (0) | 2025.09.22 |
| [케이스 스터디] (앱) WINC 윙크 (2) | 2025.09.13 |