С нуля, без ТЗ и в срок: интерфейс для тачпанели в «Сколково»

1. Вводная задача от заказчика, проблематика, цели

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Погружение в проект

Технопарк «Сколково» — крупнейший технопарк Восточной Европы. Здесь создаются и тестируются передовые технологии, развиваются стартапы и работает уникальная экосистема из компаний, экспертов и инфраструктуры. Каждый год Технопарк принимает более 280 000 посетителей.

Весной 2025 года команда «Сколково» готовилась к открытию Единого центра услуг — нового формата многофункционального пространства, где любой гость, резидент или житель Инновационного центра мог бы:

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

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

На этом этапе команда Технопарка обратилась к нам с просьбой разработать для этой панели полноценный пользовательский интерфейс.

У клиента было понимание, что интерфейс должен быть:

• удобным для любых посетителей;
• красиво выглядеть на огромном экране;
• стабильно работать с первого дня открытия центра.

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

Задача и вызовы

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

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

Ключевые вызовы:

• Нестандартный формат устройства. Панель большая — 1800×1012 мм, имеет вертикальную ориентацию. Разместить ее планировалось в публичном пространстве. Важно, чтобы использование было удобным — «на ходу», без обучения и подсказок.
• Открытые вопросы по функциональности. Клиент изначально предполагал наличие внешних ссылок, но не все партнерские сайты корректно отображались на панели — нужно было найти альтернативный способ предоставить доступ к внешним сайтам без угроз стабильности интерфейса.
• Тексты и структура разделов формировались уже в процессе. Это означало, что архитектура должна была быть гибкой: мы проектировали интерфейс в условиях, когда многие элементы уточнялись параллельно с разработкой.
• Сжатые сроки. Проект был привязан к дате запуска Центра. На реализацию всех этапов — от согласования концепции до подключения к реальному устройству — у нас было чуть больше трех недель.

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

Ключевые решения

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

Совместная проработка структуры и сценариев

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

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

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

Отдельной задачей стала работа с форматом устройства: вертикальный экран размером 1800×1012 мм требовал особого подхода к визуализации. Мы использовали опыт разработки полноэкранных слайдерных сайтов, где важно, чтобы разделов каждый экран корректно масштабировался под разные размеры и разрешения. Этот подход позволил адаптировать макеты под панель так, чтобы они занимали всю ее площадь без потери качества и читаемости.

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

Интерфейс, понятный с первого взгляда

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

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

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

Тестирование на реальном оборудовании

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

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

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

Почему появились QR-коды

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

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

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

3. Результаты сотрудничества

За три недели мы разработали и подключили полноценный интерфейс для сенсорной панели в Едином центре услуг «Сколково» — от первых пользовательских сценариев до запуска на реальном устройстве.

Проект включал:

• проработку логики и структуры интерфейса,
• дизайн всех экранов под вертикальный формат 1800×1012 мм,
• разработку на собственной CMS с использованием React,
• итерационную верстку и тестирование на физическом оборудовании,
• внедрение QR-механики для внешних переходов.

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

Кравченко М.И.

руководитель Департамента внешних коммуникаций, Сколково

Технопарк «Сколково» выражает признательность компании WebCanape за разработку интерфейса информационной панели Единого Центра Услуг «Сколково».

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