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

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

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

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

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

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

Единый центр услуг «Сколково»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги 

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

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

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

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

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

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

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

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

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