Таймлайн
2024. Продолжительность ~ 1 месяц
Компания
билайн — один из ведущих поставщиков телекоммуникационных услуг в России
Команда
Продакт, продуктовый дизайнер, аналитик, техлид, 2 фронта, 3 бэка
Продукт
билайн.дом — веб-интерфейс для управления многоквартирными домами для управляющих компаний и приложение для жителей
Задача
Спроектировать управление каталогом услуг, которые управляющая компания оказывает жителям многоквартирного дома
Контекст
УК предоставляет жителям платные сервисы — сантехника, электрика и другие услуги. Услуги оформляются через мобильное приложение в виде заявок. При этом каждая управляющая компания формирует собственный перечень услуг, который сотрудники должны иметь возможность создавать и редактировать через веб-интерфейс.
Этап 1
После грумминга, на котором мы опредилилсь, что берем эту задачу, продакт передал исходные данные — предыдущие макеты, бизнес-требования и сценарии взаимодействия.
Основной задачей было разработать функционал:
- формирование списка категорий и услуг
- создание, редактирование и удаление категорий и услуг
- реализация удобного поиска и фильтрации по списку
Этап 2
На основе полученных материалов я проанализировала существующие сценарии и макеты.
Ключевые инсайты:
- Основное действие: создание и редактирование конкретных услуг происходит чаще, чем создание категорий
- Проблема наглядности: в прошлых макетах заложен табличный интерфейс с двумя отдельными таблицами для категорий и услуг, что не визуализирует вложенность, из-за чего увеличивается когнитивная нагрузка
Этап 3
Для повышения удобства и наглядности было решено реализовать единый древовидный компонент, объединяющий категории и услуги.
Почему: он наглядно отображает иерархию, позволяет сразу видеть структуру всего каталога и легко управлять ею, избавляя пользователя от необходимости мысленно сопоставлять два разных раздела.
На дизайн-ревью с аналитиком и веб-разработчиками мы согласовали такой варинат и обсудили техническую реализацию.
Компонент включал в себя встроенные и кастомные изображения для услуг и категорий, которые должны были отображаться в приложении жителя, а также drag-and-drop функционал для установки порядка отображения. В первой итерации от этого функционала отказались, чтобы ускорить вывод фичи, но заложили эту возможность на будущее.
Этап 4
Сотруднику необходимо создавать как услуги, так и категории. Но категорий создают значительно меньше. Чтобы не нагромождать интерфейс кнопками, мы создали формы создания категории и услуги на одной странице с переключением между ними.
По умолчанию в форме выбран вариант «Создать услугу», так как это наиболее частый сценарий. Это ускоряет работу, сокращая количество ненужных кликов.
С командой я детально проработала сценарии обработки ошибок, состояний загрузки и подтверждающих сообщений, чтобы пользователь всегда понимал, что происходит с системой.
Финал
После получения фидбека от разработчиков и менеджеров, все финальные сценарии и логика были собраны в едином, понятном для всех участников файле в фигме с комментариями, что обеспечило прозрачность и согласованность всех этапов разработки
Результат
В результате решений, принятых на основе лучших практик, принципах юзабилити и логике, мы создали интерфейс, который:
Повысил наглядность: древовидная структура сделала управление каталогом интуитивно понятным
Повысил эффективность: учет контекста при создании сценария сократил время на выполнение операций
Масштабируется: созданный компонент позволяет в будущем легко добавить такие функции, как Drag-and-Drop