Задача: в экстремально короткие сроки (3 дня) разработать дизайн и сайт для сервиса доставки продуктов из магазинов
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. Осуществляется рассчет доставки на основании ряда критериев: веса заказа, зоны доставки и времени осуществления заказа.
Реализовано подключение эквайера, прием и обработка платежей
