Мобильное приложение «Умный двор» для Lanta

Разработать интерфейс мобильного приложения для операционных систем iOS и Android.

Главные функции приложения:

• управление домофоном и шлагбаумом с телефона;
• просмотр видео с любой из камер во дворе;
• просмотр архива каждой камеры и возможность скачать необходимый фрагмент.

Мы провели цикл встреч с клиентом, разобрались с его бизнес-процессами, выяснили, как именно проходит подключение новых абонентов и работа с текущими клиентами, какие технические ограничения есть на уровне работы с данными.

Составили информационную архитектуру и первые прототипы. На этом этапе появились дополнительные функции:

• оплата тарифов;
• добавление и подтверждение адреса;
• гостевой доступ;
• оформление заявки;
• оплата и чат с техподдержкой.

При разработке дизайн-концепции мы исходили из информационного контекста, который окружает типичного представителя нашей целевой аудитории. А это «Сбербанк Онлайн», «Авито», «Яндекс.Такси», WhatsApp. Разработанный интерфейс должен легко вписываться в привычную для пользователя картинку, быть простым лаконичным и понятным с первого взгляда.

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

После установки приложения коротко рассказываем об основных функциях.

Чтобы получить доступ к услуге, нужно верифицировать свой адрес. Это значит, что адрес и личность абонента должны совпадать с тем, что указаны в договоре на интернет.

При первом запуске происходит запрос на верификацию телефона, пользователь вводит номер телефона, получает СМС и вставляет (автоматически) проверочный код.

В этот момент в базу данных отправляется полученный телефон для определения действующего клиента LanTa.

Далее возможны следующие варианты:

— Если номер телефона привязан к договору, то пользователь сразу может войти в приложение.

— Если телефон не указан или номер телефона не привязан к договору, но договор есть, предлагается войти в аккаунт с помощью логина и пароля от личного кабинета.

— Если номер телефона не привязан и договора нет, то пользователю предлагается подать заявку для заключения договора. Договор можно заключить в офисе компании или заказать курьера. Активировать его можно с помощью QR-кода.

— Если у пользователя «Ланта» подключен интернет и есть договор, но в доме еще нет услуги «Умный домофон», мы предлагаем это исправить и подать заявку на подключение новой услуги.

Авторизованному пользователю в приложении доступно управление всеми услугами:

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

• Гость звонит в домофон.
• Звонок приходит в приложение.
• В окне вызова мы видим фото с наружной камеры домофона.
• Мы можем открыть, отказать, понаблюдать за человеком через функцию «глазок» или ответить голосом.

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

Чтобы пользователь сразу понимал, кто за дверью, мы решили использовать принцип Live Photo — короткие видео по 2–3 секунды. В отличие от потоковых видео они смогут загрузиться мгновенно и не зависнут, если у пользователя слабый мобильный интернет.

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

Приложение заменяет все ключи и пульт управления для ворот. Пользоваться телефоном гораздо удобнее, а главное, его почти невозможно забыть. Каждая кнопка на экране важна — показывает состояние адресов и позволяет управлять ими одним нажатием. Быстрый доступ также возможен с удобного виджета.

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

Чтобы узнать, что происходило в ваше отсутствие, нужно зайти в архив, выбрать дату:

А затем временной промежуток:

Вуаля! Нужный фрагмент на телефоне — не пришлось выходить из дома, говорить с консьержкой или охранником.

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

Оплачивать любые услуги LanTa можно в этом же приложении.

Для того чтобы коммуникация с клиентом проходила оперативно и централизованно, мы совместили чат с техподдержкой и входящие уведомления:

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

Получилось шестьдесят отрисованных экранов под две операционки. Финальным этапом работы для нас было создание UI-кита, сбор окончательных дизайн-макетов и сопроводительной документации. Мы передали разработчикам проект, осуществили авторский надзор.

Заказчик посвятил нашу команду во все тонкости и нюансы бизнес-процессов своей компании и оперативно давал обратную связь.

Впервые проект анонсировали на Everfest — нашем ежегодном дизайн-фестивале. Александр Васильев, генеральный директор LanTa, и Вадим Михалин, руководитель проекта с нашей стороны, сделали доклад о том, как мы работали над проектом, и показали опытный образец.

Александр не собирается останавливаться на достигнутом: в его планах — развить концепцию до настоящего «Умного города», добиться интеграции ЖКХ и подключить к сотрудничеству другие компании, и мы будем рады помочь ему в этом.

Инновации настигнут абонентов LanTa совсем скоро. Умные домофоны ждут своего часа. Для жителей замена домофона не отразится на обычной абонентской плате, а приложение устанавливается бесплатно.

Спасибо нашему клиенту за возможность поработать над интересным проектом. Наша команда продолжает развивать приложение.

Посмотреть на интерфейсы приложения можно в нашем кейсе на Behance.

За разработку отвечала команда Mad Brains. Ребята — профессионалы в мобильной разработке, поэтому мы не сомневались в том, что они достойно реализуют интерфейсы приложения. Об их работе можно узнать здесь.