Как создавался новый Шелл — рассказывают наши эксперты

Недавно состоялся релиз нового Шелла — со стильным дизайном и ворохом полезных функций, которые оценят все клубы! Но дорога к главной новинке года была извилистой!

О ней расскажут наши эксперты SmartShell: Анастасия Мельниченко (менеджер продукта) и Роман Ивашкевич (технический директор и сооснователь компании). 

Вы узнаете

• О причинах и процессе разработки нового Шелла;
• О целях этого шага и исследованиях рынка. 

Какие были причины для редизайна Шелла

У нас было три главных причины редизайна Шелла. Первая причина — это ты… Ладно, на самом деле мотиваторы такие: 

• Блокирующая архитектура; 
• Медленная адаптация некоторых игроков к системе и интерфейсу; 
• Ограничения старого дизайна. 

Каждая из этих причин тянула за собой свои минусы. Старая архитектура увеличивала время разработки и усложняла интеграцию новых фич. А из-за «хвостов» прошлого дизайна новые элементы выглядели чужеродно. 

Поэтому мы стремились упростить пользовательский «путь» и сделать взаимодействие игрока с системой (и клубом) более нативным и приятным.

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

Какую мы проводили аналитику

• Исследование конкурентов в индустрии компьютерных клубов (мы изучили с десяток различных проектов, включая как актуальные системы, так и «почивших в бозе» представителей рынка);
• Оценка смежных технических проектов (игровых лаунчеров, цифровых магазинов, подписочных платформ); 
• Изучение отзывов реальных клиентов в клубах.

Все выводы были сделаны с помощью детального анализа Customer Journey Map — «карты» путешествия игрока. То есть процесса от рождения идеи посещения клуба и до завершения игровой катки. 

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

В оценке «народного настроения» SmartShell помогли интервью с самими клубами, а ещё — администраторы и техподдержка, которая была в постоянном контакте с геймерами.

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

[К примеру], пользователи часто спрашивали: «Почему нельзя запустить игру в пару кликов, как в Windows?». Или жаловались, что поиск нужного тарифа занимал слишком много времени, отвлекая от игры.

Какие были цели редизайна

• Собрать фундамент для будущего развития и новых функций (главная сложность);
• Масштабировать архитектуру для ускорения работы; 
• Сделать интерфейс Шелла «знакомым» для геймеров; 
• Обновить дизайн, поразив им клубы и самих гостей;
• «Подогнать» всю систему SmartShell (Шелл, SmartGamer, SmartKiosk) под единый стиль;

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

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

Самые наглядные изменения интерфейса 

• Правая панель — теперь на ней собраны все необходимые игроку виджеты (Профиль, Состояние депозитного счёта и достижения);

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

• В правую панель переместились и модальные окна, чтобы пользователь лишний раз не тратил время на открытие всплывающих оповещений. Короче говоря, обновления стали естественной частью «единого» экрана;
• Появился больший визуальный акцент на самих играх и приложениях — у них больше нет навязчивой обводки и большого «контейнера» с обложкой, названием и кнопкой запуска. Последняя сразу интегрирована в обложку, а «контейнер» подстраивается под её размеры.
• Кроме того, одним из главных изменений в новом Шелле стали возможности кастомизации. Раньше клубы, к примеру, могли менять карточки игр и ставить свои картинки на заставку. Теперь же ассортимент изменений значительно расширился — можно подобрать цвет Шелла под стиль вашего клуба (меняется за секунду), добавить свой логотип, тонирование и не только. Обо всех возможностях кастомизации мы уже рассказывали в отдельной статье.

 

Как мы принимали решения 

• Все решения принимались коллективно (отделами продукта, дизайна и разработки — это было частью процесса проектирования) и на основе интерактивных прототипов. А ещё мы проверяли свои гипотезы «в поле» (запуск игры, покупка тарифа).
• В расстановке приоритетов задач помогали не только мнения участников, но и расчёты по системе RICE (оценка охвата задач, их потенциального влияния, уверенности в результате и нужных усилий) и MoSCoW (что обязательно нужно добавить, а что — можно сделать позже); 
• Если решение не требовало «совета мудрецов», то мы сразу отправляли его в разработку;
• Главное кредо обновления напоминала клятву докторов — «не навреди». Правда, тут речь идёт о привычном опыте геймеров; 
• В приоритет вышло улучшение существующих элементов Шелла, а не полная смена «парадигмы»;
• После сборок первых макетов в Figma проходила UX-ревизия и анализ всех элементов. Обычно ключевые решения принимались именно на этом этапе.

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

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

Какие задачи мы ставили перед дизайнерами 

• Построить новую дизайн-систему SmartShell с полным переосмыслением её восприятия у гостей. Ведь это уже не просто софт, а целая экосистема (SmartKiosk, SmartGamer и так далее). Короче говоря, хотелось увидеть меньше утилитарности и больше «жизни» (поэтому появилась адаптация под бренд-цвет клуба, затемнение, счётчик авто-закрытия);
• Сделать интерфейс более дружелюбным для игроков, но без «агрессивных» элементов (неона, жестких градиентов и так далее); 
• Укрепить связь между продуктами экосистемы SmartShell — к примеру, с приложением SmartGamer на экране авторизации (где появился QR-код для входа, номер ПК и так далее);
• Увеличить акцент на контенте в разделе «Игр и приложений» — карточки стали крупнее, появились динамические лейблы («Бесплатно», «Ограничения по возрасту»), визуальные категории (RPG/Шутеры и так далее);
• Сделать магазин «Витриной» для клуба, где товары были бы уникальной частью клубного опыта, а не просто списком в Exel-таблице. За счёт карточной сетки нового формата интерфейс стал атмосферным и адаптивным (появились подсказки, а названия теперь стало легче считать на экране).

В чём новый Шелл поможет клубам?

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

Звать администратора вряд ли придётся (особенно учитывая грядущую функцию чата), а внимание игрока будет всегда сфокусировано «на деле». 

За счет единого стиля продуктов SmartShell гость легко разберется как с мобильным приложением SmartGamer, так и со SmartKiosk или SmartLock TV. А чем довольней будет клиент, тем чаще он будет возвращаться именно в вашу киберарену! 

Мы исходили из простой идеи: чем меньше времени геймер проводит в Шелле, тем больше — в игре. А значит, интерфейс должен помогать, а не отвлекать.

Мы постоянно рассказывает про интересные моменты из жизни SmartShell и индустрии в блоге, но ещё делимся дополнительными подробностями в соцсетях, поэтому не забывайте на них подписываться!

• ВКонтакте;
• Telegram;
• YouTube.

🏆 И помните… Be Smart. Be SmartShell.