Международный дизайн-хакатон Сбербанка: непростые условия и эффективные решения. Дизайн в условиях хакатона Зачем бизнесу нужны хакатоны

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

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

Время - наш враг

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

Получился самокат? Здорово!

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

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

#1 Отталкивайтесь от контекста

  • Какие цели у вашего пользователя?
  • В каких условиях он будет пользоваться вашим продуктом?
  • В какой момент будет обращаться к продукту?
С самого начала стоит обсудить эти вопросы с командой.

Возьмем в качестве примера приложение с пошаговыми рецептами для готовки.
Главное ограничение в данном случае - занятые или грязные руки.

Есть несколько способов упростить коммуникацию пользователя с приложением:

  1. Поместить всю необходимую информацию на один экран. Экран при этом не должен погаснуть.
  2. Использовать аудио- и видеодорожку.
  3. Использовать голосовое управление по шагам рецепта («дальше», «повторить», «на шаг назад»)

#2 Отсекайте лишнее

«Все должно быть представлено настолько просто, насколько это возможно. Но не более » - Альберт Эйнштейн.

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

#3 Отталкивайтесь от лучших практик

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

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

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

Несколько примеров успешных продуктов: Instagram, Dropbox, Notion .

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

#4 Дизайн - сегодня

Используйте правило одной ночи - прорабатывайте сегодня не только структуру, но и UI. Утром со свежей головой стоит посмотреть на свой продукт. Точно появятся мысли, как улучшить пользовательское взаимодействие или визуальную часть. Не забывайте про пустые состояния и обработку ошибок.

#5 Вызывайте эмоции

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

Давайте рассмотрим, какие инструменты есть в нашем арсенале.

Текст. Пишите простой и понятный текст. Определитесь со стилевым направлением - оно должно наследоваться по всему приложению. Не нагружайте пользователя лишней информацией. Будьте дружелюбны - давайте советы и подсказки.

Шрифт. Старайтесь использовать не более двух шрифтов. Не используйте мелкий нечитабельный текст - отталкивайтесь от гайдлайнов.

Цвет. Выберите один акцентный цвет, который задаст настроение.

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

Иллюстрации. Очень хорошо работают иллюстрации в онбординге и на пустых состояниях.

Анимации. Если в команде есть дизайнер - отлично. Можете экспериментировать с онбордингом или проработать микровзаимодействия.

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

Ваш продукт должен быть френдли. Покоряйте сердца, как Рокетбанк.

#6 Упрощайте

В процессе разработки не забывайте про критическое мышление - постоянно задавайте себе вопрос «как это можно упростить?».

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

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

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

Hear
Приложение, преобразующее звуки, которые поступают из микрофона. По сути, это просто набор звуковых фильтров, которые можно свайпать. Ничего лишнего.

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

Выглядят лаконично.

#7 Пишите понятно

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

Примеры, как писать не нужно:

Будьте осторожны с зарубежными словами (например, «девайс»). Поймёт ли их ваша аудитория?

Прочтите совет о стоп-словах в интерфейсе от Бюро Горбунова.

#8 Делайте перерывы

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

Если хотите, можете использовать технику Pomodoro . Она заключается в разделении рабочего времени и времени отдыха на периоды: 25 минут вы работаете над определенной задачей и ровно 5 минут отдыхаете. Если такая роскошь не позволительна из-за сжатых сроков или выбивает вас из состояния потока - определите время работы для вашей команды и общие перерывы. Например, 55/5.

Зачем это всё нужно? Взгляд не замылится. Короткая передышка даст немного сил. Возможно, вы увидите решение проблемы или ошибку, на которую не обращали внимания.

Запомните


Самое важное

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

Не забудьте порепетировать перед защитой и постарайтесь показать весь объем проделанной работы.

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

Для тех, кто не в курсе: хакатон – это марафон для разработчиков программного обеспечения. В нашем случае на хакатоне собрались дизайнеры и UX-специалисты, которым предстояло разрабатывать решения на базе Единой фронтальной системы (ЕФС) – глобальной IT-платформы Сбербанка, которая разрабатывается в целях обеспечения мультиканальности обслуживания клиентов в режиме одного окна.

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

Привлечение участников

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

Мы обратились к нашим партнерам, Digital October и Хабрахабр, разместив информацию о хакатоне на их сайтах и осуществив рассылку по их базам. Мы также создали базу наиболее авторитетных digital-агентств и дизайн-студий Москвы, Санкт-Петербурга и еще нескольких городов-миллионников, что дало более 400 контактов для обзвона.

Следующий блок – профессиональные ассоциации и сообщества. Мы направили информацию о хакатоне в Российскую ассоциацию электронных коммуникаций (РАЭК), Региональный общественный центр интернет-технологий (РОЦИТ) и Apps4all. Кроме того, приглашения к участию в хакатоне были отправлены в школы и студии дизайна: Британская высшая школа дизайна, Netология, центр «Специалист», Redmadrobot и др.

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


Техническое обеспечение

В качестве площадки для проведения мероприятия был выбран DI Telegraph, где можно было с комфортом разместить команды дизайнеров и программистов. Памятуя о том, что одной из особенностей хакатонов является непрерывная работа на протяжении долгого времени (в данном случае – 48 часов), мы предусмотрели и полноценное трехразовое питание для участников, и специальную зону «дозаправки», где участники могли найти чай, кофе и снеки в любое время дня и ночи. Мы также позаботились не только о приеме пищи, но и других аспектах комфорта дизайнеров – при обзвоне после завершения регистрации сотрудники Полилога рекомендовали участникам взять с собой смену одежды. Для отдыха участников были предусмотрены диваны и пуфики. Все было спланировано, но вмешалась погода: последние выходные июля выдались очень жаркими. И тут выяснилось, что здании DI Telegraph нет кондиционеров. В срочном порядке были открыты все окна, включены все вентиляторы, но это, к сожалению, не смогло сильно снизить температуру и без того накаленной атмосферы соревнования. Так что в следующий раз, когда мы будем готовить мероприятие летом, обязательно проверим состояние системы кондиционирования.

Работа с программой

Специальный контент для хакатона – технологии marketplace, machine learning, Big Data, умные сценарии обработки информации и модели работы с клиентами – разрабатывал Сбербанк-Технологии, а задачей консалтинговой группы «Полилог» стала его адаптация и интеграция в программу мероприятия. Помимо этого, на наши плечи легла разработка собственно программы (таймплан и прочее). Разобравшись со спецификой контента и адаптировав его под формат мероприятия, мы провели репетиции открытия хакатона, основных событий в процессе мероприятия, церемонии награждения победителей. Нельзя не отметить, что у заказчика появлялись новые пожелания в процессе мероприятия, а у нас, следовательно, возникали новые задачи. Мы оперативно претворяли эти пожелания в жизнь: например, перед самой церемонией награждения поменяли названия номинаций, чтобы они более соответствовали тем результатам, которых достигли участники.

PR-сопровождение

Основной сложностью, с которой Полилог столкнулся при подготовке PR-сопровождения Хакатона, была необходимость одновременно вести работу с тремя разными типами СМИ: IT-издания, банковские СМИ, издания для мобильных разработчиков. Для этого мы выработали разные подходы для работы с ними, что позволило привлечь СМИ всех трех видов к освещению мероприятия. КГ «Полилог» заключила соглашения об информационном партнерстве с «Интерфакс», «РИА Новости», Bankir.ru, «Аналитический банковский журнал», PC Week, Apptractor.ru и другими СМИ. По итогам хакатона вышло более 100 сообщений.

Итоги

Несмотря на очень сжатые сроки подготовки и проведения мероприятия, международный дизайн-хакатон Сбербанк-Технологий прошел на достойном уровне. Было зарегистрировано 40 команд, 16 из них прошли в очный тур, лучшие решения были отмечены денежными призами и подарками.

22 авг 2016

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


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

Итак, у дизайнеров есть несколько причин идти на хакатон.


Причина 1. Вызов



По сути, только такую работу можно считать настоящим “проектированием интерфейсов”. В общем, причина первая, почему дизайнер должен хотя бы раз попробовать сходить на хакатон — шанс бросить себе профессиональный вызов. И победить.


Причина 2. Хорошая компания



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

У хакатонов особая атмосфера бурлящего “интеллектуального котла” — и она сама по себе способствует рождению творческих идей и правильных дизайн-решений.


Причина 3. Полезные знакомства



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

Особенно полезно фрилансерам — завести знакомства с проектами, которым потом наверняка понадобится работа дизайнера.

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


Причина 4. Новый проект в портфолио




Причина 5. Работа в команде в условиях реального стартапа



Да, хакатон — это испытание на прочность. Не зря мы раздаем участникам футболки “я выжил на HackDay” :)

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


Причина 6. Возможность воплотить свою идею



Эван Шпигель, один из сооснователей Snapchat (того самого, который Цукерберг хотел купить за 3 миллиарда долларов) — по образованию промышленный дизайнер.


Причина последняя — хватит причин


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

Поэтому приглашаем, ждем и верим в вас. Конкретно в тебя верим. Приходи на HackDay и сделай крутой проект. Давай!

 

Возможно, будет полезно почитать: