ВАЖЛИВО: ключова вимога до дизайну — стиль неоморфізм (Neumorphism / Soft UI).

Інтерфейс повинен відповідати наданим прикладам: світлий фон, м’які об’ємні картки, округлені елементи, делікатні зовнішні та внутрішні тіні, візуально підняті кнопки й акуратні кольорові акценти. Не потрібен плоский Material Design або стандартний корпоративний dashboard.

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

Бажано, щоб учасник мав досвід роботи з неоморфізмом.

Використання ШІ дозволяється як допоміжного інструменту. Однак фінальний результат має бути переданий у редагованому форматі Figma або у вигляді повноцінного HTML-прототипу з вихідними файлами. Статичні зображення без можливості редагування не приймаються.

Опишіть проект, для якого потрібно розробити дизайн інтерфейсу:  

Потрібно розробити сучасний UX/UI-дизайн особистого кабінету клієнта охоронної компанії — клієнтської частини CRM системи. Це адаптивний вебінтерфейс, у якому клієнт бачить свої об’єкти охорони, заявки на підключення, договори, фінансовий стан, рахунки, акти та історію операцій. Завдання — зробити велику кількість інформації зрозумілою, візуально чистою та зручною як на комп’ютері, так і на смартфоні.

Чи пов'язаний проект з вашою компанією:  

Так. Це клієнтська частина власної CRM-системи


Рід діяльності компанії:  

Надання комплексних охоронних послуг для приватних осіб і бізнесу: пультова та фізична охорона, монтаж і технічне обслуговування охоронних систем, пожежна безпека, відеоспостереження та реагування на тривожні події.

Описання продуктів/послуг:  

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

Канали розповсюдження та географія продажів:  

Прямі продажі через менеджерів, сайт, телефонні звернення та цифрові канали. Обслуговування клієнтів здійснюється через вебкабінет, електронну пошту, SMS і Telegram.

Основний ринок — Україна.

Портрет цільової аудиторії:  

Приватні особи, фізичні особи-підприємці та юридичні особи, які користуються охоронними послугами.

Існуюче чи ймовірне позиціонування:  

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

Ключова ідея: «Уся інформація про охорону ваших об’єктів — в одному кабінеті».

Основні конкурентні переваги компанії/продукту/послуги:  

  • Усі дані про клієнта, об’єкти, договори, заявки та фінанси об’єднані в одній системі.
  • Підтримка як приватних, так і корпоративних клієнтів із великою кількістю об’єктів.
  • Деталізований фінансовий облік за об’єктами та договорами.
  • Доступ до рахунків, актів, договорів та інших файлів без звернення до менеджера.
  • Клієнтський вебкабінет і взаємодія через Telegram.
  • Галузева спеціалізація системи на процесах охоронної компанії.
  • Можливість адаптувати назву, логотип і кольори інтерфейсу для різних компаній групи.

Цільова аудиторія проекту – хто та для яких цілей буде ним користуватися:  

Зовнішні клієнти охоронної компанії.

Користувач заходить до кабінету, щоб:

  • швидко перевірити загальний баланс і наявність заборгованості;
  • побачити стан своїх об’єктів;
  • перевірити статус заявки на підключення;
  • переглянути умови та статус договору;
  • знайти потрібний рахунок або акт;
  • переглянути історію нарахувань і оплат;
  • завантажити договір, рахунок, акт або інший документ;

Основні функції інтерфейсу:  

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

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

Короткий сценарій взаємодій інтерфейсу з користувачем:  

  • Клієнт авторизується за підтвердженим номером телефону або електронною поштою.
  • Потрапляє на головну сторінку та одразу бачить баланс, борг або переплату, кількість активних об’єктів і останні документи.
  • За потреби переходить до конкретного розділу: «Об’єкти», «Заявки», «Договори» або «Фінанси».
  • Використовує пошук, фільтри та сортування, щоб знайти потрібний запис.
  • Відкриває детальну картку об’єкта, заявки або договору.
  • Переглядає пов’язані дані та завантажує необхідний документ.
  • На мобільному пристрої отримує той самий функціонал у форматі компактних карток.

Чи потрібно використовувати візуальні образи, персонажі в дизайні інтерфейсу? Опишіть які саме.  

Ні

Мова інтерфейсу:  

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

Чи є у вас сайт та фірмовий стиль?  

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

Чи повинен бути інтерфейс у фірмовому стилі?  

Так. Обов’язковий візуальний стиль — сучасний неоморфізм відповідно до наданих прикладів.

Які кольори мають бути головними та додатковими в дизайні інтерфейсу:  

Основний колір — #27333F.

Акцентний колір — #EF7D00.

У CRM передбачена можливість брендування інтерфейсу під власні кольори різних компаній. Бажано побудувати дизайн-систему так, щоб основні та акцентні кольори можна було змінювати без порушення цілісності дизайну.


Додаткова інформація.

На знімках у додатках — умовний приклад контенту, який буде. А також — приблизна стилістика.
Додатки4