UXART

Кто мы?

Всем привет, на связи студия интерфейсов UXART, где мы вместе стараемся ежедневно делать интернет удобнее. Входим в топ-20 дизайн-студий страны по версии Tagline и имеем огромную экспертизу в дизайне и проектировании сложных продуктов.

Работали с ТЕХНОНИКОЛЬ, ЕВРАЗ, РОСГОССТРАХ, РИВ ГОШ, СБЕР и многими другими. Сейчас активно занимаемся редизайном своего сайта, но с частью кейсов вы можете ознакомиться на текущей версии (да, это небольшой анонс скорого редизайна, вы первые узнали об этом)

Что за проект?

«Бизнес-симулятор» или «ТЕХНОМАТРИЦА» от ТЕХНОНИКОЛЬ (далее ТН) — проект, в котором вам нужно будет вжиться в роль менеджера по продажам ТН и от лица сотрудника компании отвечать на вопросы заказчиков. Концепция идеально подходит тем, кто хочет прокачать свои знания и навыки в общении с клиентами.

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

Основной акцент поставлен на игровой формат взаимодействия пользователей и NPC (они же non-player character или же неигровые персонажи). Пользователи в ходе игры могут научиться общаться с клиентами и лучше понимать специфические запросы, которые нужно решить.

Для тех, кого пугает большое количество букв — можете посмотреть видос, в котором мы постарались рассказать всю информацию о ТЕХНОМАТРИЦЕ с монтажиком, вставками и прочим:

Задача

В первую очередь ТЕХНОМАТРИЦА создавалась для менеджеров по продажам ТЕХНОНИКОЛЬ. Поэтому нам нужно было придумать и реализовать проект, который с первых секунд заинтересует юзеров и будет мотивировать их продолжать пользоваться сервисом.

Мы решили воспользоваться форматом геймификации и воплотить его, как новый формат обучения. Во время работы над проектом нам нужно было разработать сложный интерфейс для ТЕХНОМАТРИЦЫ, который был бы понятен каждому, прост в управлении и имел мотивационную систему.

Работа над проектом

Работу поделили на 5 основных этапов:

— Аналитика

— Высокоуровневые прототипы

— Детализированные прототипы

— Итоговый дизайн хаба «ТЕХНОМАТРИЦЫ»

— Итоговый дизайн второстепенного функционала «ТЕХНОМАТРИЦЫ»

О каждом подробнее ниже.

Аналитика

В начале мы разработали майндмап, на котором показали пользовательский путь потенциального игрока. По задумке после регистрации юзера встречает главное меню, которое и является ключевым в данном проекте. Это место, которое далее мы будем называть «хаб», переводит игрока на активные события в ТЕХНОМАТРИЦЕ.

Например:

— Карта это основная игровая зона, где происходит непосредственный диалог с «заказчиком»

— Компьютер имеет разветвление: игрок либо заходит в чат с заданиями, либо переходит в справочник для изучения материала

Далее мы начали изучать конкурентов. Выяснили, что аналогов у ТЕХНОМАТРИЦЫ в том виде, который мы хотели реализовать, нет. Поэтому мы решили пойти другим путем — проанализировать игровую индустрию и механики, которые используют разработчики для мотивации игроков оставаться в проекте.

Мы выбирали между RPG (role-play game) и Visual novel.

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

Второй проще как в реализации, так и в понимании пользователя. Системы уровней и улучшения персонажа нет. Остается только сюжет, на который игрок влияет. Здесь упор идет именно на диалоги с персонажами и сотнями рутов (вариантов ответвлений основной истории).

В нашем случае ТЕХНОМАТРИЦА — обучение сотрудников и простых пользователей информации о продуктах ТЕХНОНИКОЛЬ. Поэтому жанр RPG попросту не подходит. Сделали выбор в пользу визуальных новелл.

После выбора начали изучать игровые механики и выделили основные паттерны:

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

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

— Каждый ответ влияет на финал диалога/игры.

Чтобы сделать игру интереснее — мы заранее сформировали список неправильных ответов, чтобы игроки анализировали запрос заказчика.

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

Так и в ТЕХНОМАТРИЦЕ, если игрок ошибется и проиграет, всегда есть возможность перепройти уровень.

— По мере прохождения герой получает валюту/одежду/навыки. Мы решили остановиться на двух типах валюты — деньги и рейтинг.

Напомним, первый отвечает за покупку косметических предметов (столы, стулья, переезд в новый офис), а рейтинг за место в общей таблице.

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

За систему удержания выбрали подарки и рейтинг игроков. За победу участники получают баллы и валюту:

— Баллы отвечают за положение игроков в таблице лидеров

— За валюту пользователи могут купить косметические предметы в свой хаб (он же офис)

Предусмотрели возможность обновления как деталей элемента (кресло, стол, декор и т.д.), так и смены помещения в целом — переехать из хрущевки в «Москва-Сити». Суммарно задизайнили 4 варианта главного экрана. Пользователь может переехать в новый офис, если заработает достаточное количество валюты.

«ТЕХНОМАТРИЦА» делится на две большие составляющие — главный экран, который представляет основной геймплей для пользователей и второстепенный функционал, отвечающий за косметическую составляющую.

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

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

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

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

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

Концепция «хаба» на этапе высокоуровневых прототипов заключалась в следующем:

— В центре пользователь видит монитор с новыми заданиями

— В левой части игрового поля находится справочник с полезной информацией

— В правой — медали, кубки и другие достижения, которые игрок получает по мере прохождения

— В неигровом меню пользователь отслеживает свою валюту и рейтинг, магазин, в котором он может покупать косметические предметы и историю баланса баллов

В профиле игроки заполняют свою личную информацию (ФИО, телефон, email), могут изменять аватарку и рамку, а также отслеживать «статус».

На этом этапе мы начали тестировать разные гипотезы и выстраивать общую стилистику для ТЕХНОМАТРИЦЫ. Решили, что перейдя в «монитор» пользователь сначала выходит на карту заданий, где сможет найти понравившийся заказ и перейти в чат.

Все взаимодействие с заказчиком будет проходить именно в этом чате.

Справочник — место, где пользователи могут выучить основную информацию о продукции и материалах ТЕХНОНИКОЛЬ. Так как в первую очередь ТЕХНОМАТРИЦА — про обучение, мы постарались составить удобный и понятный справочник с возможностью поиска.

С диалоговым меню поступили просто — взяли привычные паттерны социальных сетей и реализовали его во внутреннем функционале ТЕХНОМАТРИЦЫ. Таким образом слева пользователи видят все чаты, а также балл, который был получен за задание. А при клике на собеседника открывается полный диалог с возможностью общения.

И вот как в совокупности выглядел главный экран:

После реализовали кликабельный прототип, в котором показали основной функционал «ТЕХНОМАТРИЦЫ» и продемонстрировали игровую часть. Если вам интересно попробовать этот прототип, пишите в комментарии и мы оставим ссылку.

Итоговый дизайн «ТЕХНОМАТРИЦЫ»

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

Например, ранее мы предполагали оставить справочник в хабе, но в итоге переместили его в отдельное меню для оптимизации «рабочего места».

Обсудим основной игровой процесс «ТЕХНОМАТРИЦЫ»:

Перед началом игры пользователь должен перейти на карту и выбрать задание. Они имеют три уровня сложности: «низкий», «средний», «трудный». Отличаются как вопросами заказчика, так и валютой/рейтингом, который пользователь получит после успешного выполнения задания.

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

На карте также показывается краткое описание задания — проблема заказчика, информация об объекте и результат, которого вы должны достигнуть.

Рабочая переписка выполнена в формате мессенджера. В левой части список всех чатов, в правой — диалог с конкретным заказчиком.

Весь чат интерактивен. Например, если заказчик отправляет аудио-сообщение, игрок может прослушать его. Та же ситуация с фото- и видео-материалами.

А общаться с заказчиком можно при помощи заранее прописанных вариантов ответа.

Однако, стоит помнить, что «ТЕХНОМАТРИЦА» похожа на визуальные новеллы. А значит, что вы можете выбрать не тот вариант, из-за чего потеряете деньги и рейтинг. К каждому ответу стоит подходить ответственно и не отвечать лишь для того, чтобы ответить)

Также сделали обучение по канонам любых игр. В начале игрока приветствует гид, который рассказывает о том, как играть в «ТЕХНОМАТРИЦУ».

Итоговый дизайн второстепенного функционала «ТЕХНОМАТРИЦЫ»

Второстепенный функционал — экраны, которые напрямую никак не влияют на игровой процесс ТЕХНОМАТРИЦЫ. К ним относятся:

— Рейтинг — здесь пользователь может увидеть суммарное количество баллов и отследить свою позицию

— История баланса и достижения — отслеживание времени, денег и рейтинга по завершенным проектам

— Профиль — личная информация пользователя. В магазине игроки могут купить и изменить свою аватарку

— Справочник — основная информация по категориям ТЕХНОНИКОЛЬ

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

А также отрисовали более 40 наград в 3D и 15+ аватарок в 2D.

Также во время работы над проектом, отрисовали Лендинг и рассылки для менеджеров.

А если вы сами хотите попробовать себя в роли сотрудника ТН и поиграть в ТЕХНОМАТРИЦУ, вот ссылочка: https://academy.tn.ru/tnmatrix/ . Для игры нужно будет зарегаться на сайте, но это, я думаю, вы и сами понимаете)

Такой вот кейс у нас получился. Если у вас есть классные идеи, которые вы хотите реализовать — пишите нам и мы сделаем все на высшем уровне.

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

И вот теперь точно заканчиваем. По классике VC, советуем подписаться на наш телеграм канал, где мы выпускаем много контента по дизайну и не только: https://t.me/konakov_blog

Всем спасибо, с вами был редактор UXART, до скорых встреч!

P.s. Это первый кейс нашего редактора, так что поддержите его в комментариях, если статья понравилась вам. Давайте сделаем его день приятнее)

Но для начала давайте познакомимся. С вами UXART, где мы ежедневно делаем интернет удобнее. С 2018 года реализовали более 250 проектов для крупных корпораций.

Входим в ТОП-20 дизайн студий по мнению Тэглайна. Создали альянс MCARTxUXART, в этой команде продумываем и отрисовываем интерфейсы для корпоративных порталов крупных корпораций. И за эти интерфейсы получаем награды: например, из недавнего — золото за корпоративный портал для РИВ ГОШ.

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

Подробнее о том, кто мы и как работаем над проектами, рассказали в этом ролике, так что обязательно посмотрите перед чтением статьи:

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

Аудитория корпоративного портала — кто это?

Перед началом работы обязательно нужно ответить на следующие вопросы:

• Что мы делаем?

• Зачем нужен корпоративный портал?

• Кому он нужен?

• Какие задачи мы решаем?

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

• Документации по заработной плате сотрудника — это расчетные листы, график выплаты, премии и прочее

• Документы о прекращении работы с сотрудником — заявление об увольнении

• Дисциплинарные процессуальные документы

И так далее. Каждый раздел в компании хочет видеть на корпоративном портале функционал, который в первую очередь будет удобен ему.

И каждый блок будет иметь свою аудиторию ответственных людей. У них будут свои цели и задачи.

На простом примере:

• Бухгалтерия просит, чтобы юзеры могли сами делать себе справки

• HR просит добавить блок опроса на главную

• Маркетинговому отделу важно освещать активности внутри и вне компании

• А менеджеры хотят добавить возможность трекинга задач

• При этом ТОПам нужна аналитика и отчетность, которую они могут отслеживать без лишних кликов

И каждый отдел по-своему важен, но при разработке корпоративного портала нередки случаи, когда все тянут одеяло на себя.

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

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

Юзеров можно поделить на три основные группы:

• Производственные работники — рабочий персонал, у которых нет доступа к компьютерам. На корпоративный портал они заходят со специального терминала (визуально похож на Qiwi) или телефона. В основном заходят, чтобы узнать информацию по зарплате, больничным, отпускам и так далее

• Офисные сотрудники — у них есть доступ к компьютеру, но запросы сильно отличаются. Например, отслеживать свою загрузку, общаться с коллегами и так далее

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

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

Сделать это крайне сложно. И для решения этой задачи мы прибегаем к аналитике.

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

Подходы в дизайне и проектировании портала

Например, если мы берем классический сценарий с Битрикс24, стоит понимать, какой функционал имеет платформа без дополнительных интеграций стороннего софта.

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

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

Частая история — компания хочет использовать на своем портале фирменные цвета и визуалы. И если это удовлетворяет как целям «заказчика», так и пользователям, то лучше оставить все, как есть.

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

Если зайти на облачный Битрикс24, вы увидите, что он выполнен с акцентом на голубой цвет. Естественно, это не подойдет тому же РИВ ГОШ, о котором мы рассказывали вам в начале статьи. Тут можно увидеть, как фирменный стиль компании отразился на интерфейсе корпоративного портала: https://workspace.ru/cases/korporativnyy-portal-i-mobilnoe-p...

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

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

А теперь давайте представим: пользователь решил зайти в раздел «отпуск». Здесь для юзеров ключевой информацией станет:

• Количество неиспользованных дней отпуска

• Календарь

• Возможность подать заявку на отпуск

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

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

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

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

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

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

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

Мы подробно поговорили об этом выше. Не забывайте задавать себе три главных вопроса:

• Зачем этот портал?

• Кому он нужен?

• Какие задачи мы решаем?

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

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

Пользователей вашего портала всегда можно разделить на несколько групп. Как мы и говорили выше, чаще всего встречается 3 аудитории:

• Производственные работники

• Офис

• Удаленные сотрудники

А еще не стоит забывать о HR, бухгалтерии, маркетинговом отделе, менеджерах и ТОПах. Каждая компании имеет своё количество активных сотрудников, которые преследует свои цели на корпоративном портале.

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

(На самом деле, механизм чуть сложнее, но сегодня речь не про супер сложные механики)

Тренды в дизайне корп. порталов

И все это из-за того, что очень мало людей/студий, которые занимаются проектированием и дизайном корпоративных порталов. Еще меньше людей с достаточной экспертизой не только сделать качественный с точки зрения функционала, но и визуально приятный продукт.

Вторая причина — корпоративный портал делается раз на Х лет. Вот сделал себе, условно, СБЕР корп. портал и вспомнит о нем лишь в 2029 году.

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

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

• У нас был пример, когда мы начали собирать CJM и EJM для корпоративных порталов, многие компании удивлялись такому подходу

• А вот с дизайном и визуальной составляющей нужно решать по факту. Так как многие не готовы к резким переменам и привыкли «жить» в привычном ритме

• Некоторые не готовы сходу приступать к дизайну или прототипам и просят специальную документацию. Все нужно согласовывать не только между вами и заказчиком, но и внутри — между менеджерами и ТОПами компании

И последнее — тема корпоративных порталов закрыта. Мало кто рассказывает о том, как их делать, как анализировать аудиторию, как общаться с заказчиком, какие паттерны у корп. порталов есть и так далее.

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

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

А сегодня пора заканчивать. Спасибо каждому за чтение этой статьи. Не забывайте подписываться на наш телеграм-канал, в котором мы постим инфу по студии и не только (мемы, кто не любит мемы?): https://t.me/konakov_blog

С вами был редактор UXART. До скорых встреч <3