Задача: создать интернет-магазин эротических товаров на 15 тысяч товаров
Tools are being used in this project
OpenCart
Использовалась так как имеет из коробки большинство из необходимого, легко дорабатывается за счет сторонних пакетов или ручных правок
PHP+MySQL
Классический набор для OpenCart
jQuery
Использовалось для множества эффектов (например, работа с корзиной)
CSS
Верстка выполнена на основе Bootstrap
Photoshop
Использовалось для работы с изображениями, иконками и баннерами
Illustrator
Использовалось для прототипирования и работы с векторами
Яндекс.Директ
Создал, настроил и откорректировал кампании для контекстной рекламы
Google Adwords
Создал, настроил и откорректировал кампании для контекстной рекламы
Янд.Метрика
Использовалась для сбора аналитики и улучшения сайта
Gallery
Few words about the project
Это был долгий и мощный проект, который я делал полностью от и до, включая сопровождение, аналитику и корректировки. Почему секс-шоп? Потому что это весело. Ну... весело конечно когда ты не втянут в эту сферу глубоко.
ТЗ
Первоначальный фокус заказчика (собственно, скажем - "тезис") был направлен на то, чтобы сделать секс-шоп неким магазином, который является нормой. Более того, убрать из интим-магазина саму пикантность и какую-либо сексуальность максимально. То есть первоначальная задача заключалась в том, чтобы создать интернет-сексшоп, который больше похож на магазин медицинской тематики и оздоровления...
Что ж... таким он получился сначала:
Вот так выглядила первая версия сайта. На момент первой итерации приоритет был на максимальной нейтральности - "не испугать посетителя и показать, что это чуть ли не медицинский сайт". Поэтому сайт вышел именно таким: с обилием информации и унылыми цветами
Признаться, тогда мне на какой-то момент это показалось нормальным и жизнеспособным.
Сетка товаров в категории первоначального сайтаКарточка товаров первоначального сайта
В конечном счете, разумеется, аналитика, конверсия и количество заказов дали ясно понять, что первоначальный тезис никак не работает. Секс-шоп должен быть пошлым, ярким, провокационным и сексуальным. Так рассудил рынок и потребитель.
Новый сайт
Даже учитывая то, что секс-шоп будет пошлым, дизайн все равно было решено сделать спокойным, аккуратным и без лишней ерунды в виде девушки в купальнике на полстраницы... Были использованы бело-розово-красные тона и максимум "няшных" элементов.
При наличие на главной странице на первом экране кучи членов дизайн, в моем понимании, все равно остается сдержанным (относительно конечно). Потому что при изображении всех этих веселых элементов, они выполнены не "грязно".
Особенно приятно для меня было делать такой вот гиф-баннер (который показал отличную конверсию и кликабельность):
Gif-баннер на главной странице
?А также долго, но невероятно приятно делали баннеры для страниц категорий:
А вот иконки для подкатегорий:
UX и конверсия
В целом надо понимать, что секс-шоп - это весьма специфичная ниша. И время проведенное посетителем на сайте всегда стремится к нулю. Люди стесняются, не знают, что есть норма, а что не очень и так далее. В любом случае - если что-то не так, то посетителю всегда проще просто уйти. Поэтому в нашем случае критически важно сделать пользовательский опыт максимально гладким и ненапрягающим.
Меню и навигация простые и понятные. Внимание было уделено всему: хлебные крошки, задержка перед выпаданием главного меню, чтобы не мучать случайными ховерами, быстрый доступ к справочной информации из любой части сайта
Удерживающая страница категории. Согласно аналитике и метрикам, посетители проводят большую часть времени именно на странице категории. Поэтому тут бесконечный скролл, социальные плюшки для доверия в сетке товаров и перелинковка
Все пути ведут в корзину. Она простая, понятная, доступна из любой части сайта на любом скролле. При каждом добавлении товара происходит апсейл. Выше в карусельке посмотрите
Карточка товара оптимизирована для конверсии. Самый главный первый экран старается ответить на все возможные вопросы посетителя и мотивирует а) зарегистрироваться б) купить товар. При этом скриптом через Яндекс определяем город посетителя и сразу в карточке даем ему инфу по доставке
Корзина и оформление - святое место. Если посетитель пришел в корзину, то тут мы уже не трогаем его никакими лишними элементами и не отвлекаем. Делаем все, чтобы он не ушел с этой страницы. При этом лишний раз напоминаем про безопасность и гарантии и требуем минимум полей для оформления заказа
Весь процесс создания интерфейса проходил через тестирование, аналитику и корректировки.
Яндекс.Метрика - карта кликов в одном из блоков главного экрана
До А/Б тестов не дошли, потому что это выходило за рамки моего ТЗ. При этом удалось достигнуть показателя конверсии в 2.3%, а ср.вр.посетителя - 6:31.
При этом удалось достигнуть показателя конверсии в 2.3%, а ср.вр.посетителя - 6:31?
Админ-панель или управление сайтом
OpenCart имеет много отличных решений из коробки, но для удобного процесса администрирования я изменял код в сочетании со внешними пакетами. В частности был изменен процесс работы с заказами: взаимодействие реализовано через AJAX и вынесено все на одну страницу (скрин в галерее есть). Кроме того были сделаны отдельные контроллеры под логику работы с поставщиками и под логику расчета балансов магазина.
Раздел работы с поставщикамиРаздел баланса магазина. Под капотом вся логика переписана
Бэкэнд
OpenCart, как говорил, по-моему является отличным вариантом для относительно быстрого развертывания магазина с наименьшими потерями. В данном проекте был переписан контроллер роутинга, потому что из коробки OpenCart косячил по SEO, была масштабно переписана админка, были вручную написаны блоки со "смежными категориями", "смежными статьями", полностью переписан процесс оформления заказа. При этом я старался не нарушать особо ядро и не отклоняться от концепции OpenCarta.
Как бы то ни было, пришлось изрядно урезать и переписать многие функции в модели, потому что OpenCart тянул из БД кучу ненужной инфы и усложнял тем самым запросы. В результате проделанной работы по оптимизации магазин спокойно тянул 15 500 товаров на самом дешевеньком шаред-хостинге
![](/storage/uploads/1560012609_10_12.png")
