Ловкость решений и никаких шаблонов — собираем с нуля кастомный магазин Magic: The Gathering
ЗаказчикХобби-центр GoldfishЗадачаСоздать интернет-магазин коллекционных карточек Magic: The Gathering для российского рынка, разработать каталог и удобную кастомную систему фильтров для более чем 500 000 карт из 600 разных сетов
Вообще, мы не занимаемся интернет-магазинами. Наша специализация — создание кастомных сервисов с нуля, тогда как классические онлайн-магазины обходятся готовыми продуманными форматами, где уже есть подходящая система фильтров, личный кабинет для покупателя и админка для продавца.
Но на этот раз заказчик предложил нам создать не просто магазин. В первую очередь, Goldfish — этосамая полная в России база данных игральных карт, некоторые из которых можно купить с доставкой по всему миру. Сервис нацелен на особую аудиторию — фанатов и коллекционеров всемирно известной игры Magic: The Gathering. Это карточная игра с активной фан-базой, целым сообществом гиков, которые регулярно встречаются, играют, обменивают и продают карты, охотятся за ними повсюду.
Поэтому мы сфокусировались на детальном проектировании сервиса, приспособленного в первую очередь для быстрого и удобного поиска карточек, понятного и простого для специфической целевой аудитории. Нам нужно было создать не обычный интернет-магазин, но полную актуальную базу всех когда-либо выпущенных карточек в удобном интерфейсе, отражающем все необходимые параметры.
Проблема: каждая из нескольких сотен тысяч карточек, выпущенных за 18 лет существования игры, обладают особым набором характеристик: язык (карточки выпускаются на 11 языках), мана (сила), сет, в котором была выпущена карта, цена на бирже, художник-автор иллюстрации и т.д. Все эти данные для нескольких сот тысяч карточек необходимо было откуда-то взять, отобрать и отсортировать.
Решение: Хорошо, что мы работаем с аудиторией заядлых фанатов, которые собрали почти всю информацию в единые базы. Мы решили подтянуть данные с одной из них — Scryfall. Там уже были необходимые нам параметры на все выпущенные карточки, так что нужно было только подтянуть их через API.
Мы использовали номер карты и номер сета, одинаковый у карточек на разных языках, чтобы избежать дублирования, и вывели необходимые параметры в интерфейс — название, издание, цена, формат игры, оформление, степень редкости, язык, цвет, мана-стоимость и художник-иллюстратор.
Но с некоторыми параметрами возникли непредвиденные проблемы. Например, цена. Заказчику было бы весьма проблематично (читай, невозможно) вручную выставлять стоимость для каждой из сотен тысяч карточек. Поэтому встал вопрос об автоматическом ценообразовании, чтобы при поиске покупатель мог увидеть ориентировочную стоимость на каждый наличный экземпляр. Примерную цену, указанную в базе Skryfall только для карточек на английском (для других языков цены, в основном, отсутствуют), мы распространили и на другие языки. Позже, если покупатель оформляет заказ на имеющуюся в наличии карточку, продавец уточняет конкретную стоимость. В остальном, приблизительная цена отображается для всех карточек вне зависимости от наличия в магазине, так что фанат может ориентироваться при поиске нужного экземпляра.
С ID авторов-иллюстраторов тоже возникла проблема — в API они не отображались корректно, и нам пришлось отдельно придумывать как связать поля, чтобы работал поиск по художникам. В итоге мы решили сопоставлять художников скриптом, чтобы наладить поиск.
Это только некоторые конкретные проблемы, с которыми мы столкнулись при формировании базы. Сначала эта задача не казалась нам столь трудной. Но большое количество данных, которые нужно было отобразить, привело к проблеме их вариативности. Мы потратили кучу времени, чтобы понять и решить каждую из возникших мелких проблем и оптимизировать базу.
Но ключевую задачу мы выполнили — создали базу всех существующих карточек, выделив актуальные параметры и цены. После нам необходимо было встроить эту базу в удобный поисковый сервис.
Проблема: необходимо отобразить собранные в базу параметры в каталоге и настроить удобные кастомные фильтры, подходящие специально для фанатов и коллекционеров
Решение: Собрав базу, нужно было обеспечить удобные инструменты поиска и фильтрации. И здесь нам важно было помнить, кто наши юзеры.
Например, им часто все равно, на каком языке и в каком издании напечатана карта. Поэтому мы написали миддлвейр, который собирает из отдельных карт (карта, одинаковая по номеру и сету, но разная, например, по языку) некую общую «метакарту» и показывает ее в каталоге как одну, а уже внутри — с разными параметрами. Это облегчает поиск для фанатов и дает им возможность поэтапно добраться до конкретной «физической» карты.
С другой стороны, помимо подтянутых через API параметров, у нас были и свои, связанные с физическим состоянием конкретного продукта: «новая», «почти новая», «уже играли» и т.д. В этом плане каталог и поиск был полностью сформирован под специфические потребности игроков Magic. Но, в отличие от обычных фан-баз карточек, нам нужно было обеспечить возможность покупки физического носителя — бумажной карточки, а не картинки в базе.
Мы также выделили в интерфейсе несколько вариантов действия: «Купить», «Заказать поиск» (если карточки нет в наличии), «Оформить предзаказ» (если карточка еще не вышла). Этот параметр, а также состояние физической карточки продавец выставляет самостоятельно в админке.
Помимо прочего, мы обеспечили удобство поиска, внедрив разные способы сортировки («По алфавиту», «По изданию», «Сначала новинки» и т.д.) и отражения результатов поиска — списком или значками. Для упрощения покупки, любую карточку в любых ее вариациях можно добавить в корзину прямо из поискового списка, не заходя на ее страницу.
Мы также визуализировали некоторые поисковые параметры. Например, картинки фольгированных карточек отражаются в поиске и на странице самой карточки с характерным отблеском. Мы планируем добавить эффект, который сделает карточку на экране похожей на реальную.
Проблема: при разработке дизайна важно было, с одной стороны, подчеркнуть его нативность и локальность, сделать его похожим на разнообразные фанатские любительские сервисы, а с другой — проработать качественный визуал интерфейса, не уступающий большим интернет-магазинам.
Решение: важно было разработать такое визуальное пространство сервиса, где фанату было бы комфортно находится, где он чувствовал бы себя внутри субкультуры, созданной вокруг Magic: The Gathering.
В первую очередь, мы решили использовать в интерфейсе красочные художественные образы и арты с карточек, что лишний раз подчеркивает направление сервиса и повышает юзабилити поиска.
Насыщенные и яркие картинки были дополнены простым динамичным паттерном четырехконечной звезды в разных частях интерфейса. Цветовое решение сервиса такое же простое — сочетание оранжевого и темно-синего цветов.
Визуально, сервис воплотил золотую середину между любительскими фанатскими форумами и профессиональными интернет-магазинами — высокое качество интерфейса соединяется с привычными локальными образами.
После долгих доработок, оптимизации поисковых алгоритмов и фильтров нам удалось запустить кастомный интернет-магазин Goldfish, который прежде всего стал удобным сервисом для поиска актуальной информации и цен на все когда-либо выпущенные карточки, некоторые из которых можно купить в один клик. Такой подход обеспечил дополнительный трафик фанатов, которые прежде всего ищут инфу, а уже потом при случае покупают карточку.
Сервис разработан специально для фанатов Magic: The Gathering, здесь все сделано для удобства целевой аудитории. В этом его главное отличие от других интернет-магазинов, которые зачастую пытаются притянуть UX на стандартные витрины интернет-магазинов. Мы же пошли с другой стороны, и в итоге получился удобный кастомный сервис.
Больше всего времени мы потратили на точечную проработку проблем, возникших при поиске и фильтрации пересекающихся параметров. А сегодня сервис Goldfish уже помогает фанатам игры в России пополнять свои коллекции.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
