Design Всі статті

Додаток для мешканців ЖК (Файна Таун, Tetris Hall, Respublika) забудовника KAN development

Ігор Захаров
Ігор Захаров Design Team leader
28.02.2020
833
0

Як полегшити життя 60 000 мешканців, адміністрації автоматизувати роботу та контролювати більшість життєвих факторів управляючої компанії в одному сервісі.

Додаток для мешканців ЖК від забудовника KAN development фото 1

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

Дизайн і користувацький досвід відіграє надзвичайно важливу роль в цьому процесі. Користувацький досвід (UX) робить логічним та зручним користування, а дизайн (UI) візуально підказує і посилює сприйняття, дає естетичне задоволення від користування.

В цій статті ми розберемо і розповімо про реальний кейс та етапи роботи над ним.

Про Проєкт

Уявіть собі одного з найбільших забудовників Києва. У трьох комплексах 60 000 мешканців, в кожного є питання, що стосуються ЖК. До кожного приходять друзі чи приїжджають автомобілі. В одному застосунку ми об’єднали всі найбільш необхідні сервіси:

  • Авторизуватися і підтвердити своє проживання в одному із ЖК.
  • Залишити заявку для управляючої компанії.
  • Отримувати оголошення та сповіщення про всі роботи і активності як забудовника, так і ЖК, в якому проживає мешканець.
  • Зручно оплачувати комунальні послуги, інтернет та стільниковий зв’язок. Автоматично отримувати показники лічильників та нагадування про оплату.
  • Залишати заявки на пропуск гостя та дозвіл на в’їзд авто на територію комплексу.
  • Переглядати камери відеоспостереження.
Додаток для мешканців ЖК від забудовника KAN development фото 2

Ідея

Зробити єдиний застосунок для мешканців, щоб можна було керувати пропусками, викликати майстра чи попереджати про несправності, або ж оплачувати послуги своєї нерухомості і інших сервісів.

Задача

Розробити зручний та сучасний застосунок, використовуючи брендовий стиль KAN development. Об’єднати в одному пристрої функціональність, зручність та простоту користування. Більше уваги приділити UX/UI, дослідити поведінки користувача та сценарії користування сервісами застосунка.

Процес

Весь процес розробки поділявся на 4 етапи.
Замовником виступила компанія KAN, один з найбільших забудовників столиці.

  1. Збір інформації та вимог від клієнта. Бізнес: яка мета застосунку, аудиторія, хто має користуватися, вигода, та що в результаті має вийти, і як має себе окупити програма. Технічні: обговорення моментів функціональності, адміністрування та ведення звітності. Естетичні: підбір референсів, перегляд конкурентів, дослідження трендів. 
  2. Розробка варфреймів. Це один з важливих моментів розробки застосунка, оскільки на цьому кроці розробляється функціональність і узгоджується не лише з клієнтом, а й з командою розробників, визначаються дедлайни, робиться естімація і аспекти реалізації. Цей етап можна назвати UX (користувацький досвід). Далі в статті більш докладніше опишемо роботу дизайнерів та рішення, що застосовувалися.  
  3. UI або користувацький інтерфейс. Робота з рефами, з брендбуком та з попередньо розробленими варфреймами. На цьому етапі ми “малюємо”, “розфарбовуємо” і креативимо. Розробляємо стайлгайд, задаємо стилі, розробляємо дизайн системи і створюємо системи відступів.
  4. Розробка застосунка та його тестування. Виправлення багів.

UX design

Етап прототипу базувався на розробці Workflow (сценаріїв роботи юзера з додатком), пошуку та аналізу конкурентів. ПІсля чого було створено архітектуру сайту, що в свою чергу нам дало розуміння, як далі організовувати свою роботу. Прототипування складалося з 3-ох підходів:

  • Розписання і визначення кількості екранів.
  • Розписання та розставлення ієрархічної послідовності.
  • Прототипування та виправлення на прототипах помилок і моментів, які не були враховані в попередніх двох пунктах.

Всі прототипи робилися в застосунку Figma, він дає досить обширні можливості в прототипуванні та дизайні.

Додаток для мешканців ЖК від забудовника KAN development фото 3

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

На превеликий жаль, нашій команді не вдалося знайти подібного додатку з подібною структурою та функціональністю. Ми брали натхнення і користувалися гайдами, дизайнами з сервісів Pinterest, Behance та Dribbble, різними додатками по типу розумний дім та магазинами… Підсумовуючи: провели чималу роботу, щоб постаратися зробити зручно та функціонально.

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

На даний момент мобільний додаток налічує більше 40 екранів.

UI design

Дотримання корпоративного стилю та кольорової гами відіграли ключову роль. Все мало бути строго, просто та інтуїтивно зрозуміло. Користуючись такими галереями як Pinterest, Dribbble та Behance, ми зібрали базу референсів, тобто прикладів, на основі чого розпочалася робота з візуальною складовою проєкту.

Додаток для мешканців ЖК від забудовника KAN development фото 4


Основним кольором — білий, нейтральним — сірий, акцентний — синій. Додаткові кольори — чорний, блакитний, зелений та червоний. Цікавим і досить новим досвідом стала зміна режимів теми: темна — світла, що внесла деякі корективи у вигляд продукту.

Основний шрифт вибрали: 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

Summary
Додаток для мешканців ЖК (Файна Таун, Tetris Hall, Respublica) забудовника KAN development.
Article Name
Додаток для мешканців ЖК (Файна Таун, Tetris Hall, Respublica) забудовника KAN development.
Author
Publisher Name
Svitsoft
Publisher Logo
Design
Проектування і дизайн сайту автоскла
Design
Проектування і дизайн сайту автоскла
Вам буде цікаво
Комментарі
0 записів

Висловіть свою думку

Це поле має бути заповнене!
Це поле має бути заповнене!
Це поле має бути заповнене!
Це поле має бути заповнене!