GoodFellazz

Описание:

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

Технологии:

Laravel, Vue.js

Наша роль:

  • Проектирование
  • UI дизайн
  • Верстка
  • Front-end
  • Back-end
<02>

Основные задачи

Задача была предельно ясна — улучшить внешний вид сайта, обеспечить удобство использования и при этом сохранить SEO-рейтинг.

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

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

Старый сайт зао
Старый сайт zao-sms.ru
Новый сайт зао
Новый сайт zao-sms.ru
<03>

Простота и удобство

Предыдущий веб-сайт был далек от совершенства. Одной из самых больших его проблем была беспорядочная система категоризации в каталоге. У них были родительские категории, затем подкатегории и так далее, до семи уровней. Часто пользователи терялись в этом лабиринте, и даже сама компания забыла о некоторых позициях, зарытых глубоко внизу каталога. Для SEO-продвижения это сказывалось не лучшим образом

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

Обновленная структура категорий
Обновленная структура категорий
<04>

Поиск товаров

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

Старый сайт зао
<05>

Оформление заказа

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

Старый сайт зао
Обновленная корзина
Старый сайт зао
Оформление заказа
<06>

Под капотом: админка и синхронизация с 1С

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

Cкриншот разработанной админ. панели
Cкриншот разработанной админ. панели
<07>

Технические решения

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

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

Однако на этом миграционный путь не закончился. При синхронизации с 1С мы столкнулись с тем, что система не соответствовала стандартным протоколам и технологиям. Данные клиента поступали в формате, не подходящими требованиям 1С. Нам нужны были дополнительные решения для правильной идентификации продуктов и извлечения важной информации из системы клиента. Благодаря мощному сочетанию Laravel и Vue JS, мы смогли разработать индивидуальные решения, отвечающие всем требованиям клиентов. Эти фреймворки обеспечивают гибкость и реализацию нестандартных функций, не полагаясь на дополнительные плагины или предварительно упакованные решения.

Мобильное меню
Форма покупки в 1 клик
Форма покупки в 1 клик
Страница контактов менеджеров и отделов
Страница контактов менеджеров и отделов
Страница индивидуального проектирования
Страница индивидуального проектирования
Вход в личный кабинет
Вход в личный кабинет
<08>

Масштабность разработки

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

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

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