Описание Процесс
Центр доставки
Заказчик поставил нам не простую задачу в создании многостраничного сайта с десятками нюансов функциональных возможностей. Пользователь заказывает еду онлайн с возможностью оплатить заказ на сайте, видит процесс готовки еды через камеру на кухне, месторасположение курьера на карте в режиме реального времени благодаря разработанному нами приложения для курьера на OS Android и мгновенной синхронизации с сайтом и многое другое.
Рабочий процесс
1 .

Первое, что видит посетитель, переходя на сайт, — главная страница. На ней мы постарались выставить всю самую важную информацию: связь, преимущества, меню, детали доставки и оплаты, новости, о нас, контакты и отзывы. Меню отсортировано по национальной кухне, а также представлены самые популярные блюда с быстрым выбором. В доставке представлена карта районов, которые обслуживает «Центр доставки еды», а в оплате – все возможные варианты оплаты. Также были предусмотрены кликабельные кнопки социальных сетей на публичные страницы. Второе меню при открытии сайта приклеило к низу экрана, при скроллинге цепляется к первому меню и всегда отображается два меню.

2 .

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

3 .

Так выглядит внутренняя страница меню с возможной сортировкой блюд по популярности и ценой, разновидности кухни, по типу блюда и составу:

4 .

При клике на «Личный кабинет» всплывает окно с запросом о входе.

5 .

Если пользователь забыл пароль, появляется инструкция к его восстановлению. Для этого необходимо ввести свой номер телефона. После этого Вам автоматически приходит смс с новым 5-ти значным паролем.

6 .

При желании зарегистрироваться окно выглядит так:

7 .

На странице экспресс-доставки предоставляется услуги доставки за 15 минут. На ней располагаются все доступные блюда, их количество и цена. При наведении на одно из них блок стает темным, и показывается информация о составляющем блюда. Если оно из блюд закончилось, вся информация затемняется с соответственным текстом о его отсутствии. Также присутствует баннер о количестве заказов, которые производятся в данный момент. Это заставляет посетителя скорее оформить заказ, ведь именно его блюдо может закончится. Плюс ко всему заказ он может оформить лишь в течении 5 минут, соответственно, мы вставили видимый отсчет времени в правом поле.

8 .

При нажатии на кнопку выбора блюда «Очень хочу!» появляется окно с условиями экспресс-доставки, а также двумя кнопками – продолжить выбирать или оформить заказ.

9 .

Проект предоставляет 2 услуги: экспресс-доставка, уже готовых блюд в течении 15 минут, и простая доставка, приготовление которых нужно подождать. Согласно условиям, посетитель может добавить в заказ блюда только одной категории. При обратном – выскакивает новое окно:

10 .

Если пользователь долго оформлял заказ и его блюдо забрали всплывает такое окно:

11 .

Страница «Новости» призывает подписаться на обновления, а также предоставляет последние акции и статьи.

12 .

Сайт дает возможность проследить за процессом приготовления Вашего блюда. Эту функцию можно найти на странице «ЯРевизор». На ней заказчик может выбрать одну IP-камеру для наблюдения. Почувствуй себя детективом :).

13 .

Страница корзины имеет 2 блока: содержание заказа и его оформление. Вид интуитивно понятен: фото блюда, название, количество, цена и полная сумма заказа. В нижней части — поля для заполнения нужной информации о заказчике. Для оформления заказа неавторизированного пользователя, необходимо указать имя и номер телефона.

14 .

По окончанию оформления заказа всплывает такое окно, пользователю мгновенно приходит пароль (5-тизначный уникальный код) для доступа в личный кабинет, где логин — номер телефона.

15 .

Личный кабинет имеет в себе 3 пункта: текущий заказ, история и уведомления. В последнем предлагаются 2 интересные функции, особо интересна постоянным клиентам. Они могут подписаться на смс- или е-меил-рассылку, которая сообщит им о добавлении того или иного блюда в категорию экспресс-доставки. Также, подписываясь на смс-уведомления, есть возможность выбрать диапазон времени, в которое пользователь желает их получать. Учитывают и день, и время.

16 .

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

17 .

Так выглядит личный кабинет постоянного клиента. Здесь детально показаны статус заказа, способ оплаты, конкретная информация по прошлым заказам и уже выбрана смс-подписка. При онлайн-оплате видны 2 кнопки. Если выбран другой способ, блок оплаты пропадает. Также пользователь видит продолжительность выполнения каждого этапа приготовления и доставки его заказов с привязкой ко времени сколько находился заказ в конкретном статусе

18 .

Статус сменен на приготовление. Появляется кнопка «Видеонаблюдение». Нажатие на нее прогружает IP-камеру под данной кнопкой. Повторное нажатие – скрывает видео. В момент смены статуса заказа с «Приготовление» на «Доставка», администратор присваивает заказу курьера из всплывающего списка.

19 .

Статус сменен на доставку. Здесь открывается окно карты, в котором можно проследить за местом нахождения курьера курьера в режиме реального времени с привязкой к мобильному устройству курьера (приложение для android устройств разработанное нами).

20 .

Заказ доставлен. Этот этап отмечает курьер в приложении. Есть возможность оставить комментарий о курьере и поставить ему оценку.

21 .

Раз в сутки всплывает окно-уведомление об акции. Появляется оно, как только посетитель заходит на сайт.

22 .

Во время загрузки страницы мы разработали сменяющиеся изображения разных блюд на тарелке.

1 .

Первое, что видит посетитель, переходя на сайт, — главная страница. На ней мы постарались выставить всю самую важную информацию: связь, преимущества, меню, детали доставки и оплаты, новости, о нас, контакты и отзывы. Меню отсортировано по национальной кухне, а также представлены самые популярные блюда с быстрым выбором. В доставке представлена карта районов, которые обслуживает «Центр доставки еды», а в оплате – все возможные варианты оплаты. Также были предусмотрены кликабельные кнопки социальных сетей на публичные страницы. Второе меню при открытии сайта приклеило к низу экрана, при скроллинге цепляется к первому меню и всегда отображается два меню.

2 .

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

3 .

Так выглядит внутренняя страница меню с возможной сортировкой блюд по популярности и ценой, разновидности кухни, по типу блюда и составу:

4 .

При клике на «Личный кабинет» всплывает окно с запросом о входе.

5 .

Если пользователь забыл пароль, появляется инструкция к его восстановлению. Для этого необходимо ввести свой номер телефона. После этого Вам автоматически приходит смс с новым 5-ти значным паролем.

6 .

При желании зарегистрироваться окно выглядит так:

7 .

На странице экспресс-доставки предоставляется услуги доставки за 15 минут. На ней располагаются все доступные блюда, их количество и цена. При наведении на одно из них блок стает темным, и показывается информация о составляющем блюда. Если оно из блюд закончилось, вся информация затемняется с соответственным текстом о его отсутствии. Также присутствует баннер о количестве заказов, которые производятся в данный момент. Это заставляет посетителя скорее оформить заказ, ведь именно его блюдо может закончится. Плюс ко всему заказ он может оформить лишь в течении 5 минут, соответственно, мы вставили видимый отсчет времени в правом поле.

8 .

При нажатии на кнопку выбора блюда «Очень хочу!» появляется окно с условиями экспресс-доставки, а также двумя кнопками – продолжить выбирать или оформить заказ.

9 .

Проект предоставляет 2 услуги: экспресс-доставка, уже готовых блюд в течении 15 минут, и простая доставка, приготовление которых нужно подождать. Согласно условиям, посетитель может добавить в заказ блюда только одной категории. При обратном – выскакивает новое окно:

10 .

Если пользователь долго оформлял заказ и его блюдо забрали всплывает такое окно:

11 .

Страница «Новости» призывает подписаться на обновления, а также предоставляет последние акции и статьи.

12 .

Сайт дает возможность проследить за процессом приготовления Вашего блюда. Эту функцию можно найти на странице «ЯРевизор». На ней заказчик может выбрать одну IP-камеру для наблюдения. Почувствуй себя детективом :).

13 .

Страница корзины имеет 2 блока: содержание заказа и его оформление. Вид интуитивно понятен: фото блюда, название, количество, цена и полная сумма заказа. В нижней части — поля для заполнения нужной информации о заказчике. Для оформления заказа неавторизированного пользователя, необходимо указать имя и номер телефона.

14 .

По окончанию оформления заказа всплывает такое окно, пользователю мгновенно приходит пароль (5-тизначный уникальный код) для доступа в личный кабинет, где логин — номер телефона.

15 .

Личный кабинет имеет в себе 3 пункта: текущий заказ, история и уведомления. В последнем предлагаются 2 интересные функции, особо интересна постоянным клиентам. Они могут подписаться на смс- или е-меил-рассылку, которая сообщит им о добавлении того или иного блюда в категорию экспресс-доставки. Также, подписываясь на смс-уведомления, есть возможность выбрать диапазон времени, в которое пользователь желает их получать. Учитывают и день, и время.

16 .

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

17 .

Так выглядит личный кабинет постоянного клиента. Здесь детально показаны статус заказа, способ оплаты, конкретная информация по прошлым заказам и уже выбрана смс-подписка. При онлайн-оплате видны 2 кнопки. Если выбран другой способ, блок оплаты пропадает. Также пользователь видит продолжительность выполнения каждого этапа приготовления и доставки его заказов с привязкой ко времени сколько находился заказ в конкретном статусе

18 .

Статус сменен на приготовление. Появляется кнопка «Видеонаблюдение». Нажатие на нее прогружает IP-камеру под данной кнопкой. Повторное нажатие – скрывает видео. В момент смены статуса заказа с «Приготовление» на «Доставка», администратор присваивает заказу курьера из всплывающего списка.

19 .

Статус сменен на доставку. Здесь открывается окно карты, в котором можно проследить за местом нахождения курьера курьера в режиме реального времени с привязкой к мобильному устройству курьера (приложение для android устройств разработанное нами).

20 .

Заказ доставлен. Этот этап отмечает курьер в приложении. Есть возможность оставить комментарий о курьере и поставить ему оценку.

21 .

Раз в сутки всплывает окно-уведомление об акции. Появляется оно, как только посетитель заходит на сайт.

22 .

Во время загрузки страницы мы разработали сменяющиеся изображения разных блюд на тарелке.

стоимость подобного проекта: $2 345
Срок реализации: 56 дней
Список выполненных работ:
  • Разработан высокоэффективный сайт для бизнеса со следующими страницами:
    • Главная
    • Акции
    • Личный кабинет
    • Корзина
    • Экспресс-доставка
    • Меню
    • Доставка и оплата
    • Отзывы
    • ЯРевизор
    • Новости
    • Внутренняя страница новости
    • О нас
    • Контакты
  • Мобильная версия сайта для 4-х типов устройств
  • Полное управление продукцией администратором: количество, цена, раздел, доп. фильтры.
  • Присвоение заказу курьера из списка в администраторской панели.
  • Визуализация рабочих зон на карте.
  • Мгновенное SMS-уведомление пользователя о регистрации или смены пароля для входа в личный кабинет.
  • Разработано приложение на OS Android для курьеров с возможностью отслеживания его местонахождения на карте в личном кабинете пользователя.
  • Автоматическая привязка IP-камеры, установленной на кухне, к разделу «ЯРевизор» и «Приготовление» в личном кабинете.
  • Подключение функционала автоматической отправкой статей из раздела «Новости» на e-mail подписавшимся, а также зарегистрированным пользователям с заполненным полем «E-mail» в личной карточке.
  • Оплата услуг в терминале или с помощью банковской карты на сайте.
  • Возможность сортировки объектов по рейтингу, цене, а также других фильтров.
  • Подключение сервиса, который соединяет клиента и оператора в течении 30 секунд.
  • Функционал обратной связи «Перезвоните мне» с отправкой номера телефона клиента на e-mail адрес администратора сайта.
  • Выгрузка excel-файла с базой всех клиентов в администраторской панели.
  • Подключен ЧПУ («человекопонятный» URL) для поисковой оптимизации и простого отражения структуры сайта.
  • SMS-уведомление пользователя о поступившем блюде в раздел «Экспресс-доставку» с установкой временного диапазона (день, время).
  • Кеширование контактной информации об авторизации.
  • Подключение отсчета времени во всплывающем окне на срок доставки в разделе «Экспресс».
Центр доставки
Заказчик поставил нам не простую задачу в создании многостраничного сайта с десятками нюансов функциональных возможностей. Пользователь заказывает еду онлайн с возможностью оплатить заказ на сайте, видит процесс готовки еды через камеру на кухне, месторасположение курьера на карте в режиме реального времени благодаря разработанному нами приложения для курьера на OS Android и мгновенной синхронизации с сайтом и многое другое.
Рабочий процесс
1 .

После длинной встречи с клиентом, формирования чек-листа задач, мы решили рисовать дизайн одновременно с написанием текстов. Первый дизайн главной утвердили сразу, после – внося лишь определенные правки. Выглядел он так:

2 .

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

3 .

«Главная» преображалась дальше. В шапке к иконкам разделов добавили названия: «Акции», «Личный кабинет», «Корзина» и «Поиск». Заменили блок отзывов. И, что также очень важно, выделили строку структуры сайта красным цветом, чтобы она была более заметна.

4 .

В конечном варианте внесены такие коррективы: изменили расположение «Корзины» в более привычное, добавили на первый блок номер телефона и график работы, а также – кнопку «Хочу» в блоке меню для быстрого выбора заказа. Сейчас, когда корзина наполнена, количество и общая сумма видны сразу. При наведении мышкой на корзину появляется маленькое окошко с кнопкой «Оформить заказ».

5 .

Изначально раздел «Экспресс-доставки» имел такой вид. Есть возможность добавления блюд администратором в раздел «Экспресс доставка» из базы данных сайта — раздела Обычная доставка (при этом цены на блюда отличаются, отображаются такие, которые заложены для Экспресс доставки). Администратор указывает количество доступных блюд в продаже экспресс-доставки, оно отображается для всех пользователей на сайте. Также выведена карта с отмеченной зоной в пределах которой работает услуга.

6 .

Всем приелись кнопки типа «Добавить в корзину» или «Заказать». Поэтому мы подошли к этому вопросу с креативом – наша кнопка называется «Очень хочу». В процессе перевоплощений мы добавили два фиксированных всплывающих окон. Первое информировало посетителя о количестве людей, которые совершили заказы в данный момент. Второе – обратный отсчет возможного времени на оформление заказа в разделе. Расширили выбор сортировки блюд. Чтобы узнать состав блюда, требовалось лишь навести на него курсор мыши. А если одна из позиций уже не доступна, она затемнялась и имела соответствующий текст. Вот как выглядит последний вариант

7 .

После добавления блюда в корзину, оно автоматически списывается с сайта и всплывает окно, предлагающее оформить заказ или продолжать выбирать в течении 5 минут. Мы прописывали разные варианты его названия, остановившись на «На пути к Вам». А для разнообразия решили визуализировать предлагаемые разделы выбора. Конечный итог можете увидеть на сайте. Если пользователь не подтвердил заказ на протяжении этого времени, корзина обнуляется, количество доступных блюд возвращается на сайт.

8 .

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

9 .

Внутренняя страница «Меню» практически сразу имела завершающий вид. При ее открытии первое, что мы видим – скачать в PDF-формате. Мы решили, что это может помешать посетителю моментально сделать заказ на сайте, поэтому переместили данную функцию вниз страницы. Также добавили к блюдам кнопку действия «Хочу».

10 .

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

11 .

Раздел «Новости». Утвердили его без правок. Подключили функционал подписки на новости с автоматической отправкой статей из раздела «Новости» на e-mail подписавшимся пользователям, а также зарегистрированным с заполненным полем «E-mail» в карточке пользователя.

12 .

Раздел «Личный кабинет» имел некие изменения. В первом варианте в истории заказов отсутствовал столбик адреса. Мы посчитали, что будет удобно хранить данную информацию в истории, поэтому добавили ее.

13 .
14 .
15 .
1 .

После длинной встречи с клиентом, формирования чек-листа задач, мы решили рисовать дизайн одновременно с написанием текстов. Первый дизайн главной утвердили сразу, после – внося лишь определенные правки. Выглядел он так:

2 .

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

3 .

«Главная» преображалась дальше. В шапке к иконкам разделов добавили названия: «Акции», «Личный кабинет», «Корзина» и «Поиск». Заменили блок отзывов. И, что также очень важно, выделили строку структуры сайта красным цветом, чтобы она была более заметна.

4 .

В конечном варианте внесены такие коррективы: изменили расположение «Корзины» в более привычное, добавили на первый блок номер телефона и график работы, а также – кнопку «Хочу» в блоке меню для быстрого выбора заказа. Сейчас, когда корзина наполнена, количество и общая сумма видны сразу. При наведении мышкой на корзину появляется маленькое окошко с кнопкой «Оформить заказ».

5 .

Изначально раздел «Экспресс-доставки» имел такой вид. Есть возможность добавления блюд администратором в раздел «Экспресс доставка» из базы данных сайта — раздела Обычная доставка (при этом цены на блюда отличаются, отображаются такие, которые заложены для Экспресс доставки). Администратор указывает количество доступных блюд в продаже экспресс-доставки, оно отображается для всех пользователей на сайте. Также выведена карта с отмеченной зоной в пределах которой работает услуга.

6 .

Всем приелись кнопки типа «Добавить в корзину» или «Заказать». Поэтому мы подошли к этому вопросу с креативом – наша кнопка называется «Очень хочу». В процессе перевоплощений мы добавили два фиксированных всплывающих окон. Первое информировало посетителя о количестве людей, которые совершили заказы в данный момент. Второе – обратный отсчет возможного времени на оформление заказа в разделе. Расширили выбор сортировки блюд. Чтобы узнать состав блюда, требовалось лишь навести на него курсор мыши. А если одна из позиций уже не доступна, она затемнялась и имела соответствующий текст. Вот как выглядит последний вариант

7 .

После добавления блюда в корзину, оно автоматически списывается с сайта и всплывает окно, предлагающее оформить заказ или продолжать выбирать в течении 5 минут. Мы прописывали разные варианты его названия, остановившись на «На пути к Вам». А для разнообразия решили визуализировать предлагаемые разделы выбора. Конечный итог можете увидеть на сайте. Если пользователь не подтвердил заказ на протяжении этого времени, корзина обнуляется, количество доступных блюд возвращается на сайт.

8 .

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

9 .

Внутренняя страница «Меню» практически сразу имела завершающий вид. При ее открытии первое, что мы видим – скачать в PDF-формате. Мы решили, что это может помешать посетителю моментально сделать заказ на сайте, поэтому переместили данную функцию вниз страницы. Также добавили к блюдам кнопку действия «Хочу».

10 .

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

11 .

Раздел «Новости». Утвердили его без правок. Подключили функционал подписки на новости с автоматической отправкой статей из раздела «Новости» на e-mail подписавшимся пользователям, а также зарегистрированным с заполненным полем «E-mail» в карточке пользователя.

12 .

Раздел «Личный кабинет» имел некие изменения. В первом варианте в истории заказов отсутствовал столбик адреса. Мы посчитали, что будет удобно хранить данную информацию в истории, поэтому добавили ее.

13 .
14 .
15 .
стоимость подобного проекта: $2 345
Срок реализации: 56 дней
Список выполненных работ:
  • Разработан высокоэффективный сайт для бизнеса со следующими страницами:
    • Главная
    • Акции
    • Личный кабинет
    • Корзина
    • Экспресс-доставка
    • Меню
    • Доставка и оплата
    • Отзывы
    • ЯРевизор
    • Новости
    • Внутренняя страница новости
    • О нас
    • Контакты
  • Мобильная версия сайта для 4-х типов устройств
  • Полное управление продукцией администратором: количество, цена, раздел, доп. фильтры.
  • Присвоение заказу курьера из списка в администраторской панели.
  • Визуализация рабочих зон на карте.
  • Мгновенное SMS-уведомление пользователя о регистрации или смены пароля для входа в личный кабинет.
  • Разработано приложение на OS Android для курьеров с возможностью отслеживания его местонахождения на карте в личном кабинете пользователя.
  • Автоматическая привязка IP-камеры, установленной на кухне, к разделу «ЯРевизор» и «Приготовление» в личном кабинете.
  • Подключение функционала автоматической отправкой статей из раздела «Новости» на e-mail подписавшимся, а также зарегистрированным пользователям с заполненным полем «E-mail» в личной карточке.
  • Оплата услуг в терминале или с помощью банковской карты на сайте.
  • Возможность сортировки объектов по рейтингу, цене, а также других фильтров.
  • Подключение сервиса, который соединяет клиента и оператора в течении 30 секунд.
  • Функционал обратной связи «Перезвоните мне» с отправкой номера телефона клиента на e-mail адрес администратора сайта.
  • Выгрузка excel-файла с базой всех клиентов в администраторской панели.
  • Подключен ЧПУ («человекопонятный» URL) для поисковой оптимизации и простого отражения структуры сайта.
  • SMS-уведомление пользователя о поступившем блюде в раздел «Экспресс-доставку» с установкой временного диапазона (день, время).
  • Кеширование контактной информации об авторизации.
  • Подключение отсчета времени во всплывающем окне на срок доставки в разделе «Экспресс».
Заказать подобный проект
Ваша заявка успешно принята. Менеджер свяжется с вами в течении 24 часов
Калькулятор стоимости
разработки бизнес-сайта