I prototyped, designed and developed an MVC for grocery devivering startup in extremly hard terms - in 3 days
Tools are being used in this project
Laravel
Использовался как основа
Vue
Использовался для интерактивных элементов
MySQL
Использовалась для хранения данных
Webpack
Использовался для сборки проекта
Bootstrap 4
Использовался в качестве основы для верстки
Yandex Maps Api
Использовался для работы с доставкой
Yandex.Деньги
Использовано для эквайеринга
Gallery
Few words about the project
Дизайн и проектирование
Не смотря на то, что сроки заказчиком были поставлены максимально нереалистичные, провалить или "не доделать" дизайн и визуальную составляющую было недопустимо. Сервис входил в высококонкурентную нишу и потому любые ошибки в UI неизбежно приведут к смерти конверсии.
На главном "Hero" экране разместились 3 необходимые вещи:
оффер и суть сервиса
суперкраткое объяснение схемы работы
поле и кнопка для проведения целевого действия
В целом, большинство конкурентных сайтов из данной ниши со схожими бюджетами на этом и останавливаются. Но в нашем случае пользовательский опыт немного отличался от привычного. И поэтому крайне важно было обозначить подробную инструкцию и необходимую информацию: график работы и тарифы. Роль инструкции выполнил анимационный видеоролик.
Отмечу такие элементы, как шапка: сайт выдержан в минималистичном стиле и в некоторыми элементами пришлось прибегнуть к разнообразным приемам. Например, шапка при скролле обретает тень для того, чтобы не сливаться с фоном сайта. Выглядит это вот так:
Дизайн шапки сайта Dostovka.com
А вот так выглядит лоудер во время загрузки:
Дизайн preloader сайта Dostovka.com
Для более плавного и позитивного пользовательского опыта реализовано несколько сложных элементов. Например, при вставке корректной ссылки происходит визуальное уведомление пользователя. Выглядит это так:
UX сайта Dostovka.com
Так же при создании заказа, который не был завершен в последствии, происходит сохранение данных. При повторном посещении сайта или перезагрузке страницы пользователю будет предложено продолжить работу с последним заказом.
Бекэнд и разработка
Для максимально быстрой разработки такого специфичного функционала использован фреймворк Laravel 7 и Vue для интерактивных элементов. Со стороны движка реализовано хранение данных, роутинг, валидация данных. Для пользовательского опыта происходит сохранение данных со стороны клиента-браузера.
Для выполнения основной задачи сайта - работы с корзиной покупок - осуществляется работа со сторонним Api партнера.
Для работа модуля оформления заказа и доставки реализовано взаимодействие с Yandex Maps Api. Осуществляется рассчет доставки на основании ряда критериев: веса заказа, зоны доставки и времени осуществления заказа.
Реализовано подключение эквайера, прием и обработка платежей
