Обновили интерфейсы и увеличили конверсию в 2 раза для OkiDoki
— cервиса быстрого подписания цифровых договоров
OkiDoki позволяет предпринимателям создавать и легко подписывать цифровые договора с клиентами
Отрисовать новый UI: первоначальный дизайн был разработан как часть MVP. Нужно подготовить дизайн для массового использования.
Подготовка:
Анализируем UX-интервью, которые разработчик сервиса провел с пользователями
Изучаем весь интерфейс приложения в мобильной и десктопной версиях
Смотрим интерфейсные решения для редактирования документов созданные конкурентами
Задачи:
Улучшить UX: Интервью с пользователями показали места где пользователям непонятно или неудобно. Нужно изменить интерфейс так, чтобы пользователям было легче решать свои задачи.
Улучшаем UX/UI
В первую очередь, мы начали искать, что пользователю может мешать при работе. В ключевом сценарии для предпринимателя, договор нужно было редактировать на двух разных страницах:
на одной менялся шаблон договора, в другой — поля договора заполнялись для выставления клиенту. Мы объединили эти страницы редактирования в одну, облегчили визуально интерфейс, cохранили функциональность и добавили подсказки.
Как итог — данное решение было верным, пользователи перестали путаться между двумя похожими экранами, стали быстрее ориентироваться в сервисе и в 2 раза быстрее начали выставлять договор на подписание, то есть выполнять свою главную цель.
на одной менялся шаблон договора, в другой — поля договора заполнялись для выставления клиенту. Мы объединили эти страницы редактирования в одну, облегчили визуально интерфейс, cохранили функциональность и добавили подсказки.
Как итог — данное решение было верным, пользователи перестали путаться между двумя похожими экранами, стали быстрее ориентироваться в сервисе и в 2 раза быстрее начали выставлять договор на подписание, то есть выполнять свою главную цель.
Процесс
Улучшаем UX/UI
Затем мы улучшили сам процесс редактирования документов. Для быстрого заполнения договоров предприниматели используют специальные «поля-метки». Это ключевая функциональность для подстановки заполненных значений в нужных местах в договоре, но часть пользователей не сразу понимала как этим пользоваться
Мы добавили подсказки, улучшили тексты, переработали композицию экрана. После нескольких использований нового интерфейса мы получили фидбек — да, теперь понятно что это и как это работает.
Мы добавили подсказки, улучшили тексты, переработали композицию экрана. После нескольких использований нового интерфейса мы получили фидбек — да, теперь понятно что это и как это работает.
Процесс
Улучшаем UX/UI
В первую очередь, мы начали искать, что пользователю может мешать при работе. В ключевом сценарии для предпринимателя, договор нужно было редактировать на двух разных страницах:
на одной менялся шаблон договора, в другой — поля договора заполнялись для выставления клиенту. Мы объединили эти страницы редактирования в одну, облегчили визуально интерфейс, cохранили функциональность и добавили подсказки.
Как итог — данное решение было верным, пользователи перестали путаться между двумя похожими экранами, стали быстрее ориентироваться в сервисе и в 2 раза быстрее начали выставлять договор на подписание, то есть выполнять свою главную цель.
на одной менялся шаблон договора, в другой — поля договора заполнялись для выставления клиенту. Мы объединили эти страницы редактирования в одну, облегчили визуально интерфейс, cохранили функциональность и добавили подсказки.
Как итог — данное решение было верным, пользователи перестали путаться между двумя похожими экранами, стали быстрее ориентироваться в сервисе и в 2 раза быстрее начали выставлять договор на подписание, то есть выполнять свою главную цель.
Процесс
Улучшаем UX/UI
В первую очередь, мы начали искать, что пользователю может мешать при работе. В ключевом сценарии для предпринимателя, договор нужно было редактировать на двух разных страницах:
на одной менялся шаблон договора, в другой — поля договора заполнялись для выставления клиенту. Мы объединили эти страницы редактирования в одну, облегчили визуально интерфейс, cохранили функциональность и добавили подсказки.
Как итог — данное решение было верным, пользователи перестали путаться между двумя похожими экранами, стали быстрее ориентироваться в сервисе и в 2 раза быстрее начали выставлять договор на подписание, то есть выполнять свою главную цель.
на одной менялся шаблон договора, в другой — поля договора заполнялись для выставления клиенту. Мы объединили эти страницы редактирования в одну, облегчили визуально интерфейс, cохранили функциональность и добавили подсказки.
Как итог — данное решение было верным, пользователи перестали путаться между двумя похожими экранами, стали быстрее ориентироваться в сервисе и в 2 раза быстрее начали выставлять договор на подписание, то есть выполнять свою главную цель.
Процесс
Улучшаем UX/UI
Также у пользователя было 2 экрана со списками договоров: с одного он попадал на редактирование шаблона договора, с другого на его заполнение перед выставлением клиенту. Объединив их, мы получили один удобный экран со списком всех договоров.
Дополнительно, мы перерисовали все компоненты интерфейса, добавили возможность сортировки документов, статусы ошибок заполнения документов и спрятали второстепенные кнопки. Теперь предпринимателям удобно работать даже если у них много договоров.
Дополнительно, мы перерисовали все компоненты интерфейса, добавили возможность сортировки документов, статусы ошибок заполнения документов и спрятали второстепенные кнопки. Теперь предпринимателям удобно работать даже если у них много договоров.
Процесс
Выставленные договоры
Обогатили важной информацией раздел с договорами, которые уже выставлены для клиентов: отобразили текущее состояние договоров, актуальность и заполненные поля.
Отрисовали множество компонентов дизайна, сделали удобный UI-Kit,
с которым разработчики смогли быстро приступить к работе и начать верстать обновленный дизайн.
с которым разработчики смогли быстро приступить к работе и начать верстать обновленный дизайн.
