Кейс WebAsk | Дизайнер Артём Жигалин

WebAsk

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

webask.io

Дата окончания работ: 13 дек 2020

Сделано за 120 дней

UX / UI дизайн

Продукт дизайн

Дизайн-менеджмент

ЗАДАЧА

Сделать современный SaaS* конструктор адаптивных опросов с логикой переходов, экспортом ответов, интеграциями и шерингом.

SaaS (Software as a service) — это когда доступ к программам предоставляется удаленно и по подписке.

МОЯ РОЛЬ

С конца 2018 по конец 2019 — продукт-дизайнер. Я был ответственным за создание интерфейса с нуля, а также айдентики и некоторых страниц сайта. Я проектировал интерфейсы в Figma или сразу напрямую в HTML и CSS.

Краткое описание

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

Вы делаете опрос отправляете его целевой аудитории и исходя из ответов решаете делать или не делать.

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

В WebAsk у вас уже есть список email респондентов, которые положительно восприняли вашу идею.

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

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

Преимущества

Интерфейс WebAsk простой интуитивный и хорошо работает для неподготовленных пользователей.

Хоть интерфейс и простой, в конструкторе есть весь набор необходимых виджетов.

Сложные опросы в WebAsk могут содержать в себе условия. В зависимости от выбранного ответа, могут показываться те или иные вопросы.

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

Конструктор

ЗАДАЧА

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

РЕШЕНИЕ

В результате я проделал большую работу. Результат можно разбить на блоки:

Мини-карта опроса;
18 типов вопросов;
Операции с вопросами;
Механизм добавления вопросов;
Редактирование значений;
Редактирование текста;
Настройки и варианты редактирования вопросов;
Логика переходов на вопросы;
Настройка дизайна опроса;
Множество пограничных состояний, микро взаимодействий и настроек.

Базовое состояние пустого проекта приглашает начать работу над опросом
Photo by Ralph (Ravi) Kayden

Для создания опроса у взыскательного пользователя есть 18 различных контролов
Photo by Ralph (Ravi) Kayden

У каждого контрола свои персональные настройки
Photo by Ralph (Ravi) Kayden

Мини-карта опроса помогает в навигации и организации порядка вопросов
Photo by Ralph (Ravi) Kayden

Логические переходы

ЗАДАЧА

Респонденты неохотно отвечают на длинные опросы. Чтобы их сократить, можно создавать разные цепочки вопросов в зависимости от ответов.

Следующая задача это создать интерфейс для условных логических переходов. Например, если ответ на текущий вопрос «Нет», то пропускать следующий вопрос.

РЕШЕНИЕ

Я спроектировал простой интерфейс создания логики в сайдбаре*. Преимущество такого подхода в том, что пользователь параллельно может видеть сам опрос.

Сайдбар — это боковая панель сайта, визуально отделенная от контента на странице

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

В условии может участвовать любое значение вопроса, а так же есть несколько возможных типов условий, например «равно», «не равно», «больше чем», «меньше чем» и тп.

Простое условие для пропуска лишнего вопроса
Photo by Ralph (Ravi) Kayden

Группа условий для разных ответов
Photo by Ralph (Ravi) Kayden

Дизайн опроса

ЗАДАЧА

Основная часть пользователей — представители компаний. Значит опросы им нужны в корпоративном оформлении. С другой стороны и другие пользователи часто хотят поменять оформление.

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

РЕШЕНИЕ

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

Для простого перебора дизайна пользователь может кликать на миниатюры. Если нужна тонкая настройка, пользователь кликает на пиктограмму и далее может настраивать цвета, шрифты и фоны.

При желании пользователь может сохранить свои тонкие настройки в персональную тему, и применять её к другим опросам.

Кликая на превью можно легко менять тему
Photo by Ralph (Ravi) Kayden

Если это необходимо, довольно просто можно сделать своё уникальное оформление
Photo by Ralph (Ravi) Kayden

Дашборд и другие сервисные разделы

ЗАДАЧА

Сделать дизайн дашборда, настроек проекта, шеринга, превью и других сервисных разделов.

РЕШЕНИЕ

Дашборд я оформил в виде матрицы из плиток с информацией о проекте. Цвет заливки подсказывает какой фон у опроса. При нажатии на кнопку «троеточие» открывается меню с действими над проектом.

Другие разделы наследуют дизайн и выглядят в едином стиле.

Раздел «Превью» покажет пользователю как выглядит его опрос на мобильных устройствах.

В дашборде проекты располагаются плиткой
Photo by Ralph (Ravi) Kayden

Настройки предельно просты и понятны для пользователя
Photo by Ralph (Ravi) Kayden

В превью можно проверить как работает опрос
Photo by Ralph (Ravi) Kayden

Как опрос выглядит на планшете
Photo by Ralph (Ravi) Kayden

Как опрос выглядит на смартфоне
Photo by Ralph (Ravi) Kayden

Результаты опросов

ЗАДАЧА

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

РЕШЕНИЕ

Я разбил раздел на три подраздела:

общая статистика,
отчеты,
ответы.

В общей статистике я постарался отобразить наиболее важные параметры в виде фактоидов и диаграм.

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

В ответах карточки показывают ответ респондента.

Ответы на удаленные вопросы, или на старые версии вопросов также сохраняются.

Все экраны адаптивны и корректно отображаются на смартфонах.