Руководство любит упарываться в красоту интерфейса. Придираются чуть ли не к каждой кнопке, цвету, размещению и т.д, тратя на этому уйму времени.
Тем временем, один из самых крупных сайтов в США (картинка снизу). Никаких вам А/Б тестов. До 200млн. посещаемость в месяц. Простой принцип: "Работает - не трожь!"
После 9 и 11 класса школьники сталкиваются с тяжелым выбором — на кого пойти учиться и стоит ли выбрать работу, вместо образования. Этот вопрос легко бы закрывала грамотная профориентация, которой в современном образовании уделяют крайне мало времени. Мобильное приложение EASY — про грамотную профориентацию и углубленные знания в digital-сфере.
Но перед началом давайте знакомиться — на связи UXART. С 2018 года реализовали более 250 различных проектов для корпораций. Входим в ТОП-20 дизайн студий России. И просто делаем интернет удобнее)
С темой образования сталкиваемся уже не в первый раз — в 2021 году познакомились с ребятами из GeekBrains, летали к ним в офис и в итоге сделали большой совместный проект, но он под NDA:(
Зато есть фоточки из офиса:
Сегодня расскажем о проекте EASY — мобильном приложении, которое предлагает школьникам попробовать себя в современных digital-профессиях и пройти стажировку в крупных компаниях.
К нам пришли с интересным предложением — разработать продукт, который станет для школьников спасательным кругом в их будущем.
Суть приложения — с ранних лет дать возможность подросткам изучать профильные знания и зарабатывать опыт в решении реальных задач.
В основе находятся задачи, с которыми сталкиваются специалисты из разных digital-сфер: от журналистов до бэкэнд разработчиков. Школьники в игровом стиле знакомятся с профессиями, проверяют свои знания и если им все нравится, в будущем они могут попасть на стажировку в выбранную компанию.
Таким образом, после выпускного, школьники будут лучше понимать, чем хотят заниматься и сделают правильный выбор для своего счастливого будущего.
Но самое интересное — история публикации приложения. Изначально, все хотели реализовать в привычном формате мобильного приложения, которое пользователи бы скачивали на свои устройства (Android или IOS — не важно).
Однако, разработка затянулась, разработчики менялись, деньги тратились, а в продакшен выйти все не могли. Мы (как команда UXART) стали продакт-менеджерами, т.к. идеально знали продукт изнутри — об этом подробнее вы узнаете чуть ниже.
После мы помогали выбрать новых разработчиков, выделить MVP, довели проект до релиза в виде приложения ВК, но про весь этот путь поэтапно расскажем ниже, так что не пролистывайте)
В основе проекта лежало слово «профориентация». Мы приступили к формированию позиционирования и нейминга, стремясь сделать профориентацию более понятной и доступной.
Мы провели несколько итераций обсуждений: начали обдумывать, какой ассоциативный ряд выстраивается со словом «профориентация». Разделили термины на 6 пунктов:
Выбор
Поиск
Цели
Будущее
Молодость
Профессия
И каждому пункту начали присваивать определенные слова. Так, например, с выбором ассоциируется «распутье», а с молодостью «озорство». Составили более 50 ассоциаций, но в конечном счете остановились на простом, но запоминаемом слове — «Изи».
Наша ЦА — школьники, мы провели опрос у представителей этой группы и подтвердили нашу гипотезу. Изи — понятно, регулярно используется в общении и имеет понятный контекст.
На протяжении всей работы над брендбуком выступали в роли арт. дирекшена:
Руководили процессами
Задавали вектор развития
Предлагали идеи по палитре, элементам логотипа и паттернам
В конечном счете совместными усилиями придумали и реализовали такой логотип и фирменный стиль, который идеально ложился на все социальные сети заказчика:
Основа приложения — кейсы. Здесь в игровом формате подростки знакомятся с новой профессией, проверяют свои знания и узнают, чем примерно занимаются специалисты из этой сферы.
Если подростку нравится то, что он видит, ему предлагают пройти профориентационную консультацию, а затем он может попасть на полноценную стажировку в компании.
Пока одна часть команды занималась фирменным стилем — другая анализировала прямых и косвенных конкурентов. Мы изучили 7 проектов в схожей тематике и выделили 5 основных приёмов для нашего приложения:
Пользователям предлагают сопоставить термин и его расшифровку.
Выведен один вопрос и 4 варианта ответа — нужно выбрать правильный.
Например, если пользователь свапает вправо — утверждение считается неверным, если влево — то все верно.
Косметическая история — за каждый пройденный курс пользователь получает мини-ачивку в своем профиле.
Не относится к заданиям напрямую, но стоит это упомянуть. Для форматов с большим количеством заданий мы спроектировали RoadMap — на этой карте пользователи могут отслеживать свой прогресс в конкретной отрасли.
Все гипотезы с аналитикой и примерами того, как мы можем реализовывать задания собрали в отдельный документ и передали заказчикам и разработчикам.
На общем созвоне со всей командой обсудили примеры кейсов от других компаний, которые уже есть на рынке, обсудили трудоёмкость каждого решения, чтобы определить MVP функционал, которого хватит, чтобы охватить все задания из кейсов.
Перед отрисовкой дизайна, чтобы сконцентрироваться на содержании и функциональности, мы разрабатываем черно-белые прототипы. На этом этапе уже есть визуализация, которая не занимает много времени, но воспринимается проще, чем текст в ТЗ. Давайте немного про каждый экран:
Классический первый экран, который встречает пользователя. Единственное, что можно выделить — на момент прототипирования этого экрана мы еще не утвердили «Изи», из-за чего в центре красуется «Профи».
Здесь находится самая главная информация — кейсы по отраслям. Если вы хотите изучить конкретный проект вне рамок «профессии», выбирайте понравившейся и начинайте проходить. А если разбегаются глаза и не знаете, что попробовать первым – поиск и фильтрация поможет вам.
В фильтрах разделили кейсы по профессиям, времени, сложности и цене.
Важный момент — проект распространяется на бесплатной основе. Весь функционал бесплатный, но некоторые кейсы при этом остаются платными. Сделано это для того, чтобы сузить воронку до тех, кто действительно готов пройти кейс и попасть на стажировку.
Из приятного — цена на такие кейсы крайне мала и чаще всего не превышает цену кружки кофе)
Карточка кейса содержит краткое объяснение предстоящей задачи и примерное описание задания. Также здесь отображается сложность — от SoEasy до NOTEasy. Да, сложность мы тоже решили обыграть, чтобы название EASY лучше запоминалось пользователями.
Грубо говоря, список кейсов, который подходит конкретной отрасли (например, IT, кино, механика и т.д.). Если прошлый блок был про отдельные задания, не сильно связанные друг с другом, то отрасли это группировка кейсов.
Здесь в каждой карточке описывается инфа по отрасли, а также показаны профессии внутри. Так, IT делится на программистов, Web-дизайнеров, менеджеров по продажам… ну вы поняли.
Если пользователь не знает, что подойдет именно ему — в нижней части экрана есть пункт «я не знаю, что мне подойдет». При нажатии вам предложат пройти тест, который подскажет, что подойдет вам по интересам.
Здесь также есть возможность записаться на консультацию с профориентологом, который в режиме реального времени расскажет всё по отраслям и поможет с выбором.
Первое, что нужно отметить перед началом — отрисовали два варианта тем. Светлую и темную. Кроме естественного затемнения фона также изменили цвета иллюстраций и кнопок. Так, например, выглядят экраны, о которых мы говорили выше:
А дальше про другие ключевые экраны EASY.
Классика, которая встречает пользователя в практически любом приложении. В онбординге мы рассказываем школьникам, в чем смысл приложения EASY, с чем придется столкнуться и какого результата можно достичь, если «на отлично» выполнять все задания.
Как и говорилось в аналитике, мы выделили несколько статичных вариантов заданий. Среди них — ответы на вопросы, выбор картинки из списка (новое), свайп.
Также реализовали несколько творческих вариантов заданий:
Ввод текста по заданию (придумать текст для первого абзаца своей статьи)
Задание с эскизом (спроектируй летающую тарелку)
Задание с видео (просмотреть видео и ответить на задание)
Творческие задания, в отличие от статичных, проверяют люди, которые впоследствии дают школьникам обратную связь. Смысл этих заданий — получить фидбек и, в случае чего, перепройти кейс.
После прохождения кейса пользователям показывают итоговый результат и предлагают подать заявку на стажировку.
Тут нужно сделать небольшое отступление. У каждого кейса в верхнем левом углу указана компания, которая и составила задания. Именно в эту компанию и передается заявка на стажировку.
Простыми словами — карта заданий кейса. На игровом поле есть точки, пройдя которые ты двигаешься вверх.
Вторая, но не по важности, задача, с которой мы столкнулись во время работы над EASY — разработка собственной административной панели. Здесь партнеры могли бы создавать свои курсы и задания, которые в итоге синхронизируются с приложением.
Для этого нам нужно было спроектировать и задизайнить продукт, с которым мог бы совладать любой пользователь. По функционалу нужно было внедрить:
Создание нового кейса
Добавление задач в кейсах
Возможность изменять тип задания
Отслеживать прохождение заданий
Редактирование задач
По мере проектирования административной панели также добавился второстепенный функционал — по типу добавления обложки, новых картинок и видео в сами задания и так далее.
А в финале этой истории, чтобы презентовать потенциальным партнерам EASY — сделали презентацию и лендинг, с которым вы можете ознакомиться ниже)
В итоге мы создали уникальное мобильное приложение, которое помогает подросткам со всего СНГ обучаться новому и проходить стажировки в именитых компаниях. А еще получили первое место на Workspace Digital Awards — ежегодной независимой премии за кейсы в сфере разработки, дизайна и digital-маркетинга.
С вами был редактор UXART, Спасибо каждому за просмотр. Ставьте лайки и пишите комменты, до скорых встреч.
А еще не забывайте подписываться на наш тг-канал: здесь делимся внутрянкой, много рассказываем про дизайн и освещаем активности в digital-тусовке. Скучно не будет)
А если хотите узнать дополнительную информацию про EASY и работу над проектом, то предлагаем ознакомиться с кейсом на сайте:)
больше душных картинок в д(а)изайн
tg: @daesigne
Открыл сейчас вкладку подписок - а там "свежее" Да е.в рот, я рыцарем отказался быть, чтобы читать нормальный контент
Или дело в том, что я вчера таки сделал золотой статус? Да в рот мне ноги, уверен, ответа от админо не будет. Пойду искать другой ресурс..
Корпоративный портал — огромный внутренний сервис, одной из целей которого является собрать сотрудников компании в одном удобном месте. Как сделать качественный корпоративный портал и какие задачи он решает? С 2018 года реализовали 20+ порталов для корпораций, таких как: Росгосстрах, РИВ ГОШ, НЛМК и многих других. Давайте разбираться)
Но для начала давайте познакомимся. С вами 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
Как совместить игры и продукт серьезной корпорации так, чтобы он был одинаково интересен сотрудникам ТЕХНОНИКОЛЬ и обычным пользователям? История создания визуальной новеллы, которая рассказывает юзерам о продукции компании в игровой форме.
Кто мы?
Всем привет, на связи студия интерфейсов 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. Это первый кейс нашего редактора, так что поддержите его в комментариях, если статья понравилась вам. Давайте сделаем его день приятнее)
