В наше агентство обратилось руководство ООО “ОС Альфаснаб” для редизайна своего сайта alfaopt.com.
ООО “Оптовые системы Альфаснаб” - компания, специализирующаяся на производстве и продаже комплектующих для систем электрического обогрева и отопления бытовых помещений и промышленных объектов. Также предприятие занимается реализацией средств учета ресурсов и LED освещения от ведущих российских и зарубежных производителей.
С популяризацией интернета в разы увеличился спрос на онлайн-покупки. Клиентам намного удобнее ознакомится с каталогом компании в режиме онлайн, убедится в наличии и заказать необходимый товар, нежели ехать в офлайн магазин и совершать покупку там. Исходя из всего этого роль сайтов в нашей жизни вышла на новый уровень, теперь для нас это визитная карточка и лицо компании.
Первое с чем сталкивается пользователь - визуальная составляющая сайта. “Встречают по одежке, а провожают по уму” данная поговорка актуальна и по сей день, поэтому не стоит забывать о дизайне, а точнее о его двух составляющих:
- UI - Пользовательский интерфейс
- UX - Пользовательский опыт
Анализ
![1.png 1.png](/upload/medialibrary/4f2/0v4dyrzf4esmy9c9kn45bwo3vgjbmrll/1.png)
Как видно на скриншоте, данный дизайн был актуален для 2013 - 2016 года. Сейчас же сайт должен быть “чистым” и лаконичным. Поэтому было принято изменить следующее:
- Шапка сайта
- Баннеры
- Иконки для групп в каталоге
- Превью новостей и статей
Шапка сайта
![2.png 2.png](/upload/medialibrary/9e4/6g78dcqw7zyb6h13dlobyekj8b9jxo5n/2.png)
- Было принято решение модернизировать логотип, чтобы он не выбивался из композиции.
- Из-за того что компания по большей части работает с b2b рынком общение с клиентами осуществляется посредством электронной почты. Поэтому, мы добавили иконку с адресом для удобства как менеджеров (им не нужно диктовать адрес по телефону), так и клиентов (они сразу могут написать письмо с запросом на тот или иной товар).
- Добавлены часы работы под номер телефона из-за того что были проблемы с тем, что некоторые пользователи могли позвонить в нерабочее время.
![3.png 3.png](/upload/medialibrary/d5d/furzs2o7w3lfzrv008wdeybxxspr5oj7/3.png)
Баннеры
![4.png 4.png](/upload/medialibrary/fc3/ribhlhbh7tpidkz8w2ril94cufp6ix65/4.png)
Большинство дизайнеров компаний занимающимся продажей приборов учёта и систем обогрева сталкиваются с тем, что сложно, а бывает что невозможно найти изображения товара в хорошем качестве да ещё и в нужном ракурсе. Для фотографии в каталоге подойдет картинка с разрешением 300х300px, а вот для баннера такое изображение окажется маленьким.
Поэтому мы подготовили около тридцати 3D моделей продукции, которая часто используется на баннерах.
Результат вы можете видеть ниже.
![5.png 5.png](/upload/medialibrary/5ec/gg7qpfnnz2q4vjzcucjvklw1wgffdgw0/5.png)
Иконки в каталоге
![6.png 6.png](/upload/medialibrary/16d/16ipgox543d1jvw3da3mdmgnjuwjtp6h/6.png)
Старые иконки были слишком активного красного цвета, это приводило к тому, что:
- Пользователю было дискомфортно находится долго на странице.
- Уходило много времени на поиск нужного раздела, по причине того, что яркая иконка привлекала гораздо больше влияния чем название раздела.
![7.png 7.png](/upload/medialibrary/82a/okegnhuj1hw8zqvzz6ko116mzixkq7v9/7.png)
Новые иконки были сделаны объемными в серо-красных тонах, так как:
- Это выглядит современно (все уходят от плоского дизайна в графике).
- Не происходит визуального конфликта названия раздела и самой иконки.
Превью для новостей и статей
![8.png 8.png](/upload/medialibrary/70a/taqhsh1ut5iwpm8e5mhqeax2l736zrse/8.png)
Все обложки были реальными фото, из-за этого возникли следующие проблемы:
- Некоторые правообладатели фотографий обращались с требованием использовать другие фото, иначе дело будет решать суд.
- Разделы “Новости” и “Статьи” пестрили и не имели единой композиции, так как фотографии, как минимум не имели общей цветовой гаммы.
Поэтому было принято решение разработать единый стиль для обложек и иллюстраций (схожий с тем, что на баннере), которые будут использоваться в статьях.
![9.png 9.png](/upload/medialibrary/1fb/296en8w6sjknoh0pjicbj7n20r5p7kw6/9.png)
Итог работы
Редизайн в общей сложности был выполнен за 2 месяца. По итогу сайт стал выглядеть ново и свежо, не только на фоне конкурентов. Время пользователей на сайте увеличилось, уменьшились отказы (закрытие страницы через 10 сек.), из-за динамики таких показателей увеличился X сайта с 200 до 410 за 1,5 года.