LiniaH2O. MVP-версия интернет-магазина сантехники
ЗаказчикS.R. L. VITASANMAX. Один из крупнейших в Молдове дистрибьюторов сантехники, мебели для ванных комнат, керамической плитки, сантехнического оборудования и других товаров, производитель мебели для кухоньЗадачаСоздание нового интернет-магазина с современным дизайном и акцентом на покупку товаров онлайн и доставку по всей стране, что стало актуально в условиях пандемии коронавируса и связанного с ней кризиса
Основная цель клиента — не редизайн существующего сайта, а разработка совершенно нового проекта, ничем не напоминающего предыдущий и добавление нового функционала.
Исходя из потребностей и возможностей заказчика, проект-менеджер Egorov Agency предложил клиенту разделить процесс разработки на два этапа:
- Создание MVP-версии интернет-магазина с минимально необходимым функционалом. MVP-версия нацелена на быстрый старт продаж и, соответственно, повышение доходов компании.
- Постепенное внедрение расширенного функционала, добавление таких функций и разделов, как сравнение товаров, личный кабинет клиента, блог компании для публикации новостей, галерея готовых интерьеров и т.д.
UX/UI
Слабыми местами сайта клиента были устаревший дизайн и сложная, местами неочевидная структура каталога.
По результатам UI-тестирования было выявлено, что пользователи не проявляют желание сделать заказ. Тесты помогли определить ключевые моменты, имеющие значение для пользователей:
- Максимально простой путь от добавления товара в корзину до оформления заказа.
- Возможность отфильтровать товары в категории по различным параметрам.
- Удобная навигация по сайту.
- Возможность увеличить фото товара, чтобы рассмотреть его детальнее.
Такие пункты, как быстрая загрузка страницы, поиск по сайту и наличие адаптивной версии для различных устройств в перечень мы не вносим: все это мы реализуем в своих проектах по умолчанию.
Прототип и дизайн разрабатывались для полной версии сайта, чтобы понимать цель клиента и конечный вид сайта. Уже на начальном этапе было понятно, что в таком масштабном проекте сложно предугадать все заранее. Наша команда была готова к непредвиденным трудностям в реализации, поэтому в процессе разработки вносились необходимые изменения в дизайн. В итоге мы спроектировали более 50 уникальных интерфейсов и создали гибкую, расширяемую дизайн-систему. Это позволяет оперативно добавлять новые элементы и блоки при необходимости.
Цветовая схема сайта — стильный монохром. За исключением изображений товара, баннеров и отдельных цветовых акцентов в дизайне, используются оттенки серого. Это позволяет обратить внимание пользователей на главное: товары и выгодные предложения. В качестве основного шрифта мы выбрали элегантный Panton, который отлично подходит как для заголовков, так и для текстовых блоков любых размеров.
Поскольку больше половины интернет-пользователей заходит в сеть с помощью мобильных устройств, сайт полностью адаптивен и подстраивается под любые разрешения экранов. Для удобства пользователей десктопное и мобильное меню имеют разный принцип работы, учитывая особенности мобильных устройств.
Вместе с клиентом мы переработали принцип распределения товаров по категориям, что помогло сделать структуру каталога логичной и понятной пользователю. У каждой категории товаров индивидуальный набор характеристик для фильтрации. Кроме того, были созданы отдельные сущности для комплекта товаров и коллекции плитки: это существенно упростило процесс выбора отделочных материалов, мебели для ванной и сантехники. Пользователь может легко «собрать» идеальный, гармоничный интерьер в едином стиле.
Карточка товара — лаконичная, не перегруженная, содержит только самую важную информацию. Товар можно добавить в корзину в один клик прямо из каталога или сперва ознакомиться более подробно, изучив информацию на странице товара. Процесс оформления заказа прост и интуитивно понятен пользователю: необходимо заполнить всего несколько полей.
Разработка
Для разработки проекта был выбран PHP-фреймворк Laravel. От популярных CMS для разработки интернет-магазинов мы решили отказаться в пользу высокой производительности Laravel и отсутствия ограничений, накладываемых шаблонностью CMS. Для проекта планировалось значительное расширение возможностей, кастомный функционал и постоянная доработка под изменяющиеся потребности бизнеса. Фреймворк под эти цели подходил лучше благодаря своей гибкости и модульной архитектуре.
По опыту мы знали, что Laravel отлично справляется с высокой нагрузкой, не уступая в этом Drupal, на котором был создан предыдущий сайт. Кроме того, при разработке клиентской части сайта использовался Vue.js, который по умолчанию встроен в Laravel, что окончательно склонило чашу весов в пользу фреймворка. В качестве панели администрирования мы выбрали Laravel Nova.
Для обеспечения быстрой работы каталога товаров и сокращения количества запросов на сервер мы использовали Vue.js в сочетании с History API и запросы к базе данных на чистом SQL, отказавшись от ORM Eloquent Laravel ради высокой производительности прямых запросов. В результате парсинг каталога происходит за считанные секунды. Скорость загрузки фотографий товаров была дополнительно оптимизирована за счет стратегии lazy load — постепенной загрузки изображений. Также мы встроили обработчик изображений, который обрезает все загруженные фотографии товаров под требуемые размеры и сжимает их с оптимальным соотношением качество/вес. Это позволило на 76% сократить общий вес изображений и ускорить загрузку каталога и страницы товара.
Многие товары из ассортимента клиента доступны только по предзаказу или временно отсутствуют на складе. Для удобства пользователей мы реализовали фильтр по наличию товара, позволяющий моментально отсортировать то, что можно купить здесь и сейчас. Также отдельно вынесены фильтры для акционных товаров. Далее располагается общая для всех товаров группа ключевых фильтров по производителю, бренду и цвету. Дополнительные параметры фильтрации скрыты в разворачивающейся панели, благодаря чему блок с фильтрами не занимает много места. Предусмотрена кнопка быстрой очистки всех фильтров для сброса параметров.
Одной из самых трудоемких задач оказалась разработка функционала комплектов. Так как компания заказчика имеет собственное производство мебели для ванных комнат, некоторые товары можно купить только в комплекте с другими. Помимо этого, некоторые элементы могут исключаться из комплекта и приобретаться как самостоятельный товар. А раздел плитки и вовсе имеет уникальную структуру, не похожую на комплекты: товары объединяются в коллекции, образующие уникальный уровень вложенности. Фактически пришлось разрабатывать три вида логики отображения в каталоге и покупки товаров: обычные товары, комплекты и их элементы, коллекции плитки.
Результат
- Разработали интернет-магазин с современным и удобным дизайном, который отлично выглядит и на ПК, и на смартфонах.
- На данный момент сайт запущен с базовым функционалом, который будет постепенно расширяться и дорабатываться.
- Мы собираем и анализируем обратную связь от пользователей и маркетинговую статистику, чтобы оценить результаты проделанной работы. Первые полученные данные подтверждают эффективность принятых нашей командой решений: растут показатели продаж и среднего чека.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
