StepFORM
StepFORM — это онлайн конструктор, где создают стильные опросы, онлайн калькуляторы и другие типы форм для сайтов, мессенджеров и соцсетей.
UX / UI дизайн
Продукт дизайн
Дизайн-менеджмент
ЗАДАЧА
Сделать SaaS* конструктор форм, калькуляторов и квизов с математическими расчётами, скорингом и логикой.
SaaS (Software as a service) —
это когда доступ к программам предоставляется удаленно и по подписке.
это когда доступ к программам предоставляется удаленно и по подписке.
МОЯ РОЛЬ
С конца 2018 по конец 2019 я выполнял роль продуктового дизайнера. Я был ответственным за создание с нуля всех интерфейсов продукта, айдентики, дизайна страниц сайта и некоторых шаблонов.
Интерфейсы создавались в Figma или сразу напрямую в HTML и CSS.
Краткое описание
StepFORM — это конструктор, в котором пользователь может создавать сложные формы-калькуляторы с логикой и формулами.
Пример формы с расчетом стоимости строительства дома
Преимущества
В StepFORM у пользователя широкий набор контролов и гибкие возможности для настроек этих контролов. Это позволяет создавать уникальные формы с расчётами.
Например, это может быть сложный расчёт стоимость ремонта исходя из квадратуры помещения, или заказ пиццы исходя из количества, вида пиццы и диаметра.
Можно сделать форму из нескольких шагов. Например, оставить расчет на первом шаге, а заполнение контактных данных на втором.
Пользователь создает такую форму, а далее размещает её на сайте или в виде ссылки в соцсетях.
Формы-калькуляторы позволяют проделать часть работы автоматически, дать предварительную оценку работ, или собрать данные.
Ещё это хороший способ привлечения клиентов и повышения продаж. Так как клиент не хочет чтобы его труд пропадал и он склоняется продолжить сотрудничать.
Конструктор
ЗАДАЧА
Сделать удобный конструктор мультистраничных форм с математикой, скорингом, настройкой контролов, редактором текста и значений контролов.
РЕШЕНИЕ
Проделал большую работу по созданию интерфейса:
- Дизайн работы с мультистраничными формами;
- Добавление контролов;
- Редактирование текста;
- Спроектировал и оформил 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
Выбор какие столбцы показывать
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
Главная страница
ЗАДАЧА
Сделать главную страницу продукта, объяснить что за продукт, чем он полезен, описать основные преимущества, показать примеры.
РЕШЕНИЕ
Я придумал и спроектировал адаптивный дизайн главной страницы.
На первом экране я описал пользователю куда он попал и что здесь можно делать.
Далее я расписал преимущества квизов и форм, показал различные примеры готовых форм, описал процесс создания, а также почему имеет смысл выбрать именно этот конструктор.
Для привлечения внимания посетителей на первом экране я сделал интересную анимацию со слоями формы: формула + элементы + значение = готовая форма.
Список и предпросмотр шаблонов
ЗАДАЧА
Для привлечения пользователей через органический поиск требуется создать открытый каталог шаблонов форм и квизов.
РЕШЕНИЕ
Сделал страницу со списком категорий и их шаблонов в виде карточек.
В превью шаблона я поместил реальную форму, чтобы пользователь мог с ней взаимодействовать. Кнопки шеринга, чтобы пользователь мог поделится формой.
Если шаблон не подходит для пользователя, ему предлагаются близкие по тематике другие шаблоны.
Поскольку пользователь может зайти сюда не зная о StepFORM, в нижней части страницы я разместил вопросы и ответы.
Список категорий и карточки шаблонов
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
Логотип и фирменный стиль
Я выбрал глубокий синий цвет как основу стиля. В дополнение к нему нейтральный серый. Основное шрифтовое семейство — Montserrat.
Логотипы с различными фонами в полном и сокращенном варианте
Photo by Ralph (Ravi) Kayden
Пример баннера
Photo by Ralph (Ravi) Kayden
Конкурентная разведка
В ходе работы над продуктом, я изучил и опробовал 47 близких и дальних конкурентов. Лучшие подходы и практики я учитывал проектируя интерфейс StepFORM.
Таблица конкурентов StepFORM
Photo by Ralph (Ravi) Kayden
Результаты
Продукт пользуется популярностью в нише, имеет несколько десятков тысяч регистраций.
© Артём Жигалин | psycholcycle@gmail.com