7주 만에 전환율을 42% 증가시킨 저비용 웹사이트 재설계

내 온라인 상점 의 완전한 웹사이트 재설계 를 하는 것은 아주 오랫동안 나의 "할 일" 목록에 있었지만, 결코 우선순위가 아니었기 때문에 방아쇠를 당길 수 없었습니다.

여기 문제가 있습니다. 내 전환율은 항상 꽤 좋았습니다(>3%). 그리고 내 온라인 상점은 매년 두 자릿수 성장을 하고 있는데 왜 배를 흔들까요?

그러나 나는 3개월 전에 다른 전자상거래 베테랑들과 함께 마스터마인드 회의에 참석했고 "핫시트"를 켤 때 이 문제를 제기하기로 결정했습니다.

안녕 모두들. 사이트 재설계를 생각하고 있지만 현재 전환율은 여전히 ​​꽤 좋습니다. 지금 업데이트해야 합니까? 그리고 내가 오늘 고쳐야 할 정도로 나쁘다고 생각합니까? 1년 더 미룰 수 있을까요?

내가 받은 대답은 듣기에 극도로 고통스러웠다.

• 이 웹사이트는 90년대에 디자인된 것처럼 보입니다. 재설계하면 전환율이 50% 증가할 수 있습니다. – 마이크 잭니스
• 코스를 운영하시나요? 내가 이것을 본다면 나는 당신의 수업을 듣지 않을 것입니다. – 케빈 스테코
• 이것들은 내가 사고 싶어하는 사이트 유형입니다 . – 다나 자운제미스

이런 말들을 들으니 정말 자존심이 상했고 방어적이지 않으려고 최선을 다했습니다.

그러나 주역에서 돌아오자마자 나는 즉시 내 디자이너에게 연락하여 Photoshop에서 빠른 목업을 만들어 작업을 시작했습니다 .

구현 과정은 매우 간단했습니다. 나는 모든 페이지를 직접 샅샅이 살펴보고 내가 원하는 대로 "대략" 배치하고 디자이너가 "더 좋게 보이도록" 조각을 선택하도록 했습니다.

나는 약 40시간 의 시간 을 투자하여 재설계를 완료하는 데 약 6주 를 투자했습니다. 사이트의 모든 단일 페이지는 완전히 다시 작성되었습니다.

전반적으로, 이 프로젝트는 브라우저 호환성에 대한 예상치 못한 상황으로 인해 7주가 소요 되었으며(IE가 싫습니다!) 비용은 $1840 입니다.

편집자 주: 여기 내 새 사이트에 대한 링크가 있으며 이전 버전을 보기 위해 웨이백 머신을 사용할 수 있습니다.

성공적인 전자 상거래 상점을 시작하는 방법에 대한 무료 미니 과정 받기

전자 상거래 비즈니스를 시작하는 데 관심이 있다면 처음부터 온라인 상점 을 시작하는 데 도움이 되는 포괄적인 리소스 패키지 를 준비했습니다 . 떠나기 전에 꼭 챙기세요!

다운로드하려면 여기를 클릭하십시오

내 웹사이트 재설계 결과

다음 전환 결과는 Google CPC 트래픽 전용 모바일, 데스크톱 및 태블릿에 대한 것 입니다.

내 사이트는 반드시 판매로 전환되지는 않는 콘텐츠 페이지에서 엄청난 양의 트래픽을 받기 때문에 타겟 ppc 광고 트래픽에 대한 수치를 실행하는 것이 비교 목적으로 가장 합리적이었습니다.

• 데스크탑 전환율 46% 증가 업데이트됨!
• 모바일 전환율 21% 증가 업데이트됨!
• 태블릿 전환율 25% 증가 업데이트됨!

참고: 제 전환율 데이터는 계절성 및 수요 변동과 같은 변수를 제거하기 위해 전년도와 정확히 같은 기간과 비교되었습니다.

즉, 전환율 차이를 측정하는 유일한 진정한 방법은 시간의 이익을 위해 하지 않은 디자인을 분할 테스트하는 것입니다.

먼저 데스크톱 전환율의 증가는 이렇게 큰 도약을 기대하지 않았기 때문에 정말 충격을 받았습니다. 나는 내 오래된 사이트에 작업이 필요하다는 것을 알고 있었지만 이 정도는 아니었습니다!

( 업데이트: 몇 개월 동안 더 많은 데이터를 수집한 후 데스크톱의 전환율 증가는 46%입니다.)

태블릿 고객의 경우 전환율 증가가 실제로 15%보다 높았습니다. 출시 몇 주 후에 태블릿 구현 에서 결과와 혼합된 주요 버그를 발견 했기 때문입니다.

( 업데이트: 몇 개월 동안 더 많은 데이터를 수집한 후 태블릿의 전환율 증가는 25%입니다.)

그리고 모바일의 경우 2013년에 이미 꽤 괜찮은 모바일 사이트를 구현했기 때문에 큰 도약을 기대하지는 않았지만 12%는 여전히 꽤 좋습니다.

( 업데이트: 몇 개월 동안 더 많은 데이터를 수집한 후 모바일의 전환율 증가는 21%입니다.)

어쨌든 전환율의 증가에도 불구하고 모든 데이터가 장밋빛이 된 것은 아닙니다. 어떤 이유로 이탈률 과 같은 현장 지표 가 전반적으로 약 10% 증가 했습니다.

편집자 주: 지금 당장은 사이트에서 왼쪽 탐색 기능을 제거했기 때문인 것 같지만 정확한 이유를 알아보기 위해 데이터를 살펴봐야 합니다. 업데이트! 이 재설계에서 이 문제에 기여한 여러 브라우저 버전에 대한 지원을 중단했습니다.

나는 어떤 장바구니를 사용하고 있습니까?

매번 재설계할 때마다 제가 항상 받는 가장 일반적인 질문은…

스티브 이게 무슨 장바구니야? 쇼피파이인가요? 아니면 빅커머스인가요?

그리고 내가 여전히 심하게 수정된 구식 오픈 소스 장바구니를 사용 하고 있다고 모든 사람에게 말하면 그들은 대개 충격을 받습니다.

여기 일이…

선택한 장바구니는 장바구니의 모양 또는 웹사이트의 모양 과 아무 관련이 없습니다 . 장바구니의 주요 목적은 거래를 처리하고 처리하는 것입니다.

장바구니에 필요한 모든 백엔드 기능이 있으면 전환할 필요가 없습니다 . 웹사이트의 미학은 장바구니 엔진과 거의 관련이 없습니다.

따라서 나와 같은 오래된 장바구니가 있더라도 필요한 모든 기능이 포함되어 있으면 모양으로 판단해서는 안 됩니다. 모양은 언제든지 변경할 수 있기 때문입니다.

가장 좋은 점은 오픈 소스 플랫폼에 있다면 모든 권한이 있기 때문에 원할 때마다 자신의 기능을 추가할 수 있다는 것입니다.

예를 들어 이 사이트 재설계를 위해 내 상점에 이 멋진 소셜 증거 기능을 구현했습니다. 기본적으로 5-15초마다 사이트에서 이전 구매를 표시하는 작은 창이 왼쪽 하단에 팝업됩니다.

Shopify에서 플러그인을 구입하여 똑같은 작업을 수행하고 월 $15를 지불할 수 있습니다. 그러나 반복되는 비용 없이 같은 것을 펌핑 하는 데 대략 5시간이 걸렸습니다 (실제로는 2시간이 걸렸어 야 했지만 내 코딩은 녹슬었습니다).

어쨌든 이것들은 소스 코드를 소유할 때의 장점 중 일부일 뿐입니다. 기술적으로 관심이 있다면 오픈 소스를 사용해 볼 것을 권장합니다.

그러나 웹 디자인에 대해 무지하고 기술적인 일을 처리하고 싶지 않다면 Shopify 또는 BigCommerce를 사용하십시오.

색 구성표 변경

미적 관점에서 내 사이트에 대한 가장 큰 불만 중 하나는 색 구성표였습니다. 이전 사이트는 보라색과 노란색이었고 내가 선택한 색상 팔레트 는 사이트를 구식으로 보이게 만들었습니다 .

편집자 주: 여기 내 새 사이트에 대한 링크가 있으며 이전 버전을 보기 위해 웨이백 머신을 사용할 수 있습니다.

아이러니하게도 Create A Profitable Online Store Course에서 실제로 색상 이론에 대한 수업을 진행했지만 2013년에는 이 지식이 없었기 때문에 실제로 적용할 기회가 없었습니다 .

어쨌든 간단히 말해서 color.adobe.com이라는 사이트를 사용하여 새로운 디자인을 위한 보색 을 선택했습니다 . 그리고 룩앤필을 신선하게 하기 위해 청록색, 핫 핑크색, 노란색을 선택했습니다.

왜 3색? '행동을 취하는 것'과 관련된 특정한 색을 원했기 때문입니다. 나는 "주의를 끌기 위해" 특정한 색을 원했습니다. 그리고 마지막으로 사이트가 "젊고 힙한" 느낌이 들도록 밝은 전체 색상을 원했습니다.

청록 은 내 배경색입니다. 노란색 은 특별 제안이 있는 경우 "주의" 색상이고 핫 핑크 는 눈에 띄고 튀어나오기 때문에 사이트의 모든 단일 작업 버튼에 사용됩니다.

내 사이트의 모든 단일 페이지는 단일 목표를 갖도록 설계되었습니다.

첫 페이지의 경우 가장 높은 여백이 있는 섹션이기 때문에 사람들이 개인화된 컬렉션을 찾아볼 수 있기를 바랍니다. 카테고리 페이지에서 사람들이 제품을 클릭하기를 바랍니다. 그리고 제품 페이지에서 사람들이 "장바구니에 추가"를 클릭하기를 바랍니다.

전환의 3가지 기둥

사람들이 자신의 웹사이트를 디자인할 때 저지르는 큰 실수 중 하나는 Amazon.com을 복사하려는 것 입니다. Amazon은 지구상에서 가장 큰 전자 상거래 플랫폼인데 왜 나는 그들의 사이트를 모델로 하지 않을까요?

우선, Amazon의 웹사이트 디자인은 보기 흉하고 일반적이며 대부분의 틈새 온라인 상점에 적합하지 않습니다 . Amazon이 못생긴 웹 사이트를 벗어날 수 있는 이유는 모두가 자신이 누구인지 알고 있고 인터페이스에 익숙하며 이미 Amazon을 신뢰하기 때문입니다.

그러나 자신의 웹사이트가 있는 경우 아무도 당신이 누군지 모르기 때문에 처음부터 그 신뢰를 구축해야 합니다 .

전반적으로 사이트를 처음 방문하는 사람에게 중요한 세 가지 주요 사항 이 있습니다.

첫째, 사람들에게 무료 배송을 제공한다는 사실을 알려야 합니다. Amazon 및 기타 대형 전자 상거래 상점 덕분에 일종의 무료 배송 제안이 이제 당연합니다.

둘째, 알 수 없는 법인이기 때문에 고객이 만족하지 않으면 상품을 반품할 수 있다고 안심시키고 싶습니다.

마지막으로 새로운 고객과 함께 구축해야 하는 세 번째 사항은 아마도 그들 모두의 가장 중요한 요소인 신뢰입니다.

고객이 귀하의 사이트를 방문하고 귀하에 대해 들어본 적이 없기 때문에 귀하의 상점을 신뢰하지 않는다면, 그들은 그냥 픽업하고 떠날 것입니다.

재설계를 위해 다양한 방법으로 신뢰를 강화합니다.

모든 단일 페이지의 헤더에서 무료 배송, 번거로운 반품 및 내 전화 번호를 강조합니다. 전화번호가 잘 보이도록 하는 것은 매우 중요합니다!

새로운 부티크에서 온라인 쇼핑을 할 때마다 항상 가장 먼저 하는 일은 연락처 페이지를 클릭 하고 전화번호와 주소를 찾는 것입니다 . 그리고 그 항목 중 어느 것도 표시되지 않거나 둘 중 하나만 표시되면 나는 그곳에서 쇼핑하지 않을 것입니다.

고객은 구매에 문제가 있는 경우 매장에 연락할 수 있는 기능을 원합니다. 결과적으로 매장 시간을 포함하여 모든 단일 페이지에서 이 정보를 가능한 한 볼 수 있기를 원합니다.

"공식 영업 시간"이 있으면 "실제" 영업 시간이 있는 기존 비즈니스처럼 보이기 때문에 상점이 더 전문적으로 보이게 됩니다.

사회적 증거와 신뢰

모든 페이지의 맨 아래에는 내 사이트의 신뢰성을 제공하는 사회적 증거 전용 섹션이 있습니다.

결국, 우리는 다양한 잡지에 소개되었고 투데이 쇼에도 나왔는데 자랑하지 않는다면 무슨 의미가 있겠습니까?

우리의 사회적 증거/언론 언급 섹션은 사이트의 모든 단일 페이지에 있으므로 처음에는 보지 않더라도 결국에는 알게 될 것입니다.

나는 또한 많은 고객들에게 프레스 섹션 바로 아래에 표시되는 사진과 평가를 요청했습니다.

이들은 우리 사이트에서 쇼핑하고 구매에 매우 만족했으며 우리를 위해 매우 좋은 평가를 기꺼이 남겼던 실제 고객입니다.

한 특정 고객 Sherri는 우리 손수건을 정말 좋아하기 때문에 우리 사이트에서 150번 이상 구매했습니다.

마지막으로 고객의 만족이 우리의 주요 관심사임을 고객을 안심시키는 몇 가지 설명을 포함했습니다. 우리는 고객이 불행하게 떠나도록 내버려 두지 않습니다. 그리고 문제가 발생하면 전액 환불해 드립니다.

탐색 변경

내 새 사이트에 대한 탐색을 다시 디자인하는 것은 내가 고군분투한 영역이었습니다. 먼저, 저는 왼쪽 탐색의 열렬한 팬입니다 . 내 오래된 디자인에는 메뉴가 항상 표시되고 접근 가능하기 때문에 고객이 좋아했습니다.

웹 페이지의 왼쪽은 자연스럽게 시선이 집중되는 곳이기도 하며 쇼핑을 시작하기에 가장 확실한 곳이기도 합니다.

하지만 여기에 나의 딜레마가 있었다...

탐색을 위한 전용 왼쪽 열을 포함하려면 사이트의 다른 모든 항목이 축소되어야 합니다.

예를 들어 내 모든 제품 이미지를 크게 줄여야 하므로 전환에 부정적인 영향을 미칠 수 있습니다.

내 카테고리 이미지가 작아 지면 CTR 이 낮아집니다 .

각 페이지의 장황한 표현은 더 많은 화면 공간을 차지하므로 제품을 페이지 아래로 더 밀어 넣을 것입니다.

그래서 궁극적으로 최상위 수준의 호버 스타일 드롭다운 메뉴를 사용했습니다 . 최상위 탐색 모음의 장점은 왼쪽 탐색 모음과 유사하게 동작하지만 화면 공간을 같은 양으로 차지하지 않는다는 것입니다.

그리고 탐색을 상단으로 이동하여 카테고리와 제품 이미지를 300% 확대 하여 정말 돋보이게 만들 수 있었습니다.

최상위 탐색을 사용하는 또 다른 이점은 매우 깔끔한 방식으로 별개의 범주 를 분리 할 수 있다는 것 입니다.

예를 들어, 지금은 "Shop By Occasion" 카테고리 풀다운이 있지만 이전 디자인에서는 이 섹션이 왼쪽 메뉴의 나머지 부분과 혼합되어 눈에 띄지 않았습니다.

나는 또한 개인화 된 상품, 베스트 셀러, 새로운 도착, FAQ 페이지, 연락처 페이지, 정보 페이지, 장바구니 보기 및 체크아웃 전용 특별 섹션을 추가했습니다.

기본적으로 모든 가장 중요한 탐색 항목 이 이제 모든 사람이 볼 수 있도록 기본 표시줄에 표시됩니다.

나만의 가치 제안 강조하기

제가 전자상거래 과정에서 가르치는 한 가지 중요한 원칙은 사이트의 모든 단일 방문 페이지에 강력한 고유 가치 제안이 있어야 한다는 것 입니다.

왜 누군가가 당신의 상점에서 구매해야 합니까? 경쟁업체가 아닌 여기에서 쇼핑해야 하는 이유는 무엇입니까? 대답은 즉시 명확해야 합니다.

그래서 이 디자인 을 위해 우리 사이트의 모든 페이지에서 우리 의 강점을 전면 중앙 에 강조하기로 결정했습니다 .

예를 들어 첫 페이지에서 우리의 가치 제안은 스플래시 이미지 내에서 딱 맞습니다.

카테고리 페이지에서 우리 가게가 특별한 이유를 전달하기 위해 특별한 텍스트 상자를 구현했습니다.

궁극적인 목표는 처음 5초 이내에 고객이 경쟁자가 아닌 당신에게서 구매해야 하는 이유를 설득하는 것입니다.

제품 페이지 미화

내 사이트 비평에서 얻은 가장 큰 교훈 중 하나는 내 제품 페이지가 수준에 미치지 못했다는 것 입니다.

다음은 이전 디자인의 제품 페이지입니다.

다음은 동일한 페이지가 내 새 사이트에 표시되는 것과 같습니다.

차이점이 있습니까? 먼저 왼쪽 사이드바를 제거 하여 제품 이미지의 크기를 266% 늘릴 수 있었습니다.

메인 이미지가 훨씬 커졌을 뿐만 아니라 "장바구니에 담기" 클릭을 더 많이 유도하기 위해 제품 페이지의 요소도 재정렬했습니다.

예를 들어 "장바구니에 추가" 버튼 바로 옆 에는 고객에게 무료 배송과 번거로운 반품이 없음을 보장하는 텍스트 상자 가 있습니다.

또한 고객이 표준 또는 특급을 선택하는지 여부 및 관련된 모든 관련 배송료에 따라 주문을 받을 시기 를 동적으로 알려주는 상단 링크도 있습니다.

또한 대부분의 방문자가 내 이전 사이트의 전용 공유 버튼을 보지 않는다는 사실을 알게 된 후 공유를 장려하기 위해 이미지 자체 에 Pinterest와 Facebook 버튼을 직접 겹쳐 놓았습니다 .

한 가지 흥미로운 점은 원래 아래와 같이 이미지 바로 아래에 Facebook과 Pinterest에서 공유할 수 있는 두 개의 거대한 파란색 및 빨간색 버튼이 있다는 것입니다.

하지만 핫핑크의 "장바구니에 담기" 버튼보다 더 눈에 띄기 때문에 결국 제거하기로 결정했습니다. 결국 저는 소셜 미디어 공유보다 "장바구니에 추가" 작업을 훨씬 더 중요하게 생각합니다.

마지막으로 고객이 비슷한 품목을 구매하도록 유도하기 위해 교차 판매 섹션의 크기 도 늘렸습니다 .

체크아웃 개선

이전 사이트에 큰 문제가 없었기 때문에 체크아웃 프로세스를 개선하는 것은 나에게 큰 우선순위가 아니었습니다. 그러나 이미 후드를 열었으므로 내 사이트에 꽤 오랫동안 남아 있던 몇 가지 미해결 문제를 해결하기로 결정했습니다.

우선, 때때로 우리는 혼란스러워하고 우리 사이트 에서 쇼핑하기 위해 계정이 필요한지 궁금해하는 사람들로부터 전화를 받았습니다. 이전 사이트의 첫 번째 체크아웃 페이지는 다음과 같습니다.

이 문제에 대한 해결책 은 기본적으로 로그인 을 숨기고 체크아웃을 위해 두 개의 핫핑크 버튼만 표시 하는 것이었습니다.

또한 트러스트 로고를 더 눈에 띄게 만들어 결제가 안전하고 만족이 보장된다는 고객을 안심시켰습니다.

다른 주요 변경 사항은 결제를 완전히 반응형으로 만들었다는 것 입니다.

참고: Shopify를 사용 중이라면 반응형 결제 프로세스가 어떻게 보이는지 이미 보았을 것입니다.

그래서 바퀴를 재발명하는 대신 기본적으로 Shopify의 체크아웃 디자인을 에뮬레이트했습니다. 정말 멋지기 때문입니다.

간단히 말해서, 다양한 화면 크기에서 내 체크아웃이 어떻게 보이는지 보여줍니다.

데스크탑용…

태블릿 및 모바일용

모바일에 대한 몇 마디

2013년에 마지막으로 사이트를 재설계하는 동안 다른 하위 도메인에 있는 데스크톱 사이트와 완전히 별개의 모바일 웹사이트를 구현했습니다.

그리고 그 당시에는 그것이 올바른 결정이었다고 여전히 믿고 있지만 오늘날에는 확실히 그렇지 않습니다. 오늘날 반응형 디자인을 훨씬 쉽게 만들어주는 BootStrap과 같은 많은 프레임워크가 있습니다.

지난 몇 년 동안 내 모바일 및 데스크톱 사이트를 동기화하는 것이 골치 아픈 일이었습니다. 이제 모든 플랫폼에서 단일 통합 사이트를 갖게 되어 기쁩니다.

반응형 방식의 주요 단점은 데스크톱, 태블릿 및 모바일의 완전히 다른 3가지 플랫폼에서 사이트를 철저히 테스트해야 한다는 것이었습니다 . 그리고 각 플랫폼에는 처리해야 할 여러 브라우저 버전과 화면 해상도가 있었습니다.

예를 들어, Windows 시스템에 대해 IE 8, 9, 10 및 11을 테스트해야 했습니다. Mac용 Safari 6,7 및 8을 테스트해야 했습니다.

결국 나는 브라우저 스택이라는 도구를 사용하여 지난 1년 동안 내 사이트에서 사용된 모든 브라우저에 대한 사용성 테스트 를 수행 하기 위해 내 Google 애널리틱스 계정을 살펴보았습니다.

말할 필요도 없이, 이 프로세스는 빨랐고 재설계에서 가장 마음에 들지 않는 부분이었습니다.(

어쨌든, 여기 새로운 모바일 디자인에 관한 몇 가지 하이라이트가 있습니다. 이러한 광고 항목의 대부분은 매우 표준적이므로 너무 많은 세부정보로 지루하지 않도록 하겠습니다.

태블릿과 모바일에서는 메뉴를 단일 풀다운 메뉴로 축소하도록 변경했습니다.

이전 모바일 사이트를 기반으로 모든 사람들이 검색창으로 바로 가는 경향이 있다는 것을 알게 되었기 때문에 모바일 사이트의 모든 단일 페이지에 검색창을 전면과 중앙에 포함하도록 했습니다.

휴대폰에서는 화면 공간이 훨씬 작기 때문에 화면 크기를 줄이기 위해 페이지에서 "필수적이지 않은" 특정 요소를 제거했습니다.

핀터레스트 변경 사항

마지막으로 변경한 것은 콘텐츠 페이지를 완전히 개조한 것입니다. 과거에 여러 번 언급했듯이 저는 우리의 예술 및 공예 페이지를 사용하여 사람들을 우리 온라인 상점으로 안내합니다. 그리고 Pinterest는 이러한 페이지의 대규모 트래픽 소스입니다.

그 결과, 나는 대부분의 공예 이미지를 완전히 다시 수정 했고 Pinterest만을 위한 특별한 키가 큰 버전과 마른 버전을 만들었습니다 . 나는 또한 우리의 제품 사진에 대한 새로운 이미지를 만들었습니다.

예를 들어, "핀" 버튼을 클릭할 때 Pinterest에 직사각형 이미지를 사용하는 대신 이제 고해상도의 키가 크고 마른 버전을 얻을 수 있습니다.

결론

대체로 7주에 $1840는 내가 지금 경험하고 있는 이익에 대해 꽤 좋은 투자 입니다. 현재 제 주요 문제는 동시에 진행 중인 프로젝트가 너무 많고 각 프로젝트를 수행할 시간이 충분하지 않다는 것입니다.

그러나 여기에 문제가 있습니다 ...

이전에는 전환율이 좋았지만 훨씬 더 나은 전환율로 인한 순 매출 증가는 올해 구현하기로 계획했던 다른 트래픽 구축 노력을 능가할 것입니다.

여기서 배울 수 있는 교훈이 있다면 사이트의 전환율을 높이면 다른 모든 트래픽 소스에서 판매가 증가한다는 것 입니다.

전자 상거래 비즈니스의 기반은 플랫폼에서 시작되며 트래픽 구축에 집중하기 전에 모든 오리를 제자리에 두는 것이 중요합니다.