Редизайн сайта "Продеталь"

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

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

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

Проблемы дизайна и методы анализа

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


2. Огромный и не информативный баннер на главной странице, который занимает весь главный экран.

Пример огромного баннера до редизайна:

3. Слишком длинная форма для запроса деталей по VIN без разбивки по шагам.  

4. 95% главной страницы ни кем ни когда не просматривается, глубина просмотра страницы менее 5%. В среднем из 3850 пользователь за 4 дня, до конца страницы долистывают всего 180 пользователей, при этом время просмотра падает с 9 секунд до 3.

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

Пример разных каталогов до редизайна:

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

Пример разрозненного меню до редизайна:

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


(Чтобы наглядно понять проблему, рекомендуем посмотреть это видео)





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

Проблемы верстки:

1. Устаревшая технология верстки каталогов таблицами

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

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

4. Верстка таблиц в разном графическом стиле без адаптива, на телефоне пользоваться сайтом совсем не просто.

Решения проблем, проектируем - UX

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

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

1. Первое, что мы сделали это отказались от длинной «Главной» страницы, сделав экран сайта максимально простым и без какой либо прокрутки вообще, тем самым глубина просмотра страницы по всем прогнозам не может быть менее 100%, что является идеальным показателем. 

Мы повернули интерфейс сайта к клиенту лицом, разделив пользователей на группы:

• профессионалы;
• новички;
• ещё проще.

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





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

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


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

Примеры страниц каталога до и после переработки:

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

4. Полная переработка навигации на сайте. Мы объединили всю навигации в одном понятном для всех месте «Гамбургерное меню», убрав 50% ненужных разделов которые не несут никакой смысловой нагрузки и не пользуются популярностью у пользователя. Статьи, Новости, Работа, Оцени нас, все это полетело на удаление. Теперь на сайте осталось только самое важное для клиента. Каталоги, Отправить заявку, Контакты, О компании и Скидки.

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

Итог

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

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




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

Адаптивными теперь стали даже таблицы в каталогах.

Второстепенные страницы такие как «О компании», «Скидки», «Контакты», мы так же переработали полностью, добавили микро-анимацию и выделили самую важную информацию, удалили «портянки» не читаемого текста.

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

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

Нужна подробная консультация? можете оставить заявку на нашем сайте, или позвонить по телефону, мы с радостью ответим на ваши вопросы!

Полный кейс проекта в портфолио