Ace Your Online Conversion: SaaS 랜딩 페이지 모범 사례

게시 됨: 2022-03-11

팬데믹은 우리가 연결하고, 일하고, 배우고, 노는 데 도움이 되는 소프트웨어 서비스의 붐을 일으켰습니다. 오늘날 SaaS 고객에게는 그 어느 때보다 많은 옵션이 있습니다. 그러한 복잡한 제품의 하이라이트를 선명하고 신뢰할 수 있는 SaaS 랜딩 페이지로 변환하는 방법은 무엇입니까?

팬데믹 기간 동안 Zoom을 사용하는 회의 참가자 수는 2019년 12월 1천만 명에서 2020년 4월 3억 명으로 폭발적으로 증가했으며 전 세계 125,000개 학교 시스템에서 수업에 참여하지 못하는 어린이에게 이 플랫폼을 사용하고 있었습니다. 클라우드를 활용하는 기업은 전반적으로 호황을 누리고 있습니다. Bessemer Venture Partners에 따르면 업계는 현재 총 2조 달러의 가치가 있으며 상위 5개 제공업체(PayPal, Adobe, Salesforce, Shopify, Zoom)는 전년 대비 70%의 성장을 달성했습니다. - 연도 값.

소비자 SaaS 제품의 매력은 제품을 구입할 필요가 없으며 단순히 구독하기만 하면 된다는 것입니다. 앱이 있을 수 있지만 종종 모든 웹 브라우저를 통해 서비스를 사용할 수도 있습니다. 사용한 만큼만 비용을 지불하기 때문에 일반적으로 선결제에 비해 비용 효율적입니다.

그러나 소프트웨어 서비스는 몇 마디의 단어와 그림으로 설명하기 어려울 수 있습니다. 고객은 1년 전보다 더 똑똑해질 수 있지만 그들은 여전히 ​​전문가가 아니며 특정 소프트웨어 서비스의 가치 제안은 복잡할 수 있습니다. 방문 페이지는 고객을 압도하거나 지루하지 않으면서 클릭을 유도할 수 있는 충분한 정보를 제공하는 것 사이에서 적절한 균형을 유지해야 합니다.

고객이 작업을 더 잘하거나 더 간단하게 수행할 수 있도록 지원하는 소프트웨어 서비스가 있으므로 해당 메시지를 최적으로 전달하는 것이 귀하의 목표입니다. 사용자 중심의 디자인 접근 방식은 고객에게 보다 효과적으로 다가갈 수 있도록 도와줍니다.

사용자의 요구 사항 해결

소프트웨어 서비스 제공자로서 당신은 이미 사용자의 우려와 과제, 그리고 그들이 당신의 제품으로 해결하려고 하는 문제에 대해 잘 알고 있어야 합니다. 이러한 UX 인사이트를 통해 랜딩 페이지도 알 수 있습니다.

최근에는 Cohere라는 고객 성공 제품의 랜딩 페이지에서 작업했습니다. 출시되었을 뿐만 아니라 여러 릴리스를 거쳤습니다. 회사가 제품을 개발하는 동안 수집한 통찰력은 여러 가지 방법으로 페이지 디자인에 영향을 미쳤습니다.

회사 고객의 대다수는 Cohere를 사용하여 다음을 수행했습니다.

  • 고객의 우려 사항과 질문을 해결하는 데 도움이 됩니다.
  • 잠재 고객을 전환하고 온보딩을 돕습니다.
  • 인터페이스와의 고객 상호 작용을 이해하기 위해 해당 웹 사이트에서 고객의 활동을 모니터링합니다.

이 데이터를 사용하여 랜딩 페이지를 세분화하여 세 가지 시나리오 각각을 다루는 기능을 보여주었습니다. 사용자는 각 사례 간에 전환하여 각 사례에서 제품이 어떻게 작동하는지 확인할 수 있습니다.

Cohere의 방문 페이지는 세 가지 기본 사용자 요구 사항으로 분류됩니다.

가치를 보여줌으로써 목표 달성

모든 방문 페이지는 사용자를 명확하게 정의된 목표로 안내해야 합니다. 소비자 소프트웨어 서비스 제공자의 목표는 종종 고객이 일정 기간 후에 유료 서비스로 전환하는 옵션이 있는 무료 평가판에 등록하거나 추가 비용을 지불할 수 있는 옵션이 있는 미니멀리스트 무료 버전에 참여하도록 유도하는 것입니다. 특징.

예를 들어 Slack은 신규 고객이 무료 무료 평가판에 등록하기를 원하므로 팀 규모, 프로젝트 유형 또는 참여 유형에 관계없이 애플리케이션이 어떻게 작동하는지 보여줍니다.

랜딩 페이지는 사용자가 팀 규모를 선택할 수 있도록 하는 것부터 시작하여 다양한 시나리오에서 Slack이 제공하는 가치를 강조합니다. 그 선택은 유사한 규모의 회사에서 몇 가지 관련 예를 제공하여 사용자가 자신의 팀에서도 이를 사용할 수 있는 방법을 쉽게 이해할 수 있도록 합니다.

Slack의 랜딩 페이지를 통해 사용자는 조직에서 플랫폼을 사용하는 방법을 시각화하는 데 도움이 되도록 다양한 팀 크기 간에 전환할 수 있습니다.

이를 통해 사용자는 영상 채팅 및 외부 팀과의 작업 기능과 같은 보다 보편적인 혜택으로 계속 스크롤할 수 있을 만큼 충분히 몰입할 수 있습니다. 이 페이지에는 생산성 및 커뮤니티와 관련된 다양한 통계가 요약되어 있으며 현장에서 무료 평가판을 구현하거나 영업 담당자에게 자세한 정보를 문의할 수 있습니다.

영웅(이미지)을 현명하게 선택하십시오

사용자의 관심을 끌 수 있는 시간은 단 50밀리초이므로 표시할 항목을 매우 선택적으로 선택해야 합니다. SaaS 제품의 경우 홍보할 유형의 제품이 없기 때문에 추가로 어렵습니다. 제품의 기능을 선보이고, 시각적 요소나 관련 없는 정보를 방해하지 않으면서 사용자의 질문을 예상하고 답변하는 것이 중요합니다.

월요일에 프로젝트 관리 도구 뒤에 있는 팀은 사용자 정의할 수 있는 모든 방법을 강조하기 위해 스크린샷을 사용하여 제품의 가치 제안을 포착하는 일을 훌륭하게 수행합니다.

먼데이닷컴은 사용자에게 가능성을 전달하기 위해 커스터마이징에 앞장서고 있습니다.

캐치프레이즈("Work Without Limits")는 주의를 끌고 요구 사항을 해결하며 호기심을 불러일으킵니다. 부제목은 제품의 가치 제안을 요약하여 관심을 더하고 잠재 고객이 자신의 삶에 적용할 수 있는 방법에 대해 더 많이 배우도록 초대합니다. 그 초대를 질문으로 표현하면 사이트와의 상호 작용이 장려됩니다. 그 아래에는 다양한 특정 산업에 맞게 조정된 워크플로의 시각적 개체가 있어 사용자가 해당 산업에 어떻게 작동할지 생각하게 합니다.

기능보다 이점을 강조하는 것이 종종 도움이 됩니다. 제품이 시각화하기 어렵거나 너무 뉘앙스가 있어 몇 개의 눈에 띄는 단어로 압축할 수 없는 경우 이는 훌륭한 전략입니다. 제품의 모든 기능을 과시하는 대신 사용자에게 가장 의미 있는 것에 집중할 수 있습니다.

Pipedrive의 방문 페이지는 CRM(고객 관계 관리) 시스템 사용의 가치를 잘 보여줍니다. 페이지는 스크롤의 필요성을 피하기 위해 모든 제품의 주요 이점을 간결하게 표시합니다. 사용자는 한 눈에 다음을 수행할 수 있습니다.

  • CRM에 대한 컨텍스트와 지식을 얻습니다.
  • 제품을 사용하여 예상할 수 있는 결과를 시각화합니다.
  • Pipedrive의 제품이 군중에서 어떻게 눈에 띄는지 이해하십시오.
  • 주요 기업 유치의 핵심인 대규모 팀에서 제품이 어떻게 작동하는지 알아보십시오.

Pipedrive는 사용자가 제품으로 달성할 수 있는 모든 것을 간결하게 설명하여 사용자가 워크플로에 어떻게 맞출 수 있는지 알 수 있도록 도와줍니다.

마지막으로 대화식 접근 방식을 고려하십시오. SaaS 제품은 지루할 수 있지만 랜딩 페이지는 그렇지 않아도 됩니다. 인터랙티브 디자인은 제품 정보와 가치, 브랜드 스토리를 전달할 수 있을 만큼 충분히 오랫동안 사용자의 참여를 유지할 수 있습니다.

모바일 뱅킹 앱 Wickret에 대한 Cuberto 대행사의 랜딩 페이지 개념은 상호 작용과 최소한의 디자인을 사용하여 사용자의 관심을 유지합니다.

사용자가 페이지를 아래로 스크롤할 때 마주치는 대화형 사본과 사용자 지정 커서가 화면의 요소에 애니메이션을 적용하는 영리한 방법은 간단한 메시지에 생명을 불어넣습니다. 클릭 유도문안("다운로드")의 마이크로인터랙션이 페이지의 나머지 부분에 비해 눈에 띄는 데 어떻게 도움이 되는지 주목하세요.

이것은 미니멀리스트 제품을 과시하는 재미있고 매력적인 방법입니다.

모바일 사용자를 염두에 둔 디자인

사용자의 절반이 모바일 장치를 통해 웹사이트를 탐색합니다. 그러나 방문 페이지는 더 작은 화면으로 축소될 뿐만 아니라 모바일 장치에 최적화되어야 합니다.

사용자가 모바일에서 할 수 있는 상호작용 유형을 염두에 두고 페이지 구조를 단순화하여 사용자가 원활하게 탐색할 수 있도록 합니다. 웹사이트가 단순히 반응형일 때 콘텐츠는 일반적으로 더 작은 그리드로 이동하고 수직으로 쌓입니다. 콘텐츠 아키텍처의 이러한 변경으로 인해 메시징의 성능이 저하될 수 있으므로 수직 스택 레이아웃이 디자인에 가장 적합한지 여부를 신중하게 고려해야 합니다. 경우에 따라 수평 회전 목마 또는 탭과 같은 대안 솔루션이 더 효과적일 수 있습니다.

모바일 장치에서 제품을 잘 전달하지 못하면 전환이 거부될 수 있습니다. 비디오 메시징 서비스 Loom은 필요한 경우 콘텐츠 아키텍처를 단순화하고 탭에 대한 대체 접근 방식을 사용하여 웹 사이트에서 사용되는 대화형 구성 요소와 시각적 스토리텔링을 모바일 장치로 변환하는 일을 훌륭하게 수행했습니다.

Loom의 모바일 랜딩 페이지는 휴대용 기기에 최적화되어 있습니다.

기초부터 신뢰 구축

낯선 사람들로 가득 찬 방에 들어가서 당신이 올바른 위치에 있는지 궁금해한다고 상상해보십시오. 이는 사용자가 새로운 제품 웹사이트를 방문하는 것과 비슷합니다. 파티에서 낯익은 얼굴을 보면 마음이 한결 편안해집니다.

SaaS 제품도 마찬가지입니다. 고객이 해결하고 싶은 문제가 있더라도 새로운 제품을 배우고 일상에 통합하는 것은 두려운 일입니다. 이는 고객이 연락처 및 결제 정보를 넘겨줄 위험을 합리화하기 어렵게 만들 수 있습니다.

다음과 같은 다양한 방법으로 신뢰를 높일 수 있습니다.

  • SSL 인증서가 있어야 합니다.
  • 귀하의 URL을 간결하고 유익하게 구성하십시오.
  • 불필요한 리디렉션이 없는지 확인하십시오.
  • 리드에 필사적으로 들리는 카피를 피하십시오.
  • 페이지를 직관적이고 사용하기 쉽게 만드십시오.

이는 사용자와 관계를 구축하고 사용자가 가치 있고 정보에 대해 느끼는 경험을 만드는 간단한 방법입니다. 하지만 거기서 멈추지 말아야 합니다.

사용자에게 어떻게 작동하는지 보여주세요

고객이 제품을 어떻게 사용할지 알고 있음을 보여줌으로써 불확실성을 줄이고 신뢰도를 높일 수 있습니다. 당신의 제품이 그들의 일상에 어떻게 들어맞는지 보여주면 많은 질문에 매우 빠르게 답할 수 있습니다.

예를 들어 Monday.com은 사용자가 사이트와 상호 작용하는 방법을 볼 수 있도록 빠른 둘러보기를 제공합니다.

Monday.com은 사용자가 제품과 상호 작용하는 방식을 보여줍니다.

프로토타이핑 도구 Framer는 Framer 인터페이스 내에서 작동 중인 프로토타입의 개발을 보여주는 애니메이션으로 한 단계 더 나아갑니다. 추가 상호 작용 기능을 통해 사용자는 가능성을 더 잘 이해하기 위해 다른 프로젝트를 클릭할 수 있습니다.

Framer의 방문 페이지는 도구 내에서 프로토타입 생성의 타임랩스 애니메이션을 보여줍니다.

사회적 증거는 필수적입니다

사회적 증거는 SaaS 제품에 특히 중요합니다. 고객에게 신뢰할 수 있는 파트너를 보여주는 것은 사용자의 제품 사용 의향을 높이는 데 큰 도움이 됩니다.

Slack의 사회적 증거는 데모 화면에 포함되어 있습니다. 사용자는 잘 알려진 클라이언트가 앱을 사용하는 방법을 볼 수 있습니다.

사회적 증거의 또 다른 훌륭한 형태는 긍정적인 동료 압력입니다. 테이블을 예약하기 전에 식당에 대한 리뷰를 얼마나 자주 확인하거나 긍정적인 리뷰를 기반으로 온라인에서 물건을 구매했습니까? BrightLocal에 따르면 소비자의 87%가 그렇게 합니다.

보증은 강력한 도구가 될 수 있지만 사용자에게 유익하고 관련성이 있어야 합니다. 잘하면 한 번에 여러 가지 일을 할 수 있습니다. Zoom은 리뷰가 다음을 수행할 수 있는 방법을 보여줍니다.

  • 수요가 있음을 보여주십시오 . Zoom의 보증은 제품이 다양한 산업 분야의 대기업에서 잘 인식되고 사용됨을 보여줍니다.
  • 고객 사이에 공동체 의식을 만드 십시오. 많은 고객의 피드백과 생각을 공유하면 큰 사용자 기반과 소통하므로 새로운 고객이 더 환영받는 느낌을 받을 수 있습니다.
  • 신뢰성 을 높입니다. 사용자는 알아볼 수 있는 고객의 구매를 확인하여 제품에 대한 신뢰성을 제공하고 신뢰를 구축합니다.

Zoom은 저명하고 잘 알려진 고객의 리뷰를 사용하여 신뢰를 높입니다.

오른발 끝

사용자가 페이지를 끝까지 통과했더라도 결정을 내릴 준비가 되지 않은 데에는 여러 가지 이유가 있습니다.

  • 그들은 SaaS 제품에 관심이 있지만 더 많은 정보를 원합니다.
  • 해결되지 않은 질문이나 우려 사항이 있습니다.
  • 그들은 제품이나 브랜드를 신뢰하지 않습니다.

이러한 문제를 해결하기 위해 페이지 하단을 어떻게 디자인합니까? 먼저 사용자가 즉각적인 지원에 액세스하거나 질문 및 우려 사항을 해결할 수 있는 사람에게 연락할 수 있는 명확한 섹션, 버튼 또는 링크가 있는지 확인하십시오. 채팅을 통해 연결할 수 있는 추가 기회를 제공하거나 FAQ를 제공할 수 있습니다.

호기심이 많지만 꺼리는 사용자를 사로잡는 또 다른 방법은 추가 관점을 제공하는 것입니다. 무료 평가판이 주요 클릭 유도문안이 아닌 경우 데모를 제공하면 여전히 경계에 있는 사용자를 포착하는 데 도움이 될 수 있습니다. 또는 다양한 사용자의 사례 연구를 제공할 수 있습니다.

바닥글은 사용자에게 문을 열어 제품에 대한 보다 강력하고 개인화된 연결을 만들 수 있도록 해야 합니다. 페이지의 끝으로 여기지 말고 사용자를 위한 새로운 여정의 시작으로 여기십시오.

성공을 위한 믹스 앤 매치

전환은 모든 제품에 대해 동일하게 작동하는 일관된 공식이 아닙니다. 오히려 성공적인 SaaS 방문 페이지에는 세 가지 C를 달성하는 사이트를 만들기 위해 제어, 조정 및 구성할 수 있는 변수 모음이 포함됩니다.

  • 가장 효과적인 방법으로 제품 스토리를 전달 합니다.
  • 사용자의 관심, 관심 및 행동을 포착 합니다.
  • 변환 합니다.

Toptal Design 블로그에 대한 추가 정보:

  • 효과적인 방문 페이지를 디자인하는 방법
  • 전환을 위한 구축 – 랜딩 페이지 디자인 모범 사례
  • 익숙해지기 – 사용자 온보딩 흐름 가이드