Сделать голосование, как в FigJam
Муллаянова Эльмира
32 года
О хакатоне я узнала на своей обучающей платформе, было интересно поработать в команде и попробовать себя в реальных задачах.
Изначально хотела делать проект с лендингом, но мне попалась продуктовая задача от Pruffme. Нужно было разработать дизайн для функции голосования внутри продукта. Директор проекта скинул два видео и показал, как это устроено у прямых конкурентов. Ему нравились штампы для голосования в FigJam, а еще — что для этого используют уже существующий интерфейс программы.
Голосование в Miro
Голосование в FigJam
Изучали сервисы по YouTube
У нас в команде было два UX/UI-дизайнера — я и Мария. В самом начале мы созвонились с ментором, и он посоветовал изучить как можно больше конкурентов. Мы проанализировали более семи сервисов, но функцию голосования нашли только у трех:
Это был самый тяжелый этап работы. Интерактивные доски — это рабочий инструмент, а не сайт, который можно просто посмотреть в интернете в открытом доступе. Miro сейчас недоступна для оплаты в России, а вот на FigJam у Марии была студенческая подписка. Некоторые сервисы мы изучали по видео на YouTube.
Целевая аудитория проекта Pruffme — фрагмент итоговой презентации
На этапе исследования определили целевую аудиторию, проблематику бизнеса, посмотрели, как аналогичную задачу решают конкуренты. Всю информацию собирали на доске в Figma, а потом перешли к отрисовке вайрфреймов — прототипов, которые показывают, как будут располагаться кнопки и элементы на экране без дизайна.
Создание голосования — варфрейм в Figma
Создание голосования — фрагмент итоговой презентации
Мы постарались сделать голосование максимально удобным. Пользователи могут выбрать все объекты на экране или выделить отдельную область для голосования: картинки, стикеры и т.д. Еще решили добавить реакции, чтобы сделать голосование более веселым и неформальным. Этим занялась Мария.
Процесс голосования — фрагмент презентации
Результаты голосования — фрагмент презентации
Нашли две отличительные фишки
Белинец Мария
19 лет
Город:
Санкт-Петербург
Образование:
СПБГАСУ, информационные системы и технологии
Курс в Contented:
Профессия UX/UI-дизайнер
Это был мой первый хакатон по дизайну. ТЗ от заказчика было довольно кратким. Мы выделили для себя главную задачу — сделать вау-эффект. Найти фишку, которая бы выделяла Pruffme среди конкурентов. Их было две:
- возможность оставлять комментарий;
- обсуждение результатов голосования в конце.
Таких функций не было ни у кого из конкурентов.
UX-дизайн голосования — фрагмент презентации
Я знаю, как рисовать иллюстрации, поэтому на мне была задача создать эмодзи-реакции. Собрала разные референсы — с интерактивных досок, из мессенджеров, социальных сетей. Нужно было сделать дизайн современным и лаконичным, как сайт Pruffme.
UX/UI-дизайнер с нуля до ПРО
профессия
UX/UI-дизайнер с нуля до ПРО
Делайте мир удобнее. Создавайте продуманные интерфейсы сайтов и приложений без навыков программирования. IT-компании ждут вас.
научиться
Референсы реакций в Figma
Реакции и комментарии в голосовании — фрагмент презентации
В итоге заказчик выбрал наш проект. Сказали, что мы вложили душу и это чувствуется. Хотя, если честно, изначально этот кейс казался самым тяжелым и непонятным. Но мы вышли из зоны комфорта и получили сложную продуктовую работу в свое портфолио.
После хакатона меня пригласили на стажировку в компанию заказчика Pruffme. Мы работаем над применением искусственного интеллекта в системе видеоконференцсвязи. Сейчас проводим исследования и обсуждаем, какие функции ИИ будем внедрять в платформу, например транскрибирование аудио в текст.
Кирилл Староста, продуктовый дизайнер Kydas, ментор в Contented, ментор хакатона:
«Над этим кейсом работало сразу три команды. И у всех трех получилось правильное решение продуктовой задачи. Было очень сложно выбрать лучшую работу, даже пришлось искать новые метрики, чтобы понять, какая команда справилась лучше, — я смотрел презентации, изучал выступления.
Решение этой команды получилось довольно лаконичным, но в то же время они принесли в проект свои фишки с графикой. Панель простая, интуитивная и неплохо вписалась в Pruffme. Ребята отлично почувствовали стиль интерфейса, как если бы работали в штате проекта.
Единственное, что меня немного огорчает, — заказчик с самого начала показал студентам готовую дорожку. Рассказал, что сделать, как, на каких конкурентов смотреть. У ребят не осталось места для фантазии. Было бы интересно посмотреть, как они самостоятельно решают задачу исследования».
Читайте также:
Что объединяет таро, нутрициологию, русский авангард и Сержа, идущего к реке: кейс студенток Contented для студии Артемия Лебедева
Сделали стикеры, повышающие работоспособность
Балестина Ирина
32 года
Учебу в Contented я закончила в феврале и решила попробовать свои силы на хакатоне. Изначально хотела кейс с созданием логотипа и оформлением социальных сетей, он показался мне более комфортным и понятным. Но на первом созвоне с командой мне предложили поработать над задачей Pruffme — я согласилась. Стикеры — это тоже очень интересно, такого опыта раньше у меня не было.
Нужно было придумать десять разных стикеров для проекта, чтобы с их помощью можно было комментировать или выделять информацию на интерактивной доске. Мы с ребятами устроили брейншторм и нашли несколько вариантов:
- человечек — в виде смайлика или лица;
- ладони;
- сова;
- маленькая птичка.
Первые наброски стикеров
Единогласно решили остановиться на птичке — это позитивный и универсальный образ. Для стикеров выбрали желтый цвет. Изучили статьи по психологии и узнали, что желтый цвет — позитивный, он стимулирует память, внимание и повышает работоспособность. Это отлично согласуется с нашей задачей. А еще нарисовали синие очки — это фирменный цвет Pruffme.
Сложно было подобрать цитаты для стикеров. У Pruffme очень разная аудитория — от креативных команд до госструктур. Старались сделать стикеры молодежными: анализировали конкурентов, искали примеры рабочих ситуаций, активно обсуждали в чате с ребятами, с чем сталкиваемся сами и каких стикеров нам не хватает, чтобы выразить эмоции.
Все стикеры — фрагмент презентации
В процессе работы наш ментор Елизавета посоветовала заменить шрифт на более читабельный. И в конце заказчик выбрал наш проект — сказал, что работа получилась качественной. Было очень приятно.
Мне понравилось участвовать в хакатоне. Это отличный шанс поработать с реальными кейсами в сжатые сроки. Вначале было страшно, что не смогу совмещать это с основной работой, но в итоге ни капли не пожалела.
Пример использования стикеров — фрагмент презентации
Елизавета Кудряшова, ментор курса «Айдентика и упаковка» в Contended, ведущий ментор-дизайнер хакатона:
«В процессе мы дорабатывали технику иллюстраций — нужно было сделать тексты более читаемыми. Ребята внесли все корректировки, и получилась замечательная работа. Стикеры отлично подходят по стилистике, выглядят аккуратно и красиво. Думаю, что можно было поработать над подачей и показать, как они работают в мессенджерах, но время на выполнение кейса было ограничено.Это работа лучше всего подошла заказчику по смыслу. Он сразу ее отметил. Ребята отлично подобрали фразы, которые точно описывают рабочий процесс».
Артем Зараменских, директор по продукту платформы Profi.com, руководитель проекта онлайн-доски Pruffme.com:
«Студенты сделали все достаточно быстро, четко и в соответствии с требованиями. Они погрузились в продукт, изучили его, использовали наши референсы, провели анализ целевой аудитории, конкурентов.
Проект этой команды на фоне остальных докладов и выступлений показался мне наиболее продуманным и погруженным. Приятно, что они не ограничивались исключительно тем, что прописано в ТЗ, взяли больше и шире: использовали дизайн-сессию, продуктовый подход, исследования — то, чего не было у остальных.
Решение, которое они предложили для голосования, во многом копирует конкурентов, но мы сделали поблажку, ведь это студенты, и для многих это первая проектная работа. В остальном это очень хороший результат. Работа полностью соответствует брифу. Ребята показали не только хард скилы, которым научились на курсах, но и софт скилы — трудолюбие, любознательность, ответственность. Это те качества, которые ожидает увидеть каждый работодатель».
профессия UX/UI-дизайнер с нуля до про
профессия UX/UI-дизайнер с нуля до про
Создавайте продуманные интерфейсы сайтов и приложений без навыков программирования. Погрузим в дизайн-среду с первого модуля и дадим опыт, который реально пригодится в работе
Научиться