В агентство Zubova.onlineобратился клиент — компания, занимающаяся оптовыми продажами товаров на маркетплейсах с широкой ассортиментной матрицей.
У клиента уже был сайт с устаревшим дизайном, и его основным запросом стал его редизайн.
Однако после первых переговоров мы пришли к выводу, что начинать необходимо с позиционирования компании на рынке и создания положительного имиджа, то есть брендинга.
Брендинг помогает компании выделиться среди конкурентов, запомниться и создать свой положительный образ у потребителей. Наименование бренда должно ассоциироваться с ценностями компании, быть запоминающимся, но при этом оригинальным, вызывать положительные эмоции и чувства у клиентов.
Дизайн, в свою очередь, — главный этап в создании сайта. От его качества, визуальных характеристик будут зависеть продажи. Потому что, если пользователю не откликнется дизайн сайта, он не станет тратить свое время на дальнейшее его изучение, даже если товар ему необходим.
Веб-дизайн (UX/UI) – объемная концепция, которая объединяет в себе множество дисциплин: дизайн взаимодействия, информационная архитектура, визуальный дизайн, удобство пользования и взаимодействии пользователя с компьютером. То есть задача дизайна не только создать «красивый внешний вид сайта», но и позаботиться об удобстве для пользователя.
UX — это функциональность интерфейса, UI — внешний вид.
Дизайн сайта влияет на следующие показатели:
Компания существует на рынке достаточно давно и имеет постоянных клиентов. Но для расширения позиции на рынке, необходимо было проанализировать имеющиеся преимущества и недостатки компании, потребителей и конкурентов.
Перед началом глобальной работы мы сначала знакомимся с заказчиком, чтобы понять цели и задачи компании, коллектива в целом и собственника в частности.
Провели водное интервью длительностью около часа, на котором владелец компании озвучил цели, ценности компании, бизнес-процессы, ассортимент, задачи и проблемы.
После интервью мы смогли структурировать информацию по пунктам:
Затем мы перешли к изучению целевой аудитории и конкурентов.
На следующем этапе мы изучили потребителей и разбили по сегментам: пол, возраст, интересы, устройства, с которых совершают покупки, потребности и проблемы, бюджет и частоту покупок и др. важные характеристики.
У каждого сегмента потребителей есть свои потребности, проблемы, боли и т д., которые мы также включили в анализ.
На основе этих данных мы составили путь клиента от входа на сайт до покупки (CJM), который учитывали при дальнейшем брендинге и редизайне сайта.
Изучили, какими сайтами привыкла пользоваться ЦА, какие интерфейсы для них наиболее удобны.
Мы изучили конкурентов, нашли лучшие образцы из других стран.
Данные брали из Яндекс.Метрики и Google Analytics и сравнили их с нашим опытом.
Мы проанализировали сайты конкурентов, а также сайты лидеров рынка за границей, чтобы лучше понять потребности покупателей и ассортимент, найти «фишки» и собрать весь необходимый функционал.
Конкурентный анализ помог нам найти точки роста компании и слабые места, которые необходимо учитывать. Для этого мы собрали и изучили коммерческие показатели, положение на рынке и присутствие в Интернете.
После проведенных исследований маркетолог собрал прототип веб-сайта на основе CJM с учетом UX-аудита и передал прототип веб-дизайнеру для создания концепции дизайна сайта.
У компании уже было знакомое покупателям название «Оптовый базар», но владелец хотел сделать его более оригинальным. В процессе мозгового штурма появилось «О! Базар». А затем мы сосредоточились на визуальной части.
Современной динамичной компании нужен современный и динамичный логотип. Буква «О» с восклицательным знаком «!» выполнена модной градиентной заливкой, что придает логотипу динамичность и актуальность.
Шрифт без засечек — современный и приятный для глаз.
Синяя цветовая гамма олицетворяет надежность компании и излучает доверие.
Мы создали несколько вариантов логотипа, вместе с заказчиком выбрали лучший. На основе утвержденного логотипа дизайнер создал несколько концепций дизайна сайта на выбор заказчика. Все дизайны мы отрисовываем на платформе Figma.
ШАГ 6 Макеты страниц в утвержденном дизайне После окончательного утверждения дизайна главной страницы сайта мы собирали UI kit - документ для дизайнера и разработчика, который содержит все элементы дизайна: цвета, шрифты, логотип, фавикон, кнопки и все другие элементы дизайн-системы в разных состояниях.
В соответствии с утвержденным UI kit и прототипами дизайнер создал страницы каталога товаров, карточки товара и ошибки 404.
У клиента уже был шаблон страницы на Insales, и нам не нужно было менять функционал этого шаблона, поэтому нам не нужно было создавать макеты всех остальных страниц, так как они собираются по UI kit.
ШАГ 7 Редизайн сайта После согласования всех элементов дизайна мы перешли к технической реализации сайта.
Мы разработали сайт на платформе Insales — для российского рынка на сегодня это одна из самых популярных и надежных площадок. Он позволяет создавать современные надежные веб-сайты. Имеет интеграции с различными платежными системами и курьерскими службами.
После основной работы по созданию сайта мы его протестировали. Для интернет-магазина этот этап очень важен, так как неправильная работа сайта снижает продажи.
Мы проверили следующие параметры:
Внедрение нового дизайна и всех необходимых технических доработок заняло около двух недель. В общей сложности весь проект редизайна был реализован ровно за один месяц.