Сервис доставки продуктов из гипермаркета - Dostovka.com

Сервис доставки продуктов из гипермаркета - Dostovka.com

Задача: в экстремально короткие сроки (3 дня) разработать дизайн и сайт для сервиса доставки продуктов из магазинов

Laravel
Использовался как основа
Vue
Использовался для интерактивных элементов
MySQL
Использовалась для хранения данных
Webpack
Использовался для сборки проекта
Bootstrap 4
Использовался в качестве основы для верстки
Yandex Maps Api
Использовался для работы с доставкой
Yandex.Деньги
Использовано для эквайеринга

Дизайн и проектирование

Не смотря на то, что сроки заказчиком были поставлены максимально нереалистичные, провалить или "не доделать" дизайн и визуальную составляющую было недопустимо. Сервис входил в высококонкурентную нишу и потому любые ошибки в UI неизбежно приведут к смерти конверсии.

На главном "Hero" экране разместились 3 необходимые вещи:

  • оффер и суть сервиса
  • суперкраткое объяснение схемы работы
  • поле и кнопка для проведения целевого действия

В целом, большинство конкурентных сайтов из данной ниши со схожими бюджетами на этом и останавливаются. Но в нашем случае пользовательский опыт немного отличался от привычного. И поэтому крайне важно было обозначить подробную инструкцию и необходимую информацию: график работы и тарифы. Роль инструкции выполнил анимационный видеоролик.

Отмечу такие элементы, как шапка: сайт выдержан в минималистичном стиле и в некоторыми элементами пришлось прибегнуть к разнообразным приемам. Например, шапка при скролле обретает тень для того, чтобы не сливаться с фоном сайта. Выглядит это вот так:

Дизайн шапки сайта
Дизайн шапки сайта Dostovka.com

А вот так выглядит лоудер во время загрузки:

Дизайн preloader сайта
Дизайн preloader сайта Dostovka.com

Для более плавного и позитивного пользовательского опыта реализовано несколько сложных элементов. Например, при вставке корректной ссылки происходит визуальное уведомление пользователя. Выглядит это так:

UX сайта
UX сайта Dostovka.com

Так же при создании заказа, который не был завершен в последствии, происходит сохранение данных. При повторном посещении сайта или перезагрузке страницы пользователю будет предложено продолжить работу с последним заказом.

Бекэнд и разработка

Для максимально быстрой разработки такого специфичного функционала использован фреймворк Laravel 7 и Vue для интерактивных элементов. Со стороны движка реализовано хранение данных, роутинг, валидация данных. Для пользовательского опыта происходит сохранение данных со стороны клиента-браузера.

Для выполнения основной задачи сайта - работы с корзиной покупок - осуществляется работа со сторонним Api партнера.

Для работа модуля оформления заказа и доставки реализовано взаимодействие с Yandex Maps Api. Осуществляется рассчет доставки на основании ряда критериев: веса заказа, зоны доставки и времени осуществления заказа.

Реализовано подключение эквайера, прием и обработка платежей

Главная страница сайта сервиса Dostovka.com
Главная страница сайта сервиса Dostovka.com
Make an order
or Hire us