I prototyped, designed, developed and launched a grocery delivery service with 165 000 products - startup
Tools are being used in this project
Laravel
основной фреймворк
VUE
модульно для интерактивных элементов
MySQL
Использовалась для хранения данных
Webpack
для сборки, минификации проекта
Bootstrap
основа для верстки
Яндекс.API
карта + эквайеринг
VPS+Linux
деплой и настройка сервера
Gallery
Few words about the project
Анализ задачи
Буквально чуть больше 2 недель назад мы разработали и запустили первую версию сервиса dostovka.com. Главной задачей этого проекта было тестирование рынка. И тестирование показало положительный результат.
Главной особенностью первой версии была работа с внешними товарами. Другими словами, сервис плотно работал с API других магазинов, а на себя брал роль воронки и оформления заказа.
От новой полноценной версии требовался полноценный функционал интернет-магазина на 165 000 собственных товаров.
Наличие 165 000 товаров означает отказ от каких-либо готовых CMS в пользу полноценной кастомной разработки. В противном случае работа будет сводиться к исправлению имеющихся проблем и оптимизации самой CMS.
Дизайн и пользовательский опыт
Когда в магазине присутствует 165 тысяч товаров, то парадоксально требуется разгрузить абсолютно все. Первостепенная задача - сделать пользовательский опыт как можно более плавным, простым и быстрым.
Кроме того, тесты прототипа показали что в ЦА в том числе входят и посетители 60+, для которых интерфейс должен быть ултра-интуитивным и простым.
Мы умеем делать эталонный дизайн в кратчайшие сроки. Так был разработан и данный сервис.
Каждый товар имеет свою отдельную страницу "Карточки товара". Однако сценарии использования сайта не предполагают посещение пользователем каждой отдельной страницы. Поэтому в данном случае мы сделали попапы для товаров, чтобы посетитель мог в быстром режиме сканировать все товары в поисках нужного
Удобный быстрый просмотр товаров в каталоге
Список катерий сам по себе является одним из центральных блоков внимания посетителя. Поэтому категории доступны из любой части сайта и при обращении к ним затеняют весь сайт для фокуса внимания. При это реализовано Amazon-style меню
Список категорий на сайте с 165 000 товаров
Поработали и над страницей оформления заказа. Процесс лаконичен, прост и интуитивен. Справа липкий блок с итоговыми цифрами, который доступен в любом положении на странице
Липкий блок с итоговой важной информацией
Процесс ввода информации пользователем тоже максимально упрощен и контролируется. Реализовали автодополнения и коррекцию
Автодополнение при вводе адреса
Мобильная версия
Отдельно стоит выделить мобильную версию. Уместить такое количество категорий и товаров в экране телефона всегда не просто.
Все ключевые меню решено сделать выезжающими снизу. Там пользователь сможет использовать сайт одной рукой. А с помощью скролла мы умещаем все 220 категорий
Ключевое меню располагается снизу для удобства. Закрытие меню происходит рукой
Второе, а может иногда и первое, по значимости после категорий - поиск товаров. Поэтому его тоже вынесли в выезжающее меню вниз
Поиск в самом подходящем месте
Ну и наконец засчет гармоничного расположения и компоновки элементов сделали процесс работы с корзиной товаров и оформления заказа максимально простым
Всплывающая корзина с неограниченным количеством товаров
