Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации
RUWARD AWARD 2024

ТЕХНОМАТРИЦА ТЕХНОНИКОЛЬ как способ обучения через игры

CX/UX/Product Кейс года
Страница кейса/результат: https://academy.tn.ru/tnmatrix/

Видео-презентация по заявке

1. Вводная задача от заказчика, проблематика, цели

Задача

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

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

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

Решение

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

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

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Работу над проектом разбили на 7 этапов:

— Аналитика

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

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

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

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

— Дизайн лендинга

— Дизайн рассылок для партнеров

Этапы

1. Аналитика

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

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

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

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

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

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

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

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

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

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

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

2-3. Прототипы главного экрана.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Дизайн лендинга

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

7. Дизайн рассылок для партнеров

Отрисовали 4 варианта рассылки для менеджеров ТН, которым предлагали попробовать «ТЕХНОМАТРИЦУ» первым.

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

50+ прототипов страниц

Задизайненные главные экраны «ТЕХНОМАТРИЦЫ»

Гид во время игры

Рассылки

3. Результаты сотрудничества

У нас нет доступа к KPI проекта, поэтому расскажем, как «ТЕХНОМАТРИЦА» добилась своих целей и добилась ли.

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

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

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

Новые предметы

4. Заключение

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

На сегодняшний день работа над проектом не заканчивается и мы помогаем ТН развивать «ТЕХНОМАТРИЦУ».

Лендинг