Редизайн моего недорогого веб-сайта, увеличивший коэффициент конверсии на 42% за 7 недель

Полный редизайн веб-сайта моего интернет-магазина был в моем списке дел в течение очень долгого времени, но я не мог заставить себя нажать на курок, потому что это никогда не было приоритетом.

Вот в чем дело. Мой коэффициент конверсии всегда был довольно хорошим (> 3%). И мой интернет-магазин растет с каждым годом двузначными числами, так зачем раскачивать лодку?

Но затем я посетил собрание идейных вдохновителей 3 месяца назад с кучей других ветеранов электронной коммерции и решил поднять этот вопрос во время моей очереди на «горячем сиденье».

Привет всем. Я подумываю о редизайне сайта, но мой текущий коэффициент конверсии все еще довольно хорош. Нужно ли мне его обновлять прямо сейчас? И ты думаешь, что это достаточно плохо, что мне нужно это исправить сегодня? Могу я отложить это еще на год?

Полученные мной ответы было мучительно больно слышать.

• Этот сайт выглядит так, как будто он был разработан в 90-х годах. Бьюсь об заклад, если бы вы сделали редизайн, вы могли бы увеличить коэффициент конверсии на 50%. - Майк Джекнесс
• Вы проводите курс? Я бы не пошел на ваш урок, если бы увидел это. - Кевин Стеко
• Это типы сайтов, которые я люблю покупать , ремонтировать, а затем перепродавать с прибылью. - Дана Яунземис

Эти комментарии действительно задели мою гордость, и я изо всех сил старался не защищаться.

Но как только я вернулся от вдохновителя, я сразу же связался со своим дизайнером, сделал быстрый макет в Photoshop и начал его проверять .

Мой процесс реализации был довольно простым. Я сам пролистал каждую страницу, выложил ее «примерно» так, как я хотел, и попросил моего дизайнера подобрать детали, чтобы «выглядело лучше».

Я заложил в бюджет около 6 недель, чтобы завершить редизайн, потратив около 40 часов своего времени. Каждая страница на сайте была полностью переделана.

В целом проект занял 7 недель из-за непредвиденных обстоятельств, связанных с совместимостью с браузером (я ненавижу тебя, IE!), И обошелся мне в 1840 долларов .

Примечание редактора: вот ссылка на мой новый сайт, и вы можете использовать обратную машину, чтобы увидеть старую версию.

Получите мой бесплатный мини-курс о том, как создать успешный магазин электронной коммерции

Если вы заинтересованы в запуске бизнеса в сфере электронной коммерции, я собрал исчерпывающий пакет ресурсов , который поможет вам запустить собственный интернет-магазин с нуля. Обязательно возьмите его перед отъездом!

Нажмите сюда для того, чтобы скачать

Результаты редизайна моего веб-сайта

Следующие результаты конверсии относятся только к трафику Google CPC для мобильных устройств, компьютеров и планшетов.

Поскольку мой сайт получает тонну трафика с содержательных страниц, которые не обязательно конвертируются в продажи, расчет целевого рекламного трафика ppc имеет наибольший смысл для целей сравнения.

• Коэффициент конверсии настольных компьютеров увеличился на 46% Обновлено!
• Коэффициент мобильной конверсии увеличился на 21% Обновлено!
• Коэффициент конверсии планшетов увеличился на 25% Обновлено!

Примечание. Мои данные по коэффициенту конверсии сравнивались с тем же периодом, что и в предыдущем году, чтобы исключить такие переменные, как сезонность и колебания спроса.

При этом единственный верный способ измерить разницу в коэффициенте конверсии - это сплит-тестирование дизайнов, чего я не делал в интересах экономии времени.

Во-первых, рост конверсии десктопов действительно шокировал меня, так как я не ожидал такого большого скачка. Я знал, что мой старый сайт нуждается в доработке, но не настолько!

( Обновление: после нескольких месяцев сбора дополнительных данных коэффициент конверсии для настольных компьютеров вырос на 46%)

Для покупателей планшетов увеличение коэффициента конверсии было выше 15%, потому что я обнаружил серьезную ошибку в реализации планшета через несколько недель после запуска, которая была смешана с результатами.

( Обновление: после нескольких месяцев сбора дополнительных данных коэффициент конверсии для планшетов вырос на 25%.)

Что касается мобильных устройств, я уже реализовал довольно приличный мобильный сайт еще в 2013 году, поэтому я не ожидал больших скачков, но 12% - это все еще неплохо.

( Обновление: после нескольких месяцев сбора дополнительных данных коэффициент конверсии для мобильных устройств вырос на 21%.)

В любом случае, несмотря на рост коэффициента конверсии, не все данные были радужными. По какой-то причине мои локальные показатели, такие как показатель отказов, выросли примерно на 10% по всем направлениям.

Примечание редактора: сейчас я подозреваю, что это связано с тем, что я удалил левую навигацию с сайта, но мне нужно просмотреть данные, чтобы точно выяснить, почему это происходит. Обновлять! В этом редизайне я прекратил поддержку нескольких версий браузера, что способствовало возникновению этой проблемы.

Какую корзину я использую?

Самый частый вопрос, который мне задают при каждом редизайне:

Стив, что это за корзина? Это Shopify? Или это Bigcommerce?

И когда я говорю всем, что все еще использую свою сильно модифицированную тележку с открытым исходным кодом старой школы , они обычно шокированы.

Вот в чем дело ...

Выбранная вами корзина покупок не имеет ничего общего с тем, как выглядит ваша корзина , или как выглядит ваш веб-сайт. Основная цель вашей корзины покупок - обрабатывать и обрабатывать транзакции.

Если ваша корзина для покупок имеет все необходимые вам внутренние функции, вам не обязательно переключаться . Эстетика вашего веб-сайта имеет мало общего с движком корзины покупок.

Так что даже если у вас есть такая же старая тележка для покупок, как моя, при условии, что в ней есть все необходимые вам функции, вы не должны судить о ней по внешнему виду, потому что вы всегда можете изменить ее внешний вид.

Самое приятное то, что если вы работаете на платформе с открытым исходным кодом, вы можете добавлять свои собственные функции в любое время, потому что у вас есть полный контроль.

Например, для этого редизайна сайта я реализовал эту изящную маленькую функцию социального доказательства для своего магазина. Обычно каждые 5-15 секунд в нижнем левом углу появляется небольшое окно, в котором отображается предыдущая покупка, сделанная на сайте.

На Shopify вы можете приобрести плагин, который делает то же самое, и платить 15 долларов в месяц. Но мне потребовалось примерно 5 часов (на самом деле это должно было занять 2 часа, но мой код был ржавым), чтобы выкачать то же самое без регулярных сборов .

В любом случае, это лишь некоторые из преимуществ владения исходным кодом. Если вы технически склонны, я рекомендую попробовать открытый исходный код.

Но если вы не разбираетесь в веб-дизайне и не хотите иметь дело с чем-то техническим, тогда выбирайте Shopify или BigCommerce.

Изменение цветовой схемы

Одной из самых больших претензий к моему сайту с эстетической точки зрения была цветовая схема. Старый сайт был пурпурно-желтым, а цветовая палитра, которую я выбрала, сделала сайт старомодным .

Примечание редактора: вот ссылка на мой новый сайт, и вы можете использовать обратную машину, чтобы увидеть старую версию.

Ирония заключается в том, что в моем курсе «Создание прибыльного интернет-магазина» я на самом деле преподаю уроки теории цвета, но у меня не было этих знаний еще в 2013 году, поэтому у меня не было возможности применить их на практике .

В общем, я использовал сайт под названием color.adobe.com, чтобы выбрать дополнительные цвета для моего нового дизайна. А чтобы освежить внешний вид, я выбрала бирюзовый, ярко-розовый и желтый.

Почему 3 цвета? Это потому, что я хотел, чтобы определенный цвет ассоциировался с «действием». Я хотел, чтобы определенный цвет «привлекал внимание». И, наконец, я хотел, чтобы общий цвет был ярким, чтобы сайт выглядел «молодо и модно».

Бирюзовый - мой фоновый цвет. Желтый - это цвет моего «внимания», если у меня есть какие-либо специальные предложения, а ярко-розовый используется для каждой кнопки действия на сайте, потому что он выделяется и всплывает.

Каждая страница на моем сайте предназначена для единственной цели.

Что касается первой страницы, я хочу, чтобы люди просматривали нашу персонализированную коллекцию, потому что это раздел с самыми высокими полями. На страницах категорий я хочу, чтобы люди нажимали на продукт. А на странице продукта я хочу, чтобы люди нажимали «Добавить в корзину».

3 столпа обращения

Одна большая ошибка, которую, как я вижу, люди допускают при создании собственных веб-сайтов, заключается в том, что они пытаются скопировать Amazon.com . Amazon - крупнейшая платформа электронной коммерции на планете, так почему бы мне не смоделировать свой сайт по их образцу?

Во-первых, дизайн веб-сайта Amazon уродлив, универсален и не подходит для большинства нишевых интернет-магазинов . Причина, по которой Amazon может обойтись без уродливого веб-сайта, заключается в том, что все знают, кто они такие, они привыкли к интерфейсу и уже доверяют Amazon.

Но когда у вас есть собственный веб-сайт, вы должны установить это доверие с нуля, потому что никто не знает, кто вы.

В целом, есть три основных момента, которые имеют решающее значение для любого, кто впервые попадает на ваш сайт.

Во-первых, вы должны сообщить людям, что вы предлагаете бесплатную доставку. Какое-то предложение бесплатной доставки теперь стало нормой благодаря Amazon и другим крупным магазинам электронной коммерции.

Во- вторых, поскольку вы - неизвестная организация, вы хотите заверить клиентов, что они могут вернуть свои товары, если они не будут удовлетворены.

И, наконец, третье, что вы должны установить с новым клиентом, - это доверие, которое, возможно, является самым важным фактором из всех.

Если покупатель заходит на ваш сайт и не доверяет вашему магазину, потому что никогда о вас не слышал, он просто заберет его и уйдет.

В своем редизайне я укрепляю доверие разными способами.

В заголовке каждой страницы я подчеркиваю бесплатную доставку, отсутствие проблем с возвратом и мой номер телефона. ОЧЕНЬ ВАЖНО, чтобы номер телефона был на виду!

Каждый раз, когда я делаю покупки в новом бутике, первое, что я делаю, это нажимаю на страницу контактов и ищу номер телефона и адрес . И если ни один из этих предметов не отображается или если присутствует только один из двух, я не буду покупать там.

Клиенты хотят иметь возможность связаться с магазином, если с их покупкой что-то пойдет не так. И в результате вы хотите, чтобы эта информация была как можно более видимой на каждой странице, включая часы работы вашего магазина.

Наличие «официальных часов работы магазина» также делает ваш магазин более профессиональным, потому что вы производите впечатление устоявшегося бизнеса с «настоящими» часами работы.

Социальное доказательство и доверие

Внизу каждой страницы у меня есть специальный раздел для социальных доказательств, который повышает доверие к моему сайту.

В конце концов, мы были представлены в целой кучке разных журналов, и мы были на шоу Today, так какой смысл, если мы не хвастаемся этим?

Наш раздел социальных доказательств / упоминаний в прессе есть на каждой странице сайта, поэтому, даже если вы не увидите его в первый раз, вы в конечном итоге заметите.

Я также попросил у группы наших клиентов их фото и отзыв, который отображается чуть ниже раздела для прессы.

Это настоящие клиенты, которые делали покупки на нашем сайте, были очень довольны своей покупкой и были готовы оставить нам очень хороший отзыв.

Одна конкретная покупательница Шерри совершала более ста пятидесяти покупок на нашем сайте, потому что ей очень нравятся наши носовые платки.

И, наконец, я добавил несколько слов, которые убеждают клиента в том, что его удовлетворение является нашей главной заботой. Мы никогда не позволяем клиенту уйти недовольным. А если что-то пойдет не так, мы вернем вам деньги в полном объеме.

Изменение навигации

Редизайн навигации для моего нового сайта был областью, в которой я боролся. Во-первых, я ОГРОМНЫЙ поклонник навигации с левой стороны . Он был в моем старом дизайне, и моим клиентам он нравился, потому что меню всегда было на виду и доступно.

Левая сторона веб-страницы также является тем местом, куда ваш взгляд естественным образом тяготеет, и это наиболее очевидное место для начала покупок.

Но вот передо мной была дилемма ...

Если бы я включил специальный левый столбец для навигации, все остальное на сайте пришлось бы сжаться.

Например, все изображения моих продуктов нужно будет значительно уменьшить, что отрицательно скажется на конверсиях .

Изображения моей категории будут меньше, что снизит CTR .

Многословие на каждой странице заняло бы больше места на экране, что подтолкнуло бы продукты дальше вниз по странице .

В итоге я выбрал выпадающее меню верхнего уровня в стиле наведения . Прелесть панели навигации верхнего уровня в том, что она ведет себя так же, как левая панель навигации, но не занимает столько же места на экране.

А переместив навигацию наверх, я смог увеличить изображения категорий и продуктов на 300%, что сделало их действительно популярными.

Другим преимуществом использования навигации верхнего уровня была возможность очень четко разделять отдельные категории .

Например, у меня теперь есть отдельная выпадающая категория «Покупки по случаю», тогда как в моем старом дизайне этот раздел был смешан с остальной частью левого меню, поэтому он не выделялся.

Я также добавил специальный раздел, посвященный персонализированным товарам, бестселлерам, новинкам, странице часто задаваемых вопросов, странице контактов, странице информации, просмотру корзины и оформлению заказа.

По сути, все наиболее важные элементы навигации теперь находятся на главной панели, чтобы их могли видеть все.

Подчеркивая мое уникальное ценностное предложение

Один важный принцип, который я преподаю в моем курсе электронной коммерции, заключается в том, что каждая целевая страница на вашем сайте должна иметь сильное уникальное ценностное предложение .

Зачем кому-то покупать в вашем магазине? Почему я должен делать покупки здесь, а не у конкурентов? Ответ должен быть ясен сразу.

Поэтому для этого дизайна я решил подчеркнуть наши сильные стороны на каждой странице нашего сайта.

Например, на первой странице наше ценностное предложение прямо внутри заставки.

На страницах категорий я реализовал специальное текстовое поле, чтобы объяснить, почему наш магазин особенный.

Конечная цель - убедить клиента в течение первых 5 секунд, почему он должен покупать у вас, а не у конкурента.

Украшение страниц продукта

Один из самых важных выводов из моей критики сайта заключался в том, что страницы моих продуктов были не на должном уровне .

Вот страница продукта из старого дизайна.

Вот такая же страница выглядит на моем новом сайте.

Вы заметили какие-то различия? Во-первых, поскольку я удалил левую боковую панель, я смог увеличить размер изображения продукта на 266% .

Мало того, что основное изображение намного больше, я также изменил элементы страницы продукта, чтобы стимулировать больше кликов «Добавить в корзину».

Например, рядом с кнопкой «Добавить в корзину» находятся текстовые поля, которые убеждают клиента в бесплатной доставке и отсутствии проблем с возвратом.

Вверху также есть ссылка, которая динамически сообщает покупателю, когда он получит свой заказ, в зависимости от того, выберет ли он стандартную или экспресс-доставку, и всех связанных с этим сборов за доставку.

Я также наложил кнопки Pinterest и Facebook прямо на само изображение , чтобы стимулировать публикацию, после того, как заметил, что большинство посетителей даже не смотрели на специальные кнопки общего доступа на моем старом сайте.

Интересно отметить одну вещь: изначально у меня были две огромные синие и красные кнопки для публикации в Facebook и Pinterest прямо под изображением, как показано ниже.

Но в конце концов я решил удалить их, потому что они выделялись больше, чем ярко-розовая кнопка «Добавить в корзину». В конце концов, я ценю действие «Добавить в корзину» гораздо больше, чем публикацию в социальных сетях.

Наконец, я также увеличил размер секции перекрестных продаж, чтобы побудить клиента купить аналогичные товары.

Улучшение оформления заказа

Улучшение процесса оформления заказа не было для меня огромным приоритетом, потому что со старым сайтом не было серьезных проблем. Но поскольку капот у меня уже был открыт, я решил исправить некоторые нерешенные проблемы, которые сохранялись на моем сайте в течение довольно долгого времени.

Во-первых, время от времени нам звонили люди, которые были сбиты с толку и задавались вопросом, нужна ли им учетная запись для покупок на нашем сайте. Вот как выглядела первая страница оформления заказа на нашем старом сайте.

Решением этой проблемы было скрытие входа в систему по умолчанию и отображение только двух ярко-розовых кнопок для проверки.

Я также сделал логотипы доверия более заметными, чтобы убедить клиента в том, что оформление заказа безопасно и что его удовлетворение гарантировано.

Другим важным изменением было то, что я сделал кассу полностью отзывчивой .

Примечание: если вы пользуетесь Shopify, то вы, вероятно, уже видели, как выглядит красивый адаптивный процесс оформления заказа.

Поэтому вместо того, чтобы изобретать колесо, я в основном подражал дизайну оформления заказа Shopify, потому что он довольно крутой.

Вкратце, вот как теперь выглядит моя касса для разных размеров экрана.

Для ПК…

Для планшетов и мобильных устройств

Несколько слов о мобильных устройствах

Во время моего последнего редизайна сайта в 2013 году я реализовал полностью отдельный мобильный веб-сайт, помимо настольного сайта, который находился в другом субдомене.

И хотя я все еще считаю, что это было правильное решение в то время, сегодня это определенно не так. Сегодня существует множество фреймворков, таких как BootStrap, которые значительно упрощают адаптивный дизайн.

За последние несколько лет было очень сложно поддерживать синхронизацию моих мобильных и настольных сайтов, поэтому я счастлив, что теперь у меня есть единый унифицированный сайт для всех платформ.

Основным недостатком адаптивности было то, что мне пришлось тщательно протестировать сайт на трех совершенно разных платформах : настольном компьютере, планшете и мобильном устройстве. И внутри каждой платформы приходилось иметь дело с несколькими версиями браузеров и разрешениями экрана.

Например, мне пришлось протестировать IE 8, 9, 10 и 11 для компьютеров с Windows. Мне пришлось протестировать Safari 6,7 и 8 для Mac.

В конце концов, я прошел через свою учетную запись Google Analytics, чтобы выполнить тестирование удобства использования для каждого браузера , который использовался на моем сайте в прошлом году, с помощью инструмента под названием Browser Stack.

Излишне говорить, что этот процесс был отстойным и был моей наименее любимой частью редизайна :(

В любом случае, вот несколько основных моментов, касающихся нового мобильного дизайна. Большинство из этих позиций довольно стандартны, поэтому я не буду утомлять вас подробностями.

На планшете и мобильном телефоне я изменил меню, чтобы оно свернулось до единого раскрывающегося меню.

Основываясь на моем предыдущем мобильном сайте, я обнаружил, что все, как правило, сразу идут к панели поиска, поэтому я обязательно включил панель поиска спереди и по центру на каждой странице мобильного сайта.

Поскольку на телефоне экран намного меньше, я удалил некоторые «второстепенные» элементы страницы для экрана меньшего размера.

Изменения в Pinterest

Последним изменением, которое я сделал, было то, что я полностью переделал свои страницы с контентом. Как я уже много раз упоминал в прошлом, я использую наши страницы об искусстве и ремеслах, чтобы направлять людей в наш интернет-магазин. И Pinterest является крупным источником трафика для этих страниц.

В результате я полностью переделал большинство крафтовых изображений и сделал специальные высокие и худые версии специально для Pinterest . Я также сделал новые изображения для фотографий наших продуктов.

Например, вместо использования прямоугольного изображения для Pinterest, когда вы нажимаете кнопку «закрепить», теперь вы получаете высокую и худую версию в высоком разрешении.

Заключение

В общем, 7 недель и 1840 долларов - это довольно хорошее вложение для той прибыли, которую я сейчас испытываю. Моя главная проблема сейчас в том, что у меня слишком много проектов, выполняемых одновременно, и недостаточно времени, чтобы работать над каждым из них.

Но вот в чем дело ...

Несмотря на то, что у меня раньше был хороший коэффициент конверсии, чистый рост продаж за счет еще лучшего коэффициента конверсии, вероятно, превзойдет другие усилия по наращиванию трафика, которые я планировал реализовать в этом году.

И если из этого следует извлечь урок, так это то, что увеличение коэффициента конверсии для вашего сайта увеличит продажи по всем остальным источникам трафика .

Основа вашего бизнеса электронной коммерции начинается с вашей платформы, и важно иметь все свои утки на месте ДО того, как вы сосредоточитесь на увеличении трафика.