Что стоит знать дизайнеру перед первым хакатоном

Опыт и уроки, извлеченные из участия и победы на хакатоне

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

JavaMentor
JavaMentor

Первым препятствием стал поиск подходящего хакатона. Я был удивлен широким выбором и обнаружил, что большинство из них предназначены лишь для студентов, а не выпускников университетов, таких как я. Тем не менее я нацелился на более широкие и социально ориентированные мероприятия и обратился к организаторам, чтобы подтвердить свое право на участие после подачи заявки. После пары бесед меня взяли на DubHacks, крупнейший 24-часовой хакатон на север-западе США. Отложив свой синдром самозванца в сторону, я сформировал команду и провел утомительные 24 часа, после чего наш проект победил в номинации “Самое удобное приложение для общественного блага”. Вот несколько идей, которые я почерпнул из своего опыта.

Почему любой команде нужен дизайнер

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

Хороший дизайнер знает, что программа  —  это не просто сумма ее частей, а целостный продукт.

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

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

Анализ конкурентов

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

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

Я окунулся в мир интернета для людей с нарушениями зрения и ограниченным доступом в интернет

Карты взаимодействия и первые наброски

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

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

Основные карты взаимодействия, которые нам нужно было разработать

Макеты

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

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

Вместо этого я бы рекомендовал сосредоточиться на основных интерфейсах, которыми займутся разработчики, и лишь затем создавать высокоточную версию для презентаций. Чтобы продемонстрировать дизайн в презентации, я поместил PNG-макет главной страницы в экраны различных устройств (используя шаблон в Figma), а также смонтировал небольшое промо-видео, сделанное с помощью Rotato.

Управление проектом и презентация

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

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

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

Я сделал презентацию в Canva, где можно встраивать различные медиафайлы и проводить совместные презентации.

Мои макеты из Figma, большинство из которых даже не вышли в свет

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

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

Где идея пересекается со стратегией

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

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

1. Готовьтесь заранее

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

2. Проведите исследование

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

3. Будьте гибкими

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

4. Общайтесь часто и по делу

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

5. Горите идеей

Это, конечно, клише, но оно тут неспроста. Даже работа вашей мечты в качестве дизайнера может сопровождаться проектами, которые вам не очень интересны. С другой стороны, хакатоны предоставляют уникальную возможность создать что-то, что вам действительно нравится, без каких-либо обязанностей, кроме как собственного желания. Будь то социальное дело или творческая технология, поиск проекта, которым вы глубоко увлечены, может направлять, поддерживать и обосновывать работу от начала и до конца.

Если вкратце: приходите на хакатон и воплощайте свои идеи

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

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

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи UX Planet: What every designer needs to know before their first hackathon

Предыдущая статьяПерестановка двух чисел на Си
Следующая статья10 хитрых приемов в JavaScript, о которых должен знать каждый разработчик