B Lunch – це онлайн сервіс замовлення корисних ланчів в офіси на тиждень від ресторану B Boutique. Для того, щоб сервіс був швидким, простим та юзер-френдлі, студія Other Land створила кошик у вигляді календаря, таймер, який працює до підтвердження замовлення, додали функціонал налаштування уподобань, а менеджерам дали можливість редагувати або скасовувати замовлення у разі необхідності. В студії розповіли про механіку роботи сервісу, концепцію візуального стилю майбутнього продукту та методи, які допомагають користувачу  інтуїтивно розуміти інтерфейс. 

Етап: Бриф

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

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

Коли приходить клієнт без конкретних вимог — ми починаємо роботу з UX дослідження та аналізу конкурентів. У проєкті на цьому етапі ми шукали відповіді на декілька основних важливих запитань:

1). Які продукти вже є на ринку України та світу?

Ми знайшли декілька схожих сервісів, але жоден з них навряд чи можна назвати еталоном зручності та простоти у використанні. Тому в процесі аналізу UX-частини сайтів ми перемикнулись на звичайні сервіси доставки їжі та продуктів.

2). Що ми можемо зробити краще за них?

Більша частина схожих сервісів в України приймають замовлення в незручній формі Excel таблиць — це хороший підхід для тестування ідеї, але незручний для компаній, адже потрібно витрачати забагато часу на оформлення замовлень. Тому наявність сайту, на якому всі співробітники можуть самостійно керувати своїми замовлення — вже полегшує роботу менеджерам компаній, що замовляють обіди, та є основною зручністю B Lunch.

3). До чого користувачі звикли?

Один з найзнайоміших патернів сайтів замовлення їжі — список страв в лівій частині сторінки та відкритий кошик в правій. Ми вирішили використовувати такий підхід під час роботи над прототипом, завдяки цьому користувачі завжди будуть бачити «що» та «коли» вони вже собі замовили. Щодо відображення даних про співробітників та історії замовлень — звичайний табличний вигляд, який допомагає швидко сканувати та шукати інформацію.

Користувачі та механіка

Сам продукт об’єднує у собі три групи користувачів: менеджери компаній-замовників, співробітники, які будуть власне споживати замовлення та менеджери ресторану, який це замовлення приймає. Необхідно було думати про кожну групу та пам’ятати, що хоча в них і різні задачі — вони перетинаються.

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

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

Ми не впливали на інтерфейсну частину менеджерів ресторану, тому що вони отримують всі замовлення в системі iiko, але про це потрібно було пам’ятати, щоб зрозуміти які дані з сервісу, що розробляли в Other Land, були б корисні менеджерам компаній-замовників.

Етап: Прототип 

У цьому проєкті прототип допоміг детально зрозуміти, як буде працювати сервіс та в яких місцях можна покращити зручність та швидкість виконання основних користувацьких завдань. Наприклад, є один важливий функціонал, який перетинається і для співробітників, і менеджерів компанії — доступ до редагування замовлення. Співробітники можуть редагувати тільки свої замовлення, а менеджер з боку компанії — замовлення всіх співробітників. Для зручності, інформативності та зменшення кількості кліків та екранів ми додали інформацію щодо майбутніх замовлень у таблицю менеджерів — це значно прискорить «сканування» аби визначити, хто зі співробітників забув зробити замовлення на найближчий робочий день?

Концепція візуального стилю

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

Зрештою, дизайн вийшов дуже легким, свіжим та з акцентом на головному — стравах. Крім того, блакитний колір був візитною карткою ресторану клієнтів.

Деталі інтерфейсу та сервісу

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

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

На сторінці «Однієї страви» показали тарілки у збільшеному вигляді та додали можливість перемикатися між стравами для швидкого перегляду, детального ознайомлення та замовлення.

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

Менеджерам (-кам) компаній дали можливість виставляти співробітникам грошові ліміти та редагувати їх замовлення, якщо хтось забув про свою відпустку та замовив страви на ці дні. Також у компанію часто можуть приходити гості, які технічно не є співробітниками, але можуть замовляти обіди. Для вирішення цієї задачі ми додали нову роль «Гість», щоб менеджери(-ки) компанії могли зробити замовлення в обмеженнях бюджету, який встановила собі компанія.

Також менеджери (-ки) мають змогу експортувати звіти по витратах за кастомізований проміжок часу.

Після закінчення дизайну сайту доставки ланчів ми оптимізували всі чинні рішення для доставки їжі у котеджному містечку Золоче від локального ресторану Z bistro. Окрім фірмових страв з ресторану, можна замовити заморожені продукти або набори для приготування стейку та десерти з ресторану, які ми винесли в категорії меню.

Наш мем проєкту — медовик. Клієнти дуже часто його згадували як «найкращий та легендарний десерт у світі» та після закінчення проєкту запросили нас скуштувати його. Він і дійсно дуже смачний.

Наступні кроки розвитку сервісу

Наразі розробку проєкту завершено, ведеться тестування на співробітниках компанії B Boutique bar. Щодня на сайті розміщується близько 70 замовлень.

Після запуску проєкту додали модифікацію страв. Наприклад, можна додати ще більше сиру в улюблену пасту.

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

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.