UX-ИССЛЕДОВАНИЕ
Интранет для конкурса управленцев «Лидеры России»

Интранет система основана на разработке Mail.Ru Group, которая используется в компании и постоянно развивается. Интранет отлично зарекомендовал себя и пользуется популярностью среди сотрудников компании. Каждый день они заходят в Интранет, чтобы узнать новости, поделиться новыми идеями, заглянуть в доску объявлений и пообщаться с коллегами.

В 2019 году было принято решение создать новый бизнес-юнит поделиться с партнерами компании успешно работающей системой. Одним из первых клиентов стал конкурс управленцев «Лидеры России», также ведется разработка версии интранета для компании Росатом.

Поскольку в работу над интранетом для «Лидеров России» была взяла уже существующая интранет-сеть было принято решение провести UX-исследование, которое поможет использовать пользовательсий опыт в улучшении функционала и графического интерфейса.

КТО ПОЛЬЗОВАТЕЛИ ИНТРАНЕТА

«ЛИДЕРЫ РОССИИ»?
более
3000
участников
42
года
средний возраст участников
87%
мужчины
13%
женщины
1-Й ЭТАП
Интервью с пользователями

Чтобы улучшить структуру и пользовательский интерфейс интранета «Лидеры России» было принято решение провести серию интервью с пользователями уже работающей системы в Mail.Ru Group. Мы опросили сотрудников компании из разных отделов, таких как программисты, разработчи, маркетологи, менеджеры проектов, руководители. Мы задавали вопросы в личных беседах в неформальной и комфортной для общения обстановке.

Вот список вопросов:

  • Как часто вы заходите в Интранет?
  • Что вам нравится в нашем Интранете?
  • Что пользоваться неудобно?
  • Что вас раздражает больше всего?
  • Оцените по 10 бальной системе удобство системы в целом
  • Оцените по 10 бальной системе удобство интерфейса
  • Что бы вы улучшили в интерфейсе?
  • Какой новый функционал вы бы додавили?
  • Как вам структура бокового меню на главной странице, что можно улучшить?
  • Что вы думаете о навигации в Интранете?
photo
Артем Фенелонов
Арт-директор
Наш Интранет очень удобный. Пользуюсь каждый день. Есть вопросы к интерфейсу, в особенности к боковому меню на главной странице. Считаю это меню сильно перегруженным, бывает непросто найти нужный раздел
photo
Юлия Ширяева
Руководитель отдела ASO
Мне очень нравится наш Интранет! Он один из лучших в России среди крупных компаний. Захожу каждый день, читаю новости, слежу за событиями. Мне не очень нравится перегруженное главное меню, трачу много времени чтобы сориентироваться в нем
photo
Юрий Мешков
Руководитель направления коммуникаций
Наш Интранет вызывает у меня двойственные впечатления. С одной стороны это удобная и хорошо продуманная система. С другой, есть множество вопросов к интерфейсу. Лично меня очень сильно расстраивает непродумання нафигация. Почему на всех страницах, кроме главной отсутствует меню? И таких, казалось бы, мелочей немало
photo
Павел Ильин
Программист
Мне всегда не нравилась путиница в разделах «Блоги» и «Объявления». Вроде бы это одно и то же, но на самом деле нет. Это раздражает, если честно, так как я регулярно просматриваю доску объявлений в Интранете. Было бы здорово как-то визуально разграничить эти разделы
photo
Андрей Мосейкин
Менеджер по продажам
Было бы здорово реализовать функцию «Предпочтительный канал связи» в профиле пользователя, чтобы знать куда писать человеку. В идеально варианте мне хотелось ба разграничить личное общение и общение по работе — было бы хорошо внедрить встроенный простенький мессенджер внутри Интранета как, например это реализовано в Facebook, на мой взгляд это поможет эффективнее решать рабочие вопросы
photo
Юлия Гусейнова
Верстальщик
Я пользуюсь Интранетом каждый день, мой любимый раздел — идеи, где каждый сотрудник может предложить свое видение развитие продуктов компании. В целом система мне очень нравится, я бы оценила удоство интерфейса в 8 баллов из 10. Предлагаю улучшить нафигацию — я бы сделала доступ к боковому меню на других страницах тоже. Если это место нужно для отображения контента, то меню можно сделать выпадающим или выдвигающимся сбоку
РЕЗУЛЬТАТЫ ОПРОСА
icon
Интервью помогли найти проблемные моменты
в интерфейсе и способы
их решения
icon
Найдено несколько точек боли и проблем в архитектуре Интранета и интерфейсе
icon
Участники опроса предложили много новых идей и интересных решений
2-Й ЭТАП
Выявленные проблемы
После анализа ответов пользователей Интранета мы выявили несколько очевидных проблем в ахитектуре и интерфейсе Интранета.
проблема
photo photo photo
Боковое меню
Боковое меню на главной странице сильно перегружено. Пользователи тратят много времени на поиск нужного раздела.
проблема
photo
photo photo
Навигация
На страницах сайта сложности с навигацией. К примеру, при переходе с главной пропадает меню. Чтобы перейти на другую страницу приходится возвращаться на главную страницу
проблема
photo
photo photo
Типографика
На сайте много стилистических проблем. К примеру, заговлоки одного кегля с основным текстом
проблема
photo photo
Воздух
Многие элементы скомпонованы очень плотно, к примеру, в разделе Дни рождения фото сотрудников очень плотно расположены друг к другу
проблема
photo photo
photo photo photo photo
Стилистические разногласия
На сайте множество стилистических конфликтов. К примеру, на разных страницах можно встретить меню с вкладками двух типов. Или копки разных цветов.
3-Й ЭТАП
Прототипи­рование
Мы постарались исправить все точки боли и устранить очевидные проблемы, которые беспокоили пользователей системы. Интерфейс старой системы был отрисован в Photoshop, поэтому было принято решение начать все заново в Sketch. Была разработана сетка, стили типографики и цветовая палитра.
Типографика
Мы постарались исправить все точки боли и устранить очевидные проблемы, которые беспокоили пользователей системы. Интерфейс старой системы был отрисован в Photoshop, поэтому было принято решение начать все заново в Sketch. Была разработана сетка, стили типографики и цветовая палитра.
Цветовая палитра
В оформлении использована спокойная цветовая гамма. Черный и серый оттенки для текста и синие для элементов интерфейса — кнопок и активных элементов в меню. Уместно также использовать фирменный градиент для рекламных баннеров, плашек и т. д.
основной цвет текста
HEX
#333333

RGB
50, 50, 50

дополнительный цвет текста
HEX
#999999

RGB
153, 153, 153

цвет неактивного текста
HEX
#EFEFEF

RGB
239, 239, 239


цвет кнопок и ссылок
HEX
#0077CC
RGB
0, 119, 204


цвет активных пунктов меню
HEX
#D6EEFF

RGB
214, 237, 255

фирменный градиент
HEX
#76B478
HEX
#A8CF5D

Новое главное меню
Для конкурса Лидеры России появилась возможность сократить количество пунктов в главном меню и сделать его более удобным для использовния. Также мы сделали разделители, чтобы разделы лучше воспринимались визуально.
ПРОБЛЕМА
 РЕШЕНА
меню на главной странице
menu
Облегченный компактный вид меню преобретает на страницах, кроме главной
menu
при наведении курсора меню раскрывается
menu
Пользователи Интранета Mail.ru жаловались на перегруженное главное меню, а также его отсутсиве на всех остальных страницах сервиса. Нам удалось решить эту проблему, теперь меню принимает компактный вид на всех страницах, кроме главной. Это экономит время, теперь не нужно переходить на главную страницу, чтобы перейти в другой раздел.
Набор символов
Набор символов, цветов интерфейса и иконок для уницикации интерфейса. Набор в процессе соборки и будет постепенно обновляться!
simbols simbols simbols simbols
4-Й ЭТАП
Новый UI
Результатом исследования стал учучшенный пользовательский интерфейс. Логика системы осталась прежней — мы не стали менять ее кардинально (не позволял бюджет проекты и сроки) сосредоточившись на решении локальных проблем учитывая пользовательский опыт.

Главная страница Интранета Лидеры России стала легче и понятнее, появилось больше воздуха, разделы стали проще и логичнее.
screen
screen screen screen
Обновленный кабинет
В личном кабинете появились новые вкладки, информация теперь распределена между разделами «Основное» и «Навыки». Мы посчитали, что навыки вполне можно разместить
в отдельном разделе. В результате страница пользователя смотрится легче и гармоничнее.
screen
screen
screen
screen
screen
screen
screen
screen
Страницы в работе
screen screen
screen screen
screen screen