designod · 바카라 실시간(Wishket)

프로젝트 배경

1) 문제점
- 기존 웹사이트의 노후된 UI와 비효율적인 정보 구조로 인해 브랜드 신뢰도 저하
- 모바일에서는 화면이 깨지거나 버튼이 작아 사용자 불편이 심각함
- 제품 정보를 확인해도 구매 연결이 어려워 사용자 전환율 저조

2) 프로젝트 목표
- 코스텔의 브랜드 이미지와 정체성을 시각적으로 강화
- 제품 탐색과 정보 접근성을 높이고, 전환 유도까지 연결되는 구조 설계
- 전 디바이스에서 안정적으로 작동하는 반응형 웹사이트 구축

3) 주안점
- 제품 중심의 레이아웃 설계로 정보 전달력 강화
- 브랜드의 고급스러움을 담아낸 UI 디자인
- 유지보수가 쉬운 퍼블리싱 구조와 SEO를 고려한 마크업

프로젝트 성과

페이지 평균 로딩 속도 45% 향상

불필요한 스크립트 제거 및 최적화된 이미지 처리로 사용자 이탈률 감소

모바일 사용자 이탈률 32% 감소

반응형 UX 최적화로 사용자 행동 흐름 개선

제품 조회수 평균 2.3배 증가

제품 리스트 및 상세페이지 UI 개편으로 정보 접근성과 탐색 용이성 향상

브랜드 키워드 검색 유입 54% 증가

SEO 최적화를 통해 포털 검색 시 COSTEL 브랜드 페이지 노출 강화

핵심 기능

🧩 제품 필터링 기능

- 사용자가 원하는 제품을 빠르게 찾을 수 있도록 직관적인 다중 조건 필터 시스템을 구현
- 가전제품 특성상 스펙 기반 탐색이 중요한 점을 고려하여, 사용자 중심의 필터 항목을 선별해 구성

📄 제품 상세 페이지 강화

- 제품별 주요 정보와 이미지를 시각적으로 한눈에 전달하여 구매 결정을 돕는 상세 페이지 구조로 설계
- 가독성을 고려해 콘텐츠를 섹션별로 구분하여 정보 과부하 없이, 핵심 내용을 빠르게 파악할 수 있도록 구

🖼️ 메인 비주얼 슬라이드

- 브랜드 아이덴티티와 핵심 제품을 강조하는 풀스크린 메인 비주얼을 통해 첫 진입 시 강한 인상을 전달
- 방문자의 관심을 효과적으로 유도하며 브랜드의 전문성과 스타일을 강조

🧾 제품 소개 페이지 설계

- 제품의 차별화된 기능과 디자인을 효과적으로 전달하기 위해 브랜드 스토리와 사용 문맥 중심의 콘텐츠를 구성
- 실제 사용 환경을 보여주는 이미지와 함께 제품의 감성적 매력을 강조하여 구매 전환을 유도

진행 단계

리서치 및 브랜딩 분석

2022.06.

기존 사이트 진단, 경쟁사 벤치마킹, 브랜드 톤 리서치

정보구조 및 UX 플로우 기획

2022.06.

제품 분류 체계 정리, 사용자 시나리오 구성

UI 스타일 가이드 및 시안 디자인

2022.07.

컬러 시스템, 타이포, 컴포넌트 설계 후 시안 제작

퍼블리싱 및 반응형 개발

2022.08.

크로스브라우징, 모바일/PC 최적화 개발

최종 검수 및 운영 가이드 전달

2022.09.

QA 테스트, CMS 연동 고려하여 운영 측면 반영

프로젝트 상세

코스텔은 디지털 소형가전 전문 브랜드로, 다양한 전자제품을 온라인으로 판매하고 있지만 사용자 중심의 구매 경험이 부족해 브랜드 이미지와 전환율에 한계가 있었습니다.

이번 프로젝트는 제품의 기능성과 감성적 브랜드 이미지를 동시에 전달하고, 온라인 구매 전환을 유도하는 UX/UI 리디자인을 목표로 진행되었습니다.

특히 전자제품에 익숙하지 않은 사용자도 제품을 쉽게 비교·탐색할 수 있도록 정보 구조를 재설계하고, 시각적으로 직관적인 콘텐츠 배치를 통해 브랜드 신뢰와 상품 이해도를 높였습니다.

제품 상세 스펙 페이지