Приложение Delivery Club ВКонтакте | Олег Майгопар
Дизайн опыта заказа еды для крупнейшей социальной сети Восточной Европы.
Роль
Старший дизайнер
Период
Весна 2017
Многие компании имели свои страницы в ВК и могли предлагать свои услуги прямо из социальной сети. Поскольку приложений для доставки еды не было, мы быстро создали одно из них, чтобы сделать доставку еды удобнее для пользователей ВКонтакте.
Помимо функций социальной сети, ВКонтакте предоставляет широкий спектр мультимедиа: музыку, сериалы, игры и т. д.
Пользователи могли смотреть передачи, играть в игры, общаться с друзьями, а также заказывать еду и получать уведомления о статусе заказа прямо в ВК. Благодаря этому проекту у нас появилась возможность привлечь новых пользователей и конкурентов на новую платформу.
ПЕРЕД ЗАПУСКОМ
Каждое приложение ВКонтакте интегрируется через iframe, поэтому мы решили сделать его легким, не слишком полагаясь на дополнительный JS.
Кроме того, мы сделали его отзывчивым.
Моим личным намерением в этом проекте было исследование дизайна для предстоящего редизайна веб-сайта Delivery Club. Я попытался расширить систему мобильного дизайна, адаптировав ее к большим экранам, опираясь на существующие компоненты.
КАК МЫ МОЖЕМ ПРИОБРЕСТИ ПОЛЬЗОВАТЕЛЕЙ
И ВКонтакте, и Delivery Club были частью экосистемы Mail.Ru, поэтому привлечение новых пользователей было лишь вопросом продвижения в нужных сегментах пользователей внутри ВКонтакте. Наш ресторан-партнер мог получить свою версию приложения только со своим меню, поэтому мы могли получать пользователей и с их страниц.
ПОТОК
Типичный пользовательский процесс: 1) Установить адрес → 2) Выбрать ресторан → 3) Выбрать товары → 4) Проверить корзину → 5) Оформить заказ → 6) Успех → 7) Получить уведомление о статусе заказа.
1. НАСТРОЙКА АДРЕСА
По умолчанию пользователи должны вводить адрес, потому что мы предположили, что разрешение приложению проверять их геопозицию через собственный диалог может их напугать.
Также у них есть возможность выбрать адрес на карте.
2. ВЫБЕРИТЕ РЕСТОРАН
Список ресторанов был сформирован алгоритмами на серверной части продукта. Таким образом, пользователи первыми увидели лучшие рестораны. Критериями были рейтинг, время доставки, частота отказов и т. д.
3. СТРАНИЦА РЕСТОРАНА И ВЫБОР ПРЕДМЕТОВ
Здесь мы использовали большую фотографию ресторанных блюд, чтобы предоставить пользователям больше информации о заведении. Также была доступна другая информация из версии мобильного приложения.
Для навигации по меню пользователь мог прокручивать его или переходить к определенным частям с помощью указателя с левой стороны списка. Пользователь мог добавить больше товаров в корзину прямо из списка меню или открыть корзину с дополнительной информацией и добавить ее оттуда.
4. ОСМОТР ТЕЛЕЖКИ
Директор по продукту не хотел объединять корзину с кассой. В то время он считал это слишком рискованным. Таким образом, я справился с задачей, добавив корзину сбоку экрана, перекрывая контент.
Таким образом, мы сделали поток клиентов более последовательным, поскольку не разделяли их ментальную модель формирования заказа на два разных экрана. Пользователь может формировать и проверять корзину в одном контексте.
5. КАССОВАЯ
Здесь мы просто скопировали все из нашего мобильного приложения. Моя основная задача заключалась в том, чтобы выяснить, как все должно работать в веб-формах продукта и какой размер нам следует использовать, чтобы оставаться единым на всех платформах.
6. ЭКРАН УСПЕХА И УВЕДОМЛЕНИЯ
После размещения заказа пользователь получил экран с инструкциями. Есть уведомления прямо из интерфейса ВК. Это очень удобно, особенно если пользователь смотрел передачи, например, в ВК.
7. СОЗДАНИЕ ДИЗАЙНА
Приложение можно открыть и на мобильном телефоне. Таким образом, все было сделано адаптивным в соответствии со старой доброй парадигмой 8 пикселей.
ruby - Настроена авторизация для приложения Rails с VK
Задавать вопрос
спросил
Изменено 7 лет, 7 месяцев назад
Просмотрено 127 раз
У меня есть приложение, которое работает на Rails.
Я использую devise и omniauth-vkontakte.
Мое приложение может авторизовать пользователя с vk.com, но после того, как пользователь прошел авторизацию, мое меню навигации исчезает.
Код меню навигации находится в views/layouts/application.html.erb:
