Ловкость решений и никаких шаблонов — как мы создали кастомный магазин Magic: The Gathering

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

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

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

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

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

На первом этапе работы мы коснулись вопроса сортировки карточек. Каждая из нескольких сотен тысяч карточек, выпущенных за 18 лет существования игры, обладает особым набором характеристик: язык (карточки выпускаются на 11 языках), мана (сила), сет, в котором была выпущена карта, цена на бирже, художник-автор иллюстрации. Все эти данные для нескольких сот тысяч карточек необходимо было откуда-то взять, отобрать и отсортировать.

Поскольку мы работаем с аудиторией заядлых фанатов, мы решили воспользоваться одной из собранных ими баз — Scryfall. Так что данные мы взяли оттуда.

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

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

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

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

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

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

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

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

Собранные в базу параметры необходимо было отобразить в каталоге. А еще — настроить удобные кастомные фильтры, подходящие для фанатов и коллекционеров

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

С другой стороны, помимо подтянутых через API параметров, у нас были и свои, связанные с физическим состоянием конкретного продукта: «новая», «почти новая», «уже играли» и т.д.

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

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

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

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

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

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

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

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

Сервис разработан специально для фанатов Magic: The Gathering, здесь все сделано для удобства целевой аудитории. В этом его главное отличие от других интернет-магазинов, которые зачастую пытаются притянуть UX на стандартные витрины интернет-магазинов. Мы же пошли с другой стороны, и в итоге получился удобный кастомный сервис.