처음인데 웹 기획을 할 수 있을까요?
지원기관 매니저의 웹사이트 리뉴얼 프로젝트
안녕하세요. 스타트업얼라이언스 정인경 매니저입니다. 얼마 전 스타트업얼라이언스 웹사이트 개편 소식을 전했는데요. 지난 2월부터 8월까지, 6개월 동안 진행해온 웹사이트 리뉴얼 기획 과정을 정리해 공유합니다.
1. 기존 사이트 진단
기존 스타트업얼라이언스 웹사이트 주요 페이지사이트 개편 기획안을 세우기 전, 기존 사이트에 어떤 문제가 있는지 점검하는 시간을 가졌습니다. 스타트업얼라이언스는 스타트업 생태계를 지원하는 기관으로 여느 스타트업과 달리 기획자, 개발자, 디자이너 등 프로덕트를 만드는 구성원이 없는 조직 특성을 지니고 있습니다.
기존 사이트의 경우, 외주 개발을 의뢰해 진행됐으나 당시 기획이나 디자인 측면이 심도 있게 고려되지 않았습니다. 사용자 친화적이지 않은 구성과 파편화된 정보 등으로 웹사이트가 조직의 브랜딩을 드러내는 1차 채널로 활용되기 어려웠습니다.
관리자 페이지 역시, 워드프레스로 만들어 테마 관리나 업데이트 등 유지 보수의 어려움이 있었고, 담당하는 관리자가 없어 사이트가 체계적으로 관리되지 않는 문제점이 있었습니다.
이러한 진단을 통해 사이트를 본격적으로 개편하기로 결정했습니다.
2. 문제 정의 - 개편 목표 설정
사이트 진단을 마친 후 문제를 정의하고, 이를 기반으로 개편 목표를 설정했습니다. 핵심 요소를 중심으로 누구나 쉽게 문제점과 목표를 확인할 수 있도록 간결하게 작성했습니다.
문제정의
1) 사이트 구조
메인 페이지가 불필요한 이미지와 정보로 채워져 있어 사용자에게 특정 액션을 유도하는 랜딩페이지의 역할을 하지 못한다.
사용자들이 가장 필요로 하는 정보인 1) 스타트업맵 2) 이벤트 3) 리포트 내용을 찾기 어렵다.
메뉴 구조가 복잡하고, 메뉴명이 직관적이지 않아 정보를 찾기 어렵다.
웹디자인 작업이 부족해 사용자의 정보 접근성이 어렵고, 조직의 브랜딩에 부정적인 영향을 준다.
태블릿, 모바일 버전이 고려되지 않았다.
2) 정보 구조
조직의 주요 활동인 행사 유형과 소개과 단순히 나열되어 있어 구분이 어렵다.
조직의 주요 활동인 리포트 종류가 정리되어 있지 않아 빠른 확인이 어렵다.
조직의 주요 활동 전반 데이터가 흩어져 있다.
전반적인 문맥이나 워딩이 매끄럽지 못하고, 사용자에게 친절하지 않다.
조직의 활동, 미션, 비전 등이 나타나지 않아 조직을 파악하기 어렵다.
3) 사이트 관리와 운영
담당 PM이 없어 사이트 관리가 어렵다.
GA 등 데이터가 관리되지 않아 데이터 기반의 의사결정이 어렵다.
개편 목표
사이트 방문자가 특정 액션을 취할 수 있도록 랜딩페이지를 제작한다.
스타트업얼라이언스의 주요 활동인 스타트업맵, 행사, 리포트가 가장 잘 드러나게 하고, 사용자는 해당 정보를 직관적으로 확인할 수 있도록 유도한다.
스타트업얼라이언스가 어떤 일을 하는 조직인지 구조적으로 소개한다.
웹사이트 전반의 문맥과 워딩을 사용자 중심으로 통일한다.
태블릿, 모바일에서도 접근성이 용이하도록 작업한다.
담당 PM을 정하고, 사이트 개편 후 GA, GTM, Hotjar 등을 연결해 웹사이트를 분석한다.
3. 사이트 기획 - 와이어프레임 구성
스타트업얼라이언스 웹사이트 리뉴얼 기획안웹 프로젝트를 의뢰하기 전, 와이어프레임을 작업하는 과정을 진행했습니다. Keynote, PPT 등을 활용하는 것보다는 새로운 툴도 익히고, 추후 개발자, 디자이너에게 공유가 쉽고 피드백을 빠르게 주고받을 수 있도록 웹 기반의 프로토타이핑 툴인 Figma(피그마)를 사용했습니다.
랜딩페이지
랜딩페이지 Before & After웹사이트 기획 경험이 전무해 초반에는 다양한 사이트를 찾아보며 페이지의 구성요소를 공부했습니다. 특히, 리뉴얼 전 웹사이트의 경우 랜딩페이지의 역할이 부재해 각 기업들의 랜딩페이지를 살펴보며 어떤 의도를 갖고 작업했는지, 사용자들에게 어떤 액션을 유도하는지 이해하려 애썼습니다.
이를 기반으로 스타트업얼라이언스 웹사이트 랜딩페이지에는 무엇이 들어가야 할지 정리해나갔습니다. 가장 중요한 점은 우리의 프로덕트가 무엇이냐는 점이었습니다. 조직의 특성상 명확한 프로덕트가 존재하지 않기 때문에 이번 기회를 통해 정립하는 과정이 필요했습니다. 우리 조직의 주요 과업은 무엇인지, 우리의 고객은 누구인지, 고객은 우리를 통해 무엇을 얻고 싶은지 고민했습니다. 이런 과정을 통해 스타트업얼라이언스의 대표 프로덕트를 <행사>와 <리포트>로 정의했습니다. 웹사이트 전반에 조직의 메인 프로덕트인 행사와 리포트가 가장 잘 드러날 수 있도록 하고, 웹페이지를 방문하는 사용자들이 행사를 신청하고 리포트를 다운로드를 쉽게 할 수 있도록 안내하는 것에 포커스를 맞췄습니다.
먼저 처음 사이트를 방문하는 사람들도 스타트업얼라이언스가 무엇을 하는 곳인지 짧은 시간에 파악할 수 있도록 히어로 섹션에 조직이 하는 일을 간결한 문구로 표현했습니다.
스타트업 생태계를 위한 다양한 연결을 만듭니다
그리고 문구 아래 두 가지 액션 버튼을 제공했습니다. 지금 신청 가능한 행사와 스타트업 생태계 동향을 볼 수 있도록 다음 퍼널 진입을 유도했습니다. 사용자가 스크롤을 했을 때는 아래와 같은 흐름으로 내용을 확인할 수 있도록 페이지를 구성했습니다.
- 신청 가능한 행사 큐레이션
- 최신 리포트 큐레이션
- 자체 콘텐츠 큐레이션
- 행사와 리포트 페이지로 액션 유도
- 뉴스레터 구독 액션 유도
- Footer
행사 페이지
행사 신청 페이지 Before & After행사 페이지는 행사를 신청하는 페이지와 행사를 소개하는 페이지로 구성했습니다. 기존 웹사이트의 경우 행사 페이지가 캘린더뷰 형태로 행사명만 노출되어 있어 사용자가 다가오는 행사 내용을 빠르게 파악하는데 어려움이 있었습니다. 이를 해소하기 위해 행사를 카드 형식의 최신 순으로 나열했고, 행사 종류마다 태그 버튼을 추가해 사용자들이 빠르게 원하는 행사를 찾을 수 있도록 작업했습니다.
행사 소개 페이지 또한, 기존 웹사이트의 경우 프로그램 별로 나열되어 있어 행사별 유형이나 특징을 파악하는데 어려움이 있었습니다. 따라서 전체 행사를 크게 4종류로 나누고, 각 카테고리 안에 어떤 상세 행사가 있는지 구조화하는 작업을 진행했습니다.
특히 해당 페이지 하단에는 신뢰할만한 정보를 제공하기 위해 지금까지 진행된 행사의 간략한 데이터(누적 개최 횟수, 누적 참여 연사, 누적 참석자)를 제공하고, 행사에 참여한 분들의 후기를 담아 신뢰성을 높였습니다.
행사 소개 페이지 Before & After리포트 페이지
리포트 보기 페이지 Before & After리포트 페이지도 리포트를 바로 볼 수 있는 페이지와 리포트의 종류나 설명 등을 소개하는 페이지로 구성했습니다. 행사 페이지와 동일한 카드 형식으로 나열했고, 리포트 종류마다 태그 버튼을 추가해 사용자들이 원하는 정보를 빠르게 확인할 수 있도록 작업했습니다.
리포트 소개 페이지는 크게 3종류로 나누고, 어떤 리포트를 발간하고 있는지 한눈에 확인할 수 있도록 구조화했습니다. 리포트 보기 페이지에서는 최신순으로 리포트가 정렬되었다면 리포트 소개 페이지에서는 종류별 리포트를 바로 다운로드할 수 있도록 작업했습니다.
회사 소개 페이지
리뉴얼된 회사소개 페이지기존 웹사이트는 조직이 하는 일들이 단순 나열되어 있어 정리하는 작업이 필요했습니다. 조직의 비전과 미션 등을 정의하고, 구조화하는 작업을 진행했습니다. 해당 페이지는 [비전 - 핵심 프로덕트 소개(액션 유도) - 미션 - 코어 밸류 - 채용 소식] 흐름으로 구성해 조직을 소개했습니다.
404 페이지
리뉴얼된 404페이지404페이지는 놓치기 쉽지만 꼭 필요한 페이지라고 생각했습니다. 사이트 탐색 중 404 Not Found 페이지가 뜬다면 사용자들이 이탈할 가능성이 높을 것으로 판단했기 때문입니다. 특히 전체 사이트가 리뉴얼되면서 5년 이상 사용해 온 사이트의 주소체계가 변경되어 이로 인한 오류 페이지 유입이 높을 것으로 예상했습니다. 따라서 사용자들이 404페이지에서 이탈하지 않고, 새로운 사이트로 잘 유입될 수 있도록 친절한 안내가 필요하다고 생각했습니다. 페이지 오류 이유를 설명하고, 새로운 사이트로 잘 이동할 수 있도록 액션 버튼을 제공했습니다.
UX writing
주요 UX writing Before & After이번 리뉴얼 작업 시 가장 중점을 두었던 부분이 홈페이지 내 전반적인 텍스트를 작성하고 다듬는 일이었습니다. 킨너렛 이프라 저자의 <마이크로카피>, 슬로워크 블로그, 각종 UX writing 아티클 등을 참고해 문구를 수차례 수정하고 작성하는 과정을 반복했습니다.
웹사이트 전반에 일관된 보이스 톤을 유지하고, 사용자들의 행동을 끌어낼 수 있는 글을 작업했습니다. 이 외에도 조직의 주요 프로덕트 관련한 수치 데이터를 정리해 논리적인 근거를 기반으로 사용자들을 설득하는 문구를 작성했습니다.
공유 썸네일
공유이미지 Before & After조직 특성상, SNS를 통한 사이트 공유가 빈번한 것에 비해 기존 웹사이트는 공유 썸네일 작업이 이뤄지지 않아 공유했을 때 완성도가 떨어져 보이는 문제가 있었습니다. 이를 개선하기 위해 페이지 별로 공유 이미지와 카피를 기획했습니다.
4. 디자인 - 개발
와이어프레임 작업을 모두 완료한 후 지인 추천을 통해 외주 디자이너, 개발자 분과 함께 최종 사이트를 작업했습니다. 디자인 스프린트와 개발 스프린트를 진행하는 과정에서 두 분의 조언과 도움을 많이 받았으며, 덕분에 처음 의도한 기획에 차질없이 무사히 웹사이트를 리뉴얼할 수 있었습니다.
개편된 스타트업얼라이언스 웹사이트를 통해 앞으로 더 많은 사람들이 쉽고 편하게 원하는 정보를 얻어갈 수 있었으면 좋겠습니다.
