---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-07-29
publishYear: 2018
name: Alfastrahhr
title: UI-редизайн интерфейса корпоративного портала
excerpt: Переделали интерфейс личного кабинета для сотрудников «АльфаСтрахования» и двух сервисов для HR.
context: Внутренний корпоративный портал «АльфаСтрахования» давал доступ всего к паре сервисов и был не слишком удобен. Им почти никто не пользовался. Компания собиралась расширить функциональность портала, а нам предстояло доработать интерфейс личного кабинета и существующих сервисов.
logo:
src: ~/assets/images/portfolio/alfastrahhr/logo.png
alt: Альфа страхование logo
link: https://www.alfastrah.ru/
image: ~/assets/images/portfolio/alfastrahhr/alfastrahhr.png
imageAlt: UI-перепроектирование корпоративного портала
thumbnail:
src: ~/assets/images/portfolio/cards/alfastrah-hr.svg
alt: Собака Павлова • АльфаСтрахование • Редизайн и UI корпоративного портала
tags:
- fin
- it
- ux-outsource
- ui-redesign
- prof
- alfastrah
tags2:
- Финансы
- UI-перепроектирование
- Интерфейс личного кабинета
- АРМ
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UI-редизайн](/services/ui-redesign), как в этом кейсе, и [многое другое](/services).
collection: services
page: ui-redesign
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: qiwi
- collection: portfolio
page: alfastrah-design
- collection: portfolio
page: monetory
- collection: portfolio
page: alfa-arm
- collection: portfolio
page: opendesk
- collection: portfolio
page: sberbank
- collection: portfolio
page: tinkoff
- collection: portfolio
page: inbank
- collection: portfolio
page: otkritie
- collection: portfolio
page: alfabank
result:
- src: ~/assets/images/portfolio/png.png
text: Библиотека элементов
link: https://drive.google.com/drive/u/1/folders/1YQH1AOz8OFf4715XuYThjmaIhQb0lhGK?ths=true
budget: ~ 500 000 ₽
director: UI-перепроектирование отдельных сервисов показало заказчику, что весь портал нуждается в доработке.
metadata:
canonical: https://sobakapav.ru/portfolio/alfastrahhr
title: Интерфейс личного кабинета • UI-редизайн корпоративного портала
description: "Переделали интерфейс личного кабинета для сотрудников «АльфаСтрахования» и двух сервисов для HR, подтолкнув заказчика задуматься о доработке всего портала."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/alfastrahhr/alfastrahhr.png'
width: 1680
height: 1079
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Вводные](#anchor1) • [Обсуждаем](#anchor2) • [Анализируем](#anchor3) • [Рисуем](#anchor4) • [Проектируем](#anchor5) • [Дизайн интерфейса](#anchor6) • [UI kit](#anchor7) • [Результат](#anchor8) • [Цены и сроки](#anchor9)
</TOC>
## <a name="anchor1" />Вводные
Раньше мы уже работали с «АльфаСтрахованием» — проектировали [интерфейс внутренней информационной системы](/portfolio/alfa). На этот раз нашей задачей было UI-перепроектирование интерфейса для сотрудников компании.
_Любой проект начинается с обоснования_
У «АльфаСтрахования» есть внутренний портал, площадка для корпоративного контента и для HR-сервисов. Личный кабинет — это разводящая страница, с которой и только с которой можно открыть сервисы. Все сервисы объединены на левой панели, сумбурной и неудобной.
_Так раньше выглядел личный кабинет_
_Вот такие сервисы будут когда-нибудь на портале_
Нам нужно было сделать личный кабинет сотрудника и два сервиса («Мои отпуска» и «Мои заявки») человечнее: проще, удобней и доступней для пользователя.
_Сервис «Мои отпуска» до перепроектирования_
Чтобы понять масштаб проблемы, посмотрите, как выглядели эти сервисы до перепроектирования.
_Сервис «Мои заявки» до перепроектирования_
## <a name="anchor2" />Обсуждаем
Обсудили будущий интерфейс с представителями заказчика. Заподозрили, что быстрого проекта не получится: каждый из них представлял результат по-своему, единого мнения не было ни о чем. Даже о назначении и функциональности кабинета с сервисами.
И действительно, этот небольшой проект занял немало времени: любое предложение долго обсуждалось на самом высоком уровне.
А еще нормально работать мешала секретность. У нас не было доступа к порталу — пришлось ездить в петербургский офис за скриншотами. Переговоры — только по телефону, потому что внешние мессенджеры в компании запрещены.
_«АльфаСтрахование»: портрет сотрудника_
## <a name="anchor3" />Анализируем
Мы описали пользовательские роли (их всего две — руководитель и рядовой сотрудник) и сценарии использования.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
_[Сценарии использования личного кабинета](https://docs.google.com/document/d/1LTgem0qpGC0-CjDXNOTZzEUm9FP8uxZ8qDsnZRnTHcI/edit)_
Кабинет и сервисы руководителя должны функционально отличаться от кабинета и сервисов рядового сотрудника. В частности, руководитель принимает решения по заявкам подчиненных — в «Моих заявках» должен быть соответствующий раздел.
_[Сервис «Мои заявки», сценарии руководителя и сотрудника](https://docs.google.com/document/d/1z09wb6k_02VA6rwZ_kiR2FG1l8kS3zfH4deDI91aapY/edit)_
## <a name="anchor4" />Рисуем
Утвердили документы и начали рисовать. Работали мелкими итерациями, результаты показывали в виде презентаций.
Со стороны заказчика проектом занимался новый сотрудник, еще не вполне знакомый с внутренними процессами компании. Согласовывал любое изменение со всем начальством — по всей цепочке руководства. А это очень долго.
Директор по развитию в какой-то момент решил нарисовать кабинет сам — в свободное время, так что это затянулось. А мы тем временем занялись сервисами «Мои отпуска» и «Мои заявки».
_Пытаясь показать, каким хочется видеть личный кабинет, в «АльфаСтраховании» перерисовали наш вариант. Вот что у них получилось_
## <a name="anchor5" />Проектируем
Нарисовали детализированный прототип, показали заказчику, запустив очередное внутреннее обсуждение.
Вот что у нас получилось.
_Вот сюда попадает сотрудник, который хочет на море в апреле и в глушь, в Саратов — в октябре_
Сервис «Мои отпуска» дает возможность посмотреть график отпусков, заявить о намерении отдохнуть, перенести отпуск на другие даты.
_Формы заявок на отпуск и на перенос отпуска_
Отдельный сервис позволяет просматривать эти и другие заявки, следить за их статусом.
_Сервис «Мои заявки», одобренная заявка на отпуск_
Руководитель принимает решения по заявкам подчиненных — в «Моих заявках» есть соответствующий раздел («Мне на согласование» с подразделами «Кадровые документы» и «Заявки на отпуск»).
_Сервис «Мои заявки», раздел «Мне на согласование»_
## <a name="anchor6" />Дизайн интерфейса
Оформили все в корпоративных цветах «АльфаСтрахования». Компания очень серьезно относится к корпоративному стилю: в огромном, очень подробном style guidу больше сотни страниц.
_Корпоративные цвета «АльфаСтрахования»_
## <a name="anchor7" />Библиотека компонентов
Сделали библиотеку компонентов (UI-kit), чтобы в «АльфаСтраховании» дальше могли рисовать самостоятельно — по мере развития портала. Это точно понадобится: пока мы работали над «Заявками» и «Отпусками», появилось несколько новых сервисов.
Итак, мы сделали все, что запланировали. В «АльфаСтраховании» посмотрели на наши прототипы, приняли дизайн…
## <a name="anchor8" />Внезапный поворот
…Но тут в компании внезапно заметили, что корпоративный портал в целом не очень хорош.
И взяли паузу, чтоб принять стратегическое решение — переделывать ли портал полностью или поручить нам UI-доработку. А стратегические решения — это надолго. Вот, до сих пор ждем.
Но, возможно, у этого кейса все-таки будет продолжение.
## <a name="anchor9" />