Завдання – сайт, де голодна людина за хвилину знаходить страву й оформлює доставку. Ми почали з UX-прототипу: структура меню, шлях від головної до «Дякуємо за замовлення», мобільні сценарії. Потім намалювали UI в темній японській стилістиці та UI-кіт, а далі зібрали сайт: Laravel на бекенді, Vue.js для динаміки кошика, фільтрів і оформлення.
Стиль
Темна шапка з фото страв, білі картки на світло-сірому тлі й один яскравий червоний акцент, як сонце на логотипі. Заголовки набрані вузьким RF Rufo великими літерами, текст – Gerbera.
Мобільна версія
Для мобільних намальовано всі сторінки: іконки меню гортаються горизонтально, кошик – плаваюча кнопка з лічильником, а в картці страви ціна й «У кошик» закріплені внизу екрана.
Завдання
- 01Швидко знайти стравуПонад десять розділів меню треба було показати так, щоб потрібний був під рукою з будь-якої сторінки.
- 02Короткий шлях до замовленняДодавання в кошик з будь-якої картки, кошик без переходу на окрему сторінку, замовлення в один клік.
- 03Середній чекПідказки «Разом смачніше», «Хіти продажу», допи до замовлення та подарунки на вибір під час оформлення.
- 04Прототип до дизайнуСпершу узгодити структуру й сценарії в UX-прототипі, потім малювати UI та UI-кіт.
- 05Надійна розробкаЗібрати сайт на Laravel і Vue.js, щоб ним було зручно керувати й легко розвивати.
Ключові рішення
Навігація меню
Іконки розділів (дитяче, піца, супи, гаряче, роли, салати, суші, вок, закуски, веган, десерти) стоять у шапці на кожній сторінці.
Каталог з фільтром
Плитка або список, фільтр і сортування, мітки «New» та «Гостре», ціна зі знижкою й кнопка «У кошик» у картці.
Картка страви
Вага, калорії, білки, жири й вуглеводи, інгредієнти з іконками, вибір допу до замовлення, відгуки з оцінкою та добірки схожих страв.
Кошик-панель
Кошик виїжджає праворуч поверх каталогу: можна змінити кількість, видалити позицію й одразу перейти до оформлення.
Оформлення замовлення
Промокод, вибір подарунка, замовлення в один клік, адреса з коментарем для кур’єра, дата й час, оплата карткою на сайті або кур’єру, решта, кількість персон і підсумок з пакуванням.
Сторінка «Про нас»
Історія компанії на таймлайні, принципи сервісу, блок дитячого меню та банер безкоштовної доставки по Харкову.
Стек
Хочете такий самий проєкт?
Опишіть завдання – протягом робочого дня відповімо із запитаннями та попередньою оцінкою термінів.