Разработка визуального языка для схем концертных и спортивных площадок • Seatmap

Главное о кейсе

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

Задачи Собаки Павлова:
1. Собрать с нуля UI процесса выбора и покупки билетов для двух версий: десктопной и мобильной.
2. Придумать визуальный язык для схем: набор правил и эвристик, которые позволяют делать любые схемы читаемыми и единообразными.

Какие задачи решали для бизнеса:
1. Выработать узнаваемый визуальный язык, который захотят встраивать другие сервисы продажи билетов.
2. За счёт визуальных решений обойти технические сложности рендера больших площадок: показывать пользователю на каждом шаге только важное, ускоряя загрузку и улучшая опыт.
3. Дать заказчику возможность принимать решения по фичам на макетах. Макеты стали инструментом для проверки гипотез.

Что было особенного:
— Объём информации огромный. Это не стандартные экраны. Нужно было продумать, как существует интерфейс — не только на экране, но и вне его.
— Проектировали в Figma. Использовали всё, что знали о её возможностях. Поняли, чего не хватает — собрали плагины под проект.
— Добавили вариативный просмотр схем по масштабу: выбираешь масштаб — схема перерисовывается под него. Что рендерить, что нет, что показывать, а что спрятать — всё зависит от масштаба.

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

Ключевые цифры:
— 35 000 людей, которых мы рассадили на схемах площадок.
— 3 репрезентативные площадки, для которых мы рисовали схемы. Театр, Рига арена и Barclays Center в Бруклине.
— 3 плагина чтобы иметь возможность отрисовать.
— 6 сценариев покупки билетов на двоих.

Seatmap.pro is a professional tool for creating seating charts for stadiums, arenas, and concert venues. The target audience is online booking platforms, ticket agents, and event organizers.

Sobaka Pavlova's goals:
1. Build a UI for the ticket selection and purchase process from scratch for both desktop and mobile versions.
2. Develop a visual language for the charts: a set of rules and heuristics that make any charts readable and consistent.

What business challenges were solved:

1. Develop a recognizable visual language that other ticketing services would want to integrate.
2. Use visual solutions to overcome the technical difficulties of rendering large venues: show the user only the most important information at each step, speeding up loading times and improving the user experience.
3. Enable the client to make feature decisions based on mockups. The mockups became a tool for testing hypotheses.

What was special:
— The volume of information is enormous. These aren't standard screens. We had to think through how the interface functions—not just on the screen, but also off it.
— We designed in Figma. We used everything we knew about its capabilities. We identified what was missing and put together plugins for the project.
— We added variable viewing of the diagrams by scale: you choose a scale, and the diagram is redrawn to match it. What renders, what doesn't, what is shown, and what is hidden—it all depends on the scale.

Analysis:
— We studied the market, industry, and competitors. We compiled a collection of bad solutions and interesting mechanics. We applied the research findings at every stage.
— We analyzed the ticket purchasing experience with the client. The result is a list of user scenarios.

Key figures:
— 35,000 people whom we seated on the site diagrams.
— 3 representative sites for which we drew the diagrams. Theater, Riga Arena, and Barclays Center in Brooklyn.
— 3 plugins for rendering.
— 6 ticket purchase scenarios for two.

Как проект изменил жизнь пользователей

Упростили процесс выбора и покупки билетов. За счёт визуального языка: понятные подписи, унификация пользовательских сценариев вне зависимости от типа площадки или цели пользователя.

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

We've simplified the ticket selection and purchase process. We've used a visual language: clear labels and unified user scenarios regardless of the venue type or user's purpose.

We've improved navigation within the venues: clearly marked rows and sections, seat numbers, stairs, aisles, and emergency exits. We've also added reference information about the venue depth and seat orientation relative to the stage or field.

Бизнес-задача и ее решение

Требовалось создать сервис с хорошим пользовательским опытом, чтобы усилить позиции самого Seatmap.pro и повысить продажи билетов у клиентов платформы. Результат должен был легко кастомизироваться под нужды разных клиентов и при этом оставаться современным, удобным и конкурентоспособным.

Мы разработали инструмент, который не только позволяет кастомизировать площадки под себя, но и задаёт визуальные рамки и правила.

Благодаря системе макетов и гайдлайнов заказчику теперь требуется меньше ресурсов на реализацию новых идей: процесс стал быстрее и понятнее. Гайдлайны также сократили время на внедрение решений — всё описано, не нужно заново разбираться.

We needed to create a service with a good user experience to strengthen Seatmap.pro's position and increase ticket sales among the platform's clients. The result had to be easily customizable to meet the needs of different clients while remaining modern, user-friendly, and competitive.

We developed a tool that not only allows for customization of platforms but also establishes visual frameworks and rules.

Thanks to the layout and guidelines system, the client now requires fewer resources to implement new ideas: the process has become faster and clearer. The guidelines also reduced the time it takes to implement solutions—everything is described, eliminating the need to re-learn everything.

Крафт (мастерство), реализация, технические детали

Создали три собственных Figma-плагина:
1. Crucius — для быстрой трансформации геометрии объектов. Работает с изгибами и деформациями схем. https://www.figma.com/community/plugin/1379456470658580472/crucius
2. Fixiq — фиксирует масштаб, позволяет работать с «прибитыми» схемами без искажений. https://www.figma.com/community/plugin/1411428280324086793/fixiq-fix-the-scale-of-working-area
3. Mappe — мини-карта, чтобы не потеряться в канвасе. Особенно полезно при работе с десятками схем размером 10 000×10 000 пикселей. https://www.figma.com/community/plugin/1446135512879626003/mappe-mini-map-for-figma

Все плагины доступны в Figma Community. Уже нашлась тысяча человек с похожими задачами, которые использовали для их решения наши плагины.

Использовали последние на тот момент фичи Figma, включая переменные. Оптимизировали память и упростили процесс производства. Реализовали систему рендера номеров секторов: они автоматически привязываются к геометрии и корректно отображаются при масштабировании.

We've created three custom Figma plugins:
1. Crucius — for quickly transforming object geometry. Works with curves and deformations in diagrams. https://www.figma.com/community/plugin/1379456470658580472/crucius
2. Fixiq — fixes the scale, allowing you to work with pinned diagrams without distortion. https://www.figma.com/community/plugin/1411428280324086793/fixiq-fix-the-scale-of-working-area
3. Mappe — a minimap to help you stay on top of the canvas. Especially useful when working with dozens of 10,000x10,000 pixel diagrams. https://www.figma.com/community/plugin/1446135512879626003/mappe-mini-map-for-figma

All plugins are available in the Figma community. Thousands of people with similar problems have already used plugins to solve their problems.

We used the latest Figma features at the time, including variables. We optimized memory and simplified the production process. We implemented a sector number rendering system: they are automatically linked to geometry and display correctly when scaling.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

После завершения проекта продолжаем общаться с командой заказчика: обсуждаем идеи, делимся новостями, показываем свежие макеты.

Благодаря глубокой вовлечённости в предметную область, заказчик доверил нам задачи за пределами основного продукта:
— Сделали презентацию для конференции INTIX в Нью-Йорке.
— Привели в порядок техническую документацию для бизнес-пользователей платформы.

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

During the design phase, we took into account the client's color perception. After reviewing the research, we realized this was a fairly common problem among users. It's especially problematic where price zones are distinguished solely by color—they're impossible to distinguish, and the business loses money. We selected color schemes and created an interface that takes into account the visual impairments of people with color blindness and chromatopsia.

We didn't follow a traditional project process, but worked collaboratively: research, discussions, and mockups—everything proceeded in parallel and iteratively. New insight → hypothesis → mockup → discussion.

After the project's completion, we continued to communicate with the client's team: discussing ideas, sharing news, and presenting fresh mockups.

Thanks to our deep involvement in the subject matter, the client entrusted us with tasks beyond the core product:
— Created a presentation for the INTIX conference in New York.
— Streamlined the technical documentation for the platform's business users.

This format of interaction gave us a rare opportunity to not only design but also work with the product's infrastructure at the level of meaning.

Текущая доступность работы

https://sobakapav.ru/portfolio/seatmap/

Скриншоты

Комментарий заказчика

Собака Павлова разработала современный и удобный UX для схем рассадки и бронирования, полностью переосмыслив пользовательский путь. Особенно ценна детальная проработка различных вариантов схем и их визуализация — всё выглядит ясно, логично и эстетично. Каждый элемент интерфейса продуман с акцентом на комфорт пользователя, финальный результат впечатлил вниманием к деталям.

Процесс работы оказался организованным и прозрачным: команда оперативно предоставляла развёрнутые презентации и всегда обосновывала свои решения. Специалисты отлично соблюдают баланс между функциональностью и визуальной привлекательностью. Итог превзошёл ожидания — интерфейс стал интуитивно понятнее, а положительные отзывы клиентов подтвердили успешность внедрения.