Фабрика Опросы
сервис для создания опросов, рассылки, сбора статистики и представления этой статистики в удобном формате для последующей аналитики.
Фабрика Опросы
сервис для создания опросов, рассылки, сбора статистики и представления этой статистики в удобном формате для последующей аналитики.
- ЗадачиНарисовать современный и чистый дизайн для нового сервиса с учетом больных мест подобного внутреннего продукта.
Как для составителя опроса, так и для респондентов сделать интуитивно понятный интерфейс.
По возможности подумать о новых фишках сервиса. - СделалДизайн включая концепт.
Новые полезные фишки.
Адаптив для разных устройств.
Интерактивные прототипы.
UI kit и систему отступов.
Консистентные иконки. - КомандаПроект менеджер
Арт директор
Frontend разработчик
Backend разработчик
Я в роли UX/UI дизайнера
SEO компании в роли заказчика
01 / 08
Суть сервиса
Сервис состоит из двух основных частей для разных категорий пользователей:
Внутренняя часть
Предназначена для аналитиков которые создают опросы, для дальнейшей рассылки.
Внешняя часть
Предназначена для пользователей проходящих эти опросы на компьютерах или мобильных устройствах.
02 / 08
Начало работы
При знакомстве с существующим сервисом выявил большое количество мелких недочетов, из всего этого пула я выделил основные проблемы и сфокусировался
на их решении.
на их решении.
Составил карту внутренней части проекта.
Составил LFW прототип.
На основе существующего сервиса спроектировал первый концепт.
Определили с командой список интересных фич, общее видение проекта
и приоритеты для начала прототипирования.
и приоритеты для начала прототипирования.
03 / 08
Создание опроса
Этот раздел был самым большим и сложным, особенно карточки вопросов.
Карточка вопроса
Проанализировал конкурентов, отметил хорошие решения такие как: показывать интерфейс при наведении, кнопка для создания нового вопроса расположенная между другими вопросами.
Основные референсы:
Yandex Forms
Google Forms
Survio
Основные референсы:
Yandex Forms
Google Forms
Survio
Предложил чтобы при создании вопросов с выбором ответа (чекбоксами или радиокнопками) создавались два пункта - заготовки с ответами.
Скрытый интерфейс
У карточки существует статичное состояние, где акцент сделан на содержании и состояние при наведении с подсвеченными элементами интерфейса. Ещё один уровень скрытого интерфейса подсвечивается если навестись на часть с содержанием (редактирование текста и прикрепление фото).
Прикрепление фото
Из референсов я понял как делать не надо.
В первой итерации хотел сделать прикрепленное фото в среднем размере между вариантами от Яндекс и Гугл, но это очень искажало выравнивания.
В итоге пришел к маленьким квадратным миниатюрам в 32px и более крупном превью при ховере. При прохождении опроса в ответах так же используются квадратные изображения.
В итоге пришел к маленьким квадратным миниатюрам в 32px и более крупном превью при ховере. При прохождении опроса в ответах так же используются квадратные изображения.
Группы
В существующем сервисе была супер неочевидная функция группировки вопросов. Я решил выделить эти группы визуально, на подобии веток с комментариями. Создается группа на ту же кнопку что и новый вопрос.
К группам так же применил подход со скрытым интерфейсом редактирования и добавил выпадающий список с выбором цвета.
Мне поставили задачу обойти механику Drag-and-drop для карточек вопросов.
Тогда я решил сделать порядковый номер вопроса более функциональным. При клике выпадает попап со списком всех вопросов и уже тут можно управлять их порядком, а так же помещать вопросы в группы и обратно.
Тогда я решил сделать порядковый номер вопроса более функциональным. При клике выпадает попап со списком всех вопросов и уже тут можно управлять их порядком, а так же помещать вопросы в группы и обратно.
04 / 08
Настройка логики опроса
Особенность сервиса - настройка логики опроса с помощью нодовой системы.
В этом режиме пришлось снова отрисовать все карточки вопросов но уже упращённо. Ещё я заметил что все опросы в этом редакторе логики превращались в длинные вертикальные структур, такие что было прям тяжело скролить.
Что бы решить эту проблему, сделал карточки очень компактными, а так же разместил точки связей со всех 4 сторон карточки. Продумал и описал поведение связей и работы с этими карточками.
Что бы решить эту проблему, сделал карточки очень компактными, а так же разместил точки связей со всех 4 сторон карточки. Продумал и описал поведение связей и работы с этими карточками.
Предложил при нажатии на карточку с вопросом позволить редактировать вопрос, таким образом в правой части за место списка вопросов появлялись настройки вопроса. По моим предположениям - опытный пользователь вполне может обходится созданием всего опроса в этом редакторе логики.
На проекте придумал ещё одну классную фишку. После того, как настроена какая либо логика, в правой колонке появляется карта этой логики, тоже самое касается созданных групп вопросов.
05 / 08
Прохождение и просмотр
Внешняя часть сервиса - то как видит его конечный пользователь.
Нарисовал просмотр прохождения опроса для десктоп и мобайл версии (на примере есть шапка, она показывается только для создателя опроса при просмотре).
Сделал возможность кастомизации опроса. Выбор цветовых тем которые заменяют акцентный цвет и цвет фона. Нарисовал иконку с каплей краски
и как показала практика эта иконка действительно цепляла внимание.
и как показала практика эта иконка действительно цепляла внимание.
Отрисовал все виды вопросов для десктоп и мобайл версий + для некоторых видов вопросов попробовал разную степень наполненности контента (длинные и короткие тексты, много и мало вариантов ответов ...).
06 / 08
Статистика
Сделал статистику по опросу функциональной за счет графиков и быстрого просмотра вопроса в воронке ответов.
07 / 08
Списки и карточки
В аналогичном сервисе есть раздел с группами респондентов выполненный в виде списка и это стандартное решение для разработчика. Но когда этих групп становится много и они не помещаются в один экран, то приходится вникать в содержание этих списков. Иначе с первого взгляда можно подумать, что это не группы а сами респонденты.
Я определил группы в карточки, а составные части этой группы (респондентов) сделал списком внутри этой карточки. Мне в целом нравится такой подход - разделение частного и общего.
Я определил группы в карточки, а составные части этой группы (респондентов) сделал списком внутри этой карточки. Мне в целом нравится такой подход - разделение частного и общего.
08 / 08
Итог
В целом получился не маленький и очень интересный проект, где я получил много опыта.
UI kit
Собрал ui kit (из типографики, цветов, стилей, иконок, кнопок и инпутов).
Подобрал контрастные цветовые сочетания и выровнял по насыщенности.
Продумал систему отступов.
Нарисовал консистентные иконки.
Попробовал создать дизайн систему.
Подобрал контрастные цветовые сочетания и выровнял по насыщенности.
Продумал систему отступов.
Нарисовал консистентные иконки.
Попробовал создать дизайн систему.
Масштаб
На ранних этапах прототипирования делал небольшие интерактивные прототипы
и презентовал решения в формате лендингов.
У самого проекта есть один большой раздел, где я отрисовал карточку вопроса
для нескольких сценариев.
и презентовал решения в формате лендингов.
У самого проекта есть один большой раздел, где я отрисовал карточку вопроса
для нескольких сценариев.
В сравнении
В старом сервисе по словам команды был "нормально настроенный UX",
но интуитивное восприятие создания вопросов усложнялось за счёт большого количества элементов интерфейса и это ненормальный UX.
но интуитивное восприятие создания вопросов усложнялось за счёт большого количества элементов интерфейса и это ненормальный UX.
Итоговая версия дизайна главной страницы отличается от первоначального концепта.
На основе опыта использования старого сервиса, анализа конкурентов, обсуждения с командой и промежуточных тестов интерактивных прототипов, удалось:
Сделать интерфейс консистентным, компактным, чистым, и интуитивно понятным.
Сохранить существующую гибкость в настройке опросов.
Улучшить визуальный редактор логики.
Привнести в сервис новые полезные фишки.
Сделать интерфейс консистентным, компактным, чистым, и интуитивно понятным.
Сохранить существующую гибкость в настройке опросов.
Улучшить визуальный редактор логики.
Привнести в сервис новые полезные фишки.
Пришел к выводу
