본문 바로가기

loading...

XEO HAIR
Web/Mobile Renewal

Category : Web Client : XEO HAIR Url : xeohair.com 2016.07.07

국내 헤어샵 프랜차이즈 브랜드인 제오헤어의 PC/Mobile 리뉴얼을 진행하였습니다.

단순히 기존 사이트의 사용성 개선이 아닌, 프랜차이즈 정보를 효과적으로 전달하여 많은 가맹점주를 모집할 뿐만 아니라 나아가 스타일, 디자이너에 대한 정보를 노출하여 고객을 위한, 고객과 소통할 수 있는 공간으로 만들고자 하였습니다. 나아가 스타일, 디자이너에 대한 정보를 노출하여 고객을 위한, 고객과 소통할 수 있는 공간으로 만들고자 하였습니다.

아시아 No.1 헤어샵 프랜차이즈 브랜드를 꿈꾸는 XEO HAIR

제오헤어는 2020년까지 '100명의 경영자와 300개의 가맹점 오픈'을 목표로, 아시아 No.1 헤어샵 프랜차이즈 브랜드로 도약하고자 하는 폭발적인 성장세를 이어가는 국내 프랜차이즈 브랜드입니다.
하지만 현재 트렌드에 맞지 않고 사용성이 떨어지는 사이트로 리뉴얼이 절실한 상황에 있었습니다.
단순히 기존 사이트의 사용성 개선에 그치지 않고, 프랜차이즈 정보를 효과적으로 전달하여 많은 가맹점주를 모집할 뿐만 아니라 나아가 스타일, 디자이너에 대한 정보를 노출하여 고객을 위한, 고객과 소통할 수 있는 공간으로 만들고자 하였습니다.

고객 유형에 따른 화면설계로 고객 맞춤 컨텐츠 제공

메인 화면은 와이드한 메인 비주얼로 깔끔하고 시원시원한 느낌을 주는 동시에, 컨텐츠는 인식이 쉬운 모듈 형태로 디자인하되 반으로 나누어 왼쪽은 고객이 필요로 하는 컨텐츠인 지점 찾기, 예약, 스타일에 대한 정보, 오른쪽은 (예비)가맹점주를 위한 컨텐츠를 배치하여 사용자가 원하는 컨텐츠로의 접근이 용이하도록 디자인하였습니다.
또한 상단 GNB 영역에 사용자가 가장 많이 사용할 메뉴인 예약하기, 가맹문의 버튼을 배치하여 사용성을 높였습니다.

제오헤어만의 컨텐츠, 헤어스타일에 관한 모든 것

XEO는 깎다, 자르다의 의미와 형태로는 가위, 빗, 거울을 상징하는 브랜드 아이덴티티를 가지고 있습니다.
미용의 기본에 충실하고자 하는 열정을 사이트에도 담아 헤어스타일에 관한 모든 정보를 제공함과 동시에 고객들이 참여할 수 있는 컨텐츠로 구성하여 적극적으로 활용할 수 있는 커뮤니티로의 변화를 꾀하였습니다.

디자이너와 고객, 잠재 가맹점주가 소통할 수 있는 커뮤니티로의 역할 제안

최신 헤어스타일을 제오헤어 디자이너들이 직접 사이트에 업로드하여 고객, 직원들이 소통할 수 있는 공간을 만들고, 매달 베스트 헤어 스타일을 선정하며, 제오헤어 본사에서 디자이너에게 혜택을 주는 이벤트를 진행하여 디자이너들이 성장할 수 있는 기회를 제공하고 있습니다.
또한 디자이너들이 올린 최신 트랜드를 보고, 제오헤어 방문자들이 하고자 하는 스타일을 선택할 수 있으며, 헤어스타일을 보러 들어온 방문자가 맘에든 헤어스타일을 하고 싶을 때 지점, 어느 디자이너인지 한눈에 볼 수 있으며, 실시간 예약 시스템까지 구현되어, 제오헤어 사이트 내에서 정보를 얻을 수 있고, 서비스까지 한번에 해결 할 수 있도록 설계하였습니다.

주 타겟층을 고려한 모바일 UI/UX 설계

모바일 사이트는 고객들이 주로 지점을 찾거나, 예약하기 위해 이용하기 때문에 모바일 메인화면에서는 고객을 위한 컨텐츠를 상단에 배치하여 모바일 디바이스에 맞는 UI/UX 설계로 편리하게 설계하였습니다.

반응형 디자인으로 다양한 디바이스에 대응

제오헤어는 익스플로러7버전 부터 지원하는 반응형 웹 사이트입니다.
서브비주얼은 뉴리버에서 독자적으로 만든 플러그인으로 하나의 이미지로 와이드 모니터부터 모바일 디바이스까지 지원되는 것이 특징입니다.
피씨와 모바일 네비게이션과 서브 페이지에 있는 로케이션 메뉴들은 하단으로 펼쳐지는 모션으로 통일하여, 안정적인 느낌을 주었습니다.
전 페이지에 걸쳐 개발 친화적인 코딩을 하기 위해 노력을 아끼지 않았습니다.

풍부한 컨텐츠로 커뮤니티/이벤트 활성화

제오헤어는 브랜드의 핵심과 사용자들에게 관심을 줄 수 있는 컨텐츠, 큐레이션 기능을 제공함으로써 타 헤어사이트와는 차별화를 두었습니다.
풍성한 컨텐츠로 고객, 디자이너, 가맹점주 모두가 유익하게 사용하고, 이벤트를 활성화하여 홍보 채널로서의 웹사이트의 기능을 극대화하였습니다.

브랜드의 핵심과 사용자들에게 관심을 줄 수 있는 컨텐츠, 큐레이션 기능 제공으로 타 사이트와 차별화

제오헤어의 브랜드 이념, 사용자에게 관심을 줄 수 있는 컨텐츠 기획, 큐레이션 기능 제공으로 사이트를 활성화할 수 있도록 4개월간 담당자분과 많은 커뮤니케이션을 하며 진행되었습니다.

PROJECT

xeohair.com

  • Design. UI/UX, Grid layout, Reactive design
  • Web strategy. UI/UX 및 Backoffice 기획
    요구사항 분석, 기능정의
  • UI development. 웹 표준, 반응형 퍼블리싱
  • Web development. PHP 5.5, JQuery, Infinite Scroll