Кейс · Дизайн
Дизайн личного кабинета для Jet: три роли, права доступа и мобильная версия
Спроектировали личный кабинет сервиса JETCSIRT для IT-компании Jet: три роли с разными правами, десктопные и мобильные экраны для каждой роли, палитра из 25 цветов и инфографика по брендбуку.
О клиенте
Jet внедряет IT-решения и помогает компаниям масштабировать бизнес. Это один из крупнейших поставщиков IT-услуг, компания занимает лидирующие позиции в топе российских IT-компаний.
Мы проектировали личный кабинет для сервиса, который на макетах подписан JETCSIRT.
Задачи
- Разработать удобный личный кабинет для трёх ролей: администратор Jet, администратор клиента и пользователь.
- Сделать дизайн, который отвечает современным требованиям UX/UI и брендбуку компании.
- Сделать кабинет современным и сократить время на принятие решений.
Ролевая модель
В кабинете можно зарегистрироваться под одной из трёх ролей, и для каждой мы предусмотрели свой набор функций. Права в ролевой модели распределены так:
| Право | Пользователь | Администратор клиента | Администратор Jet |
|---|---|---|---|
| Свой профиль | редактирует | редактирует | редактирует |
| Данные | разрешённые данные по своей организации | все данные своей организации | данные всех организаций, может их корректировать |
| Функционал | разрешённый | весь | весь |
| Пользователи | нет | настраивает права, отправляет запросы на создание, блокировку и удаление | создаёт, удаляет и блокирует, меняет тип и права |
| Организации | нет | нет | создаёт и удаляет |
Пользователю при необходимости можно выдать часть прав «администратора»: для этого меняют тип пользователя и проставляют нужные доступы. Администратор клиента по умолчанию получает все права ролей «администратора» и «пользователя».
Пользователь
Пользователь редактирует свой профиль, смотрит разрешённые данные по организации и пользуется разрешённым функционалом. В меню у него «Главная» и раздел Support с пунктами «Общие сведения о сервисе», «Статистические данные», «Заявки» и «Создать заявку». В профиле собраны личные данные с фото, последние изменения аккаунта, смена пароля и блоки «Контракты», «Площадки», «СЗИ» и «Услуги».
Администратор клиента
Администратор клиента редактирует свой профиль, видит все данные своей организации и пользуется всем функционалом. Он настраивает права пользователей: какую информацию им показывать и какими функциями они могут пользоваться. На создание, блокировку или удаление пользователя он отправляет запрос.
Для запроса есть форма «Заявка на добавление пользователя»: ФИО, логин, тип пользователя, телефон, e-mail, пароль, права отдельно для администратора и для пользователя, доступ к контрактам. Сотрудники организации собраны в разделе «Управление пользователями» с поиском по таблице.
Администратор Jet
Администратор Jet авторизуется только в интерфейсе «администратора» и получает набор прав по умолчанию. В списках пользователей кабинета его не видно, отредактировать его нельзя. Он меняет типы пользователей клиента, устанавливает или ограничивает их права, создаёт и удаляет организации, просматривает и корректирует их данные. Ещё он может создать, удалить или заблокировать пользователя.
На главном экране администратора Jet три таблицы: входящие запросы на изменение, последние изменённые организации и последние изменённые пользователи. В меню есть входящие заявки, управление пользователями, создание пользователя и управление организациями. Удаление и блокировку пользователя интерфейс просит подтвердить.
Адаптивная версия
Интерфейс автоматически подстраивается под экран, чтобы заходить в кабинет было одинаково удобно с любого гаджета. Мобильные экраны мы отрисовали для каждой роли.
Пользователь на телефоне фильтрует заявки по контракту, площадке и критичности, выбирает период (месяц, квартал, год или даты) и смотрит динамику распределения заявок. В разделе «Общие сведения о сервисе» видны организация и персональный сервис-менеджер с телефоном, e-mail и кнопками Telegram и WhatsApp.
Администратору клиента в мобильной версии доступны заявка на добавление пользователя, список пользователей со статусом и датой последнего входа, кнопки редактирования и удаления, а также редактирование профиля.
Администратор Jet с телефона принимает или отклоняет входящие заявки на изменение пользователей, создаёт пользователей и управляет ими с выбором организации, контракта и услуг. Закончившийся контракт выбрать нельзя: форма сразу показывает ошибку.
UI: шрифт, цвета и иконки
Шрифт интерфейса HelveticaNeueCyr. Палитру разделили по назначению, всего в ней 25 цветов. У цветов для элементов и кнопок по два кода, светлый и тёмный оттенок.
| Назначение | Цвета |
|---|---|
| Текст | #FFFFFF, #E9EFFF, #848C99, #39414E |
| Элементы | #5BC4FF / #1587C7, #28E8C5 / #0E9C83, #FCFF72 / #999C00, #74D837 / #459C0F, #FFA24B / #C15D00, #EF426C / #BF1F46, #A7AFC9 / #6C748E |
| Кнопки | #0886AD / #086B89, #192E42 / #14283D |
| Фон | #2F3746, #253343, #1D232F |
Для данных отрисовали инфографику и набор иконок. На макетах есть кольцевые диаграммы «Критичность заявок» (очень срочно, срочно, некритично) и «Доля заявок по СЗИ», переключатель периода (сегодня, вчера, неделя, месяц, квартал, год) и уведомления с разбивкой на изменения в системе, важные новости, системные сообщения и критические уведомления. Ещё там карточки услуг со статусом «Подключено» и форма «Свяжитесь со мной».
Похожие задачи мы решаем в услуге «Разработка личного кабинета».
Услуги
Что мы делали в проекте
Кейсы
Ещё кейсы
Дизайн · Аптечная сеть, интернет-аптека
Дизайн интернет-аптеки «Губернских аптек»
Конверсия в заказ выросла на 30%Сделать основные инструменты сайта удобнее и показать, что кроме лекарств здесь есть ортопедия и ветеринария
Дизайн · Нефтяная компания, сеть АЗС
Дизайн бонусного раздела приложения АЗС «Газпромнефть»
7 экранов от поиска задания до бонусовНарисовать раздел мобильного приложения, где участники выбирают задания на АЗС, бронируют их и получают бонусы
Дизайн · Атомная отрасль, внешняя торговля
Дизайн корпоративного портала для «Техснабэкспорта»
Шесть разделов и UI-китПолностью адаптировать корпоративный портал на Битрикс24 под фирменный стиль «Росатома» и сделать его понятным даже новому сотруднику
Хотите такой же результат? Ответим за 12 часов
Или напишите туда, где удобнее. Отвечает руководитель проектов, не бот.