Конструктор UX-анкет с админкой — за 3 дня

Этот кейс о том, как под свои задачи по UX-исследованиям быстро сделал сервис создания анкет в админке, сбора данных с публичных анкет и анализа информации в дашборде.

Люблю удобные интерфейсы и лёгкие понятные тексты. Ранее разрабатывал электронные курсы, создавал пользовательские обзоры по разному ПО. 20 лет назад для рабочих нужд и сам создавал разные программные решения, но потом очень долго этим не занимался и думал, что с разработкой навсегда завязал. Но пришёл AI…

Всегда обращал внимание на UX и UI. Увлёкся редактурой интерфейсных текстов и в принципе удобством интерфейсов, а в процессе — логично занялся и UX-исследованиями. Так находишь подтверждение своим гипотезам и дополняешь благодаря реальным пользователям то, что не заметил бы сам, не работая ежедневно в исследуемом ПО. Добавил интереса к этой теме «ВКУС UX: очный митап от исследователей», на который специально съездил в Москву в офис.

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

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

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

Я создал поддерживающий лендинг, в котором предоставил ссылки на:

• Траектории знаний по базовым задачам
• Тестовый сервер с демо-данными
• Таблицу для фиксации фактов

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

Таблицу в Excel специально подготовил так, чтобы и респондентам можно было легко заполнить фиксированные значения (при необходимости добавляя открытые комментарии), и самому потом сразу видеть красные индикаторы, по которым можно дополнительно уточнить.

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

В принципе на этом можно было бы расходиться)). Я отправлял респондентам ссылку на лендинг, а в ответ получал заполненные таблицы (не от всех, конечно ;-). Но уже и с этим можно было жить. Я реагировал на "красные метки" и дополнительно уточнял у респондентов, если было недостаточно информации по комментариям. Потом передавал сводные отчёты со скринами уже команде разработки.

Было приятно видеть подтверждения своим гипотезам и улучшения UX в новых приложениях.

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

Опыт AI-разработки был небольшой. Весной 2025-го, знакомясь с Cursor, создал первый простой инструмент для упаковки документов в SCORM. Тогда меня бустануло выступление Мика Вайсмана на TechWeek. Попробовал — получилось быстро, ок. Потом долгое время как-то не было потребностей ещё что-то пробовать сделать.

Когда всё больше погружался в UX-редактуру (а это ведь не только про тексты), стал собирать интерактивные прототипы интерфейсов, на которых демонстрировал свои предложения. Например, такой тестовый пример по ознакомлению с сервисом.

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

Потом ещё удачно побывал на мастер-классе «Мандрика, Казакова» в рамках конференции Learning Elements, когда Роман и Владимир на примере знакомого мне «Курсора» показывали кейсы уже со «скиллами» и т. п.

Стал понимать, что от этого уже не отвертеться, но нужна была конкретная задача. Если уж делать, то что-то посерьезнее «одностороннего сервиса», а чтобы по-взрослому — с бэкендом, БД, админкой. Нужный был импульс для рывка, чтобы преодолеть барьер неопределённости. И он случился — пришёл я ногами на питерский AI-митап, послушать Владилена и поблагодарить за всю его просветительскую деятельность. Тогда же мы с ним живьём пообщались и он мне сказал простую фразу: «Присмотрись, точно найдёшь задачу под AI-разработку».

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

Собирал этот проект в связке VS Code + плагин Claude Code. Спецификация, инициализация...
Всё моно-командой — от «Дискавери» до «Деливери», как 20 лет назад, только тогда таких слов не было в разработке ПО. И теперь не руками, а мыслями и идеями. Все задумки реализовал и даже сильно больше. Дорабатывал, расширял возможности. Фронт, бэк, БД, авторизация, админка, сбор данных, дашборд, подробный анализ. И всё за 3 дня! Сколько бы месяцев у меня ушло раньше на такое...

И вот, что получилось. Есть админская закрытая часть.

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

• Открыть форму для заполнения респондентом
• Скопировать ссылку на форму
• Изменить анкету
• Создать копию анкеты
• Временно остановить анкетирование
• Удалить анкету

Кроме того, с этой страницы можно создать новую анкету и открыть сводную таблицу. Здесь же видны статусы анкет и кликабельное количество полученных ответов (заполненных форм). Шкалы трудности демонстрируют, как часто возникают проблемы у респондентов при тестировании функционала, описанного в соответствующей анкете.

Форму анкеты создал подобно той своей таблице Excel, которую показывал выше. Все значения в выпадающих списках имеют цветовую кодировку, есть и открытый комментарий.

Причем комментарий стало заполнять проще — не в длинную строку ячейки Excel, а в модульное окно по кнопке «Добавить комментарий».

Помимо этого респондент может вставить ссылку на гугл-док или облако с дополнительными материалами, в виде документа со скринами и комментариями или запись экрана.

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

В этот момент администратору на почту приходит подробное письмо с ответами.

На дашборде в то же время количество ответов по этой анкете увеличивается. И если там нажать на цифру, то откроется страница ответов по анкете.

На странице ответов видно, сколько ответов получено, в скольких были отмечены проблемы.

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

• Когда и от кого получена заполненная форма
• Есть ли дополнительные материалы
• Отмечены ли проблемы (красные кружки)
• Добавлены ли комментарии (жёлтые кружки)

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

По кнопке «Просмотр» можно подробно ознакомиться с оставленными комментариям по каким-то вопросам. Из модального окна можно скопировать полезный комментарий и далее использовать в своих UX-отчётах по исследованию.

Каждый ответ можно выгрузить в Excel.

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

Все вопросы можно перемещать кнопками «Выше/Ниже», а можно мышкой перетягивать на нужное место.

Для моего исследования достаточно было определённого набора вопросов — три поля выбора и поле ввода, поэтому при создании вопросов эти поля добавляются автоматически.

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

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

В момент изменения структуры анкетирование останавливается, чтобы в этот момент респонденты не смогли вводить данные, пока структура меняется.

Если же на анкету были получены ответы, то поменять её структуру не получится.

А например, когда нужно изменить структуру анкеты для следующих респондентов, но несколько ответов уже получено, или потребовалось создать подобную анкету, то с нуля можно новую не создавать — предусмотрел механизм дублирования по кнопке с дашборда.

Новая анкета добавляется вверху списка и в названии содержит «копию» и текущую дату.

О любых действиях с анкетами оповещается цветной плашкой над таблицей.

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

Предусмотрел и механизм ручной остановки анкетирования — если достаточно или вносятся какие-то изменения в анкету или исследуемое ПО. В этот момент меняется статус анкеты.

И респондентам в таком случае будет временный запрет на заполнение формы.

Также вручную можно затем активировать анкету.

Из дашборда и страницы ответов анкеты можно выйти на сводную таблицу ответов. Где дополнительно видны первый и последний ответы. Может, ещё что-нибудь докручу потом ;-)

Первые мысли после сделанного — довольно обширный функционал получился за столь короткий срок! Стоит захотеть и получить достаточный заряд для старта. У меня получилось.

Обязательное условие — постоянно проверять работу всего и давать смотреть другим.

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