Личный кабинет и аналитика для девелопера элитной недвижимости Sminex

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

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

О каждой из этих задач расскажем ниже 👇

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

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

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

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

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

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

7. Вёрстка.

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

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

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

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

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

1. Главная (дашборд + навигация).

2. Счета.

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

4. Каталог услуг Службы комфорта.

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

Далее согласовали всё это с заказчиком и перешли к разработке дизайн-концепции веб-версии.

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

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

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

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

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

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

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

→ Счета

Здесь мы не только отобразили таблицу со счетами, но и сделали флоу оплаты счетов разных типов: 

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

2. Оплата одного конкретного счёта. В таком случае, кроме способа оплаты, можно ещё указать сумму, на которую пользователь хочет совершить платёж.

Доступны три способа оплаты: картой, по QR-коду и при помощи СБП.

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

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

Поэтому мы:

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

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

Первый релиз вышел в продакшн и сейчас тестируется на широкую аудиторию. Для последующих релизов отрисованы все макеты. Они на очереди в разработку.

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

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

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

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

Результатом аудита стал список задач, которые распределили по степени критичности.

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

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

За эталон взяли веб-версию личного кабинета и составили список улучшений.

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

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

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

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

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

• К услугам добавили поясняющие подписи.

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

• Убрали функции выбора времени, к которому нужна услуга (до этого были варианты «Как можно скорее» и «Ко времени»). Если услуга нужна срочно, то пользователю проще позвонить в УК, а если не срочно — нет смысла указывать конкретное время.

→ Счета

Проектирование разделов, связанных с деньгами пользователей, — всегда повышенная ответственность. Тем более когда речь идёт об оплате услуг в элитном ЖК, где комфорт и удобство на первом месте.

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

Все макеты отданы клиенту для дальнейшей реализации.

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

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

На протяжении всей работы клиент положительно отзывался о нашей работе.

На премии Ruward Award 2024 Sminex победили в номинации «CX/UX/Product → Заказчик года».