Дизайн личного кабинета и аналитика мобильного приложения Sminex

Sminex — ведущая девелоперская компания с 24-летним опытом в сфере жилой и коммерческой недвижимости. За всё время реализовала более 100 проектов общей площадью 11,7 млн кв. м. Специализируется на создании премиальной недвижимости с высокой степенью продуманности — от архитектуры до сервиса.

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

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

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

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

А в дальнейшем появилась идея разработать полноценный суперапп.

При выстраивании стратегии работы над проектом отталкивались от бизнес-целей компании.

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

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

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

О каждом из этапов расскажем ниже.

Этапы работы:

— Бизнес-интервью с заказчиком, сбор и формирование требований.

— Десктоп-ресерч (самостоятельное изучение материалов, анализ работы текущего приложения).

— Построение информационной архитектуры.

— Проектирование.

— Разработка дизайн-концепции.

— Дизайн и адаптивы.

— Вёрстка.

— Авторский надзор (ревью и тестирование).

→ Предпроектная аналитика

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

→ Информационная архитектура

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

→ Проектирование

Подготовили прототипы самых сложных мест в веб-версии:

— главная (дашборд + навигация),

— счета,

— оформление и просмотр заявок в Службу комфорта,

— каталог услуг Службы комфорта,

— передача показаний счетчиков.

→ Дизайн-концепция

У мобильного приложения был свой дизайн, но клиент попросил нас сделать веб-версию в стиле основного сайта компании. Дизайн-концепцию готовили на базе фирменного стиля Sminex, показали её на примере главной страницы личного кабинета и раздела авторизации.

→ Дизайн, адаптив и вёрстка

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

Главная страница.

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

Заявки в управляющую компанию.

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

Счета.

Отобразили таблицу со счетами и сделали флоу оплаты счетов разных типов. Оплатить можно как общий счёт, так и отдельные составляющие (коммунальные платежи, услуги от УК). Также доступны 3 способа оплаты.

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

Также добавили поле для поиска нужного счёта или заявки без использования фильтра.

Этапы работы

— Проведение юзабилити-аудита текущего приложения.

— Сравнение новой веб-версии личного кабинета и текущего приложения.

— Доработка мобильного приложения по результатам проведенного анализа.

→ Юзабилити-аудит

Чтобы составить план доработок для мобильного приложения, выяснили, какие проблемы в нём есть сейчас. Взяв за основу дизайн-принципы, Законы UX, Эвристики Якоба Нильсена и нашу экспертность, провели юзабилити-аудит мобильного приложения. Результатом стал список задач, которые распределили по степени критичности.

→ Сравнение приложения и веб-версии

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

→ Доработка мобильного приложения

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

За основу взяли дизайн-концепцию веб-версии и адаптировали её под мобильное приложение. Так кабинеты в веб-версии и мобильном приложении стали выглядеть консистентно, а переход с одной платформы на другую стал максимально незаметным и безболезненным для пользователя.

Главная.

Как и в веб-версии, в мобильном приложении раздел «Главная» был одним из самых насыщенных в плане контента. Предстояло отобразить всё, что есть на главной в веб-версии, но адаптировать контент под приложение.

Оформление пропусков.

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

— Сократили количество полей для заполнения.

— Добавили поясняющие подписи к услугам.

— Объединили общей областью карточку одной машины / гостя для случая, когда добавляется несколько машин / гостей.

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

Счета.

— Сделали минималистичный дизайн, который не отвлекает пользователя лишними элементами.

— Предусмотрели быструю фильтрацию по ключевым параметрам счетов (оплаченные и неоплаченные).

— Ниже разместили поиск и дополнительный фильтр по другим параметрам (тип счёта, помещение, период оплаты).

У Sminex есть ряд цифровых продуктов:

— мобильное приложение личного кабинета с функциями УК;

— сайт с каталогом недвижимости, где кратко представлены все продающиеся объекты;

— личный сайт каждого ЖК с более детальным описанием объектов.

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

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

Этапы работы:

— Сбор и анализ требований.

— Конкурентный анализ.

— Построение информационной архитектуры супераппа.

— Проектирование.

→ Сбор и анализ требований

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

→ Конкурентный анализ

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

→ Информационная архитектура

После сбора требований и анализа конкурентов построили информационную архитектуру супераппа. Она объединила функции Службы комфорта и функции каталога недвижимости:

— просмотр объектов недвижимости (в том числе планировки, придомовой территории),

— добавление объектов в избранное,

— сравнение объектов,

— возможность связаться с отделом продаж,

— бронирование машиномест и келлеров,

— просмотр информации по сделкам с недвижимостью.

В схеме визуально отделили уже реализованные функции и те, что ещё предстояло спроектировать.

→ Проектирование

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

— главная каталога,

— каталог проектов Sminex (ЖК),

— анкета предпочтений при первом переходе в каталог,

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

Спроектировали навигационное меню для разделов приложения «Служба комфорта» и «Каталог», и переход между этими разделами.

Ключевые результаты проекта:

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

— Оптимизированный пользовательский интерфейс. Юзабилити-аудит позволил выявить и устранить проблемные моменты, упростив навигацию, фильтрацию и поиск для пользователей всех возрастов.

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

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

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