사람들이 실제로 이해하는 SaaS 웹 사이트를 구축한 방법

게시 됨: 2022-06-04

몇 달 전, 우리 팀과 나는 마침내 전 세계의 마케팅 부서(우리 회사 포함)가 계속 미루고 있는 프로젝트에 착수했습니다. 우리는 웹사이트를 재구축했습니다.

그리고 리드 생성이 93% 증가했습니다.

즉시 우리는 불가능한 일을 하는 SaaS 사이트의 공식을 깨뜨렸다는 것을 깨달았습니다. 그것은 실제로 사람들이 우리 회사가 하는 일을 이해하게 만듭니다.

여기까지 오기까지 몇 년이 걸렸기 때문에 동료 마케터로서 여러분의 수고를 덜어주고 우리의 과정을 공유하고자 합니다.

1. 장애물 제거: 제한된 이해 관계자 및 견고한 MVP

고부담 프로젝트의 가장 큰 단점은 주방에 요리사가 너무 많다는 것입니다.

이 함정을 피하기 위해 저는 사이트의 각 측면에 대해 단일 이해 관계자 를 지정했습니다. 하나는 디자인, 하나는 콘텐츠, 다른 하나는 제품입니다. 다른 사람들이 피드백을 제공할 기회가 있었지만 최종 결정은 이 세 명의 소유자가 독점적으로 내렸습니다. 이는 고위직에 있는 사람들로부터 피드백을 받은 경우에도 마찬가지였습니다.

또한 마케팅 프로젝트 계획에서 자주 볼 수 있는 극단적인 완벽주의에 맞서기 위해 우리는 제품 경험을 빌려 MVP(최소 실행 가능한 제품) 및 각 페이지의 단계 로 점진적 릴리스 를 추진했습니다. 이를 통해 더 빠르게 작업할 수 있었지만 지속적으로 개선할 수 있는 기회도 생겼습니다.

명심하세요:

역방향 작업 – (현실적인) 출시 날짜로 시작하여 역방향으로 작업하여 모든 팀이 지나치게 신중하게 추정하는 대신 일정에 적응할 수 있도록 합니다.
단일 이해 관계자 지정 – 각 도메인(이 경우 디자인, 콘텐츠 및 제품)에 대한 이해 관계자가 있는지 확인하십시오. 피드백을 광범위하게 수집하되 결정을 이러한 사람들에게만 국한하십시오.
한 명의 프로젝트 소유자 선택 – 전체 프로젝트에 대해 한 명의 소유자가 있어야 합니다. 이 사람은 갈등이 있을 때(그리고 갈등 이 있을 때) 결정을 내릴 책임이 있습니다.
완벽한 제품을 기다리지 마십시오 . 각 페이지에 대해 MVP를 만들고 바늘이 움직이는지 확인하고 단계적 릴리스를 고려하십시오.
세부 사항을 파악하고 신속하게 대응 하십시오. 모든 분석 및 UX 도구를 사용하여 릴리스하는 페이지에 대한 응답을 신속하게 이해하고 반복하십시오.

2. 중요한 지표: 목표 및 KPI 설정

우리가 한 첫 번째 일 중 하나는 수정하고 싶은 문제를 파악하고 개선 목표를 설정하는 것입니다. 우리는 낮은 전환율, 구식 정보, 구식 디자인, 다중 제품 제공에 대한 제한된 설명, 고객 페이지 없음, 불분명한 가격 페이지 등 많은 문제를 해결했습니다.

우리는 합리적인 시간 내에 철저한 작업을 수행하는 유일한 방법은 작업 할 주요 페이지를 식별하는 것이라고 판단했습니다. 우리에게 이것은 다음에 초점을 맞추는 것을 의미했습니다.

홈페이지
제품 페이지 선택
가격 책정 페이지
사례 연구 페이지
고객 페이지 만들기

이것은 또한 프로젝트가 제시간에 시작될 수 있도록 우리가 처리하고자 했던 여러 페이지를 포기하는 것을 의미했습니다.

성공을 추적하기 위해 다음 목표 및 KPI를 설정합니다.

리드로의 전환율 증가 및 리드 품질 향상
이탈률 개선 및 사이트 방문 시간 및 세션당 페이지 수 증가
브랜드 인지도 향상
더 나은 사이트 탐색 만들기
우리의 다양한 제품이 더 잘 노출되도록 보장
유기적 트래픽 증가
확장이 쉬운 사이트 인프라 설정

회사마다 목표가 다르고 측정 기준을 추적해야 하지만 먼저 작업할 주요 페이지를 선택하는 프로세스를 통해 전체 사이트를 다시 실행하기 전에 효과가 있는 항목과 그렇지 않은 항목을 빠르고 명확하게 볼 수 있습니다.

명심하세요:

회사 간 요구 사항 충족 – 전환율, 이탈률 등과 같은 지표가 전부는 아닙니다. HR 팀, 브랜드 관리자, 영업 팀 및 CEO로부터 사이트에 대한 질적 피드백을 구하십시오.
A/B 테스트 – 예, 당연한 것 같습니다. 새 사이트를 출시하기 위해 서두르겠지만 잘 작동하는 것을 제거하고 싶지는 않을 것입니다. 그러니 반드시 A/B 테스트로 모든 것을 공개하고 결과를 잘 살펴보세요.
기본 KPI 설정 – 단일 기본 메트릭을 사용하면 충돌이 있을 때 결정을 내리는 데 도움이 됩니다. 이 경우에는 전환율이 리드로 이어지는 것이었습니다.
단계적 출시 – 전체 웹사이트를 한 번에 재구축하는 것은 위험합니다. 수고가 적고 가치가 높은 페이지로 시작한 다음 계획을 배우고 조정하십시오.
분석 인프라 구축 – 각 KPI에 대한 영향을 추적할 수 있도록 사전에 측정 인프라를 구축합니다.

3. 영감 얻기: 모두에게 배울 점이 있습니다.

문제 영역을 식별하고 개선 목표를 설정하고 프로젝트 범위를 식별한 후 레이아웃 및 디자인에 대해 생각하기 시작했습니다.

회사가 하는 일에 대해 제대로 알지 못한 채 방문한 SaaS 사이트가 몇 개인지 생각해 보십시오. “고객 서비스와 관련이 있습니까? 이메일 마케팅?” 이것은 우리가 피하려고 했던 것입니다. 그래서 우리는 방문자들이 욧포를 진정으로 이해하기 위해 무엇이 필요한지 파악하는 것으로 시작했습니다.

우리는 스프레드시트를 만들고 150개 이상의 다른 웹사이트에서 영감을 얻었고 각 웹사이트에 대해 우리가 좋아하는 것과 좋아하지 않는 것을 기록했고 가장 중요한 것은 회사가 하는 일을 이해할 수 있는지 기록했습니다. 우리는 CTA 버튼처럼 세분화되거나 일반적인 레이아웃, 시각 효과 또는 목소리 톤만큼 광범위한 요소를 살펴보았습니다.

대부분 우리가 잘 알지 못하는 회사의 사이트를 찾아봤기 때문에 회사에 대한 우리의 이해 테스트는 진짜일 것입니다.

명심하세요:

첫인상을 놓치지 마십시오. 웹사이트를 처음 방문할 때 메모하는 것을 잊지 마십시오. 첫인상이 중요하며 그들이 말했듯이 두 번째 기회는 없습니다.
목록 작성 – 모든 사람에게서 배울 수 있습니다. 영감을 얻을 수 있는 웹사이트 목록을 만드십시오. 일부 웹사이트에는 훌륭한 디자인, 훌륭한 현미경 사본 및 놀라운 탐색 기능이 있습니다.
익숙하지 않은 것을 포용하십시오 - 주로 모르는 회사를 살펴보고 회사 사이트가 그들이 하는 일을 명확하게 전달하는지 확인하십시오.

4. 디자인과 콘텐츠 중 무엇이 먼저인가?

우리 제품은 방문자가 단어를 읽지 않고도 제품의 70%를 이해할 수 있을 정도로 시각적입니다. 올바른 태그라인을 찾는 것뿐만 아니라 말하는 것보다 보여주는 것이 중요했습니다.

스크롤 없이 볼 수 있는 부분에 표시되는 시각적 요소가 사용자의 관심을 끄는 데 중요하다는 점을 이해하고 이 공간을 사용하여 작동 중인 제품의 모형을 표시했습니다. 콘텐츠가 디자인을 주도하도록 하는 대신, 우리는 디자인을 주도하고 콘텐츠가 스튜디오의 비전과 일치하도록 하는 반대 접근 방식을 취했습니다.

우리의 놀라운 콘텐츠 마케터인 Mel은 디자인 우선 프레임워크 를 사용하여 사이트의 콘텐츠 전략을 수정하고 잠재 고객에게 가장 중요한 사항인 Yotpo가 그들을 도울 수 있는 방법을 알아냈습니다. 그녀는 전자 상거래 산업과 일반적인 고충을 완전히 이해하기 위해 조사를 수행했습니다. 그런 다음, 그녀는 설계 구조를 보완하는 빠르고 읽기 쉬운 형식으로 솔루션을 구성하는 동시에 사용자가 우리 제품에 대해 더 자세히 알아볼 수 있는 실행 가능한 단계를 안내하도록 했습니다.

그 결과 브랜드의 성공을 지원하려는 Yotpo의 성격과 사명에 충실한 직관적이고 가치 우선적인 콘텐츠가 탄생했습니다.

명심하세요:

콘텐츠가 디자인을 따르도록 하세요 – 콘텐츠 팀이 요점을 바로 쓸 수 있을 만큼 강력하다면 디자인부터 시작하여 글자 수 제한에 따라 쓰도록 하세요. 이는 어려운 일이지만 메시지를 능률화하는 연습이기도 합니다.
제품을 설명하는 가장 좋은 방법을 이해 하십시오. 제품이 시각적으로 매력적이라면 많은 모형과 쇼케이스 디자인을 사용하여 강조 표시하십시오.
스크롤 없이 볼 수 있는 부분에 흥미를 유지하십시오 - 당연한 것처럼 보일 수 있지만 사람들은 이것이 모든 페이지에서 가장 중요한 부동산이라는 사실을 종종 잊습니다. 당신이 거기에 표시하는 것에 더 많은 생각을 투자하십시오.

5. 비하인드 스토리: 가격 책정 페이지

페이지 목표:

가격 을 이해하기 쉽게 만드는 것이 중요했습니다. 우리는 프리미엄 플랜을 하나의 우산 아래에 그룹화하고 무료 계획을 다른 우산 아래에 그룹화하기로 결정했습니다. 이렇게 하면 유료 구독에 관심이 있는 방문자가 판매 담당자와 쉽게 대화하여 자세한 내용을 알 수 있고 무료 플랜에 관심이 있는 방문자는 즉시 시작할 수 있습니다. 또한 방문자가 가질 수 있는 질문을 처리하기 위해 자세한 FAQ를 포함하고 싶었습니다.

우리의 재능 있는 디자인 스튜디오, 특히 아트 디렉터 Shiri와 수석 제품 디자이너 Eliko는 이러한 목표를 가지고 실행했습니다. 이 섹션과 다음 섹션에서는 새 웹사이트의 각 주요 페이지 이면의 디자인 전략을 설명합니다.

디자인 전략:

목표는 사람들이 계획을 이해하고 클릭하도록 하는 것이었으므로 우리는 그들을 최상위 계층으로 만들었습니다. 배경은 계획 상자에서 산만하지 않도록 의도적으로 더 부드럽고 밝게 만들었습니다 . 그래도 배경은 그라데이션 음영과 미묘한 기하학적 형태로 욧포의 브랜드를 표현하는 계기가 되었습니다. 가격 책정 페이지의 목표에 맞게 개발된 이 일반적인 구조는 사이트의 다른 페이지에 대한 정말 효과적인 기반임이 입증되었습니다.

6. 비하인드 스토리: 제품 페이지

페이지 목표:

리디자인에 포함된 각 제품 페이지(예: 리뷰 및 평점 및 비주얼 마케팅)는 사람들이 몇 초 안에 이해할 수 있는 방식으로 매우 복잡한 제품의 모든 기능을 설명해야 했습니다. 뿐만 아니라 제품마다 다른 사용 사례를 보여주고 싶었습니다. 예를 들어 리뷰 및 평가 페이지에서는 콘텐츠 생성 방식부터 Google 및 Facebook과의 통합에 이르기까지 모든 측면을 설명해야 했습니다. 페이지는 길고 포괄적이지만 텍스트는 가볍고 시각적 요소는 무겁습니다.

디자인 전략:

우리 는 작동 중인 우리 제품의 모형이 방문자가 작동 방식을 이해할 수 있도록 하는 가장 간단한 방법이 될 것이라고 재빨리 결정했습니다. 우리는 원래 비디오를 사용하고 싶었지만 페이지의 첫 번째 버전을 정시에 제공하기 위해 MVP를 고수했습니다.

가격 책정 페이지를 디자인하면서 배운 내용을 바탕으로 우리는 목업, 특히 스크롤 없이 볼 수 있는 부분에 중점을 두면서 배경을 더 밝고 조용하게 만드는 방법을 알고 있었습니다. 목업은 또한 소화하기 쉽도록 단순화된 디자인 언어로 수행됩니다.

목업 우선 디자인은 다른 여러 가지 실용적인 문제에 대한 답변입니다. 첫째, 모형은 크기와 미니멀한 형식으로 많은 정보를 전달할 수 있는 능력 때문에 본질적으로 모바일 친화적입니다. 일반적으로 모바일을 염두에 두고 디자인하려면 무엇이 필요하고 무엇이 필요하지 않은지 고려해야 하며 이는 목업의 경우에도 마찬가지였습니다. 뿐만 아니라 이 형식은 제품이 성장함에 따라 향후 제품 페이지에서도 쉽게 확장할 수 있습니다.

7. 비하인드 스토리: 고객 페이지

페이지 목표:

고객 페이지는 우리 사이트에 새로 추가되었습니다. 우리는 Yotpo를 사용하는 놀라운 브랜드를 선보이고 사례 연구를 위한 새로운 공간을 업데이트하고 만들 수 있는 효과적인 방법을 찾고 있었습니다. 이 페이지에서 가장 중요한 요소는 브랜드 로고와 출시를 위해 만든 새로운 비디오 사례 연구입니다.

디자인 전략:

우리는 이 브랜드들이 Yotpo와 함께 성장한 과정과 사용자 제작 콘텐츠가 전체적으로 얼마나 중요한지에 대한 이야기를 하고 싶었습니다. 이 이야기를 전달하기 위한 주요 부분은 고객 로고와 비디오 사례 연구로, 페이지에서 각각 상당한 공간을 차지합니다. 또한 이 페이지에 포함된 새로운 사례 연구 템플릿 을 최대한 유연하게 구성하여 쿠키 커터 질문과 답변을 포함하는 대신 각 브랜드의 고유한 이야기를 전달할 수 있도록 했습니다.

8. 비하인드 스토리: 홈페이지

페이지 목표:

무엇보다 방문자가 아래로 스크롤하기 전에 욧포가 하는 일을 빠르고 쉽게 이해할 수 있도록 하는 것이 홈페이지의 목표였습니다. 우리는 또한 우리의 다양한 제품을 소개하고 우리의 가장 큰 자산인 고객을 선보이고 싶었습니다. 마지막으로 홈페이지는 방문자가 우리 제품에 대해 더 많이 알고 싶어하는 게이트웨이 페이지 역할을 해야 했습니다.

이러한 목표를 확실히 달성하기 위해 우리는 동료들을 다른 SaaS 홈페이지 앞에 앉히고 그들이 페이지를 탐색할 때 다음에 보고 싶은 요소를 물었습니다. 그들의 응답을 바탕으로 우리는 대부분의 사람들이 홈페이지에서 필요로 하는 흐름이 다음과 같다는 것을 이해했습니다.

회사가 하는 일 -> 제품 제공 -> 제품을 사용하는 사람(고객) -> 회사가 제공하는 가치 -> 시작하는 방법

디자인 전략:

홈페이지에 대한 우리의 가장 큰 도전은 방문자의 시선을 단숨에 사로잡는 것이었습니다. 우리의 연구에 따르면 오늘날 많은 SaaS 사이트에서 방문자를 끌어들이기 위해 예쁜 일러스트레이션을 사용하고 있지만 방문자의 참여를 유지하기 위해 더 실질적인 것을 원했습니다.

위에서 설명한 흐름과 가격 및 제품 페이지에서 연마한 디자인 언어를 사용하여 Yotpo가 하는 일을 즉시 이해할 수 있는 미니멀리스트 모형으로 방문자의 관심을 끌었습니다. 그 다음에는 스크롤 없이 볼 수 있는 부분에 고객 로고 스트립이 표시되고 방문자를 제품 페이지로 안내하는 당사 제품 제공에 대한 간략하고 핵심적인 개요가 표시됩니다. 목업의 대부분이 맨 위에 있으므로 삽화를 사용하여 아래 내용을 뒷받침할 수 있었습니다.

전반적인 결과는 방문자가 제품 페이지를 계속 방문하여 더 많은 것을 배우도록 권장하는 일종의 "파워샷" 또는 제품의 조감도 를 제공하는 페이지입니다.

우리의 기술 스택

우리는 가능한 모든 도구를 사용하여 새 사이트를 만들고 결과를 측정했습니다. 다음은 기술 스택을 살펴보겠습니다.

프로토 타이핑 및 디자인 – Balsamiq, InVision, Sketch, Photoshop, Illustrator 및 After Effects
분석 및 전환 – Drift, VWO, Mixpanel, Amplitude, Hotjar, FullStory
프로젝트 관리 – 스마트시트, Trello

개발과 관련하여 개발 마법사 David는 사이트에 생명을 불어넣기 위해 디자인 팀과 협력했습니다. 그는 사이트 전체에 재사용 가능한 구성 요소를 사용했으며 거의 모든 사진에 망막 이미지를 포함하고 가능한 경우 PNG 파일보다 SVG(확장 가능한 벡터 그래픽)를 선택하여 선명한 시각 효과에 중점을 두었습니다. 그는 또한 사이트를 개발할 때 더 많은 옵션에 액세스하기 위해 SCSS에서 주로 일했습니다.

결론

웹사이트를 재구축하는 것은 중요한 작업이지만 확실한 프로세스가 있으면 빠르고 효과적으로 해낼 수 있습니다. 해당 프로세스를 구축하면서 배운 가장 중요한 사항은 다음과 같습니다.

단일 프로젝트 소유자를 지정하고 이해 관계자를 최소한으로 유지하십시오.
프로젝트의 현실적인 범위를 정의합니다.
다시 디자인하는 대신 어떤 페이지를 삭제해야 하는지 평가하세요.
명확한 목표와 KPI를 설정합니다.
단일 기본 KPI를 선택합니다.
다른 사이트에서 영감을 수집하십시오.
제품을 설명하는 가장 쉽고 효과적인 방법을 이해하십시오.
가능한 한 디자인으로 리드하십시오. 콘텐츠는 따라갈 수 있으며 더 강력해질 것입니다.
점진적 릴리스로 이동합니다.
A/B는 모든 것을 테스트합니다.

웹사이트 재설계에 대해 더 알고 싶거나 여기에 작성한 내용에 대해 질문이 있는 경우 여기로 자유롭게 연락하십시오. 기꺼이 채팅하겠습니다. :)