List.in.ua для HoReCa — цифрове меню та система замовлень
Послуги: UX/UI-дизайн, розробка платформи, адаптивна верстка
Зміна асортименту, цін або складу позицій потребує повторного друку, а гість не завжди отримує актуальну інформацію про доступні страви й напої.
Відвідувачеві доводиться чекати, поки офіціант принесе меню, прийме замовлення та повернеться для уточнень або оплати.
Кожна точка має власний асортимент, ціни, адресу й графік роботи, але власникові незручно підтримувати кілька окремих систем.
Страви, напої та супутні товари потрібно розділити на категорії й підкатегорії так, щоб гість швидко знаходив потрібну позицію навіть у широкому асортименті.
Гість переходить до цифрової сторінки закладу зі смартфона й одразу бачить доступні категорії, позиції, ціни та основну інформацію.
Основне меню складається з великих напрямів, а всередині кожного передбачені окремі категорії для страв, напоїв та інших товарів.
У картці показуються назва, опис, фотографія, ціна, вага або об’єм, після чого позицію можна додати до замовлення.
Відвідувач формує кошик, перевіряє вибрані позиції, оформлює замовлення й переходить до оплати в межах одного інтерфейсу.
Кафе, бар або ресторан отримує власне меню, адресу, контакти, графік роботи та посилання на соціальні мережі.
Власник може об’єднати кілька закладів у спільній системі та керувати їхніми меню й даними через окремі кабінети без створення незалежних платформ.
Темна основа та помаранчеві акценти формують характер інтерфейсу
- Чорний фон об’єднує всі екрани
- Білий текст виділяє основну інформацію
- Помаранчевий колір позначає активні елементи
- Сірі лінії розділяють рівні контенту
Темна палітра відповідає атмосфері бару й водночас створює контрастне тло для назв, цін і фотографій. Помаранчевий колір використаний вибірково: він показує активний розділ, вартість позиції та кнопки основних дій. Другорядні описи виконані приглушеним сірим текстом і не конкурують із головною інформацією.
Основні розділи утворюють перший рівень навігації
- Меню, пиво та закуски, бар, безалкогольні напої та сигарети винесені в окремі вкладки
- Активний розділ підкреслений помаранчевою лінією
- Назви доповнені тематичними піктограмами
- Вкладки зібрані в одному горизонтальному рядку
Верхня навігація розділяє великий асортимент за типами продукції ще до перегляду конкретних позицій. Користувач одразу бачить, у якій частині меню перебуває, і переходить між основними напрямами без повернення на окремий стартовий екран.
Вкладені категорії уточнюють вибір усередині розділу
- Кожна категорія оформлена окремою кнопкою
- Активна кнопка відрізняється фоном
- Довгий перелік продовжується горизонтально
- Назва відкритої категорії повторюється над картками
Дані в картці позиції читаються в заданому порядку
-
Назва відкриває картку
Великий білий текст одразу показує конкретну страву, напій або товар.
-
Опис формує другий рівень
Склад або коротка характеристика подані приглушеним кольором під назвою.
-
Ціна та порція розташовані поруч
Вартість виділена помаранчевим, а вага чи об’єм показані окремим показником.
-
Фото й додавання не змішуються з текстом
Фотографію та кнопку додавання винесли у праву частину картки, щоб назва й опис залишалися окремим інформаційним блоком.
Системні елементи розподілені між верхньою та нижньою зонами
- Пошук доступний у верхній панелі Окрема кнопка відкриває пошук позицій без переходу до іншого розділу.
- Додаткове меню винесене в окрему кнопку Службові пункти не перевантажують основний рядок категорій.
- Розділ «Меню» повертає до каталогу Нижня панель відкриває перелік страв, напоїв та інших позицій закладу.
- Розділ «Замовлення» показує вибрані позиції Гість переходить до сформованого замовлення з тієї самої нижньої панелі.
Верхню частину інтерфейсу віддали пошуку та додатковим інструментам, нижню — переходу між каталогом і замовленням. Центральна частина екрана залишається для перегляду позицій.
Дані про заклад відкриваються в окремій інформаційній панелі
-
Логотип і назва формують заголовок
Поруч одразу показана адреса конкретного закладу.
-
Контакти винесені в самостійну секцію
Номер телефону виділений великим текстом і доповнений кнопкою дзвінка.
-
Графік поєднаний зі статусом роботи
Зелена мітка показує, що заклад відкритий, а поруч зазначений часовий проміжок.
-
Соціальні мережі завершують панель
Посилання оформлені піктограмами й відокремлені від основних контактних даних.
Різне наповнення не порушує єдиний ритм сторінки
- Страви вміщують розгорнутий склад Довший опис переноситься на кілька рядків і залишається в межах картки.
- Напоям достатньо короткої характеристики Назва, об’єм і ціна утворюють компактний інформаційний блок.
- Товари можуть відображатися без опису Позиції на кшталт сигарет залишаються частиною тієї самої сітки навіть із мінімальною кількістю даних.
- Картки зберігають спільне вирівнювання Різна довжина назв і описів не змінює загальний порядок перегляду списку.
Дизайн підтримує різний обсяг інформації: від страви з фотографією та складом до товару, для якого достатньо назви, ціни й кількості. Відступи, вирівнювання та послідовність карток залишаються однаковими.
Після сканування гість одразу переходить до актуального асортименту потрібної точки мережі.
Страви, пиво та закуски, бар, безалкогольні напої й сигарети розподілені між самостійними напрямами.
Спочатку відвідувач обирає великий розділ, а потім уточнює вибір за допомогою вкладених категорій.
Нижня панель перемикає користувача між переглядом меню та списком позицій, доданих до замовлення.
В окремій панелі зібрані контакти, адреса, години роботи та посилання на соціальні мережі.
Система відображає розгорнуті позиції з фотографією та складом, компактні картки й товари з мінімальним набором даних.
// Від QR-коду до керування мережею закладів
List.in.ua — спільна платформа для кількох цифрових продуктів. У цьому кейсі на її основі створили рішення для HoReCa: цифрове меню, замовлення й оплату для кафе, барів і ресторанів. «Бар Бос» показує роботу цього продукту для конкретного закладу, тоді як онлайн-запис із календарем і клієнтською базою є окремим напрямом List.in.ua.
Платформа складається з публічного інтерфейсу для гостей і кабінетів для керування закладами. Відвідувач працює з меню, кошиком і замовленням, а власник або адміністратор контролює наповнення кожної точки через окрему частину системи.
Архітектура не прив’язана до одного кафе. У спільній платформі можна об’єднати кілька закладів мережі, залишивши для кожного власне меню, ціни, адресу, контакти та графік роботи. Власникові не потрібно створювати й підтримувати незалежний сайт для кожної точки.
Взаємодія гостя починається зі сканування QR-коду. Після переходу він відкриває меню потрібного закладу, обирає основний розділ, уточнює категорію та переглядає доступні позиції. Страви й напої додаються до замовлення, після чого користувач перевіряє вибір і переходить до оформлення та оплати.
Через кабінет заклад керує структурою меню, назвами й описами позицій, фотографіями, цінами, вагою або об’ємом, контактами та графіком. Оновлена інформація з’являється в цифровому меню без повторного друку паперових матеріалів.
Один технологічний фундамент підходить і невеликому кафе, і мережі з кількох різних закладів. Кожна точка зберігає власне наповнення, а гість отримує однакову логіку перегляду меню та оформлення замовлення незалежно від вибраного ресторану чи бару.
// Рішення для цифрового меню та керування закладами
Замість сотень пунктів меню і зайвих полів — тільки те що потрібно вашій команді. Кожна роль бачить свій інтерфейс, масові дії виконуються за кліки, а не за хвилини
Кастомний Telegram-бот де менеджери отримують нові замовлення і можуть їх обробляти прямо в Telegram, а клієнти відстежують статус і доставку в зручному каналі
Розумний пошук з виправленням помилок, синонімами, морфологією і автопідказками — покупець знаходить потрібний товар за 2–3 секунди замість блукання по каталогу
