Участие и занятие призового места в хакатоне «Moscow City Hack 2021». Глазами ux дизайнера мутировавшего во фронтендера

Всем привет, я ux|ui дизайнер. Работал над BPMN платформой Comindware, собирал сайты на конструкторах, по образованию художник и дизайнер среды. Переквалифицировался в дизайнера интерфейсов в skillbox.
Ниже я описал, как работал с командой над заданием хакатона от Нетологии.
Задача: Разработка моделей оценки студентов на основании открытых данных. Есть картинки и некоторые технические детали.

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

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

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

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

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

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

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

В начале работы над проектом я думал, что смогу сделать базу данных в Airtable и настроить интеграцию через Integratom с конструктором Bubble. Точнее я так не думал, но мне очень хотелось попробовать новые инструменты. В итоге я не успел понять как что-то работающее сделать хотя бы в одном из этих инструментов, сжег при этом примерно 30% времени на работу.
Когда смирился со своей некомпетентностью в этих инструментах то решил обратиться к уже известным: Google Таблицы и Tilda.

Сложности:
1) Данные приходят только в автоматически созданную таблицу. Настроить отправку данных в таблицу которую я пренастроил у меня не получилось. Не нашел такой опции в тильде, смотрел все справки и руководства.
2) Менять интерфейс, формат опроса, порядок вопросов, а так же названия вопросов - не рекомендую, потому что в этом случае данные перестанут приходить, и придется создавать новую автоматическую таблицу. Короче надо все правильно делать с самого начала.

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

С помощью экспорта кода и html блока в тильде я перенес визуализированные данные из гугл таблиц в тильду. На данном графике данные о уровне навыков пользователя в сравнении с необходимыми навыками.

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

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

С третей попытки гугл таблицы перестали создавать задержку в 5 минут и у меня получилось записать скрин как пользователь пользуется нашим сервисом

Если честно то на неё не осталось сил и времени, так как было уже 3 часа утра, до сдачи оставалось 6 часов, а ещё хотелось поспать. Я просто скопировал текстовые тезисы которые подготовил менеджер, раскидал этот текст на 10 слайдов, выровнял по сетке, настроил шрифт заголовков и текста и пошел спать. Думаю это решение было верным, потому что мог допустить довольно много ошибок если бы начал что-то анализировать и менять в таком состоянии. А какие картинки бы я подобрал в полудрёме...ммм...)

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

Дойти для финала для меня было уже чем-то радостным, но как оказалось мы попали в топ 3 и нас ещё будут награждать в эту пятницу на оффлайн мероприятии, и откроют интригу кто же занял первое место.