Служба доставки GGFood

Макет-прототип и дизайн

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

Подвал сайта так же привычен для пользователей сайтов служб доставки еды и состоит их 4 блоков:

• Полиция качества – форма обратной связи для клиентов
• Контакты – телефон, e—mail, соц сети компании
• Виджет ВК – инструмент для формирования клиента из разряда разового в постоянные
• Мобильные приложения – ссылки на скачивание мобильных приложений компании

Главная страница прототипа была разработана в привычном пользователю формате, а именно: в верхней части сайта – располагается объемный слайдер-баннер с текущими акциями и возможностью их перелистывания, для своевременного информирования клиентов посетивших сайт – о тех акциях которые сейчас проводятся на сайте. Непосредственно под баннером располагается основное меню, иконки и подпись значения этих иконок – таким образом мы работаем сразу на две группы людей: тех, кто любит читать и тех кто «любит глазами».

Поисковая строка – реализована с функцией «умный поиск», для быстрого поиска необходимого товара клиенту: по названию или ингредиенту из состава блюда.

Основные разделы, выполненные в формате больших сочных фотографии (обязательно своих и не скачанных из Интернета) и наименование раздела – работают так же как и дублирующие иконки над поисковой строкой – для тех, кто любит читать и тех кто «любит глазами».

Далее добавлен модуль «Вы недавно смотрели», однако в конечной реализации он отображается только на странице товара, и только после того как пользователь смотрел какие либо товары ранее.

Следующим этапом разработки был Каталог и Позиция каталога, что казалось логичным))) Ввиду того что у нас уже есть зарекомендовавшая себя сетка расположения элементов для службы доставки еды, мы не мудрствуя лукаво, использовали привычную для посетителей подобных сайтов шаблонную сетку. В готов дизайне мы лишь добавили кнопку «Добавить соус» по просьбе клиента, хоть это и не было предусмотрено подписанным с клиентом прототипом и не описано в ТЗ.

Прототип страницы Каталога и итоговый дизайн этой же страницы.

При разработке дизайна страницы Позиции товара, все было реализовано аналогично со страницей Каталог – по привычной пользователям шаблонной сетке. Да, и именно на этом шаге, как я писал выше, мы добавили модуль «Вы недавно смотрели».

Прототип и итоговая страница с согласованным дизайном страницы Позиция каталога

Так же относительно просты были в реализации страницы Типовая внутренняя (разработанная для шаблонных страниц с динамичным контентом, изменяющимся из системы управления сайтом) …

…и страница Моя корзина, ввиду того что в данных страницах как и в Каталоге и в позиции каталога использовалась шаблонная сетка с привычным расположением элементов для клиентов.

Самое интересное для читателей и самое сложное для нас началось на странице Оформления заказа. Почему? На дизайне важно было учесть все необходимые поля для подключения к сторонним сервисам, соблюсти их минимальные требования хотя бы просто для того, чтобы заказ прошел. И да! Что бы можно было указывать реквизиты карты для начисления баллов Plazius. Конечно, что там картинка? Захотел нарисовал, захотел стер. Согласен, вроде бы просто. Однако, когда рисуешь на три типа экранов: десктоп, планшет, мобильный — то каждый просчет в работе – дает x3 задач (в три раза больше). Полученный результат вы можете увидеть ниже.

Финальная версия прототипа и дизайна страницы Оформления заказа.

Верстка

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

OpenCart, программирование и интеграция

Натяжка на CMS OpenCart не доставила нам каких-либо проблем, и доставила море удовольствия клиенту. А точнее результат этой натяжки. Клиент увидел, что он сам может делать: стандартный CRUD (сокр. от англ. create, read, update, delete — «создать, прочесть, обновить, удалить»), однако ранее и этого не было – и это приносит удовольствие. А если учесть, что мы сделали дальше то, клиент продолжал понимать, что мы именно те, кто ему были нужны в самом начале. Был настроен модуль «Ранее вы смотрели».

Следующим этапом, после натяжки верстки на CMS было интеграция с облачным сервисом IIKO. Как правило мы реализуем двухстороннюю связь, хоть это и дороже чем односторонняя, однако упрощает работу клиента в будущем. Однако мы оставляем выбор за клиентом, ведь «Кто заказывает музыку, тот девушку и танцует». Благодаря нашему партнёрству с компанией IIKO, мы не первый раз уже производим подобные интеграции и помогаем нашим клиентам. Как и произошло в этот раз. По результатам этого шага, все товары из IIKO загруженные клиентом в iiko.biz в автоматическом порядке выгружались на сайт (с возможностью их скрытия на сайте), что освобождало клиента от необходимости добавлять товары и в программу, и на сайте. А при редактировании товара в iiko.biz, все изменения так же транслировались на сайт.

Завершающим этапом интеграции IIKO с сайтом стало отправка полных заявок с заказами непосредственно в сервис IIKO, а не на электронную почту оператора как это обычно бывает.

Если все предыдущие шаги мы делали не в первый раз, то с Plazius`om мы работали в первые. Тут нас и ждал сюрприз. Как бы мы тщательно не изучали документацию данного сервиса, мы и предположить не могли что в данном сервисе нет возможности траты баллов через API. Только начисление. А нужный нам функционал находиться в разработке. Совместно с клиентом, обсудив сложившуюся ситуацию, мы не просто сослались на Plazius и развели руки – мы предложили реализовать этот функционал тогда, когда это будет возможно на стороне Plazius. А на текущей момент реализуем только начисление баллов. На что клиент дал «добро», и мы закончили все работы и запустили проект. Огонь? Космический огонь!!!! Клиент доволен, проект запущен, команда довольна!

Итог

Что было до нас:

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

Что стало после нас:

• готовый и продающий сайт с уникальным дизайном на CMS OpenCart
• интеграция сайта с IIKO
• интеграция сайта с бонусной системой Plazius
• счастливые, лояльные и постоянные клиенты

И жили они долго и счастливо… Кстати мы продолжаем работу с данным клиентом (поддержка, доработки – что логично) и в ближайшем будущем обсуждаем возможность переезда на другую платформу)))

Итак, смысл данного кейса в том, что правильно спроектированный сайт, с каким бы количеством сервисом он не интегрировался, будет разработан в разы быстрее если всю базу заложить с нуля. Что даже предоставленная документация не гарантирует что все работает так как в ней описано)))) А также о том, что если ты будешь лоялен клиенту, то это будет взаимно. А вообще я всегда за лояльность. Энджой…

Надеюсь, что было полезно и понятно)))

Автор: Виноградов Василий