Главное Свежее Вакансии   Проекты
Рекомендуем
Хотите больше продаж
по всей России?
Подключите красивый номер 8-800 за 1 рубль
Перейти
Продвинуть свой проект
Выбор редакции:
Инструкция: как создать эффективные рассылки на Новый Год и Рождество

«Стрессов не стало меньше, но я стал легче с ними справляться»: как предприниматель отказался от алкоголя

Тест-драйв нового формата рекламы VK. Погнали

«Андромеда» от «Яндекса» любит уникальный контент

Работники ножа и топора: как маркетолог превратила необычное хобби в бизнес

Как мы ходили на Wildberries за пассивным доходом, часть вторая

Кейс: за 2 месяца вывод 50% запросов в Топ-10

Как строить коммуникацию от лица производителя на основе поведения клиента в воронке продаж с помощью инструментов Flocktory?

Как мы продвигали Linkum.ru на YouTube и что из этого вышло

Новогодние прогнозы и советы от SEO-экспертов

1 464 2 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как мы провели масштабный редизайн веб-приложения и повысили вовлеченность на 9,3%

Часто, чтобы спасти ситуацию, приходится решаться на кардинальные изменения. Именно так нам и пришлось поступить в октябре 2017: глобально обновить интерфейс Flowlu, без итераций и постепенных изменений, без возможности переключения на старый интерфейс. О том, зачем и как мы организовали процесс перехода Flowlu на новый интерфейс, и какие плоды это принесло​

Всем привет! Мы – Flowlu, сервис для комплексного управления бизнесом. В этом кейсе хотим рассказать о том, как провели масштабный редизайн нашего веб-приложения «не по эджайлу» – без итераций и постеенных изменений, а глобальным обновлением системы.

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

О проекте и подходе к разработке

Flowlu существует с конца 2015 года. Мы использовали Bootstrap 2 с готовыми UI-компонентами и плагинами. Некоторые из них модифицировались под конкретные задачи. Степень кастомизации была разной.

Поначалу такой подход был оправдан. По мере развития проекта мы стандартизировали процесс разработки, перевели Flowlu на модульную архитектуру, ввели в работу базовые scrum-принципы. Благодаря этому разработка велась легко и непринужденно. Однако со временем в таком подходе обнаружились серьезные недостатки:

  • Код было сложно поддерживать, а элементы интерфейса, которые были модифицированы – обновлять. Из-за этого CSS-код, написанный дополнительно к компонентам и плагинам, разросся до 25 000 строк. Любая попытка быстро внести изменения в UX заканчивалась провалом и горой багов.
  • Отсюда и неэстетичный интерфейс системы: в Boostrap 3 уже появились симпатичные кнопки, меню, слайд-бары, а мы не могли сделать так, чтобы ими могли пользоваться. Почему? Смотрите пункт первый.

Чем больше в Flowlu становилось пользователей, тем больше мы получали обратной связи. Пользователи жаловались на то, что некоторые UI-решения были неудобными, что-то морально устарело, какие-то формы нужно было мучительно долго заполнять. Пугало нагромождение информации. Сообщали, что интерфейс для них тесен, а нужное теряется во второстепенных деталях.

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

  • Каждый раз при работе с UI-элементами разработчику приходилось переписывать кучу кода и перепроверять, где что «поехало» при верстке.
  • После того, как код был переписан, а обновление – опубликовано в бета-версии, приходилось тратить время на починку багов в верстке.
  • Улучшение в одной части системы нельзя было распространить на другие модули.

Пример: Внедрили панель быстрого просмотра для контрагентов в CRM и проектов, но не добавили ее в список сделок.

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

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

В одно утро выходного дня наша команда решила поэкспериментировать: попробовать подключить новые компоненты Bootstrap 3 и выпустить модуль с новым интерфейсом. Затем, если опыт будет удачным, распространить подход на остальные модули.

Как мы выстроили процесс перехода

Эксперимент увенчался успехом. MVP нового модуля Agile был выпущен уже на новом наборе компонентов. Команде удалось подружить его с ядром системы, где использовался старый набор UI-элементов. Также мы завершали разработку «Базы знаний» – модуля для публикации обучающих статей внутри системы. Ее тоже решили выпустить в обновленном интерфейсе.

lightest

Доска задач в модуле Agile

b_5a570f9207196.jpg

Главная страница в модуле «База знаний»

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

Это окончательно убедило нас – пора! Останавливала неизвестность – тотальный редизайн требовал больших затрат, а на старте еще не было понятно, с какими подводными камнями нам предстоит встретиться.

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

  • Повысить вовлеченность новых аккаунтов в работу с сервисом на 5-10%.
  • Увеличить скорость разработки и внедрения нового функционала.
  • Снизить как минимум на 50% количество запросов в поддержку, связанных с интерфейсными багами.

В процессе подготовки возникли трудности, которые поставили под вопрос успех всего проекта:

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

Однако отступать у нас не было права: пользователи уже ощутили преимущества редизайна. Задачу пришлось решать во что бы то ни стало. Поэтому мы приступили к работе.

Больше всего времени ушло на то, чтобы переписать ядро системы для работы с новыми компонентами – они отсутствовали в экспериментальных модулях. Чтобы выпустить новые модули Agile и «База знаний», разработчики написали временный «костыль» – гибридное решение, которое помогло новым и старым частям системы какое-то время работать одновременно. Потом, когда Flowlu перешел на новый интерфейс, эти гибридные костыли удалили вместе со старым кодом.

Что сделали в рамках редизайна:

  • Стандартизировали типовой функционал и выделили его в отдельные компоненты. К примеру, мы сделали единую канбан-доску для модуля Agile, задач, сделок и проектов (раньше доски по дизайну и возможностям были разные). Если мы соберемся расширить функционал или изменить дизайн доски для Agile, сможем внедрить обновления во все существующие доски. А затем внедрить ее в другие модули системы – например, в модуль счетов. Это значительно ускоряет разработку.

lightest

Доска проектов

b_5a57103289aa4.jpg

Доска сделок

b_5a57106ed4f42.jpg

Доска проектов по менеджерам

  • Упростили интерфейс, выкинули из него лишнее. Стало легко отделить главное от второстепенного. Например, в панель быстрого просмотра сущности (проекта, контрагента, сделки) вывели только важную, часто используемую информацию, а всю остальную поместили на детальную страницу просмотра.

lightest

Панель быстрого просмотра проекта

b_5a5710eaf25f4.jpg

Детальная страница проекта

  • Количество кликов для перехода к цели сократилось. К примеру, из боковой панели для быстрого просмотра сущности (проекта, сделки, контрагента) стало возможным создать новый элемент с привязкой к ней (выставить счет, добавить контрагента, поставить задачу).Также мы ввели многослойную боковую панель, в которой можно посмотреть любую сущность, не выходя из начально открытой. Например, открываем панель для быстрого просмотра информации по проекту, поверх этой панели можно открыть карточку контрагента, а по нему – карточку сделки. Потом закрыть все верхние окна и вернуться к первоначальной слайд-панели.

lightest

Многослойная боковая панель и кнопка для создания нового элемента

  • В целом облегчили дизайн, чтобы воспринимать интерфейс было проще. Добавили отступы, чтобы блоки информации были четко разделены, а у пользователей не возникало UI-клаустрофобии.

b_5a5713e58fea5.jpg

Детальная страница проекта. Было

b_5a571168d0d7e.jpg

Детальная страница проекта. Стало.

Сколько времени все это заняло

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

Чем оказался плох такой подход:

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

Мы поставили на паузу другие задачи и работали над переводом системы на новый интерфейс. На это ушел 1 месяц. Еще 3 недели тестировали: сначала на альфа-сервере, затем на бета-сервере, где с Flowlu работала группа IT-специалистов из дружественной компании.

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

lightest

Панель быстрого просмотра карточки контрагента

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

Реакция пользователей на новый интерфейс

Редизайн – масштабная перемена. Если, конечно, это не банальный «фэйслифт» без глобальных изменений пользовательского опыта. Он неизменно делит аудиторию на 2 лагеря – консерваторов и тех, кто с радостью воспримет перемену.

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

Обычно крупные проекты изменяют интерфейс постепенно, а при радикальных изменениях дают пользователям возможность работать со старым интерфейсом какое-то время, параллельно пробуя новый дизайн. Достаточно вспомнить недавние кейсы YouTube и Вконтакте.

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

С новым интерфейсом был внедрен новый функционал и улучшен старый. Одновременное поддержание старой и новой версии подразумевало лишнюю трату ресурсов.

Итак, редизайн свершился, а мы готовились ждать негативных отзывов от пользователей. Они последовали, но их было гораздо меньше, чем ожидалось – логику работы Flowlu мы не трогали, зато повысили «юзабельность» приложения. Визуально многие вещи (кнопки, панели, меню) были уже знакомы пользователям системы – они уже привыкли к ним, когда работали с новыми модулями-первопроходцами.

Старые пользователи в основном говорили так: «Стало красиво и удобнее, но ничего не изменилось». Это подтверждает, что нам удалось сохранить логику работы системы.

lightest

lightest

Из всего списка активных пользователей только 5% поинтересовались, можно ли перейти на старый интерфейс. Еще несколько обратились в поддержку – не сразу разобрались, как производить привычные им операции в новом интерфейсе. Больше обновление приглянулось тем, кто начал использовать Flowlu недавно.

Итоги редизайна

  • Новый интерфейс позволил нам улучшить UI и оптимизировать все, что накопилось под капотом. Улучшили существующий функционал благодаря тому, что новый интерфейс высветил неудобства и несовершенства старого дизайна.
  • Мы наконец избавились от трудноподдерживаемого кода. Снизился уровень кастомизации на уровне каждого модуля – благодаря тому, что нам удалось стандартизировать не только UI, но и программный код по всей системе. Больше не наступали на грабли кастомизации плагинов и компонентов, и более обдуманно использовали возможности обновленной UI-библиотеки, что сократило размер кастомных файлов стилей с 25 000 строк до 1 000.
  • Сократили количество ошибок, связанных с интерфейсом. Отчеты о таких багах от пользователей сократились на 90%, а конструктивных пожеланий по развитию сервиса стало больше.
  • Увеличилась скорость разработки. Теперь мы гораздо быстрее можем реализовывать «хотелки» пользователей.

Ну и самое главное – процент активных новых аккаунтов, зарегистрированных в период с 16 октября по 31 декабря, увеличился на 9,3%, по сравнению с периодом с 1 августа по 15 октября, благодаря тому, что интерфейс стал интуитивно понятным и приятным.

Советы тем, кто решается на масштабные перемены

  • Если планируете кардинальный редизайн, приберегите обновление функционала на потом. Пользователи и так будут достаточно шокированы. Не заставляйте их еще и решать задачи из разряда «как это теперь у них работает».
  • Как и любая масштабная задача, редизайн позволяет по-новому взглянуть на проект и понять, как сделать его еще удобнее и лучше для пользователя. Встряска особенно полезна, если вы испытываете дефицит идей.
  • Перед выпуском масштабных обновлений потратьте время на тщательное тестирование и отладку функционала. Все должно работать идеально, без багов и ошибок в верстке. Для пользователей кардинальные перемены – стресс и шок. Не нужно его усугублять ошибками в работе.
  • Будьте готовы к критике – не всем нравятся масштабные перемены. Пользователям нужно будет время освоиться в новом интерфейсе, прежде чем они поймут, что стало действительно лучше.
  • Прежде чем делать редизайн, четко спросите себя: с какой целью мы это делаем? Полезным будет определить ключевые метрики, по которым будет оцениваться эффективность выполненной работы. В нашем случае показателями успеха стали скорость разработки, частота выхода апдейтов, сокращение числа жалоб на «интерфейсные баги» и рост вовлеченности новых пользователей.

+9
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Выбор редакции:
Инструкция: как создать эффективные рассылки на Новый Год и Рождество

«Стрессов не стало меньше, но я стал легче с ними справляться»: как предприниматель отказался от алкоголя

Тест-драйв нового формата рекламы VK. Погнали

Популярные за неделю
Показать следующие
Комментарии
Первые Новые Популярные
Co-Versia
Маркетинговое агентство, объединившее методику Точек Контакта и Performance.
Антон Медведев
Круто, интересно почитать и узнать, как это всё происходило и на чём основывалось. Ну и радует, что развитие продукта станет ещё более быстрым)
Помню, сидели мы долго на одной известной системе, называть не буду, и очень у неё был тормозной интерфейс. Всё происходило медленно. Но они анонсировали редизайн и мы ждали. Дождались. Дизайн стал современнее, а вот скорость процессов — ещё ниже. Тогда мы и свалили оттуда.
В Flowlu сразу порадовала скорость работы. Увидев сначала новый интерфейс в новых модулях, мы, было напряглись немного. Щас как всё обновят и до свидания, скорость. Но нет, всё летает и многое стало ещё удобнее и быстрее. Логика при этом осталась, да.
Конечно всё равно есть идеи, которые, будет время, закину на Юзерэхо, но это просто потому что нет предела совершенству. А так за всё время работы, за все обновления, ни разу не огорчил сервис. Хотя я-то из тех консерваторов, которые "Дуров верни стену" и всё такое. Но тут грамотно и с умом действуют всегда, только улучшая. Спасибо за отличный продукт.
Ответить
Flowlu
Сервис для комплексного управления бизнесом: проектами, клиентами, финансами.
Flowlu
Вам, Антон, спасибо большое за обратную связь и позитивные отзывы).
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать