Flowlu Soft
449
Блоги

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

Команда сервиса для комплексного управления бизнесом 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-элементов. Также мы завершали разработку «Базы знаний» – модуля для публикации обучающих статей внутри системы. Ее тоже решили выпустить в обновленном интерфейсе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Если планируете кардинальный редизайн, приберегите обновление функционала на потом. Пользователи и так будут достаточно шокированы. Не заставляйте их еще и решать задачи из разряда «как это теперь у них работает».
  • Как и любая масштабная задача, редизайн позволяет по-новому взглянуть на проект и понять, как сделать его еще удобнее и лучше для пользователя. Встряска особенно полезна, если вы испытываете дефицит идей.
  • Перед выпуском масштабных обновлений потратьте время на тщательное тестирование и отладку функционала. Все должно работать идеально, без багов и ошибок в верстке. Для пользователей кардинальные перемены – стресс и шок. Не нужно его усугублять ошибками в работе.
  • Будьте готовы к критике – не всем нравятся масштабные перемены. Пользователям нужно будет время освоиться в новом интерфейсе, прежде чем они поймут, что стало действительно лучше.
  • Прежде чем делать редизайн, четко спросите себя: с какой целью мы это делаем? Полезным будет определить ключевые метрики, по которым будет оцениваться эффективность выполненной работы. В нашем случае показателями успеха стали скорость разработки, частота выхода апдейтов, сокращение числа жалоб на «интерфейсные баги» и рост вовлеченности новых пользователей.
{ "author_name": "Flowlu Soft", "author_type": "self", "tags": [], "comments": 7, "likes": 16, "favorites": 5, "is_advertisement": false, "section_name": "blog", "id": "31587", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } } ]