Supercool Collective
온라인 스토어 리디자인
개요
나의 역할
단독 디자이너로서, Supercool Collective 온라인 스토어의 리디자인과 구현을 주도했습니다.
기여도
디자인, 웹사이트 반영 100%
(창립자 피드백 반영)
기간
3개월
프로젝트 유형
실무 프로젝트
플랫폼
웹, 모바일 (반응형)
Before
After
요약
Supercool Collective는 처키(Chucky)와 리턴 오브 더 리빙 데드(Return of the Living Dead)와 같은 유명 영화 프랜차이즈    피규어 및 수집품을 전문으로 하는 회사입니다. 저는 이 프로젝트에서 브랜드 강화, 전환율 향상, 접근성 개선을 통해 온라인 존재감을 높이는 데 중점을 두어 회사 온라인 스토어를 리디자인 하는 역할을 맡았습니다.
목표
팝 컬처 테마와 일치시켜 브랜드 아이덴티티를 강화하여 목표 고객과의 공감대를 형성
사이트 구조를 간소화하여 사용자가 재고 상품을 탐색하고 구매하도록 유도
장애가 있는 사용자도 더 쉽게 사이트를 탐색하고 쇼핑할 수 있도록 접근성을 개선
전략
이 목표를 달성하기 위해 휴리스틱 평가와 경쟁사 분석을 실시하여 브랜드, 구조, 접근성 문제를 파악했습니다.
비주얼 아이덴티티를 재구성하고, 제품 발견을 돕기 위해 배너 등의 기능을 추가했으며, 대체 텍스트와 스크린 리더 호환성 같은 접근성 기능을 구현하여 사이트를 더욱 사용자 친화적이고 포용적으로 만들었습니다.
성과
34%
3개월 동안 스토어 매출을 34% 향상시켰습니다.
35%
3개월 동안 방문 세션 수를 35% 증가시켰습니다.
42%
3개월 동안 구매 전환률 35% 증가시켰습니다.
"용태는 온라인 스토어의 디자인을 새롭게 개선해 브랜드가 더욱 흥미롭고, 명확하며 포용력 있게 느껴지도록 만들어 큰 변화를 이루었고 성실한 업무 태도로 큰 도움이 되었어요."
"Yongtae has made a significant impact by revamping the online store's design, making our brand not only more exciting but also more focused and inclusive. He has great work ethic and been a real asset to the team."
Bryan Christensen
공동 창립자, Supercool Collective
문제점
평범하고 개성 없는 템플릿 디자인
Web
Mobile
기존 사이트는 공포 및 컬트 영화 수집품이라는 특화된 분야에 맞는 일관된 시각적 아이덴티티가 부족했습니다.템플릿에서 제공하는 색상과 타이포그래피가 매장의 독특한 매력을 효과적으로 전달하지 못했으며,이로 인해 브랜드와 목표 고객 간의 연결이 약해져 사용자 참여가 감소했을 가능성이 있습니다.
품절 또는 라이선스가 없는 상품 표시
랜딩 페이지에는 품절되었거나 더 이상 라이선스가 없는 제품을 포함한 모든 대표 상품이 표시되었습니다.창립자들은 과거 작품 포트폴리오를 보여주는 것이 의미 있다고 생각했지만,이는 사용자가 구매할 수 없는 상품을 클릭하면서 불편함을 느끼거나, 실제 구매 가능한 상품에 집중하지 못하게 만드는 위험도 있었습니다.
대체 텍스트 누락으로 인한 접근성 및 SEO 영향
사이트 내 모든 이미지에 대체 텍스트(alt-text)가 없다는 것을 발견했습니다.이로 인해 스크린 리더를 사용하는 사용자들이 제품에 관한 중요한 정보를 놓칠 수 있어 접근성에 심각한 문제가 발생할 수 있습니다.또한 대체 텍스트의 부재는 사이트의 SEO에도 부정적인 영향을 미쳐 검색 엔진 순위가 낮아지고, 잠재 고객이 매장을 발견하기 어려워졌습니다.
해결 방안
신선한 디자인과 흥미로운 그래픽, 그리고 행동 유도 요소(콜투액션)
Web
Mobile
저는 공포 영화 테마의 그래픽, 기억에 남는 문구, 그리고 아이코닉한 영화들을 기리는 콜투액션 버튼이 포함된 배너를 활용해 사이트를 리디자인했습니다.기존 로고와 어울리도록 색상 팔레트를 조정했고, 타이포그래피는 레트로 감성을 담아 매장의 향수를 자극하는 분위기를 더했습니다.이러한 변화는 더욱 몰입감 있고 일관된 브랜드 경험을 만들어내어, 사용자가 제품을 탐색하도록 유도하고 전환율을 높이는 데 기여했습니다.
브랜드와 제품 유형별로 정리된 구성
신제품 라인을 강조한 매력적인 배너
브랜드와 유형별로 정리된 제품
대표 상품 정보 및 타 브랜드 제품 컬렉션 페이지 링크
리디자인된 랜딩 페이지는 Supercool Collective의 최신 Return of the Living Dead 라인업을 강조한 대형 배너로 제품 가시성을 최우선에 두고 있습니다.그 아래에는 주요 상품 정보가 포함된 대표 제품들이 한 줄로 배치되어 있습니다.또한, 다른 브랜드의 과거 제품 카테고리를 소개하는 섹션이 있어 각 컬렉션 페이지로 연결됩니다.더불어 모든 제품은 내비게이션 메뉴에서 브랜드와 유형별로 정리되어 있어 접근성이 개선되고, Supercool Collective가 홍보하고자 하는 상품에 집중할 수 있도록 구성되었습니다.
접근성 개선으로 고객층 확대
추가된 대체 텍스트로 스크린 리더 호환성 향상
접근성 선언 페이지 및 관련 자료 링크
접근성을 향상시키기 위해 이미지에 대체 텍스트(alt-text)를 적용하고 스크린 리더 호환성을 보장했습니다.NVDA(Windows), Talkback(Android), VoiceOver(iOS) 등 다양한 기기에서 사이트 기능을 테스트하여 정상 작동을 확인했습니다.이러한 개선은 장애가 있는 사용자를 위한 포용성을 높일 뿐만 아니라 SEO에도 긍정적인 영향을 미쳐, Supercool Collective가 더 넓은 고객층에 도달하고 사용자 참여를 증대하는 데 기여했습니다.
느낀 점
1. 브랜드와 사용성의 균형 맞추기
Supercool Collective만의 독특한 공포 테마 아이덴티티를 직관적인 디자인과 결합하면서, 강렬한 시각 요소와 사용자 친화적인 내비게이션의 균형을 맞추는 것이 얼마나 중요한지 알게 되었습니다.
2. 접근성이 참여를 촉진하다
대체 텍스트를 추가하고 스크린 리더와의 호환성을 확보함으로써 접근성을 개선했을 뿐만 아니라, 더 넓은 사용자층을 위한 사이트의 가시성과 사용성도 향상되었습니다.
3. 충분한 테스트가 성공의 열쇠
NVDA, Talkback, VoiceOver를 활용한 테스트를 통해 모든 플랫폼에서 원활한 사용자 경험을 보장하려면 반복적인 테스트가 반드시 필요하다는 점을 확인했습니다.
다른 프로젝트