Собака
Павлова

Дизайн сложных интерфейсов

Электронный город - логотип

новотелеком — мой дом

2023

объединение двух мобильных приложений

«Электронный город» — интернет-провайдер в Новосибирске. Помимо услуг доступа в интернет, компания предлагает розничным клиентам домашнее видеонаблюдение и «умные» домофоны. Раньше для этих продуктов было отдельное мобильное приложение, но компания решила объединить все услуги в одном.

Собака Павлова || Объединение двух мобильных приложений

задача проекта

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

результат

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

аналитика — треть проекта

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

Собака Павлова || Пользовательские сценарии. Аналитика.

> 150 экранов

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

Собака Павлова || Регистрация в мобильном приложенииСобака Павлова || Вход в мобильное приложение по QR-коду.Собака Павлова || Эдектронный город. Личный кабинет. Собака Павлова || Электронный город. Личный кабинет. Собака Павлова || Электронный город. Звонок с домофона. Собака Павлова || Электронный город. Настройки в личном кабинете. Собака Павлова || Электронный город. Личный кабинет. Настройки. Собака Павлова || Электронный город. Личный кабинет. Запись с камер. Собака Павлова || Электронный город. Личный кабинет. Запись с камер.

новое в приложении

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

Собака Павлова || Виджеты мобильного приложения Электронный город. Собака Павлова || Виджеты мобильного приложения Электронный город. Собака Павлова || Виджеты мобильного приложения Электронный город.

было — стало

1

На главном экране приложения поместились и камеры, и домофоны. 

Собака Павлова || Главная приложения. Добавили камеры и домофоны.
Собака Павлова || Электронный город. Отображение камер и домофонов.  Собака Павлова || Электронный город. Отображение камер и домофонов.

Стало

Собака Павлова || Электронный город. Отображение камер и домофонов. Собака Павлова || Электронный город. Отображение камер и домофонов.

2

Когда камер и домофонов много, пользователь сам решает, какие показывать на главном экране. Раньше таких настроек не было.

Было

3

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

Собака Павлова || Видеозвонок домофона. Мобильное приложение Электронный город. Собака Павлова || Видеозвонок домофона. Мобильное приложение Электронный город.
Собака Павлова ||Трансляция и архив. Мобильное приложение Электронный город. Собака Павлова || Трансляция и архив. Мобильное приложение Электронный город.

4

Мы объединили трансляцию и архив в один интерфейс.

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

5

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

Собака Павлова || Функция ограниченного доступа. Мобильное приложение Электронный город. Собака Павлова || Функция ограниченного доступа. Мобильное приложение Электронный город. Собака Павлова || Функция ограниченного доступа. Мобильное приложение Электронный город. Собака Павлова || Функция ограниченного доступа. Мобильное приложение Электронный город.
Собака Павлова || Виджеты мобильного приложения Мой дом Электронного города.

6

Открыть домофон и посмотреть видео с камеры теперь можно не входя в приложение — с помощью виджетов.

7

Было важно сохранить стиль. Но некоторые точечные улучшения UI мы могли сделать. 

Собака Павлова || Точечные улучшения UI.
Собака Павлова || Система уведомлений о событиях. Электронный город. Собака Павлова || Система уведомлений о событиях. Электронный город.

Стало

Собака Павлова || Система уведомлений о событиях. Электронный город. Собака Павлова || Система уведомлений о событиях. Электронный город.

8

Полностью пересобрали систему уведомлений о событиях. 

Было

9

Тестирование показало, что пользователи не понимают, что карточки можно перетаскивать. Добавили анимацию «покачивания» при переходе в настройки, намекающую, что карточку можно двигать.

Собака Павлова || Анимания при переходе в настройки. Мобильное приложение Мой дом. Электронный город.
Собака Павлова || Поведение кнопок.

10

Еще одна важная находка при тестировании — поведение кнопок немного сбивает с толку, мы исправили этот недочет.

Собака Павлова ||

продуктовый рефакторинг

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

отзыв заказчика

Как всегда огромное спасибо.

Сотрудничаем уже лет 6-7, за это время были разные проекты, многие с высокой степенью неопределенности с нашей стороны. Но результат всегда на высоте.

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

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

Степан Антонов, директор по маркетингу

Собака Павлова ||

cлово директору

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

Наталья Прокофьева, генеральный директор «Собаки Павловой»

Figma logo

Разработали

150+

макетов в Фигме

Стоимость

933 500

рублей

Срок разработки

3,5

месяца

Похожие проекты

Собака Павлова || Интерфейс приложения для федеральнойрозничной сети

О'КЕЙ

Интерфейс приложения для федеральной
розничной сети

Разработали прототипы приложения
для торговой сети «О’КЕЙ»

Собака Павлова || Интерфейс мобильного приложения для сервисных инженеров

Электронный город

Интерфейс мобильного приложения для сервисных инженеров

Переделали UI приложения, в котором сервисные инженеры провайдера управляют заказами, настраивают интернет-подключения и ведут учет оборудования абонентов.

Собака Павлова || Концептуальный дизайн интерфейса приложения для интервального голодания

Худеем вместе

Концептуальный дизайн интерфейса приложения для интервального голодания

Создали концепцию и структуру интерфейса за две споловиной недели.

Собака Павлова || Кейс Полуэкт

ВидеоДедМороз

Дизайн мобильного интерфейса и авторское сопровождение

Помогли Деду Морозу запустить мобильное приложение с поздравлениями

Собака Павлова

Пишите нам

На обычную почту  
,
в WhatsApp 
или в
(это наш директор)

Позвонить тоже можно

8 (800) 511-84-17

Кое-что показываем и рассказываем на весь интернет

Красивое на
, интересное в
, полезное на

На сайте могут встретиться упоминания социальных сетей, признанных на территории РФ экстремистскими организациями

Собака Павлова

Дизайн сложных интерфейсов

© Да какие уж тут копирайты

Санкт-Петербург • Подгорица • Хайфа

Адрес для почтовых отправлений: 194017, Санкт-Петербург, ул. Дрезденская, д. 20, литера А, кв. 49