Заново Америку не открою, если утвержу, что красота требует жертв, в нашем случае — вложений. Всем доброго времени суток! Сегодня хочу затронуть значимую тему: как дизайн способен увеличить ценность продукта. Не буду углубляться в гипотетические размышления или пересказывать банальные книги; остановлюсь на конкретном примере.
Меня зовут Армине, и я — менеджер продукта в компании ВИАР ИТ. Веду отдел R&D и занимаюсь созданием экосистемы для цифровизации архивов. В нашем мире, где каждое мгновение наполнено визуальными образами, дизайн становится не просто оформлением, а важнейшим инструментом, способствующим трансформации и повышению ценности.
Я уверена, что когда эстетика ведет за собой функциональность, мудрость технологии обретает новое звучание. Убедитесь, что вложения в дизайн — это не просто расходы, а инвестиции в будущее вашего продукта, которые откроют двери к новым вершинам успеха.
Немного о продукте, пример которого будем обсуждать
ПО Редактор является одним из жемчужин нашей продуктовой линейки, наделенный важной миссией соединять прошлое и будущее через призму технологий. Этот инструмент для оцифровки предназначен для плавного и удобного перехода от привычных бумажных архивов к современным цифровым данным. Для бизнеса это не просто шаг вперед; это возможность значительно сократить неоправданные расходы, связанные с владением архива.
Коротко о том, с чего всё началось
Жил-был Программное обеспечение Редактор 4.0.33 (рис. 1), тридцать третья версия Редактора 4, надежный союзник в искусстве оцифровки бумажных архивов.. Для повышения комфорта оцифровки программного обеспечения, редактор гармонично интегрирован в систему электронного архива, носящего название Модуль управления Виар, в недрах которого бережно хранится цифровой архив. В принципе, ПО справляется со своей задачей, и пользователи довольны. Моя цель как единственного, неповторимого менеджера и владельца продукта — увеличить его ценность для пользователей, повысить комфорт и скорость оцифровки. Иначе зачем же еще менеджеру продукта быть? ?
Рис. 1. Интерфейс Редактора 4.0.33, который был до редизайна. Далее расскажу, почему мы взялись за дизайн.
Что было сделано для повышения ценности продукта
1-ый шаг: анализ текущего состояния продукта
Указала важные показатели, которые были проанализированы.
Показатели анализа |
Текущее состояние |
Выводы/ оценка |
функциональность |
В 33 версии Редактора имеются следующие функции: - Загрузка файлов в редактор JPEG, TIFF, PNG, BMP для обработки - Панель инструментов с различными вариантами обрезки и выравнивания - Функция комплексной и редактируемой сценарной обработки изображений - Функция ретуширования выделенной области - Функция автоматического разделения книжного разворота на левую и правую страницу - Восстановление неравномерно освещенных изображений - Форматы сохранения как одностраничных, так и многостраничных документов: PDF, PDF/A, TIFF, DJVU (формат DJVU доступен только на ОС Windows) - Цветокоррекция изображения - Поворот и отражение изображений - Обрезка изображений - Два режима выбеливания (мягкое, жесткое) - Выбор степени сжатия при экспорте как отдельно, так и в связке с шаблоном - Миниатюры изображений (режим предпросмотра) - Возможность использования сжатия без потерь и сжатия с заданным уровнем компрессии при экспорте в PDF, DJVU, TIFF - Поддержка следующих фильтров: размытие, повышение резкости, медианный, билатеральный - Функция выравнивания гистограммы - Функция объединения двух изображений - Преобразование изображения в черно-белые цвета и оттенки серого - Функция удаления фона - Функция восстановления затухающего текста - Функция защиты изображений водяными знаками, штампами - Сервис распознавания текста с возможностью показа текста в отдельном окне и при экспорте в формат PDF, PDF/A с текстовым слоем - Прямая печать на сетевой принтер |
NPS у ПО Редактора 4.0.33 -8 баллов, следовательно, можно уверенно сказать, что продукт закрывает задачи пользователя. По функционалу, исходя из моего собственного бэклога, есть куда стремиться. |
эргономика |
Т.к. компания также оказывает услуги оцифровки, у меня была уникальная возможность проанализировать в разных условиях оцифровки весь процесс — от сканирования документов до загрузки в ИС Модуль Управления ВИАР (это отдельная тема статьи). |
Эргономика продукта на отличном уровне. Оценка - 10 |
эмоциональность |
Это важный фактор, который может существенно влиять на мои цели (помним, цель — увеличение ценности продукта). Я применила комбинированный подход оценки эмоциональности продукта, который предполагает совмещение субъективных и объективных оценок. Для оценки эмоциональности клиентов были использованы количественные опросы. Данные были собраны с помощью отдела технической поддержки, за что им большое спасибо! |
Эмоциональность продукта оценивается 8. Есть куда стремится! |
выгода владения / пользования |
Редактор 4.0.33 также предлагается внедрять с бесконтактными сканерами, которые обеспечивают бережное сканирование, а по сравнению с МФУ у имеют более высокое качество и удобство использования, что сокращает время работы пользователя на 30-40%. |
Выгода владения оценивается 10 |
уникальность |
Редактор 4.0.33 — уникальный продукт на российском рынке, не имеющий аналогов. Есть разные решения для обработки PDF-файлов и изображений, так называемые косвенные конкуренты, многие из которых облачные. Это важно для сегмента, с которым мы работаем, т.к. не каждая компания готова использовать облачные ресурсы, особенно если речь идет о медицинских данных, юридических договорах или бухгалтерских документах. Не упоминаю уже о государственных архивах — это для них просто недопустимо. |
Уникальность оценивается 10 |
безопасность |
ПО устанавливается локально, что обеспечивает максимальную безопасность. Для комплексной работы от бумаги к цифрам, учитывая баланс скорости и качества, ПО Редактор 4-го поколения — идеальный вариант. |
Оценка - 10 |
инновационность |
Для комплексной работы от бумаги к цифрам, учитывая такие факторы, как баланс скорости и качества, ПО Редактор 4-го поколения — идеальный вариант. |
Оценка - 9 |
поддержка и сервис |
Ох, не могу не гордиться! Это команда мечты! Влада и Сергей — эксперты в своем деле! Отличные отзывы от пользователей. Одна из ценностей компании — клиентоориентированность, следовательно, поддержка и сервис продукта на высоком уровне. Все регламенты по SLA строго соблюдаются. |
Оценка - 10 |
Выводы по анализу ценности продукта
По таблице ценности продукта можно увидеть, что помимо функциональности и эмоциональности, остальные показатели находятся в отличном состоянии и оцениваются на 10. Инновационность я оценила на 9, так как уверена, что есть куда расти. Например, я бы разработала ПО, которое будет сканировать документы и заполнять поля по голосовой команде. Надеюсь дожить до таких времен ?.
Для достижения моей цели я сосредоточусь на повышении двух показателей: функциональности и эмоциональности продукта.
Конкурентные продукты
Конечно, мы не единственные на рынке, и существуют косвенные конкуренты, которые частично также предлагают похожие решения. Приведу примеры самых крупных.
Долго писать о конкурентных продуктах не буду. Уверена, что Adobe Acrobat и ABBYY FineReader всем читателям известны. Единственное, что считаю важным отметить в текущей ситуации, — это то, что для многих компаний важна именно российская разработка в соответствии со статьей 12.1 Федерального закона РФ «Об информации, информационных технологиях и о защите информации», а также зарегистрированное ПО в Министерстве цифрового развития РФ.
Adobe Acrobat предназначен для создания PDF-документов. Он предоставляет возможность создания цифровой подписи и совместного доступа с другими пользователями в премиум-версии. Интерфейс минималистичен и понятен, инструменты сгруппированы в соответствующих рубриках меню. Есть возможность конвертирования PDF в DOCX и XLSX, а также сохранения веб-страниц в формате PDF.
ABBYY FineReader распознает содержимое в форматах PNG, JPG и DJVU; оцифровка происходит сразу после открытия файла. Здесь можно редактировать документ и сохранять его в популярных форматах, также поддерживаются таблицы XLSX. Непосредственно из рабочей области FineReader можно подключать принтеры для печати и сканеры для работы с документами.
Скан Корректор А4 — это программа для коррекции скан-копий и изображений. В параметрах можно настраивать яркость, контрастность и цветовой тон. К особенностям относится возможность запоминания до десяти последовательно введенных изображений без сохранения их на компьютере. В рабочей области настраиваются границы формата A4, чтобы полностью отсканировать бумажный лист. Программа не устанавливается в систему, что позволяет использовать ее как портативную версию.
По данным портала softportal
Разработчик:Pankratiev D.
Readiris - платное программное обеспечение для работы с отсканированными документами. ПО выполняет сканирование и поддерживает функцию распознавания текста. На выходе получается документ, текст которого доступен для редактирования через встроенный редактор. Также ПО поддерживает экспорт в разные форматы документов.
Разработчик: компания I.R.I.S.
CuneiForm - программное обеспечение для сканирования документов. Поддерживает функцию распознавания текста на листах. Результаты выводятся в виде отдельных страниц, и каждую из них можно выбрать для дальнейшего редактирования. Распознанный текст корректно отображается, может быть стерт, заменён на другой или изменен в размере, цвете и шрифте.
К сожалению, редактировать изображения через CuneiForm нельзя, поэтому остается только сохранить вывод в одном из немногих доступных форматов и работать с изображениями через другие программы, если документ требует комплексной настройки. Однако CuneiForm позиционируется как простая программа для OCR и вывода текста, чего может быть достаточно для определенных пользователей.
Проект: https://cuneiform.ru/ VueScan — инструмент для сканирования, редактирования и подготовки документов к печати. Программное обеспечение также поддерживает стандартный режим распознавания текста. Изображения можно редактировать, кадрировать, задавать рамки и настраивать цвета. Имеется инструмент предпросмотра, который позволяет сразу оценить результат.
Разработчик: Hamrick Software
Выводы: на Российском рынке аналогов ПО Редактора 4.0.33 - нет.
Технологии продукта
Показатели анализа |
Текущее состояние |
Выводы |
технологии |
стек: C++, Qt, python |
Преимущества C++ заключаются в высокой скорости выполнения конечного продукта. Преимущества Qt: скорость разработки выше, чем в среднем для C++. Минусом является то, что в любом случае разработка на C++ может быть медленной. Преимущество Python: возможность быстро добавлять новый функционал, если к нему нет строгих требований по скорости. Также Python предлагает большой объём библиотек с готовыми решениями. |
возможность апгрейда, апдейта ПО |
монолитный код |
Мы изменили архитектурный подход на микросервисный, поскольку для наших задач более важны стабильность и возможность совместного использования алгоритмов в разных продуктах. |
технические риски |
Риск монолита - сложность поддержки исходного кода (legacy) и сложность поддержки разных платформ. Также имели сложности в тестировании, могли тестировать исключительно в ручную |
После перехода на микросервисную архитектуру эта проблема исчезла. Появилась возможность использовать Docker-контейнеры для работы на разных платформах. Также появилась возможность создания модульных тестов. |
2-й шаг: определены потенциальные барьеры к масштабированию продукта
Заранее озвучу, что у меня была база барьеров от технической поддержки, которая плотно работает с пользователями. Были проведены многочисленные качественные исследования с пользователями. Также проводились многократные наблюдения процесса оцифровки (почему бы и нет, если есть такая возможность). Мы, имею в виду я с командой R&D, разработчиками и техническим директором, не раз выезжали в поля и оцифровывали документы своими руками (это нормальная практика, тут нечего долго объяснять). Ниже представлены барьеры и гипотезы для улучшения.
Барьеры
Маленькая область работы со скан-копиями после повторного сканирования с целью замены какого-то скана.
Ручное переименование номеров сканов.
Отсутствие счетчика/количества сканов.
Неудобный процесс работы с несколькими документами.
Непонятность функционала сложных инструментов.
Долгая работа сложных инструментов при обработке изображений.
Отсутствие возможности работать с уже сформированными PDF-файлами.
Неудобная работа со сценариями, отсутствие возможности их корректировки.
Неудовлетворительное выравнивание геометрии как при сканировании, так и у уже отсканированных страниц.
Отсутствие объединения изображений пиксель в пиксель.
3-й шаг: выбраны фокусные барьеры для первого цикла разработки и сгенерированы решения к ним
Барьеры |
Гипотезы для улучшения |
Маленькая область работы со скан-копиями после повторного сканирования с целью замены какого-то скана. |
Сделать условно безграничную рабочую область (примеры: Figma, Miro). |
Ручное переименование номеров сканов. |
Возможность автоматического пересчитывания номера скан-копий при изменении позиции документа. |
Отсутствие счетчика/количества сканов. |
Проектировать область ленты таким образом, чтобы было видно количество скан-копий, количество выбранных скан-копий/счетчик. |
Неудобный процесс работы с несколькими документами. |
Возможность работы с несколькими документами одновременно. |
Непонятность функционала сложных инструментов. |
Краткие пояснения (tooltips) к сложным инструментам. |
Долгая работа сложных инструментов при обработке изображений. |
Оптимизация алгоритмов работы сложных инструментов в ПО. |
Отсутствие возможности работать с уже сформированными PDF-файлами. |
Возможность загрузки и редактирования PDF-файлов. |
Неудобная работа со сценариями, отсутствие возможности их корректировки. |
Перепроектирование логики работы со сценариями. |
4-й шаг: тестирование гипотез проблем (барьеров) и решений будем следующим образом
Методы проверки гипотез |
Тестирование |
Сделать условно безграничную рабочую область (примеры: Figma, Miro). |
качественное исследование |
Возможность автоматического пересчитывания номера скан-копий при изменении позиции документа. |
UX тестирование |
Проектировать область ленты таким образом, чтобы было видно количество скан-копий, количество выбранных скан-копий/счетчик. |
UX тестирование |
Возможность работы с несколькими документами одновременно. |
UX тестирование |
Краткие пояснения (tooltips) к сложным инструментам. |
UX тестирование |
Оптимизация алгоритмов работы сложных инструментов в ПО. |
качественное исследование |
Возможность загрузки и редактирования PDF-файлов. |
качественное исследование |
Перепроектирование логики работы со сценариями. |
UX тестирование |
5-й шаг: при чем тут дизайн вообще
После обогащения функционала и устранения преград настало время для редизайна программного обеспечения. Этот шаг откроет перед нами путь к максимальному увеличению ценности продукта, что является нашей итоговой целью. Подобно художнику, создающему свою картину, мы стремимся воссоздать нечто уникальное и запоминающееся, что будет resonировать с потребителями, пробуждая в них глубокие чувства и интерес. Наша команда полностью сосредоточена на том, чтобы каждая деталь и элемент служили не просто утилитарной функции, но и добавляли новую жизнь в наш продукт. В результате, редизайн станет не только техническим обновлением, но и волнующим путешествием в продукт, где эффективность переплетается с эстетикой, создавая гармонию, которая вдохновляет, увлекает и вызывает доверие. Мы уверены, что этот подход необратимо изменит восприятие наших пользователей и откроет новые горизонты в нашем развитии.
Прилагаю несколько экранов нового дизайна Редактора 5-го поколения. (рис. 2.1, 2.2, 2.3).
К сожалению, не могу передать всю прелесть в статичных изображениях ?… Интерфейс был тщательно переработан в соответствии со всеми стандартами accessibility of UX, проявляя интуитивно понятные паттерны, основанные на лучших мировых практиках. Программное обеспечение обладает выдающейся отзывчивостью и изящно интегрированными микроанимациями, которые направляют пользователя, не отвлекая от его целей в процессе работы. Пожалуйста, поделитесь в комментариях своим мнением о дизайне с вашей точки зрения.
6-й шаг: УТП для пользователя
Что получили наши пользователи в итоге:
-
Новый красивый, юзабельный дизайн, соответствующий стандартам Accessibility UX, HIG
Проработанный путь пользователя
Простота работы с интерфейсом
Интерактивность, отзывчивость интерфейса при взаимодействии с пользователем
Tooltip-ы для пояснения сложных инструментов
Высокая скорость работы интерфейса
Большая рабочая область для документа, возможность увеличения (zoom) документа до 400%
Два режима ленты: песочница и документ. Оба режима автоматически сохраняют свое состояние (список снимков и их порядок) и не требуют отдельного нажатия на кнопки сохранения для возвращения к работе. По ленте было проделано много работы — можно написать целую статью
Счетчик/индикатор, показывающий общее количество страниц в документе и количество выбранных страниц
Проработанная область документа: возможность легкого перемещения между несколькими документами
Сгруппированные инструменты в зависимости от их назначения: для обработки документов и изображений
Возможность добавить инструмент в сценарий
Возможность при необходимости очистить ленту после экспорта документов для оптимизации работы оператора и ускорения работы ПО
Высокая скорость работы ПО.
Оптимизация и ускорение работы алгоритмов сложных инструментов, таких как выбеливание и удаление шума, на 30-40%.
Возможность изменять ранее заданные параметры внутри сценария.
Во всех инструментах добавлен прямоугольник превью, а позиция и состояние инструмента сохраняются после применения.
Превью инструментов — возможность заранее увидеть результат применения инструмента.
Возможность импорта PDF-документа в редактор и обработка самого PDF.
Новый технологический стек.
Распознавание PDF/A
Планы
Ps
Ближайшее восходящее солнце для Редактора 5.0 — это переход к нейросетевым технологиям, обогащающим искусство выравнивания геометрии страницы и магию склеивания чертежей. Этот шаг закроет 9-й и 10-й пункты в таблице барьеров, открывая новые горизонты возможностей. Нейросети (ML) станут ключом, предоставляя безграничные перспективы для масштабирования функционала программного обеспечения.
Мы гордо назвали его Нейро Редактор Viar 5.0, Редактор 5-го поколения!
Завершение
Дизайн не просто украшение продукта, а его основа, влияющая на восприятие конечного пользователя. Эстетика и функциональность идут рука об руку, создавая уникальное предложение, которое выделяет наш продукт на фоне конкурентов. Мы стремимся не только к визуальной привлекательности, но и к интуитивно понятному интерфейсу, который делает взаимодействие с продуктом легким и приятным.
Тем не менее, затраты на качественный дизайн оправданы. Исследования показывают, что инвестиции в UX/UI приводят к увеличению показателей LTV (жизненной ценности клиента) и NPS (индекса потребительской лояльности). Каждый элемент дизайна должен работать на создание положительного опыта для пользователя, который, в свою очередь, готов возвращаться к нашему продукту снова и снова.
Спасибо дизайнеру Анне Саргсян за создание этой красоты! Ребята Демьян Марфида и Алексей Подбельцев превратили эту красоту из Figma в реальность, и сейчас мы наслаждаемся работой продукта!
В следующей статье мы углубимся в нейросетевые технологии, применяемые в нашем Нейро Редакторе Viar 5.0. Эти инновации не только делают процесс работы эффективнее, но и открывают новые горизонты для креативных идей. Будем рады поделиться с вами тем, как технологии и дизайн могут объединяться для создания выдающегося пользовательского опыта.
Ваши мысли важны для нас, так что не стесняйтесь делиться своими вопросами и идеями!