Максим Половинко

Контакты

Максим Половинко

Меню

Максим Половинко

Контакты

Назад

Назад

Métas

Métas — это персонализированный веб-инструмент для отслеживания игровых событий в реальном времени для MMORPG Guild Wars 2.

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

Роль

Product Designer, Frontend Developer (full cycle)

Стек

Figma, React, Vercel

Платформа

Web

Figma

Контекст
& Проблема

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

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

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

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

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

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

Для примера здесь я привел лишь два трекера — оба из топа выдачи поисковика и оба выглядят очень недружелюбно и нагружено, чтобы быстро в них разобраться. Например, у World Boss Timer есть даже целая подсказка с руководством что означают элементы на карточке и как ими управлять.

Для анализа конкурентов выделил три основных критерия:
‣ Актуальность информации в трекере
‣ Порог входа (насколько просто разобраться в сервисе обычному пользователю)
‣ Наличие базового функционала — фильтр событий и возможность отмечать уже выполненные

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

World Boss Timer
Event timer via official Wiki

Вью & сториз

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

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

Хотелось бы иметь быстрый поиск по событиям или настраиваемый фильтр

Неудобно, что сразу после начала ивента, он моментально пропадает из списка

Полезно было бы еще иметь возможность фавить ивенты

Нужен таймер дня и ночи, потому как на этом завязаны некоторые механики

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

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

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

Неудобно, что сразу после начала ивента, он моментально пропадает из списка

Хотелось бы иметь быстрый поиск по событиям или настраиваемый фильтр

Полезно было бы еще иметь возможность фавить ивенты

Нужен таймер дня и ночи, потому как на этом завязаны некоторые механики

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

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

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

Хотелось бы иметь быстрый поиск по событиям или настраиваемый фильтр

Неудобно, что сразу после начала ивента, он моментально пропадает из списка

Полезно было бы еще иметь возможность фавить ивенты

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

Нужен таймер дня и ночи, потому как на этом завязаны некоторые механики

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

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

Хотелось бы иметь быстрый поиск по событиям или настраиваемый фильтр

Неудобно, что сразу после начала ивента, он моментально пропадает из списка

Полезно было бы еще иметь возможность фавить ивенты

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

Нужен таймер дня и ночи, потому как на этом завязаны некоторые механики

Отдельно выделил основные боли пользователей

‣ Устаревшие визуально и функционально трекеры
‣ Новым игрокам трудно ориентироваться в легаси трекерах и следить за всеми событиями одновременно
‣ Информация на многих трекерах уже не актуальна

Инсайты

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

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

01

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

02

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

03

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

04

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

05

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

06

Дизайн

Design Principles

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

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

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

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

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

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

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

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

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

Без аккаунтов и барьеров на входе
Modern home office setup with a monitor, ergonomic chair, keyboard, and indoor plants near a window with blinds.

[01] Лого

Modern home office setup with a monitor, ergonomic chair, keyboard, and indoor plants near a window with blinds.

[02] Концептинг

Modern home office setup with a monitor, ergonomic chair, keyboard, and indoor plants near a window with blinds.

[03] Основной флоу

  • [01]

    Макет логотипа

    [02]

    Концептинг

    [03]

    Основной флоу

  • [01]

    Макет логотипа

    [02]

    Концептинг

    [03]

    Основной флоу

Макеты и прототипы

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

Проработка болей пользователей

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

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

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

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

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

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

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

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

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

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

1/2
1/2

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

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

Решение

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

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

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

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

Решение

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

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

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

Решение

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

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

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

Решение

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

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

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

Решение

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

Адаптивная глубина ленты событий

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

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

Решение

Чтобы точнее планировать свое время, пользователь может устанавливать на какое количество часов вперед в ленте будут отображаться события — от 1 до 24 часов.

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

Edge cases

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

Заключение

Метрики успеха

Главной метрикой можно считать стабильное количество посещений и сравнительно низкий BR — значит трекером действительно пользуются.

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

Почему на графике такие колебания

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

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

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

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

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

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

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

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

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

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

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

Create a free website with Framer, the website builder loved by startups, designers and agencies.