Кейс Такси, Uber и Lyft США 2020

Мобильное приложение для водителей такси Ridebook

Еженедельный конкурс для водителей Uber и Lyft в США: $20 за участие, и кто за неделю сделает больше всех поездок в своём городе, забирает призовой фонд. Спроектировали и нарисовали приложение, сделали анимации, собрали его для iOS и Android и запустили промо-сайт.

Промо-сайт приложения для водителей такси Ridebook: такси Uber и Lyft на пьедестале
Профиль водителя в мобильном приложении Ridebook: призовой фонд, место в рейтинге, поездки
Клиент
Ridebook App Inc
Сфера
Такси, Uber и Lyft
География
США
Год
2020
Что сделали
UX/UI, иллюстрации, анимации, приложение iOS и Android, промо-сайт

Потрогайте приложение вживую

Перед вами рабочая сборка приложения из исходников. Пройдите обучение и войдите — телефон и пароль уже заполнены. Внутри профиль водителя, рейтинг Нью-Йорка и поддержка; данные в демо выдуманы.

Кнопки — быстрый переход к экрануИнтерфейс на английском: приложение для водителей в США

Конкурс для таксистов, где поездки подтягиваются из Uber и Lyft, а место в рейтинге видно сразу

Ridebook — стартап из США для водителей такси. Водитель платит $20 в неделю, взносы в его городе складываются в призовой фонд, и тот, кто сделает больше всех поездок, забирает его целиком. Задача — простое приложение: регистрация за минуту, привязка Uber или Lyft, живой рейтинг и выплата приза.

  1. 01Обучение и регистрацияТри экрана объясняют правила, дальше вход по номеру телефона и коду из СМС
  2. 02Привязка Uber и LyftПоездки подтягиваются из кабинета водителя — вручную ничего вводить не нужно
  3. 03Профиль и рейтингПризовой фонд, место в городе, поездки и приглашения — на одном экране
  4. 04Выплата призаПобедитель заполняет анкету, компания отправляет чек по почте
  5. 05ПриглашенияПромокод водителя приносит $5 за каждого друга, который оплатил участие
Платформы
iOS и Android
Приложение
Ionic, Angular, Capacitor
Сервер
ASP.NET и SQL Server
Языки
Английский, русский, испанский

Анимации вместо статичных картинок

Заставка, въезд такси на экране входа и итоги недели сделаны в Lottie — лёгкие векторные анимации, одинаково чёткие на любом телефоне. Нажмите на экран, чтобы посмотреть ещё раз.

01Заставка: иконка раскрывается в экран приветствия
02Экран входа: такси въезжает и встаёт на место
03Итог недели: победа
04Итог недели: в этот раз не повезло

Дизайн-система

Под приложение собрали UI-кит: фирменный синий, золотой для денег и призов, шрифт Museo Sans и набор кнопок. На нём сделаны и приложение, и сайт — поэтому они выглядят одним продуктом.

Цвета
Основной синий#1261F8 · Кнопки, ссылки
Глубокий синий#1057E0 · Нажатие, карточки
Золото#EFA12B · Деньги и призы
Мятный#22DA98 · Статус «активен»
Чёрный#000000 · Заголовки
Графит#575757 · Наборный текст
ШрифтMuseo Sans Cyrl
Аа

Создайте пароль для аккаунта

Заголовок 25/27, наборный 13/17 — компактно, чтобы всё важное помещалось на экране без прокрутки
Элементы Принять участиеВы участвуете
ИконкаИконка мобильного приложения Ridebook — руль на синем фонеRidebook

Промо-сайт вживую

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

ridebook.org

Колесо или тачпад — прокрутка внутри окнаКнопки выше — вид на разных экранахВкладки — английская, русская и испанская версииФорма «Скачать» в демо не отправляется

Как выглядят приложение и сайт

01Экраны приложения: обучение, приветствие, профиль, рейтинг, поддержка
02Обучение: правила конкурса в трёх экранах
03Регистрация: телефон, Uber или Lyft, вход
04Макет: обучение, профиль и рейтинг водителей
05Профиль с призовым фондом и рейтинг города
06Выплата приза: анкета и подтверждение
07Промо-сайт: первый экран
08Промо-сайт: три шага участия
09Мобильная версия промо-сайта
10Промо-сайт: победители и ответы на вопросы

Расскажите идею.
Остальное берём на себя

Чем занимается ваша компания и какую задачу нужно решить?