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