Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / UI-перепроектирование корпоративного портала

2018

Альфа страхование logo

UI-перепроектирование корпоративного портала

Переделали интерфейс личного кабинета и двух HR-сервисов корпоративного портала.

Цена

~ 500 000 ₽

Сроки

UI-перепроектирование корпоративного портала

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

Раньше мы уже работали с «АльфаСтрахованием» — проектировали интерфейс внутренней информационной системы. На этот раз нашей задачей было UI-перепроектирование интерфейса для сотрудников компании.

Обоснование проекта. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Любой проект начинается с обоснования

У «АльфаСтрахования» есть внутренний портал, площадка для корпоративного контента и для HR-сервисов. Личный кабинет — это разводящая страница, с которой и только с которой можно открыть сервисы. Все сервисы объединены на левой панели, сумбурной и неудобной.

Личный кабинет. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Так раньше выглядел личный кабинет

Сервисы на портале. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Вот такие сервисы будут когда-нибудь на портале

Нам нужно было сделать личный кабинет сотрудника и два сервиса («Мои отпуска» и «Мои заявки») человечнее: проще, удобней и доступней для пользователя.

Сервис «Мои отпуска». UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Сервис «Мои отпуска» до перепроектирования

Чтобы понять масштаб проблемы, посмотрите, как выглядели эти сервисы до перепроектирования.

Сервис «Мои заявки». UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Сервис «Мои заявки» до перепроектирования

Обсуждаем

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

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

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

Портрет сотрудника. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru «АльфаСтрахование»: портрет сотрудника

Анализируем

Мы описали пользовательские роли (их всего две — руководитель и рядовой сотрудник) и сценарии использования.

Сценарии использования личного кабинета. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Сценарии использования личного

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

Сервис «Мои заявки», сценарии руководителя и сотрудника. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Сервис «Мои заявки», сценарии руководителя и сотрудника

Рисуем

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

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

Директор по развитию в какой-то момент решил нарисовать кабинет сам — в свободное время, так что это затянулось. А мы тем временем занялись сервисами «Мои отпуска» и «Мои заявки».

Личный кабинет. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Пытаясь показать, каким хочется видеть личный кабинет, в «АльфаСтраховании» перерисовали наш вариант. Вот что у них получилось

Проектируем

Нарисовали детализированный прототип, показали заказчику, запустив очередное внутреннее обсуждение.

Вот что у нас получилось.

Личный кабинет сервиса «Мои отпуска». UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Вот сюда попадает сотрудник, который хочет на море в апреле и в глушь, в Саратов — в октябре

Сервис «Мои отпуска» дает возможность посмотреть график отпусков, заявить о намерении отдохнуть, перенести отпуск на другие даты.

Сервис «Мои отпуска». Формы заявок на отпуск и на перенос отпуска. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Формы заявок на отпуск и на перенос отпуска

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

Сервис «Мои заявки», одобренная заявка на отпуск. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Сервис «Мои заявки», одобренная заявка на отпуск

Руководитель принимает решения по заявкам подчиненных — в «Моих заявках» есть соответствующий раздел («Мне на согласование» с подразделами «Кадровые документы» и «Заявки на отпуск»).

Сервис «Мои заявки», раздел «Мне на согласование». UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Сервис «Мои заявки», раздел «Мне на согласование»

Дизайн

Оформили все в корпоративных цветах «АльфаСтрахования». Компания очень серьезно относится к корпоративному стилю: в огромном, очень подробном style guidу больше сотни страниц.

Корпоративные цвета «АльфаСтрахования». UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru Корпоративные цвета «АльфаСтрахования»

Библиотека компонентов

Сделали библиотеку компонентов (UI kit), чтобы в «АльфаСтраховании» дальше могли рисовать самостоятельно — по мере развития портала. Это точно понадобится: пока мы работали над «Заявками» и «Отпусками», появилось несколько новых сервисов.

Элементы UI-kit: Подсказки и чек-боксы. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Элементы UI-kit: Выпадающие списки. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Элементы UI-kit: Календари и строки заявок. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Элементы UI-kit: Ссылки. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Элементы UI-kit: Редактирование полей. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Элементы UI-kit: Табы и поля ввода. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Элементы UI-kit: Кнопки. UI-перепроектирование корпоративного портала АльфаСтрахования | SobakaPav.ru

Итак, мы сделали все, что запланировали. В «АльфаСтраховании» посмотрели на наши прототипы, приняли дизайн…

Внезапный поворот

…Но тут в компании внезапно заметили, что корпоративный портал в целом не очень хорош.

И взяли паузу, чтоб принять стратегическое решение — переделывать ли портал полностью или поручить нам UI-доработку. А стратегические решения — это надолго. Вот, до сих пор ждем.

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

UI-перепроектирование отдельных сервисов показало заказчику, что весь портал нуждается в доработке.

Цена

~ 500 000 ₽

Сроки