Як полегшити життя 60 000 мешканців, адміністрації автоматизувати роботу та контролювати більшість життєвих факторів управляючої компанії в одному сервісі.
Мобільні застосунки є невід’ємною частиною життя людей, тому не дивно, що ця ніша є однією з найбільших на цифровому ринку технологій. Кожна компанія намагається зробити свій застосунок, щоб покращити комунікацію між існуючими клієнтами та залучити нових.
Дизайн і користувацький досвід відіграє надзвичайно важливу роль в цьому процесі. Користувацький досвід (UX) робить логічним та зручним користування, а дизайн (UI) візуально підказує і посилює сприйняття, дає естетичне задоволення від користування.
В цій статті ми розберемо і розповімо про реальний кейс та етапи роботи над ним.
Про Проєкт
Уявіть собі одного з найбільших забудовників Києва. У трьох комплексах 60 000 мешканців, в кожного є питання, що стосуються ЖК. До кожного приходять друзі чи приїжджають автомобілі. В одному застосунку ми об’єднали всі найбільш необхідні сервіси:
- Авторизуватися і підтвердити своє проживання в одному із ЖК.
- Залишити заявку для управляючої компанії.
- Отримувати оголошення та сповіщення про всі роботи і активності як забудовника, так і ЖК, в якому проживає мешканець.
- Зручно оплачувати комунальні послуги, інтернет та стільниковий зв’язок. Автоматично отримувати показники лічильників та нагадування про оплату.
- Залишати заявки на пропуск гостя та дозвіл на в’їзд авто на територію комплексу.
- Переглядати камери відеоспостереження.
Ідея
Зробити єдиний застосунок для мешканців, щоб можна було керувати пропусками, викликати майстра чи попереджати про несправності, або ж оплачувати послуги своєї нерухомості і інших сервісів.
Задача
Розробити зручний та сучасний застосунок, використовуючи брендовий стиль KAN development. Об’єднати в одному пристрої функціональність, зручність та простоту користування. Більше уваги приділити UX/UI, дослідити поведінки користувача та сценарії користування сервісами застосунка.
Процес
Весь процес розробки поділявся на 4 етапи.
Замовником виступила компанія KAN, один з найбільших забудовників столиці.
- Збір інформації та вимог від клієнта. Бізнес: яка мета застосунку, аудиторія, хто має користуватися, вигода, та що в результаті має вийти, і як має себе окупити програма. Технічні: обговорення моментів функціональності, адміністрування та ведення звітності. Естетичні: підбір референсів, перегляд конкурентів, дослідження трендів.
- Розробка варфреймів. Це один з важливих моментів розробки застосунка, оскільки на цьому кроці розробляється функціональність і узгоджується не лише з клієнтом, а й з командою розробників, визначаються дедлайни, робиться естімація і аспекти реалізації. Цей етап можна назвати UX (користувацький досвід). Далі в статті більш докладніше опишемо роботу дизайнерів та рішення, що застосовувалися.
- UI або користувацький інтерфейс. Робота з рефами, з брендбуком та з попередньо розробленими варфреймами. На цьому етапі ми “малюємо”, “розфарбовуємо” і креативимо. Розробляємо стайлгайд, задаємо стилі, розробляємо дизайн системи і створюємо системи відступів.
- Розробка застосунка та його тестування. Виправлення багів.
UX design
Етап прототипу базувався на розробці Workflow (сценаріїв роботи юзера з додатком), пошуку та аналізу конкурентів. ПІсля чого було створено архітектуру сайту, що в свою чергу нам дало розуміння, як далі організовувати свою роботу. Прототипування складалося з 3-ох підходів:
- Розписання і визначення кількості екранів.
- Розписання та розставлення ієрархічної послідовності.
- Прототипування та виправлення на прототипах помилок і моментів, які не були враховані в попередніх двох пунктах.
Всі прототипи робилися в застосунку Figma, він дає досить обширні можливості в прототипуванні та дизайні.
Основною проблемою в розробці варфреймів є не заплутати користувача і не топтатися на місці самому. Все мало бути настільки просто і примітивно, що користування мало приносити задоволення і легкість. Тобто повинні бути зрозумілі категорії та вмісти розділів, контрастні кнопки, інпути та посилання. Всі елементи, що повторюються, мають залишатися на сталих та знайомих місцях, щоб було інтуїтивно зрозуміло.
На превеликий жаль, нашій команді не вдалося знайти подібного додатку з подібною структурою та функціональністю. Ми брали натхнення і користувалися гайдами, дизайнами з сервісів Pinterest, Behance та Dribbble, різними додатками по типу розумний дім та магазинами… Підсумовуючи: провели чималу роботу, щоб постаратися зробити зручно та функціонально.
По завершенню прототипу, всією командою дизайнерів, менеджерів та розробників йде обговорення можливостей реалізації та функціональної доцільності. Вносяться корективи, побажання, вислуховуються зауваження. Презентуємо прототип (клікабельний) і узгоджуємо з замовником. Переходимо до візуальної частини…
На даний момент мобільний додаток налічує більше 40 екранів.
UI design
Дотримання корпоративного стилю та кольорової гами відіграли ключову роль. Все мало бути строго, просто та інтуїтивно зрозуміло. Користуючись такими галереями як Pinterest, Dribbble та Behance, ми зібрали базу референсів, тобто прикладів, на основі чого розпочалася робота з візуальною складовою проєкту.
Основним кольором — білий, нейтральним — сірий, акцентний — синій. Додаткові кольори — чорний, блакитний, зелений та червоний. Цікавим і досить новим досвідом стала зміна режимів теми: темна — світла, що внесла деякі корективи у вигляд продукту.
Основний шрифт вибрали: Roboto. Визначили 7 шрифтових стилів, а саме: Headline – 24pt, Title – 20pt, Subheader – 16pt, Body(menu) – 14pt, Body – 14pt, Caption – 12pt, Description – 12pt.
Карта дизайн-систем крім кольору та шрифтів включала в себе: кнопки, компоненти, шаблонні елементи, іконки, форми, системи відступів та розмірів. Дизайн системі та UI kit дуже корисні для однотипності дизайну та розміщення елементів, що інколи так і хочуть порушити Style Guide. Щоб сайт чи программа виглядали одним цілим.
Тестування
Останнім та заключним етапом для дизайн-команди перед релізом є розробка та тестування. Ми його не розробляємо, але мусимо контролювати кінцевий вигляд додатка, швидко вносити корективи і не “гальмувати” процесс. Після чого здійснюється відкатка кожного екрана, тестування всіх функцій, виявлення багів та відображення правильної картинки на різних системах, пристроях та розширеннях.
Кейс на Beehance https://www.behance.net/gallery/92575407/Mobile-app-for-KAN
Ми на Beehance https://www.behance.net/svitsoft
Ігор Захаров
Design Team leader
