кейс • 12 мин

fivestart

Дизайн интерфейса для работы с отзывами + запуск MVP. Провёл исследование, спроектировал сервис для бизнеса и добился снижения Transaction Cost • fivestart.ru

×2 раза

сократил шаги для старта работы с продуктом

на 35%

ускорил решение ключевых задач в интерфейсе

О проекте

Клиент и цель

Задачи

Роадмап проекта

Исследование

Анализ конкурентов, бенчмаркинг

Проектирование

Low fidelity Wireframes

Модерируемые UX-тесты

Дизайн

Референсы, мудборд

Финальные макеты

Приложение для клиентов

Дашборд + корнер-кейсы

🔥 Запуск

Результаты

О проекте

Клиент и цель

Fivestart — сервис для работы с отзывами, помогает бизнесу повышать рейтинг в Яндексе, Google, 2ГИС. QR-код для сбора отзывов с отсевом негатива и аналитикой.

Цель — создать интерфейс сервиса: из нуля → в единицу. Спроектировать личный кабинет, приложение для клиентов и страницу продукта

Задачи

Провести исследование

Пообщаться с потенциальным пользователями. Понять, какие есть потребности и боли

Собрать CJM и JTBD

Чтобы сформировать гипотезы, как закрыть боли и сделать полезный продукт

Low fidelity, UX-тесты

Протестировать интерактивный прототип, чтобы заранее отследить проблемные места

Дизайн интерфейса

Продумать возможные состояния. Собрать UI-kit для передачи в разработку

★

Сверстать MVP

Чтобы показать клиентам β-версию и получить первые результаты

Роадмап проекта

Разделил проект на подзадачи, чтобы не заблудиться и довести работу до финала

Исследование

Анализ конкурентов, бенчмаркинг

Собрал все известные сервисы и, где это возможно, прошёл путь клиента: от лендинга до работы с продуктом

→

Сервис
Myreviews
Hotmaps
Winlocal
Dailygrow
Goodvice
Pointer
Revvy
Pinbox
Ранг
RocketData

Стоимость	Регистрация	Триал	Онбординг	Старт	Аналитика	Печать QR	Моб. версия	Скриншоты	Демо
255 ₽/мес	✅	7 дней	✅	8 шагов	✅	✅	⨉	✅	⨉
990 ₽/мес	✅	⨉	✅	9 шагов	✅	⨉	✅	⨉	⨉
1000 ₽/мес	✅	14 дней	✅	6 шагов	✅	✅	⨉	✅	⨉
1000 ₽/мес	⨉ закрыли	7 дней	⨉	⨉	✅	⨉	✅	✅	⨉
500 ₽/мес	⨉	7 дней	⨉	⨉	✅	⨉	⨉	✅	⨉
1000 ₽/мес	⨉	⨉	⨉	⨉	✅	⨉	⨉	✅	⨉
2990 ₽/мес	⨉	⨉	⨉	⨉	✅	⨉	⨉	⨉	⨉
5000 ₽/мес	⨉	⨉	⨉	⨉	✅	⨉	⨉	✅	⨉
19 000 ₽/мес	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉
⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉	⨉

~~Проблемы~~
Точки роста и почему они важны

Нет онбординга, сложно начать работу

После регистрации попадашь в пустой ЛК без инструкций. Плюс у большинства сервисов регистрация «вручную» через менеджера

Много кликов для решения задач

В среднем, 3,4 клика. Есть большой потенциал ускорить работу и сократить количество необходимых кликов

Запутанная аналитика

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

Низкий уровень дизайна интерфейса

Настолько, что продуктовые страницы прячут скриншоты. Это может вызвать недоверие как на этапе знакомства с продуктом, так и в процессе использования

Персоны

Чтобы не заиграться в дизайн и не забыть, для кого мы создаём интерфейс. Зафиксировал основные категории, в которые целимся

Условный Алексей

Небольшой предприниматель с 1 офисом. Развивает бизнес самостоятельно или с небольшой командой

Условный Максим

Предприниматель с несколькими офисами: от 2 до 5. Опирается на команду, но всё ещё решает дела самостоятельно

Условная Мария

Менеджер, помощник руководителя. Не принимает решение, а сравнивает офферы и передаёт выводы

Глубинные интервью

Провёл 7 интервью с потенциальными пользователями. Так как в продукте сочетаются два интерфейса: для бизнеса и для клиентов, — я пообщался отдельно с каждой категорией.

Интервью по 30 минут с открытыми вопросами, чтобы понять «как бывает», как люди решают задачи сейчас, составить сценарии и получить максимум новой информации. Из неочевидного я выяснил, что иногда клиенты хотят лишь передать претензию, а решать проблему им не нужно

Jobs to be Done

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

Помимо «сделать хороший дизайн», я продумал полезные фичи, которые помогут сделать сервис комфортнее в повседневном использовании

CJM as is

Составил карту клиентского пути на основе флоу конкурентов. Ключевой момент — зафиксировать точки контакта с продуктом и задачи/мотивации, с какой целью клиент находится на конкретной странице.

Например, цель страницы продукта — продать. При этом ни один существующий сервис не даёт демо-версию. Чтобы улучшить продажи и стать ближе к пользователю, можно добавить на наш лендинг демо с QR-кодом, дать «пощупать» продукт

Гипотезы

Сформировал гипотезы, как закрыть боли и сделать полезный продукт

🤔

Cнизить Transaction Cost

Упростить онбординг, снизить сложность подключения к продукту

🤔

Ускорить работу

Сократить кол-во необходимых кликов для решения ключевых задач в интерфейсе

🤔

Сделать приятный UI

Использовать aesthetic-usability effect — эстетичный интерфейс воспринимается как более интуитивно понятный

Проектирование

User flow

Спроектировал флоу двух частей сервиса: для клиентов и для бизнеса. Так как цель — снизить Transaction Cost (время, усилия, деньги пользователя для достижения результата), я постарался сократить количество обязательных шагов

Карта экранов

Чтобы ничего не упустить, создал карту всех страниц сервиса с их содержанием. Это помогло определить общую структуру проекта и объём работы

Low fidelity Wireframes

За 3 итерации я создал прототип сервиса. С помощью быстрых коридорных тестов получилось сделать его довольно подробным. Это сэкономило ресурсы на следующих этапах

Исследование Baymard Institute, 2024 показало, что сводка распределения рейтинга оказалась важнее, чем содержание самих отзывов. Поэтому на дашборде я выделил этому блоку 2-е место, сразу после графика с отзывами.

Выявил и решил новые задачи, которые никак не решены в других сервисах. Например:

Как посмотреть динамику роста «было—стало»?

→ Нужна удобная таблица, чтобы видеть прирост рейтинга в более явном виде

Как скачать все QR-коды разом?

→ Вынести QR-коды в отдельный раздел. Ведь искать нужный QR-код, каждый раз заходя в настройки компании, — неудобно

Как разделить статистику по разным компаниям, когда есть несколько бизнесов?

→ Разделить концепции «компания» и «филиалы», разделить их визуально

Модерируемые UX-тесты

Провёл несколько UX-тестов на интерактивном прототипе: давал человеку сделать интерфейсные задачки, внимательно смотрел и записывал. Примеры задач: пройти регистрацию и начать работу, найти QR-код, добавить филиал

Исследования и хорошая подготовка помогли пройти этот этап на отлично. В тестах люди лишь иногда терялись из-за формулировок в интерфейсе. Я провёл UX-редактуру и быстро всё поправил.

Какие нашлись препятствия и как их решил

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

→ Прямо указал, что можно сделать это позже

Кнопка «К статистике» в конце онбординга вызывала вопросы, ведь клиент только подключился

→ Заменил на «В панель управления»

Фраза «укажите настоящее название компании» не пугает. Люди всё равно вписывают «aasdasdasd», чтобы пройти дальше

→ Помогла формулировка «Это название увидят клиенты»

Аватарка в аккаунте вызывала вопросы, зачем она нужна в таком сервисе?

→ Действительно, избавился от неё

Дизайн

Референсы, мудборд

Концепция дизайна — минимализм «с перчинкой». Отзывы — это про людей, про их настроение, про что-то живое и яркое во всех проявлениях. А ещё в продукте не слишком много данных, поэтому есть возможность сделать их крупнее, выразительнее

Результат

Задизайнил 20+ макетов: все разделы + флоу регистрации и онбординга

Приложение для клиентов

Публичный интерфейс для реакций, который открывается по QR-коду или ссылке. Начал с него, чтобы «нащупать» стиль и определиться с атомами всего дизайна

Дашборд со статистикой

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

Управление организациями

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

Настройка приложения

Кто-то может дать скидку за отзыв, а кто-то имеет возможность только попросить. В сервисе можно быстро отредактировать текст и смайлы под свои цели и свой Tone-of-Voice

Онбординг

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

Если поиск не удался (всякое бывает на тех. стороне), есть возможность добавить организацию по прямой ссылке. Рядом есть подсказка, где эту ссылку найти

UI-kit

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

Параметры бережно подписаны и вынесены на главную панель с помощью Nested Instances

Запуск

Продуктовая страница

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

На первом этапе MVP будет реализовано только приложение для клиентов, поэтому маркетинговый акцент — на QR-коде. Лендинг объясняет, как работает приложение, показывает демо и побуждает оставить заявку на подключение

MVP приложения

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

Текущие цели MPV:

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

Результаты

Снизился Transaction Cost. 100% респондентов готовы выбрать продукт, сравнивая его с конкурентами. Результат — за счёт понятной навигации, разделов с большей плотностью информации и хорошей UX-редактуры