전환율 향상을 위한 전자 상거래 웹 디자인 모범 사례

게시 됨: 2018-04-15

전자 상거래 웹 디자인 모범 사례-1 전자 상거래 웹 사이트는 판매를 생성하기 위해 존재합니다.

그러나 고객이 구매하려면 전자상거래 웹사이트가 온라인 전환에 최적화되어야 합니다.

Nyraju 스킨 케어 진단 감사 및 전술적 재설계

SiteTuners는 아프리카계 미국인을 위한 천연 및 유기농 스킨 케어 시장의 개척자 중 하나인 Nyraju Skin Care와 협력하여 전자 상거래 웹사이트를 전술적으로 재설계했습니다. Nyraju는 방문 페이지와 전자상거래 유입경로를 최적화하여 온라인 판매와 수익을 늘리고자 했습니다.

전자 상거래 판매를 늘리는 첫 번째 단계는 성공적인 전환을 가로막는 마찰과 장벽의 원인을 제거하는 것입니다 . SiteTuners는 방문자의 전환을 방해 하는 디자인 및 사용성 문제를 식별 하기 위해 Nyraju의 미션 크리티컬 페이지에 대한 진단 감사를 실시했습니다. 그런 다음 이러한 문제를 해결하고 Nyraju가 빠른 승리를 거둘 수 있도록 개선할 것을 권장했습니다.

SiteTuners의 권장 사항에 따라 Nyraju Skin Care는 전자 상거래 유입경로에서 미션 크리티컬 랜딩 페이지를 수정했습니다. 이러한 변경으로 인해 전환수가 최대 277% 증가했습니다 .

Nyraju 스킨 케어에 대한 SiteTuners의 권장 사항은 다음 원칙을 기반으로 했습니다.

  1. 신뢰를 쌓다
  2. 관련성
  3. 강력한 가치 제안
  4. 일관성을 유지
  5. 산만함 제거
  6. 명확한 클릭 유도문안이 있어야 합니다.
  7. 사용자가 쉽게 변환할 수 있도록 합니다.

Nyraju의 전자 상거래 페이지 미세 조정

  Nyraju Skin Care는 전자 상거래 웹사이트에서 전환율을 높이고 싶었지만 주요 웹사이트 재설계는 원하지 않았습니다. 대신 그들은 기존 방문 페이지를 최적화하기 위해 전술적 재설계에 대한 SiteTuners의 전문 지식을 활용했습니다.

페이스리프트 전 나이라주 스킨케어의 전체 전환율은 1.31%였다. 홈페이지는 2.10%로 전환되고 있었습니다.

SiteTuners는 고객의 구매 결정에 중대한 영향을 미친 방문 페이지를 검토했습니다. 그런 다음 Nyraju Skin Care는 SiteTuners의 제안된 변경 사항을 방문 페이지에 구현하고 분석 도구를 사용하여 성능을 모니터링했습니다.

다음은 방문 페이지의 원본 및 최적화 버전입니다.

Nyraju 오리지널 대 새로운 홈페이지 일반적으로 새로운 방문자는 Nyraju의 홈페이지를 먼저 방문합니다. 특정 제품을 염두에 두고 있지 않은 경우 아래와 같이 관심 있는 카테고리를 클릭합니다.

Nyraju 오리지널 대 새로운 카테고리 페이지 그런 다음 제품 세부 정보 페이지를 클릭합니다.

Nyraju 오리지널 대 신제품 페이지 방문자가 장바구니에 추가 버튼을 클릭하면 즉시 아래 장바구니 페이지로 이동합니다.

Nyraju 오리지널 대 새 장바구니 페이지 니라주스킨케어의 전환 목표는 완제품 판매입니다.

Nyraju의 전자 상거래 유입경로에서 전환 누출을 식별하고 전환 중심 디자인 원칙에 따라 방문 페이지의 변경을 권장했습니다. 이러한 CRO 원칙은 직관적 이고 설득력 있고 매력적인 웹 경험을 디자인하기 위한 SiteTuners 프레임워크의 핵심입니다.

1. 신뢰 구축

신뢰는 전자상거래의 기본 요소입니다. 귀하의 웹사이트가 신뢰성을 전달하지 못한다면 귀하의 사용자는 귀하로부터 구매하지 않을 것입니다. 회사 및 브랜드의 온라인 표현으로서 웹 사이트는 방문자의 신뢰를 불러일으키는 깨끗하고 전문적 이며 일관된 디자인 을 가져야 합니다. 눈에 띄는 신뢰 기호가 있고 웹 규칙을 따르는 것도 사용자가 웹 사이트에 대한 친숙함을 키우는 데 도움이 됩니다.

Nyraju의 경우 원래 홈페이지는 기본 콘텐츠 영역에서 자동 슬라이더를 포함한 너무 많은 제안으로 어수선해 보였고 검색 엔진 최적화를 위한 텍스트 덩어리도 있었습니다. 가장 큰 신뢰 요소인 전화번호가 배경에 섞여 있습니다. 다른 신뢰 기호(BBB, 100% 보안 보장)는 페이지 하단에 있어 비효율적이었습니다. 대부분의 사람들은 페이지 맨 아래로 스크롤하지 않으므로 신뢰 로고가 표시되지 않습니다.

회전하는 배너를 제거하고 단일 제안으로 교체하여 콘텐츠 영역을 정리하는 것이 좋습니다. 또한 신뢰를 강화하기 위해 클라이언트 로고를 추가할 것을 제안했습니다. 일부 요소(예: 검색 창 및 전화번호)를 페이지의 보다 표준적인 위치로 옮겼습니다.

2. 관련성이 있어야 합니다.

방문자는 처음에 몇 초 만에 사이트에 대해 기분이 좋은지 여부를 결정합니다. 랜딩 페이지가 사용자 의도와 얼마나 잘 일치하느냐가 결정에 큰 영향을 미칩니다.

  • 첫째, 방문 페이지는 방문자를 유치하는 데 사용되는 광고 메시지와 키워드를 반영 해야 합니다.
  • 다음으로, 방문 페이지는 광고되는 제품/서비스에 대한 유용한 정보를 제공 해야 합니다.
  • 마지막으로, 방문 페이지 는 뛰어난 사용성과 사용자 경험을 제공 해야 합니다.

Nyraju의 경우 홈페이지에 방문하는 방문자는 회사가 무엇을 판매하는지 파악하는 데 문제가 없습니다. 그러나 고객이 제품 페이지를 직접 방문하는 경우 메시지는 의도를 일치시키기에 부적절합니다.

SiteTuners는 슬라이더 대신 콘텐츠 영역에 이미지 기반 카테고리와 같은 시각적 탐색 기능 을 사용할 것을 권장했습니다. 이렇게 하면 방문자가 스스로 선택하고 탐색할 수 있습니다. 또한 텍스트를 읽을 필요 없이 전자 상거래 상점에서 어떤 제품을 구입할 수 있는지 즉시 알 수 있습니다. 이 경우 이미지는 훨씬 빠른 탐색 도구입니다.

3. 강력한 가치 제안

가치 제안 을 통해 방문자는 회사에서 구매해야 하는 이유를 알 수 있습니다 . 그들에게 무엇이 들어 있는지. 강력한 가치 제안을 갖는 것은 방문자가 행동을 취하도록 설득하는 데 중요합니다.

니라주스킨케어의 오리지널 랜딩페이지에서는 100% 내추럴 블랙 스킨케어를 약속했지만 이는 명확하지 않았다. 그들은 또한 제품의 이점을 설명하기 위해 긴 텍스트에 의존했습니다. 그러나 사람들은 일반적으로 웹에서 텍스트를 읽지 않으므로 이러한 점을 놓칠 수밖에 없습니다.

웹사이트는 혜택에 초점을 맞춰야 방문자가 제품이나 서비스를 구매해야 하는 이유를 바로 알 수 있습니다. 가치 제안을 보다 명확하게 하기 위해 이미지와 글머리 기호를 조합하여 사용하는 것이 좋습니다. 또한 방문자에게 Nyraju 제품 사용의 이점을 보여주기 위해 "전" 및 "후" 이미지를 추가하도록 권장했습니다.

4. 일관성을 유지

디자인, 브랜딩 및 메시징의 일관성은 방문자의 신뢰를 얻는 데 매우 중요합니다. 일관성을 달성하는 것은 전문적인 방문 페이지를 갖는 것뿐만 아니라 유입경로 전반에 걸쳐 정보 향기를 유지하는 것이기도 합니다.

Nyraju의 원래 홈페이지와 랜딩 페이지는 디자인 일관성이 많이 부족했습니다. 페이지의 일부 요소(예: 헤드라인 및 시각 자료)가 다른 요소와 일치하지 않습니다. 제품 페이지에서 리뷰된 제품의 이미지가 위로 올라오고 나머지와 정렬되지 않아 사이트가 깨진 것처럼 보입니다. 왼쪽 내비게이션과 콘텐츠 프로모션도 눈길을 끌었다.

일관성을 유지하기 위해 SiteTuners는 제품 이미지를 정렬하고 왼쪽 탐색을 제거할 것을 제안했습니다. 제품 페이지에 헤드라인을 포함하고 글머리 기호를 사용하는 것도 연속성을 만들기 위해 권장되었습니다.

5. 산만함을 없애라

혼란은 전환을 죽입니다. 방문 페이지에는 방문자가 작업을 완료하는 데 방해가 되는 불필요한 디자인이나 상호 작용 요소가 없어야 합니다.

Nyraju Skin Care의 홈페이지와 랜딩 페이지에는 주요 콘텐츠 영역에 너무 많은 요소가 있었습니다.

  • 한 카테고리에서 다른 카테고리로 변경되면서 자동으로 이동하는 슬라이더가 있었습니다.
  • 관련 없는 여러 판촉 배너도 방문자의 관심을 끌기 위해 경쟁했습니다.

산만함을 없애기 위해 슬라이더와 프로모션을 최상위 카테고리의 이미지 기반 탐색으로 대체하는 것이 좋습니다. 또한 페이지에 가치를 추가하지 않았기 때문에 카테고리 및 제품 세부 정보 페이지에서 왼쪽 탐색을 제거하는 것이 좋습니다.

6. 명확한 클릭 유도문안이 있어야 합니다.

Clarity는 온라인 거래의 위험으로부터 방문자의 두려움을 완화합니다. 또한 사용자의 관점에서 방문 페이지의 투명성을 높입니다. 명확한 정보 아키텍처, 훌륭한 카피라이팅, 명확한 클릭 유도문안을 갖추는 것이 명확성을 위해 필요합니다.

SiteTuners는 주요 클릭 유도문안의 가시성을 개선하여 명확성을 높이기 위해 노력했습니다. 또한 시각적 계층 구조와 버튼 복사의 변경 사항을 제안 하여 사용자 의도에 더 잘 맞도록 했습니다 . 예를 들어 Nyraju는 시각적 탐색에 베스트셀러 샘플 키트의 사진을 포함하여 처음 방문자가 쉽게 찾을 수 있습니다.

7. 사용자가 쉽게 변환할 수 있도록 합니다.

사용 용이성은 온라인 전환에서 중요한 요소입니다. 방문자는 실망스러운 사용자 경험 문제 없이 간단하고 손쉬운 방문 페이지를 찾아야 합니다. 그들은 웹사이트에서 작업을 수행하기 위해 너무 많은 정신적 노력을 들일 필요가 없습니다.

Nyraju 스킨 케어 웹사이트를 깔끔하게 정리하는 것 외에도 SiteTuners는 사이트를 쉽게 탐색할 수 있도록 웹 규칙을 따르는 것을 강조했습니다. 또한 제품 검색 가능성을 높이기 위해 사이트 검색에 대한 개선 사항을 제안했습니다.

결과  

Nyraju는 SiteTuners의 권장 사항을 구현한 후 최적화된 랜딩 페이지의 성능을 추적했습니다.

결과는 다음을 보여주었습니다.

  • 홈페이지 전환(방문자가 홈페이지를 방문하여 구매를 완료) 이 22.85% 증가했습니다 .
  • 얼굴 카테고리 페이지 전환(방문자가 얼굴 제품을 방문하고 구매) 이 98.4% 증가했습니다.
  • Nyraju의 베스트셀러 천연 스킨 케어 샘플 키트의 전환율 이 277.5% 증가했습니다.

다른 제품 세부 정보 페이지는 재설계 후 약간의 변화가 있었습니다.

전반적으로 Nyraju Skin Care의 매출과 주문량이 두 배로 증가 했습니다.

결론

전자 상거래에서 진정으로 중요한 것은 단 한 가지입니다. 바로 수익입니다.

매출과 수익을 늘리는 첫 번째 단계는 웹사이트에서 전환을 가로막는 장벽을 제거하는 것입니다. 테스트를 거쳐 입증된 전환 최적화 랜딩 페이지 원칙에 따라 랜딩 페이지를 최적화하면 전자 상거래 매출과 수익을 높일 수 있습니다.

블로그 바닥글 Cta1