사이트를 리뉴얼해야 하는 이유
이유 없는 기획과 디자인, 개발은 있어선 안된다고 마음먹은 프로젝트
2019년, 회사에 모바일 최적화된 브랜드 사이트가 없었다.
기존 사이트 데이터를 보니 모바일 사용자가 80%를 차지했다.
모바일 사용량이 증가하고 판매하는 제품 객단가는 계속 높아지지만 사이트는 변함없었다.
그 덕분에 브랜드 홍보사이트의 역할은 자연스럽게 사라지고 있었다.
2018년 여름, 새롭게 구축한 브랜딩 요소를 사이트에 적용하기로 하며 신규 개편을 시작했다.
프로젝트 결과는 체험 소스 입력 수 150% 증가, 평균 세션 시간 200% 증가이다. (2018년 11월 기준)
결과를 얻기까지 어떤 흐름으로 기획하고 약 100페이지가 넘는 홈페이지를 어떻게 산출했는지 공유하려 한다.
이전 사이트 VS 개편 사이트01. 가설 설정
문제란 이상적인 상태와 현상 간의 Gap이다.
사이트가 이상적인 상태가 되려면 어때야 할까?
우리 회사 브랜드 사이트의 경우 객단가가 높은 제품을 팔지만 오로지 오프라인에서만 판매할 수 있다.
즉 가망고객이 사이트를 통해 제품에 대해 관심을 생기게 해 체험 소스를 입력하게 해야 한다.
사이트의 이상적인 상태는 최대한 많은 가망고객이 체험 신청을 통해 본인 정보를 사이트에 남겨야 한다.
아무런 의심 없이, 당연하게 가망고객이 소스를 입력하게 하는 게 사이트의 이상적인 상태이다.
어떻게 하면 가망고객이 당연하게 우리 사이트에 개인정보를 남길 수 있을까?
아래 4가지 요소가 충족되어야 소스 유입이 많이 될 것이란 가설을 설정했다.
- 프로젝트 가설 -
(1) 기존 사이트 가망고객 행동 흐름을 바탕으로 한 정보 설계가 되어야 사이트 유입량이 증가할 것이다.
(2) 지속적으로 관리하는 사이트라는 점을 어필하기 위한 현행화해야 사이트 유입량이 증가할 것이다.
(3) On/Off 라인 브랜딩 요소 통합 (일관된 사용자 경험)되어야 사이트 유입량이 증가할 것이다.
(4) 모바일/ PC 각각 사용자에게 맞는 UI 설계를 해야 사이트 유입량이 증가할 것이다.
02. 가설 검증
상위 기획에서 위 네 개 가설의 근거자료를 찾았다.
(1) 기존 사이트 가망고객 행동 흐름을 바탕으로 한 정보 설계가 되어야 사이트 유입량이 증가할 것이다.
기존 사이트에 에이스카운터 분석 툴이 삽입되어있었다.
살펴보니 해당 사이트 사용량은 '홈 > 센터 찾기 > 로그인 > 다운로드 > 체험 신청 > 이벤트' 순이었다.
홈은 가망고객과 기존 고객이 함께 사용하는 곳이다. 센터 찾기도 마찬가지이다.
다만 로그인, 다운로드는 기존 고객이 사용하는 기능이다. 체험 신청은 가망고객이 사용하는 기능이다.
이벤트는 모두가 사용하는 기능이다.
가망고객 소스를 모으는 게 가장 1순위인 사이트가 기존 회원 고객지원 서비스와 가망고객을 위한 서비스 중
우선순위를 정할 수 없게 유입되고 있었다. 그 이유를 살펴볼까?
녹색은 기존 고객/ 파란색은 가망고객이 사용하는 메뉴기존 사이트는 스크롤 내리기 전 영역이 기존 고객(녹색)과 가망고객(파란색) 영역이 복잡하게 있었다.
처음 유입된 사용자의 경우 해당 브랜드가 정확히 어떤 브랜드인지 알지 못한 채 액션을 유도하고 있다.
처음 들어온 고객의 사용자 경험을 우선 설계하기로 했다.
(2) 지속적으로 관리하는 사이트라는 점을 어필하기 위한 현행화해야 사이트 유입량이 증가할 것이다.
지속적으로 관리하는 사이트란 업데이트를 꾸준히 한다는 것이다. 즉 업데이트를 통해 사용자에게 신뢰감을 주는 점도 활발한 사이트 관리를 위해 굉장히 중요하다.
해당 사이트는 2015년 구축 후 1번의 개편 후 유지보수만 하고 있었다. 그렇다 보니 모바일 최적화가 된 부분이 없다. 덕분에 사용자들은 화면을 zoom in, zoon out 하며 사용해야 한다. 대응되지 않는 사이트는 고객에게 외면받을 수밖에 없고 이는 사이트 유입률에서도 증명됐다.
2019년에 운영 중인 사이트이다.(3) On/Off 라인 브랜딩 요소 통합 (일관된 사용자 경험)되어야 사이트 유입량이 증가할 것이다.
오프라인 인쇄물, 온라인 일부 홍보물엔 2018년 브랜드의 새로운 브랜딩을 적용했다.
하지만 현재 운영 중인 사이트에서는 2018년 새롭게 구축한 브랜딩이 드러나지 않고 있다.
가망 고객뿐 아니라 내부 관리자들도 디자인 작업 시 큰 혼란을 겪었다. (이벤트 배너는 새로운 브랜딩 규칙에 맞춰 양산하고 사이트 유지보수 시엔 포토샵 파일을 켜야만 했다.... 2016년도. psd를)
이는 일관된 이미지 전달을 할 수 없을 뿐 아니라 신뢰도에 큰 영향을 미친다.
브랜드의 홍보효과를 강화하기 위해선 고객뿐 아니라 파트너 사와 가망고객에게도 일관된 브랜드 경험을 제공해야 한다.
(4) 모바일/ PC 각각 사용자에게 맞는 UI 설계를 해야 사이트 유입량이 증가할 것이다.
각 디바이스 별로 제공해야 할 기능이 다르다. 고객 지원 기능은 오로지 PC에서만 가능하기 때문이다. 검증할 필요도 없이 당연히 나눠서 설계를 해야 했다. 하지만 값비싼 교재를 사이트에서 미리 볼 수 있게 제공하는데 UI 설계 시 반응형으로 설계하기엔 정보량, 정보 노출 형태에 따른 한계를 느꼈다. 그래서 PC와 모바일을 도메인을 나눠 따로 기획했다.
03. 기획
어떻게 하면 가망 회원 소스 정보를 최대로 확보하는 기획을 할 수 있을까?
이를 위해 PC 사이트에서 CTA를 유도하는 사이트와 모바일에서 CTA를 유도하는 사이트들을 분석했다.
확인해보니 디바이스 크기 별, 화면 별 CTA를 유도하는 행태가 달랐다.
모바일은 작은 화면인 만큼 CTA 기능을 화면에 전면에 드러나도록 설계하는 반면 PC는 크기보다는 스토리 텔링, 혹은 하단 스크롤 고정으로 CTA기능을 강조하고 있었다.
이는 디바이스를 사용하는 사용자의 도구 (PC는 마우스, 트랩 패드, 키보드/ 모바일은 손가락)에 따라
다른 사용자 행동을 설계하는 것으로 보였다.
그래서 모바일 사이트와 PC 사이트의 기획을 철저히 분리해 기획했다.
1) 모바일 사이트 : 사용자가 어디로 가야 할지 길을 잃게 하지 말자
(1) 내비게이션 이원화
모바일 사이트에 유입될 고객 유형은 가망고객과 기존 고객이다. (이는 PC도 마찬가지)
하지만 PC와 다르게 모바일은 가망고객 유입이 높다. 따라서 고객지원 메뉴와 브랜드 소개 메뉴의
위계를 함께 두지 않아야겠다고 생각했다.
생각 끝에 왼쪽은 가망고객용 메뉴, 오른쪽은 기존 고객용 메뉴로 메뉴를 구성했다.
사용 시 학습을 최소화하고 싶었지만 한 번씩 메뉴를 눌러봐야 파악이 가능하다는 한계가 있다.
그렇지만 실제 테스트 시 기능을 모두 담고 운영할 수 있는 기획이었다.
(2) 중요 정보 최상단 위치
모바일 사이트에서 가장 중요한 역할은 가망고객 소스를 확보하는 일이다.
이를 달성하기 위해 가망고객 메뉴에 [체험 신청] 버튼이 전면에 보이게 기획했다.
기획 도구 관련 TIP / 모바일 사이트를 기획할 때 가장 유념한 것은 기획 중인 사이트를 실무자뿐 아니라 이해관계자들에게도 바로 전달해야 한다는 점이다. 작은 스크린에 많은 정보를 넣어야 하는 만큼 빠른 의사결정을 위해 기획문서를 XD로 작성했다. 개발 파트에 개발을 요청할 때는 XD를 PDF로 산출해 PDF Reader에 주석으로 Description을 작성했다. 하지만 이 방법은 추천하지 않는다. 차라리 두 번 작업하더라도 XD와 키노트 (혹은 PPT)를 활용해 적는 걸 추천한다. (히스토리 관리가 쉽지 않다.)
2) PC 사이트 : 고객지원 서비스를 강화하되 PC에서만 줄 수 있는 즐거움을 주자.
PC 사이트의 주목적은 고객지원 서비스 (음원, 영상 다운로드)이다.
브랜드 홍보 및 제품 소개, 가망고객 소스 확보도 모바일 비율과 비등하게 고객지원 서비스를 받기 위해 사이트에 접근한다. 즉, 가망 회원:기존 회원=1:1 비율이라고 봐도 무방하다.
실제로 회원단, 비회 원단 메뉴가 반반 정도이다.(1) 모션 강화
기존 회원이 고객지원을 받으러 사이트에 접근한 경우 (실제로 문제가 있기 때문에 고객지원을 이용한다.)
답답한 상황이 있을 수도 있지만 이를 없애기 위해 모션을 넣어 생동감을 주었다.
또한 각 메뉴마다 어울리는 모션을 구현해 단조로움을 없앴다. 덕분에 콘텐츠가 다채로워졌다.
(2) 고객지원 프로세스 변경
기존 고객지원 프로세스는 다소 복잡하고 순서가 명확하지 않은 문제가 있었다.
(실제로 고객센터에 고객지원 관련해 불만 접수가 많았다.)
이를 개선하기 위해 삼성 프린트 사이트, 애플 고객지원 사이트를 살펴봤다. 둘의 공통점은 제품군으로 사용자를 나눠 내가 선택하지 않은 제품은 과감히 보여주지 않고 있었다. 그리고 고객지원 프로세스대로 화면을 구성해 사용자가 헤매지 않도록 설계했다. 여기서 착안해 개편된 사이트에서도 지원받을 제품 선택 후 고객지원 순서대로 화면을 기획했다.
기존 서비스는 내가 지원받을 필요 없는 제품까지 노출된다. 또한 다운로드 순서에 대한 명시가 없다.(3) 과감한 레이아웃 및 다양한 효과
PC 사이트는 최소 1280px인 만큼 사이즈가 크기에 이 사이즈 안에서 정보를 집중적으로 보여주기 위해 고민했다. 특히 사용자를 hooking 해야 하는 멤버십 설명 페이지는 특정 영역에 마우스 호버 시 백그라운드가 바뀌는 기획을 했다. 그 이유는 시각적 충격을 줘 해당 내용에 더 집중할 수 있게 설계하고 싶었기 때문이다.
아직 해당 기획이 멤버십 회원 비율을 높였다는 근거는 없지만 높일 것이라고 생각한다.
04. 구현
기획을 바탕으로 구현을 시작했다.
먼저 마크업 업체, UI 디자이너, 기획자가 모여 기획 리뷰를 진행하고 질의응답 후 WBS를 작성했다.
외부 업체와 작업할 경우 특히 치밀한 WBS가 중요하다. 그래서 다른 프로젝트보다 WBS 작성에 공수를 많이 들였다.
(1) UI 디자인
기획을 바탕으로 디자인을 진행했다. UI 디자인 작업 시 기획자는 단순히 기획서만 넘길 것이 아니라 디자이너와 계속 소통하며 문제가 될 부분, 어색한 부분 등 더 나은 산출물을 위해 고민하는 모습이 좋다.
기획의도를 끊임없이 어필하고 설득해서 산출물을 만들면 나중에 이슈가 많지 않다.
그리고 마크업 업체에 산출물은 제플린으로 넘겨 데이터 백업과 공유를 동시에 진행했다.
(+방금 산출문서를 보다가 놓친 부분이 있어 추가한다. 일관된 교재 체험경험을 제공하기 위해 약 100권이 넘는 교재와 활동교구도 모두 디자이너 분들 지휘하에 촬영도 진행했다.)
(2) 마크업
이번 프로젝트는 규모가 크다 보니 마크업 업체를 물색해 맡겼다. 업체 선정 시엔 기업 규모, 프로젝트, 미팅 등을 통해 우리와 fit이 잘 맞는 업체를 선정하는 것이 중요하다. 처음엔 금액이 가장 중요하다고 판단하여 금액이 저렴한 업체와 작업을 했다. 하지만 이 방법은 예산이 아주 적은 경우를 제외하곤 정말 비추천하고 업체의 규모와 업력, 담당자를 고려해 선정하는 것이 좋다!
그리고 마크업 시 기획자가 꾸준히 이슈 대응을 하고 필요한 부분을 챙기는 것이 이상적이다.
특히 외부 업체의 경우 바로 소통이 되는 건 아니다 보니 가능한 문의사항이 오면 바로바로 대응할 수 있게 준비하는 것이 좋다. 가장 중요한 점은 수정사항을 실시간으로 공유하고 반영할 수 있게 확인하는 공유 문서를 만드는 일이다. 아무리 뛰어난 업체라도 수정사항은 반드시 발생한다. 수정 히스토리를 남길 수 있고 많은 사람들이 참여할 수 있는 구글 스프레드 시트로 문서를 작성하면 일을 몇 번씩 하지 않아도 된다.
(3) 백엔드 개발
백엔드 개발은 내부에서 진행하고 마지막엔 외부에서 진행했다. ASP.net.mvc라는 생소한 언어로 개발했던 기존 사이트는 개발 진입장벽이 높은 편이었다. 다행히 개발팀에서 유능한 개발자분을 섭외해주셔서 진행했다. 개발자님과 리뷰부터 수정, 문의 대응까지 정말 많은 소통을 했다. 백엔드에선 중요했던 부분이 정확한 요청사항을 전달하는 것과 정책문서 현행화, 수정사항 실시간 공유였다. 나는 개발에 대해 잘 알지 못하지만 소통 덕분이 무리 없이 백엔드 개발도 진행했다. (물론 개발자분이 뛰어나서 잘된 거지만..!)
(4) 검수
대망의 검수, 검수에서 많은 이슈가 있었다.
검수는 정말 꼼꼼해야 하고 냉정해야 한다. 안타깝게도 나는 이 부분이 약하다.
하지만 기획자의 생명은 꼼꼼함이라 생각한다. 그래서 나는 문서를 작성해 다른 분께도 도움을 요청해 함께 검수를 진행했다. 검수는 크게 기존 개발 문제, 구현하니 변경했으면 하는 부분으로 나눠 리스트업 했다.
그래서 기존 개발 문제는 개발자 분께 바로 전달 해 수정 진행했고 후자는 2차 개편으로 묶어놨다.
검수 잘하는 방법은 끊임없이 냉정하게 서비스를 바라봐야 하는 것 같다.
참 힘든 일이지만 가장 중요한 일이라 생각된다.
(5) 운영
원활한 운영을 위해선 사이트가 제 기능을 잘 수행하고 있는지 확인해야 한다.
이를 위해 GA 데이터를 원하는 결괏값을 얻기 위해 삽입해 추적해야 한다. 아쉽게도 이 부분도 내가 부족한 부분이다. 현재는 메인에만 GA를 삽입해 유입량, 세션 수, 사용자 인구 정보, 기기 정보 등은 확보하지만 아직 부족하다. 유의미한 데이터를 확보하기 위해 꾸준히 공부하고 적용해 가야 한다.
(6) 백업
가장 중요한 백업, 백업은 기획서부터 디자인, 개발 소스, 수정 히스토리 등 모두를 총칭한다.
백업은 최대한 여러 곳에 현행화해가며 진행해야 한다. 담당자 부재, 업데이트된 서비스 문제 등을 고려했을 때 가장 기본적인 업무 습관이다.
05. 마치며
이 사이트는 정말 내가 애정을 갖고 긴 시간 진행한 프로젝트이다. 프로젝트 기간은 약 1년이며 그동안 정말 많은 이슈가 있던 개발이었다. 힘들긴 했지만 앞으로 운영될 사이트를 보며 꾸준히 업데이트해 나가야겠다고 생각했다. 또 이번 프로젝트에서 뼈저리게 느낀 것은 기획자이자 PM은 기획력도 정말 중요하지만 디자이너, 개발자, 이해관계자들과 끊임없이 소통하는 능력이 중요하다 생각했다. 지치지 않고 더 나은 서비스를 개발하려는 열정도 중요하다. 이번 프로젝트로 얻은 깨달음을 바탕으로 더 성숙한 기획자가 되고 싶다. (병아리에서 닭)
