Тысячи карт в одну колоду: как создавался интернет-магазин для фанатов игры Magic: The Gathering

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

Но на этот раз специфика проекта требовала детального проектирования сервиса. 

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

Аудитория сервиса — фанаты и коллекционеры всемирно известной игры Magic: The Gathering. Они регулярно встречаются, играют, обменивают и продают карты.

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

Оптимизируем поиск

За 18 лет существования игры были выпущены сотни тысяч карточек. У каждой карточки свой уникальный набором характеристик: 

• язык (всего 11 языков); 

• мана (сила);

• сет, в котором была выпущена карта;

• цена на бирже;

• художник-автор иллюстрации. 

Все эти данные необходимо было собрать и отсортировать.

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

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

С некоторыми параметрами возникали непредвиденные проблемы. Например, цена. Заказчику было бы весьма проблематично (читай невозможно) вручную выставлять стоимость для каждой карточки. Поэтому встал вопрос об автоматическом ценообразовании, чтобы при поиске покупатель мог увидеть ориентировочную стоимость на каждый наличный экземпляр. 

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

С ID авторов-иллюстраторов тоже возникла проблема — в API они отображались некорректно. Нам пришлось искать выход: как связать поля, чтобы работал поиск по художникам. В итоге мы решили сопоставлять художников скриптом для налаживания поиска. 

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

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

Разрабатываем поисковые параметры

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

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

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

Мы также выделили в интерфейсе несколько вариантов действия: «Купить», «Заказать поиск» (если карточки нет в наличии), «Оформить предзаказ» (если карточка еще не вышла). Этот параметр, а также состояние физической карточки продавец выставляет самостоятельно в админке. 

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

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

Прорабатываем визуальную концепцию

В визуале нам важно было отразить специфику субкультуры фанатов Magic: The Gathering.  

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

Насыщенные картинки были дополнены простым динамичным паттерном четырехконечной звезды в разных частях интерфейса. Цветовое решение сервиса такое же простое — сочетание оранжевого и темно-синего цветов. 

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

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

Goldfish разработан специально для фанатов Magic: The Gathering, что выгодно отличает его от других сервисов. Для нас в приоритете был комфорт аудитории, и мы четко следовали этому принципу. Больше всего времени мы потратили на точечную проработку проблем, возникавших при поиске и фильтрации пересекающихся параметров.

Сегодня сервис Goldfish уже помогает фанатам игры в России пополнять свои коллекции.