Создание дизайна и сайта интернет-магазина дизайнерской одежды
Клиент: Магазин одежды модных русских дизайнеров в Москве.
Задача: Создать онлайн-магазин проекта.
Услуги: Сайт
AXIOM — это магазин модной одежды российских брендов, расположенный в центре Москвы и открывшийся в 2014 году.
Собственницы магазина приняли решение протестировать онлайн-продажи и обратились в наше агентство по рекомендации.
В Fashion-сегменте крайне важна упаковка, поэтому AXIOM требовался современный красивый удобный и, главное, продающий интернет-магазин, отражающий философию бренда, при этом одним из требований к запуску был небольшой бюджет.
Почему брендинг и дизайн сайта важны?
Главная цель брендинга компании — выделиться, запомниться и создать положительный образ у потребителей. Выбранное название должно отражать философию компании, быть оригинальным и запоминающимся, вызывать положительные ассоциации и эмоции у клиентов.
Создание дизайна считается одним из главных этапов при формировании сайта. Именно от него зависит то, как его воспримут пользователи и захотят ли они задержаться и совершить покупку.
Web-дизайн (UX/UI) — это многогранная концепция, которая включает множество дисциплин: интерактивный дизайн, информационную архитектуру, визуальный дизайн, юзабилити и взаимодействие между человеком и компьютером.
Это не только "красивый" внешний вид, но и функциональность и удобство сайта для пользователя.
UX ― это функционал интерфейса, UI ― его внешний вид.
Дизайн сайта влияет на следующие показатели:
время пребывания на сайте;
глубина просмотра;
конверсия сайта;
продвижение сайта;
влияние на репутацию компании, повышение конкурентноспособности.
ШАГ 1
Интервью и анализ компании
Над созданием дизайна сайта работает команда из маркетолога, веб-дизайнера, веб-аналитика и разработчика.
Маркетологу было необходимо на интервью достать из собственников видение развития компании, смыслы, миссию, визуальные предпочтения и другое.
Мы провели вводное интервью, которое длилось около 1 ч, в течение которого собственницы компании отвечали на наши вопросы, чтобы мы четко поняли цели, ценности компании, бизнес-процессы, ассортимент, проблемы в работе данной ниши.
В итоге мы структурировали информацию по следующим пунктам:
стоящие перед бизнесом задачи и основные проблемы;
продукты, услуги — сильные и слабые стороны;
основные характеристики целевой аудитории и жизненный цикл клиента;
рекламные активности и тенденции рынка, которые клиент занет;
недостатки и преимущества в сравнении с конкурентами;
методика продаж, сезонность;
визуальные предпочтения по дизайну.
Далее мы более детально рассмотрели ЦА и конкурентов.
ШАГ 2
Анализ целевой аудитории
В рамках стратегии мы провели детальный анализ целевой аудитории: пол, возраст, интересы, устройства, потребности и задачи, бюджет и частоту покупок и прочие весомые характеристики.
На основании этих данных мы составили путь клиента от входа на сайт до покупки (CJM), который мы учитывали при дальнейшем брендинге и редизайне сайта.
Изучили какими сайтами привыкла пользоваться целевая аудитория, какие интерфейсы им наиболее удобны. Изучили конкурентов, нашли лучшие примеры из других стран. Сопоставили полученные данные с нашим опытом.
ШАГ 3
Анализ конкурентов
Мы проанализировали сайты конкурентов, а также сайты лидеров рынка в других странах чтобы еще лучше понять потребности целевой аудитории и ассортимент, найти "фишки" и собрать весь необходимый функционал воедино.
Конкурентный анализ помог нам найти возможные точки роста компании и слабые места, на которые следует обратить внимание.
Анализировали коммерческие показатели, позиции на рынке и представленность в интернете.
ШАГ 4
Выбор платформы
Так как сайт должен реализовывать продажи услуг в России и СНГ, то мы выбирали среди нескольких наилучших вариантов.
Для сайтов-визиток мы используем Tilda, для онлайн-магазинов малого и среднего бизнеса используем платформу Insales, а для крупного e-commerce наиболее подходит Bitrix.
Для данного проекта мы выбрали Insales – одну из лучших по функционалу и надежности в России платформ для онлайн-магазинов, которая обладает рядом преимуществ:
обладает функциями для создания красивых и современных сайтов в кратчайшие сроки;
имеет встроенную интеграцию со всеми службами приема платежей, коммуникации с клиентами и прочее;
надежность и хорошая служба поддержки;
удобная панель администрирования и аналитики сайта даже с мобильного телефона;
хорошея возможности для продвижения сайта;
наиболее комфортная ценовая политика.
ШАГ 5
Прототипирование
Прототип сайта — это интерактивный набросок, черновик будущего сайта. На нем схематически изображаются основные элементы сайта и их отклик на действия пользователя. Прототип используют на ранних стадиях разработки структуры сайта — для презентации идеи заинтересованным сторонам. Делается это для того, чтобы грамотно продумать расположение нужных блоков и элементов дизайна, увидеть наглядно концепцию будущего сайта.
После проведенных исследований и полученных вводных по дизайну от собственницы, маркетолог собрал прототип сайта на базе маркетингового пути клиента с учетом UX-аудита и передал прототип web-дизайнеру на создание концепций дизайна.
ШАГ 6
Создание концепции дизайна
Компания уже имела логотип и предпочтения по шрифту и по цветовой гамме.
Мы создали несколько вариантов главной страницы, вместе с клиентом выбрали лучший. Важно, что дизайн сайта должен отображать ДНК бренда.
Мы разработали контентную концепцию дизайна магазина, которая подразумевает очень хорошее качество фото и видео товара.
К счастью, в AXIOM фото-контент на высоком уровне и им осталось подготовить только дополнительный видео-контент для первого экрана сайта и карточек товаров.
Дизайн сайтов мы всегда делаем на платформе Figma.
ШАГ 7
Отрисовка страниц в утвержденном дизайне
После финального согласования дизайна главной страницы сайта мы собрали UI kit - документ для дизайнера и разработчика, где указаны все элементы дизайна: цвета, шрифты, логотип, фавикон, кнопки и все остальные элементы дизайн-системы в различных состояниях.
В соотвествии с утвержденным UI kit и прототипами дизайнер создал дизайн страницы каталога товаров, карточки товара и ошибки 404.
Для скорости запуска мы использовали один из наших шаблонов функционала, поэтому у нас не было необходимости рисовать дизайн всех остальных страниц, так как они собираются по UI kit.
Особенности созданного дизайна:
Простое и понятное распределение контента и светлые тона облегчают восприятие информации;
Анимация изображения и кнопки при загрузке страницы привлекает внимание клиента;
Есть возможность разместить видео в первом экране, что еще больше вовлекает посетителя магазина;
Отсутствие фона верхнего меню создает легкость дизайна и затягивает клиента в атмосферу бренда, как бы стирает границу между клиентом и брендом;
Главная страница удобно сегментирована тематически: посетителю сразу доступны текущие акции, переключение языка и валюты и, конечно, всегда перед глазами каталог.
Верхнее меню сайта содержит минимальное количество ключевых разделов, чтобы клиент смог быстро сориентироваться в навигации, и закрепляется при прокрутке для быстрого доступа к основным разделам магазина;
Текстовые названия стандартных разделов Поиск, Личный кабинет, Избранное, Корзина заменены на понятные иконки;
Кнопка с анимированным фоном также не отвлекает от главного изображения;
Оповещение о cookies не раздражает, так как размещено на полупрозрачном фоне;— Форма подписки на новости открыта при первом входе клиента на сайт и закрыта при последующих входах. Но оповещение о возможности подписки зафиксировано на экране, поэтому клиент об этом не забудет;
Все фишки присутствуют и в мобильной версии магазина.
ШАГ 8
Техническая реализация сайта
После того как весь дизайн был согласован, мы приступили к технической реализации сайта.
При создании интернет-магазина мы учли следующие важные характеристики:
сайт должен быть простым, логичным и понятным пользователю;
должен отлично работать и с компьютера, и с телефона;
дизайн сайта должен отображать ДНК бренда;
максимум качественного фото и видеоконтента при оптимальной скорости загрузки сайта;
качественные SEO тексты;
надежный и продуманный функционал для хорошей конверсии.
После основных работ по созданию сайта мы провели его тестирование. Для интернет-магазина этот этап очень важен, так как некорректная работа сайта снижает продажи.
Мы провели тестирование по следующим параметрам:
функциональность – проверка главных ресурсов сайта, добавление в корзину, оплата ит.д;
юзабилити – насколько удобен и понятен готовый сайт пользователям;
производительность – проверка работы сайта при максимальной нагрузке;
проверка пользовательского интерфейса – как открывается сайт в различных браузерах, тестирование мобильной версии сайта;
безопасность – насколько сайт надежен при вредоносных атаках.
Разработка концепции, дизайна и создание сайта длились около 1.5 месяца.
ШАГ 9
Что дальше
После того как мы сделали редизайн сайта, мы приступили к SEO-оптимизации и дальнейшему продвижению сайта, но об этом расскажем в отдельных кейсах :)