Максим Половинко, продуктоый дизайнер

Контакты

Меню

Контакты

Métas

Métas — это персонализированный веб-инструмент для отслеживания игровых событий в реальном времени для MMORPG Guild Wars 2.
В отличие от существующих аналогов, которые предлагают события в виде перегруженных таблиц с устаревшим визуальным языком, сложной навигацией и ограниченной функциональностью, данный сервис построен вокруг идеи качественного пользовательского опыта с интуитивно понятным интерфейсом.
Ключевые преимущества — кастомизация трекера, система избранного для приоритизации контента, отслеживание ежедневных наград и прочие QoL инструменты.

Год

2025

Роль

Product Designer, Frontend Developer (full cycle)

Стек

Figma, React, Vercel

Платформа

Web

Figma

Контекст и проблема

Guild Wars 2 построена вокруг масштабных мета-событий, которые происходят по заданному расписанию в различных зонах игрового мира, при этом внутриигровых инструментов для их отслеживания нет

Проблемы

Устаревшие визуально и функционально трекеры

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

Спроектировал карточки ивентов с необходимой информацией и интерактивными элементами: ссылка на вики, добавление в избранное и быстрое копирование координат телепорта. Добавил подсказки о функциях трекера, предусмотрел emergency flow и протестировал юзабилити с небольшой группой волонтёров

Новым игрокам трудно ориентироваться в легаси трекерах и следить за всеми событиями одновременно

Информация 22 многих трекерах устарела

Навайбкодил простой парсер на питоне, который собирает всю нужную информацию с официальной вики в локальную json таблицу для функционирования таймеров

Исследование и анализ

Методы

GW2 Wiki

Анализ конкурентов

Сценарии и боли

▪︎ После того, как ивент начинается, он моментально пропадает из списка

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

▪︎ Сложная навигация и неочевидные настройки

▪︎ Нельзя фавить ивенты

▪︎ Нет таймера дня и ночи

▪︎ Нет быстрого поиска по ивентам

Вью с пользователями

▪︎ Не у всех мощные ПК, а трекер всегда открыт во время игры

▪︎ Важно быстро зацепиться за нужную информацию

▪︎ Цвет и визуальные маркеры работают быстрее текста

▪︎ Избыточные фильтры и инструменты, вынесенные на главную мешают восприятию

▪︎ Пользователи хотят гибкую персонализацию без обязательной регистрации

▪︎ Пользователи не любят процесс регистрации -> 97% опрошенных сервисом будут пользоваться на десктопе -> нет необходимости кроссплатформенной синхронизации настроек

Основные сценарии

Текущие события на одном экране

Не пропустить ближайшие события

Отмечать интересные события

Контролировать прогресс по наградам

Design Principles

Фокус на таймере

Интерфейс для быстрого скана

Минимум кликов до информации

Без аккаунтов и барьеров на входе

Дизайн

Ключевые дизайн-решения

Основной флоу: двухпоточная лента

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

Решение

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

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

Визуальная иерархия: цветовое кодирование

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

Решение

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

Контекстная сортировка: избранное

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

Решение

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

Геймификация рутины: отслеживание полученных наград

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

Решение

Интерактивная кнопка на каждой карточке, которая отмечает статус события - получена ли сегодня награда или еще нет. В 00:00 UTC (резет наград по серверному времени) происходит автоматический сброс всех карточек. Дополнительно, в модальном окне фильтров можно разом увидеть все события, за которые уже получена награда. Если опция включена в настройках, рядом с названием завершенных событий, будет появляться соответствующая иконка.

Визуализация скрытых механик: циклы дня и ночи

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

Решение

Два индикатора (для двух регионов игры с разным временем) с градиентной заливкой: от светло-желтого (день) к темно-синему (ночь). Рядом с каждым — текстовая метка текущей фазы и времени.

Edge cases

Проработаны узкие места сервиса и учтены различные нестандартные сценарии и состояния.

Дизайн-процесс

Wireframe & релиз

Интерфейс изначально собирался с прицелом на один сценарий — висеть вкладкой в браузере на десктопных экранах с разрешением >1400px, но, в ходе разработки увидел возможность сделать его адаптивным, чтобы имелась возможность пользоваться сервисом на любом устройстве. Где-то пришлось ужимать, где-то — наоборот, давать больше воздуха. Вышло не без компромиссов, но результатом доволен. С технической стороны я сознательно пошёл в сторону упрощения: без бэкенда и без аккаунтов. Все хранится локально — настройки, прогресс, избранное. Это оказалось не только проще в реализации, но и логичнее для самого сценария использования. Самое важное — время. Серверное время по UTC, локальное время пользователя, ежедневные ресеты — все это запросто ломает пользовательский опыт, если не уделить достаточно внимания. Так я выстроил систему, где пользователь не думает о таймзонах — все время автоматически пересчитывается под локальное для каждого пользователя.

На начальных этапах в дев билде были заметные проблемы с производительностью даже на мощной системе. При этом не у всех игроков мощные машины — это было очевидно еще на этапе ресерча. Поэтому пришлось оптимизировать: от перехода на более легкие библиотеки и виртуализации списков до аудита лишних ререндеров и код сплитинга. При этом, на этапе разработки, при знакомстве с различными фреймворками и углублении знаний о возможностях и ограничениях React, добавлялись, удалялись и изменялись многие детали дизайна. В итоге работа над проектом в качестве не только дизайнера, но и разработчика, развила навык оценки дизайна не только с точки креативности и пользовательского опыта, но и с точки зрения соотношения необходимых на разработку ресурсов(=времени)/целесообразности имплементации конкретных функций. Другими словами, стало понятно, что действительно важно, а что можно безболезненно выкинуть не с точки зрения дизайна, а с точки зрения разработчика. Так, некоторые решения упростил, от части идей отказался совсем. И это, пожалуй, было самым полезным опытом в проекте.

Результаты и выводы

Если коротко — сервис делает свою работу

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

Что это дало мне как дизайнеру?

Во-первых, опыт полного цикла на практике. От идеи и макетов в блокноте до работающего продукта, который кто-то открывает каждый день.

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

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

Ну и да, пришлось научиться вовремя останавливаться и не переусложнять. Хотя, если честно, это до сих пор сложно👀

Посмотреть проект в лайве