Разработка сложного личного кабинета. Опыт Uplab

Разработка сложного личного кабинета — это большая работа, которая требует участия не только дизайнеров и программистов, но и бизнес-аналитиков и экспертов в UX/UI. Мы в Uplab накопили интересный опыт работы с такими решениями и в этой статье делимся им, а также рассказываем про свежий кейс: личный кабинет для портала ГИС «Энергоэффективность».

Личный кабинет (ЛК) — это защищенный раздел сайта, доступы к которому получают пользователи после регистрации. Говоря простыми словами, это «рабочее место» пользователя на сайте: там можно поменять настройки, создать заказ, совершить оплату и увидеть свои личные скидки и бонусы.

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

Как правило, личный кабинет персонализирован. Посетителя сайта встречают его имя (никнейм) и аватар. В этом же разделе посетитель может редактировать или добавить свои данные, просматривать историю заказов, настраивать предпочтения и получать персональные предложения: банки и ритейлеры могут сделать их, учитывая платежеспособность клиента.

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

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

Сервисы, в которых можно сделать сложные личные кабинеты:

• маркетплейсы B2B/B2C (разделы продавца и покупателя);

• образовательные платформы (там нужен личный кабинет преподавателя и ученика);

• сайты и приложения банков (ЛК владельцев счетов, карт, ценных бумаг);

• сервисы документооборота. Примеры — Федеральная налоговая служба и сайт госуслуг;

• транспортные компании (личные кабинеты физических и юридических лиц);

• и другие.

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

У личных кабинетов много функций; одни из них очевидны, а другие не лежат на поверхности. Раскрыт ли потенциал личного кабинета на вашем сайте? Чтобы понять это, нужен взгляд поочерёдно с двух «берегов»: клиента и компании.

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

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

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

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

Допродажи (повышение чека). В личном кабинете компании могут предлагать пользователям дополнительные товары или услуги. Пример: страховка путешественника при покупке билетов за границу в приложениях банка на телефоне.

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

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

Экономия времени. В ЛК можно быстро создать повторный заказ, отследить статус заказа, не обращаясь к менеджеру, оплатить в несколько кликов.

Экономия денег. Раздел персональных предложений; информация о скидках и распродажах.

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

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

Быстрый доступ к информации. В ЛК можно быстро узнавать информацию о новинках, изменениях в графике работы, сбоях в работе, сезонных распродажах и другие важные новости.

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

Вот примеры:

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

2. Маркетплейсы. В них есть несколько видов удобных личных кабинетов: для покупателей и для продавцов. Продавцы могут анализировать спрос, а покупатели — делать заказы, создать подборки товаров, «подписываться» на интересные магазины, копить и тратить бонусные баллы и так далее.

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

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

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

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

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

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

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

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

Реализуйте автоматическое заполнение данных, быстрый доступ к меню оплаты и возможность привязать карты и автоматически завести данные. Быстрый переход в приложение банка для оплаты (SberPay, СБП) тоже будет плюсом.
Мы проверили эти советы на практике в одной из наших последних разработок — интернет-портале для ГИС «Энергоэффективность». Рассказываем про этапы работы и с какими сложностями нам пришлось столкнуться.

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

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

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

Пользователи портала:

• юридические лица (ИП и другие виды организаций), у которых есть необходимость или требования в подаче отчёта о выбросах парниковых газов;

• надзорный орган, который проверяет и валидирует поданные отчёты;

• операторы системы (Минэкономразвития России);

• органы государственной власти субъектов РФ;

• администраторы.

При этом функционал ЛК эмитентов отличается в зависимости от статуса компании. А надзорный орган видит только те отчёты, которые были назначены на него.

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

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

Именно к этому мы и стремились, разрабатывая личный кабинет ИП и других юридических лиц на портале ГИС «Энергоэффективность». Задача непростая, и в разработке также было много челленджей. Примеры: нам пришлось реализовать интеграцию с сервисом «Госуслуги» и СМЭВ (системой межведомственного электронного взаимодействия).

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

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

Так, в отчёте по выбросу парниковых газов есть методические расчёты объемов выбросов. Их около 200 видов (отдельно для разных типов объектов). Выбросы ТЭЦ считаются по одним формулам, а автобусов — по другим. Для каждого объекта есть 2−3 вида формул, описывающих разные ситуации.

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

Владислав Беспалов

тимлид Node JS

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

Также для личного кабинета на портале ГИС «Энергоэффективность» мы разработали интеграцию электронными подписями (ЭЦП) и их проверку: портал подтверждает, что это ЭЦП является квалифицированной, не отозвана и принадлежит именно той организации. Можно сказать, что мы разработали внутри системы полноценный ЭДО — электронный документооборот.

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