Design Все статьи

Приложение для жителей ЖК (Файна Таун, Tetris Hall, Respublika) застройщика KAN development

Ігор Захаров
Игорь Захаров Design Team leader
28.02.2020
277
0

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

Приложение для жителей ЖК от застройщика KAN development фото 1

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

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

В этой статье мы разберем и расскажем о реальном кейсе и этапы работы над ним.

О Проекте

Представьте себе одного из крупнейших застройщиков Киева. В трех комплексах 60000 жителей, у каждого есть вопросы, касающиеся ЖК. К каждому приходят друзья или приезжают автомобили. В одном приложении мы объединили все самые необходимые сервисы:

— Авторизироваться и подтвердить свое проживание в одном из ЖК;

— Оставить заявку управляющей компании;

— Получать объявления и оповещения о всех работах и активностях как застройщика, так и ЖК в котором проживает житель;

— Удобно оплачивать коммунальные услуги, интернет и сотовую связь. Автоматически получать показатели счетчиков, и напоминание об оплате.

— Оставлять заявки на пропуск гостя и разрешение на въезд авто на территорию комплекса.

— Просматривать камеры видеонаблюдения.

Приложение для жителей ЖК от застройщика KAN development фото 2

Идея

Сделать единое приложение для жителей, чтобы можно было управлять пропусками, вызвать мастера или предупреждать о неисправности или оплачивать услуги своей недвижимости так и других сервисов.

Задача

Разработать удобное и современное приложение, используя брендовый стиль KAN development. Объединить в одном устройстве функциональность, удобство и простоту пользования. Больше внимания уделить UX/UI, исследовать поведения пользователя и сценарии использования сервисами приложений.

Процесс

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

— Сбор информации и требований от клиента: Бизнес: Какова цель приложения, аудитория, кто должен пользоваться, выгода и что в результате должно получиться и как должна себя окупить программа; Технические: Обсуждение моментов функциональности, администрирования и введение отчетности; Эстетические: Подбор референсов, просмотр конкурентов, исследования трендов.

— Разработка варфреймов. Это один из важных моментов разработки приложений, поскольку на этом этапе разрабатывается функциональность и согласуется не только с клиентом, но и с командой разработчиков, определяются дедлайны, делается естимация и аспекты реализации. Этот этап можно назвать UX (пользовательский опыт). Далее в статье более подробно опишем работу дизайнеров и решения, которые применялись.

— Разработка приложения и его тестирования. Исправление багов.

— UI или пользовательский интерфейс. Работа с рефами, с брендбуком, и с предварительно разработанными варфреймами. На этом этапе мы «рисуем», «раскрашиваем» и креативим. Разрабатываем стайлгайд, задаем стили, разрабатываем дизайн системы и создаем системы отступов.

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 записей

Выскажите свое мнение

Это поле должно быть заполнено!
Это поле должно быть заполнено!
Это поле должно быть заполнено!
Это поле должно быть заполнено!