пройдите тест и узнайте,
какая дизайн-профессия подойдет именно вам

Стикеры, которые повышают работоспособность, и веселое голосование: что студенты Contented сделали для конкурента Miro

Стикеры, которые повышают работоспособность, и веселое голосование: что студенты Contented сделали для конкурента Miro

Pruffme — интерактивная доска и платформа для видеоконференций. В рамках мегахакатона по дизайну студенты Contented создали для бренда UX-дизайн новой функции голосования и веселые стикеры. Как шла работа над проектом — рассказываем в этой статье.

Сделать голосование, как в FigJam

Муллаянова Эльмира

32 года

Город:
Уфа

Образование:
УГАТУ, инженер-технолог

Курс в Contented:
Профессия UX/UI-дизайнер

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

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

процесс голосования в миро
Голосование в Miro
голосование в фигджем
Голосование в FigJam

Изучали сервисы по YouTube

У нас в команде было два UX/UI-дизайнера — я и Мария. В самом начале мы созвонились с ментором, и он посоветовал изучить как можно больше конкурентов. Мы проанализировали более семи сервисов, но функцию голосования нашли только у трех:

Это был самый тяжелый этап работы. Интерактивные доски — это рабочий инструмент, а не сайт, который можно просто посмотреть в интернете в открытом доступе. Miro сейчас недоступна для оплаты в России, а вот на FigJam у Марии была студенческая подписка. Некоторые сервисы мы изучали по видео на YouTube.

анализ ца
Целевая аудитория проекта Pruffme — фрагмент итоговой презентации

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

создание голосования
Создание голосования — варфрейм в Figma
создание голосования
Создание голосования — фрагмент итоговой презентации

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

процесс голования
Процесс голосования — фрагмент презентации
результаты голосования
Результаты голосования — фрагмент презентации

Нашли две отличительные фишки

Белинец Мария

19 лет

Город:
Санкт-Петербург

Образование:
СПБГАСУ, информационные системы и технологии

Курс в Contented:
Профессия UX/UI-дизайнер

Это был мой первый хакатон по дизайну. ТЗ от заказчика было довольно кратким. Мы выделили для себя главную задачу — сделать вау-эффект. Найти фишку, которая бы выделяла Pruffme среди конкурентов. Их было две:

  • возможность оставлять комментарий;
  • обсуждение результатов голосования в конце.

Таких функций не было ни у кого из конкурентов.

дизайн голосования
UX-дизайн голосования — фрагмент презентации

Я знаю, как рисовать иллюстрации, поэтому на мне была задача создать эмодзи-реакции. Собрала разные референсы — с интерактивных досок, из мессенджеров, социальных сетей. Нужно было сделать дизайн современным и лаконичным, как сайт Pruffme.

референсы
Референсы реакций в Figma
реакции и комментарии
Реакции и комментарии в голосовании — фрагмент презентации

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

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

Кирилл Староста, продуктовый дизайнер Kydas, ментор в Contented, ментор хакатона:

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

Решение этой команды получилось довольно лаконичным, но в то же время они принесли в проект свои фишки с графикой. Панель простая, интуитивная и неплохо вписалась в Pruffme. Ребята отлично почувствовали стиль интерфейса, как если бы работали в штате проекта. 
Единственное, что меня немного огорчает, — заказчик с самого начала показал студентам готовую дорожку. Рассказал, что сделать, как, на каких конкурентов смотреть. У ребят не осталось места для фантазии. Было бы интересно посмотреть, как они самостоятельно решают задачу исследования».

Сделали стикеры, повышающие работоспособность

Балестина Мария

32 года

Город:
Москва

Образование:
МГППУ, психология

Курс в Contented:
Профессия графический дизайнер от нуля до ПРО

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

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

  • человечек — в виде смайлика или лица;
  • ладони;
  • сова;
  • маленькая птичка.
Наброски стикеров
Первые наброски стикеров

Единогласно решили остановиться на птичке — это позитивный и универсальный образ. Для стикеров выбрали желтый цвет. Изучили статьи по психологии и узнали, что желтый цвет — позитивный, он стимулирует память, внимание и повышает работоспособность. Это отлично согласуется с нашей задачей. А еще нарисовали синие очки — это фирменный цвет Pruffme.

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

готовые стикеры
все стикеры
Все стикеры — фрагмент презентации

В процессе работы наш ментор Елизавета посоветовала заменить шрифт на более читабельный. И в конце заказчик выбрал наш проект — сказал, что работа получилась качественной. Было очень приятно. 

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

стикеры в презентации
Пример использования стикеров — фрагмент презентации

Елизавета Кудряшова, ментор курса «Айдентика и упаковка» в Contended, ведущий ментор-дизайнер хакатона:

«В процессе мы дорабатывали технику иллюстраций — нужно было сделать тексты более читаемыми. Ребята внесли все корректировки, и получилась замечательная работа. Стикеры отлично подходят по стилистике, выглядят аккуратно и красиво. Думаю, что можно было поработать над подачей и показать, как они работают в мессенджерах, но время на выполнение кейса было ограничено.Это работа лучше всего подошла заказчику по смыслу. Он сразу ее отметил. Ребята отлично подобрали фразы, которые точно описывают рабочий процесс».

Артем Зараменских, директор по продукту платформы Profi.com, руководитель проекта онлайн-доски Pruffme.com:

«Студенты сделали все достаточно быстро, четко и в соответствии с требованиями. Они погрузились в продукт, изучили его, использовали наши референсы, провели анализ целевой аудитории, конкурентов. 

Проект этой команды на фоне остальных докладов и выступлений показался мне наиболее продуманным и погруженным. Приятно, что они не ограничивались исключительно тем, что прописано в ТЗ, взяли больше и шире: использовали дизайн-сессию, продуктовый подход, исследования — то, чего не было у остальных. 
Решение, которое они предложили для голосования, во многом копирует конкурентов, но мы сделали поблажку, ведь это студенты, и для многих это первая проектная работа. В остальном это очень хороший результат. Работа полностью соответствует брифу. Ребята показали не только хард скилы, которым научились на курсах, но и софт скилы — трудолюбие, любознательность, ответственность. Это те качества, которые ожидает увидеть каждый работодатель».

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент