- Заказчик
- Sminex — ведущая девелоперская компания с 24-летним опытом в сфере премиальной жилой и коммерческой недвижимости. Реализовала более 100 проектов общей площадью 12 млн кв. м.
- Задача
- Создать веб-версию личного кабинета на основе существующего мобильного приложения, улучшив пользовательский опыт. Доработать UX и дизайн приложения, обеспечивая бесшовный переход между платформами.
О клиенте
Sminex — ведущая девелоперская компания с 24-летним опытом в сфере жилой и коммерческой недвижимости. За всё время реализовала более 100 проектов общей площадью 11,7 млн кв. м. Специализируется на создании премиальной недвижимости с высокой степенью продуманности — от архитектуры до сервиса.
Sminex заботится о клиентах на каждом этапе взаимодействия: от выбора и покупки недвижимости до проживания в построенных домах. Департамент Службы комфорта обеспечивает высокий уровень сервиса, действующий во всех объектах компании. Именно он являлся нашим заказчиком.
Задача
Изначально команда клиента обратилась к нам за созданием веб-версии личного кабинета с улучшением того, что уже существует в мобильном приложении. Нам предстояло взять все функции, которые есть, ничего не потерять и при этом улучшить пользовательский опыт, основываясь на нашей экспертизе и компетенциях.
После завершения этой задачи появились новые, связанные с улучшением пользовательского опыта в существующем мобильном приложении.
О каждой из этих задач расскажем ниже.
Задача 1: Веб-версия личного кабинета
Этапы работы
- Бизнес-интервью с заказчиком, сбор и формирование требований.
- Десктоп-ресерч (самостоятельное изучение материалов, анализ работы текущего приложения).
- Построение информационной архитектуры.
- Проектирование.
- Разработка дизайн-концепции.
- Дизайн и адаптивы.
- Вёрстка.
- Авторский надзор (ревью и тестирование).
Предпроектная аналитика
Изучили текущее мобильное приложение, подготовили вопросы для команды клиента и провели бизнес-интервью. Посмотрели другие личные кабинеты управляющих компаний для поиска хороших решений и вдохновения.
Примечание: отличной базой на данном этапе стал наш опыт работы в подобных проектах. Об одном из них рассказали в кейсе разработки личного кабинета для оплаты коммунальных платежей тамбовской областной сбытовой компании.
Информационная архитектура
После проведения интервью с командой клиента построили информационную архитектуру будущего личного кабинета, в которую заложили функционал мобильного приложения и распланировали его по релизам с учётом дальнейшей масштабируемости.
Учли, что у пользователей личного кабинета могут быть разные роли и, соответственно, доступность/недоступность некоторых функций в сервисе.
Проектирование
После архитектуры подготовили прототипы самых сложных мест в веб-версии:
- Главная (дашборд + навигация).
- Счета.
- Оформление и просмотр заявок в Службу комфорта.
- Каталог услуг Службы комфорта.
- Передача показаний счетчиков.
Далее согласовали всё это с заказчиком и перешли к разработке дизайн-концепции веб-версии.
Дизайн-концепция
Несмотря на то, что у мобильного приложения был свой дизайн, клиент попросил нас сделать веб-версию в стиле основного сайта компании.
Дизайн-концепцию готовили на базе фирменного стиля Sminex. Концепцию показали на примере главной страницы личного кабинета и раздела авторизации.
Дизайн, адаптив и вёрстка
После согласования дизайн-концепции приступили к детальной проработке всех макетов. После сделали адаптивы и передали в разработку.
→ Главная страница
Одна из самых насыщенных контентом страниц. Содержит ключевые функции для быстрого доступа: неоплаченные счета, активные заявки на услуги, счётчики. Одним из требований бизнеса было показать на главной спецпредложения по продаже других объектов недвижимости и новости объекта. Всю информацию грамотно скомпоновали в виде дашборда.
? Заявки в управляющую компанию
Организовали страницу так, чтобы вся основная информация была на виду и можно было легко ориентироваться между заявками с разными статусами на разные услуги.
? Счета
Здесь мы не только отобразили таблицу со счетами, но и сделали флоу оплаты счетов разных типов:
- Оплата общего счёта, который включает в себя счета по всем текущим задолженностям. В него могут входить и коммунальные платежи, и услуги УК. В таком случае можно только выбрать способ оплаты и выполнить платёж.
- Оплата одного конкретного счёта. В таком случае, кроме способа оплаты, можно ещё указать сумму, на которую пользователь хочет совершить платёж.
Доступны три способа оплаты: картой, по QR-коду и при помощи СБП.
Для облегчения поиска заявок и счетов сделали фильтр.
На этапе аналитики у нас была обратная связь от пользователей более старшего возраста, что текущая реализация фильтров в мобильном приложении для них слишком сложная, и они не понимают, как найти нужную заявку.
Поэтому мы:
- Вынесли фильтры в одну область, чтобы все параметры фильтрации были на виду и не нужно было переключаться между каждым фильтром.
- Для выбора даты заявки сделали сразу открытый календарь, чтобы было проще ориентироваться в датах и днях недели.
- Для примененных фильтров сделали понятную индикацию в иконке фильтра.
Также добавили поле поиска, чтобы искать нужный счёт или заявку, не раскрывая фильтра.
Результат
Первый релиз вышел в продакшн и сейчас тестируется на широкую аудиторию. Для последующих релизов отрисованы все макеты. Они на очереди в разработку.
Задача 2: Улучшение текущего мобильного приложения
Этапы работы
- Проведение юзабилити-аудита текущего приложения.
- Сравнение новой веб-версии личного кабинета и текущего приложения.
- Доработка мобильного приложения по результатам проведенного анализа.
Юзабилити-аудит
Чтобы составить план доработок для мобильного приложения, первым делом нужно выяснить, какие проблемы в нём есть сейчас. Взяв за основу дизайн-принципы, законы UX, Эвристики Якоба Нильсена и нашу экспертность, провели юзабилити-аудит мобильного приложения.
Результатом аудита стал список задач, которые распределили по степени критичности.
Сравнение приложения и веб-версии
В рамках предыдущей задачи была выпущена первая веб-версия личного кабинета. В этой реализации мы улучшили некоторые функции, которые были в приложении. Поэтому между приложением и веб-версией появились расхождения.
Чтобы при использовании личного кабинета не возникало проблем с бесшовностью перехода с одной платформы на другую, сравнили функционал веб-версии личного кабинета и мобильного приложения.
За эталон взяли веб-версию личного кабинета и составили список улучшений.
Доработка мобильного приложения
Как только финальный список задач по доработке приложения был сформирован, приступили к проектированию и дизайну.
За основу взяли дизайн-концепцию веб-версии и адаптировали её под мобильное приложение. Благодаря этому кабинет в веб-версии и мобильном приложении стали выглядеть консистентно, а переход с одной платформы на другую стал максимально незаметным и безболезненным для пользователя.
По аналогии с веб-версией, в мобильном приложении раздел «Главная» был одним из самых насыщенных в плане контента, так как предстояло отобразить всё, что есть на главной в веб-версии, но адаптировать контент под приложение.
? Оформление пропусков
Служба комфорта предоставляет несколько разных типов пропусков, и у каждого есть свои особенности. Важно было учесть множество мелочей и сценариев, но при этом сделать процесс оформления пропусков максимально простым и быстрым. Для этого мы сократили количество полей, которые пользователь заполнял при оформлении заявки.
- К услугам добавили поясняющие подписи.
- Объединили общей областью карточку одной машины/гостя для случаев, когда добавляется несколько машин/гостей в заявку.
- Убрали функции выбора времени, к которому нужна услуга (до этого были варианты «Как можно скорее» и «Ко времени»). Если услуга нужна срочно, то пользователю проще позвонить в УК, а если не срочно — нет смысла указывать конкретное время.
? Счета
Проектирование разделов, связанных с деньгами пользователей, — всегда повышенная ответственность. Тем более когда речь идёт об оплате услуг в элитном ЖК, где комфорт и удобство на первом месте.
Сделали минималистичный дизайн для раздела, который не отвлекает пользователя лишними элементами. Предусмотрели быструю фильтрацию по ключевым параметрам счетов: оплаченные и неоплаченные. Ниже разместили поиск и дополнительный фильтр по другим параметрам: тип счёта (ЕПД или услуга), помещение, период оплаты (месяц, год).
Результат
Все макеты отданы клиенту для дальнейшей реализации.
Общие итоги
Запущен первый релиз веб-версии личного кабинета. Продолжается разработка дальнейших релизов по готовым макетам.
За всё время работы над проектами клиента проделали большую и интересную работу, помогли улучшить пользовательский опыт и привести дизайн личных кабинетов на разных платформах к единому стилю и функциям.
На протяжении всей работы клиент положительно отзывался о нашей работе.
На премии Ruward Award 2024 Sminex победили в номинации «CX/UX/Product ? Заказчик года».
