В июле 2015 года Аудиомания запустила полностью переделанный собственной командой сайт. При этом разработчики решили помочь покупателям разобраться в многообразии современного оборудования, создавая в рамках ресурса энциклопедию по Hi-Fi.

О причинах запуска и немного про смерть СМИ

Прошло два месяца с момента запуска нового сайта «Аудиомании». Я не буду хвастаться и говорить, что мы сделали его просто и быстро. Это не так. Ребенок рождался долго и в муках. Но одну вещь я точно могу поставить в заслугу нашей компании — мы сделали новый портал полностью силами своих штатных сотрудников — от кода до дизайна. И мы с радостью хотим поделиться инсайтами, секретами успеха, точно также как и предостеречь от наших ошибок.

Переделка преследовала несколько целей. Прежде всего, сайт должен был стать более современным.

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

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

Второй важный фактор — за эти несколько лет Аудиомания три раза поменяла концепцию. Мы были и дистрибьютором, и сетевой розницей, но сейчас мы окончательно определились как поставщик домашних и портативных аудио- и видеорешений для увлечённых людей. Строго говоря, рынок всё это время тоже не стоял на месте. Появилось много массовых решений, и тема Hi-Fi перестала быть клубной и кулуарной. Сайт должен удовлетворять извинившемуся рынку и новой аудитории, которую мы активно привлекаем.

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

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

В итоге мы создали отдельный большой раздел под названием «Мир Хай-Фай», который на вид очень похож на СМИ. Статьи, обзоры, фото, видео, репортажи, обучающие материалы... В результате на новом сайте произошел взрывной рост потребления контента — почти в 2 раза.

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

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

Теперь и сайт наш мы позиционируем как гибрид СМИ и интернет-магазина.

Как я уже говорил, несколько лет назад мы сформулировали нашу концепцию — поставщика решений, а не просто магазина. Предыдущий сайт не давал возможности донести до клиентов такое принципиальное отличие Аудиомании от конкурентов. Да и самих решений на сайте не было. Появившийся раздел «Готовые решения» — простой способ разобраться в том, из чего состоит то или иное решения неподготовленному человеку. Мы долго думали, как же должен выглядеть этот раздел. Обсуждали, опрашивали людей, показывали варианты.

Текущая версия — полностью переделанная третья версия. Две другие не прошли все этапы. Практически завершив работу над данным функционалом, мы решили максимально упростить схемы, умышленно не показывая все возможные варианты. Ведь профессионалу они понятны и так, а новичка мы можем еще больше запутать, показав слишком много. К схеме приложен текст, поясняющий содержимое, а также список категорий, относящихся к данному разделу. Мы также снимаем видео, которое скоро появится в каждом разделе «готовых решений», чтобы еще больше сделать простыми сложные вещи.

О главном для бизнеса

Но теперь о главном — о том, что изменил сайт в нашем бизнесе.

1. О конверсии. Она выросла, и существенно — на 42,5%.

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

2. Структура потребления информации сильно изменилась. Люди стали почти в два раза больше потреблять контент (обзоры, статьи, смотреть видеоролики).

3. Глубина просмотров снизилась, и это хорошая новость. Да, это не опечатка. Я не вижу в этом ничего плохого, ведь конверсия стала выше. Учитывая увеличение потребления контента, это можно назвать чудом! Люди быстрее находят то, что ищут и тратят при этом значительно меньше времени и делают меньше переходов. Теперь товары находятся практически на всех уровнях, включая главные разделы каталога. У покупателя есть возможность что-либо выбирать без необходимости идти в каталог и копать глубже. Может быть, использовать инструменты подбора, фильтры.

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

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

4. Товарно-баннерная «листалка» на главной странице также работает прекрасно. Я прочитал много статей, включая иностранные, где говорится, что «листалки» — это прошлый век, что никто смотрит дальше первого или второго экрана. Как выяснилось, многие люди долистывают (или дожидаются, пока долистается само) не только до второго или третьего слайда, но и даже до самого конца. Мы регистрируем множество кликов по всем элементам «листалки». Конечно же, больше на тех элементах, что в начале, но всё же. Главное — заинтересовать посетителя. Если это удалось — почему бы и не посмотреть рекомендации?

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

О самом страшном

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

Было реально очень страшно. Мы полагали, что постоянно видимые главные элементы каталога упрощают поиск.

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

Об удобстве оформления заказа

Мы полностью переделали оформление заказа. Вероятно, это также сильно повлияло на повышение конверсии. Оно стало нетипичным. И это был еще один риск. Многие привыкли к некоему стандарту, который задали, в частности, магазины одежды, которые несколько лет назад привлекли огромный объём «свежей покупательской крови» в Сеть. Сначала нужно зарегистрироваться, потом вводить свои данные, потом, адрес и тд. Всё по шагам.

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

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

Если клиент не авторизован, то всё начинается с одного поля, куда нужно ввести либо телефон, либо e-mail. Да-да, почти как во «ВКонтакте». Логичнее не придумаешь. Причем формат — совершенно произволен. Можно вводить телефон с восьмёркой или без, с плюсиками, скобками, пробелами или без оных — всё равно. Ведь количество знаков в номере телефона фиксировано. Убрав всё лишнее, а делается это одной строчкой кода, мы должны получить 10 или 11 цифр. Если 11, то в начале будет 7 или 8. Если эти правила не соблюдаются, значит введено что-то явно неверное, о чем будет сразу же написано клиенту.

Ну а проверить правильность e-mail проще простого.

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

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

О неожиданном и не всегда приятном

Конечно, не всё неожиданное было приятно.

Например, мы возлагали огромные надежды на кнопку «Записаться на прослушивание». Это один из важнейших этапов воронки продаж, когда посетителя сайта мы пытаемся конвертировать в посетителя магазина. Мы сделали на самом деле очень удачную анимированную иконку, которая рядом с товаром дает знать, что его можно послушать в шоу-руме.

Эта иконка тоже рождалась в муках. Множество вариантов и тестирований. В результате мы фиксируем значительное количество кликов по ней. Однако конверсия нажавших в заполнивших форму невысокая.

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

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

Удивительно, но на эту ссылочку нажимают в среднем 3 (три) человека в день (мы были просто в шоке!).

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

О неожиданном и успешном

Очень неожиданный и успешный кейс получили в разделе «Сделай сам» (комплектующие и компоненты для тех, кто своими руками собирает и модернизирует акустику). Как оказалось, мы создали очень удобный каталог для остальных разделов, но совершенно неудобный для раздела «Сделай сам». В первые же часы после запуска нового сайта мы получили волну негатива через все возможные каналы обратной связи.

Всё дело в том, что в разделе «Сделай сам» более 60 категорий. Потерялась наглядность. Как мы могли забыть об этом важном для нас разделе сайта, тестируя, что угодно, но только не его, не знаю. В итоге мы оперативно разработали новую двухуровневую структуру специально для этого раздела, сгруппировав разнородные категории по назначению.

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

О том, что дальше

Сайт Аудиомании и дальше продолжит меняться. Как и всегда. Но резких изменений дизайна мы не планируем. На несколько лет его хватит.

Хочется еще добавить пару слов на тему активно растущей темы мобильного интернета. Наш новый сайт отлично выглядит на любых компьютерах и всех планшетах. Он адаптивен, хотя многие тестировщики этого не замечали. Это прекрасно. С чем у нас действительно проблема — так это со смартфонами. Мы очень долго думали и приняли решение. Для мобильников будет своя, отдельная версия сайта.

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

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

Оригинал: http://www.e-pepper.ru/articles/dizajn-i-yuzabiliti/results-of-redesign-for-audiomania.html

Перейти на сайт