app

Дизайн мобільного додатку логістики зерна JetAgro

Дизайн головної сторінки проєкту Дизайн мобільного додатку логістики зерна JetAgro

Задача

Продумати з нуля логіку та дизайн додатку за принципом таксі для аграріїв: з картою елеваторів, створенням заявок на вивіз зерна та кабінетом водія.

Зроблено

Логіка

Прототипи

Дизайн

Адаптиви

Прототипи

На основі аналізу логістичних ланцюгів агросектору створили інтерактивні прототипи всіх екранів додатку. Спроєктували сценарії взаємодії для двох ключових ролей — фермера-замовника та водія-зерновоза.

Прототипи - скріншот проєкту 1

Темна версія

Спеціально для водіїв вантажівок та фермерів, які працюють під час нічного збору врожаю, спроєктували глибоку темну тему. Контрастні неонові акценти на чорному фоні знижують навантаження на очі в кабіні та полегшують читання навігації.

Темна версія - скріншот проєкту 1

Інтерфейс аграрія

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

Інтерфейс аграрія - скріншот проєкту 1

Реєстрація та вхід

Спроєктували багатокроковий онбординг із вибором ролі між фермером та водієм. Реалізували швидку верифікацію через номер телефону або «Дія.Підпис», прив'язку координат господарства на інтерактивній карті та захист входу 4-значним PIN-кодом і біометрією (Touch ID). Для непередбачуваних ситуацій передбачили простий сценарій відновлення доступу через одноразовий SMS-код.

Реєстрація та вхід - мобільний інтерфейс 1
Реєстрація та вхід - мобільний інтерфейс 2
Реєстрація та вхід - мобільний інтерфейс 3
Реєстрація та вхід - мобільний інтерфейс 4
Реєстрація та вхід - мобільний інтерфейс 5
Реєстрація та вхід - мобільний інтерфейс 6
Реєстрація та вхід - мобільний інтерфейс 7
Реєстрація та вхід - мобільний інтерфейс 8
Реєстрація та вхід - мобільний інтерфейс 9

Всі елеватори

Зручний каталог і карта сертифікованих зерносховищ та елеваторів із детальними фільтрами за культурою, потужністю зберігання та відстанню до поля. Фермер може миттєво оцінити черги та обрати оптимальний пункт розвантаження.

Всі елеватори - мобільний інтерфейс 1
Всі елеватори - мобільний інтерфейс 2
Всі елеватори - мобільний інтерфейс 3
Всі елеватори - мобільний інтерфейс 4
Всі елеватори - мобільний інтерфейс 5

Нові замовлення

Спроєктували покроковий майстер оформлення заявки: вибір агрокультури з каталогу, зазначення тоннажу та точних характеристик зерна (вологість, засміченість). Аграрій обирає цільовий елеватор або пункт вивантаження, порівнює зустрічні цінові пропозиції від перевізників і підтверджує перевезення. Після призначення рейсу доступні живий трекінг руху зерновоза до поля та вбудований чат для координації навантаження й обміну ТТН.

Нові замовлення - мобільний інтерфейс 1
Нові замовлення - мобільний інтерфейс 2
Нові замовлення - мобільний інтерфейс 3
Нові замовлення - мобільний інтерфейс 4
Нові замовлення - мобільний інтерфейс 5
Нові замовлення - мобільний інтерфейс 6
Нові замовлення - мобільний інтерфейс 7
Нові замовлення - мобільний інтерфейс 8

Усі чати та історія

Розробили комунікаційний хаб із фільтрацією активних діалогів, бейджами непрочитаних повідомлень та контекстною прив'язкою чату до конкретного рейсу. У вікні листування аграрій може в один клік підтвердити вартість перевезення партій зерна та узгодити час прибуття. Розділ історії чітко розмежовує поточні рейси з прогрес-барами доставки на елеватори та заархівовані замовлення з лабораторними показниками якості.

Усі чати та історія - мобільний інтерфейс 1
Усі чати та історія - мобільний інтерфейс 2
Усі чати та історія - мобільний інтерфейс 3
Усі чати та історія - мобільний інтерфейс 4
Усі чати та історія - мобільний інтерфейс 5

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

Налаштування профілю аграрія

Спроєктували кабінет налаштувань аграрія з керуванням особистими даними, push-сповіщеннями та багаторівневою підпискою на сервіс. Реалізували редагування профілю фермерського господарства з можливістю точного визначення точок завантаження на карті та збереженням агрономічних приміток. Передбачили швидке перемикання між ролями замовника й перевізника без необхідності повторної авторизації.

Налаштування профілю аграрія - мобільний інтерфейс 1
Налаштування профілю аграрія - мобільний інтерфейс 2
Налаштування профілю аграрія - мобільний інтерфейс 3
Налаштування профілю аграрія - мобільний інтерфейс 4
Налаштування профілю аграрія - мобільний інтерфейс 5

Інтерфейс перевізника

Створено окремий кабінет для водіїв вантажівок та логістичних компаній (перевізників). Водії можуть переглядати активні заявки ферм у радіусі маршруту, пропонувати свою вартість перевезення (торги за замовлення), будувати GPS-маршрути до пунктів завантаження та вести історію виконаних рейсів.

Інтерфейс перевізника - скріншот проєкту 1

Реєстрація водія

Спроєктували спеціалізований онбординг для водіїв вантажівок і зерновозів. Окрім стандартної верифікації за номером телефону та через «Дія.Підпис», водій вказує технічні параметри автотранспорту: марку тягача, вантажопідйомність, тип кузова та номерний знак. Завершується реєстрація встановленням персонального 4-значного PIN-коду для швидкого та безпечного входу в рейсовий кабінет.

Реєстрація водія - мобільний інтерфейс 1
Реєстрація водія - мобільний інтерфейс 2
Реєстрація водія - мобільний інтерфейс 3
Реєстрація водія - мобільний інтерфейс 4
Реєстрація водія - мобільний інтерфейс 5
Реєстрація водія - мобільний інтерфейс 6
Реєстрація водія - мобільний інтерфейс 7

Каталог ферм і заявок

Створили інтерактивну карту та стрічку заявок від фермерських господарств із можливістю гнучкого налаштування радіуса пошуку до 180 км. Водії можуть фільтрувати замовлення за конкретними агрокультурами, дистанцією та ціною перевезення за тонну. Кожна картка заявки містить точний тоннаж, координати завантаження та планові терміни доставки врожаю до зерносховищ.

Каталог ферм і заявок - мобільний інтерфейс 1
Каталог ферм і заявок - мобільний інтерфейс 2
Каталог ферм і заявок - мобільний інтерфейс 3
Каталог ферм і заявок - мобільний інтерфейс 4
Каталог ферм і заявок - мобільний інтерфейс 5

Управління рейсами та цінами

Гнучкий функціонал торгів: водій може погодитися на запропоновану ціну або виставити зустрічну вартість за тонну. Після підтвердження замовлення доступний покроковий трекінг етапів рейсу.

Управління рейсами та цінами - мобільний інтерфейс 1
Управління рейсами та цінами - мобільний інтерфейс 2
Управління рейсами та цінами - мобільний інтерфейс 3
Управління рейсами та цінами - мобільний інтерфейс 4
Управління рейсами та цінами - мобільний інтерфейс 5
Управління рейсами та цінами - мобільний інтерфейс 6

Історія та чати

Спроєктували інтерфейс робочої комунікації та обліку рейсів перевізника. Водій веде переговори з фермерами безпосередньо в чаті, де може миттєво підтвердити замовлення на визначену кількість машин і тонн. Вкладка історії рейсів забезпечує наскрізний моніторинг активних доставок на елеватори та зберігає детальний архів виконаних перевезень із контактами контрагентів.

Історія та чати - мобільний інтерфейс 1
Історія та чати - мобільний інтерфейс 2
Історія та чати - мобільний інтерфейс 3
Історія та чати - мобільний інтерфейс 4
Історія та чати - мобільний інтерфейс 5

Персональні дані

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

Персональні дані - мобільний інтерфейс 1
Персональні дані - мобільний інтерфейс 2
Персональні дані - мобільний інтерфейс 3
Персональні дані - мобільний інтерфейс 4
Персональні дані - мобільний інтерфейс 5