Найти тему
Nuances of programming

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

Оглавление

Источник: Nuances of Programming

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Макеты

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

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

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

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

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

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

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

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

Мои макеты из Figma, большинство из которых даже не вышли в свет
Мои макеты из 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