Красота требует жертв! Как увеличить ценность продукта с помощью дизайна

Заново Америку не открою, если утвержу, что красота требует жертв, в нашем случае — вложений. Всем доброго времени суток! Сегодня хочу затронуть значимую тему: как дизайн способен увеличить ценность продукта. Не буду углубляться в гипотетические размышления или пересказывать банальные книги; остановлюсь на конкретном примере.

Меня зовут Армине, и я — менеджер продукта в компании ВИАР ИТ. Веду отдел R&D и занимаюсь созданием экосистемы для цифровизации архивов. В нашем мире, где каждое мгновение наполнено визуальными образами, дизайн становится не просто оформлением, а важнейшим инструментом, способствующим трансформации и повышению ценности.

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

Немного о продукте, пример которого будем обсуждать

ПО Редактор является одним из жемчужин нашей продуктовой линейки, наделенный важной миссией соединять прошлое и будущее через призму технологий. Этот инструмент для оцифровки предназначен для плавного и удобного перехода от привычных бумажных архивов к современным цифровым данным. Для бизнеса это не просто шаг вперед; это возможность значительно сократить неоправданные расходы, связанные с владением архива.

Коротко о том, с чего всё началось

Жил-был Программное обеспечение Редактор 4.0.33 (рис. 1), тридцать третья версия Редактора 4, надежный союзник в искусстве оцифровки бумажных архивов.. Для повышения комфорта оцифровки программного обеспечения, редактор гармонично интегрирован в систему электронного архива, носящего название Модуль управления Виар, в недрах которого бережно хранится цифровой архив. В принципе, ПО справляется со своей задачей, и пользователи довольны. Моя цель как единственного, неповторимого менеджера и владельца продукта — увеличить его ценность для пользователей, повысить комфорт и скорость оцифровки. Иначе зачем же еще менеджеру продукта быть? 😉

Рис. 1. Интерфейс Редактора 4.0.33, который был до редизайна. Далее расскажу, почему мы взялись за дизайн.

Что было сделано для повышения ценности продукта

1-ый шаг: анализ текущего состояния продукта

Указала важные показатели, которые были проанализированы.

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

По таблице ценности продукта можно увидеть, что помимо функциональности и эмоциональности, остальные показатели находятся в отличном состоянии и оцениваются на 10. Инновационность я оценила на 9, так как уверена, что есть куда расти. Например, я бы разработала ПО, которое будет сканировать документы и заполнять поля по голосовой команде. Надеюсь дожить до таких времен 😉.

Для достижения моей цели я сосредоточусь на повышении двух показателей: функциональности и эмоциональности продукта.

Конкурентные продукты

Конечно, мы не единственные на рынке, и существуют косвенные конкуренты, которые частично также предлагают похожие решения. Приведу примеры самых крупных.

• Adobe Acrobat

• ABBYY FineReader

• Скан Корректор А4

• Readiris

• CuneiForm

• VueScan

Долго писать о конкурентных продуктах не буду. Уверена, что 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 — нет.

Технологии продукта

2-й шаг: определены потенциальные барьеры к масштабированию продукта

Заранее озвучу, что у меня была база барьеров от технической поддержки, которая плотно работает с пользователями. Были проведены многочисленные качественные исследования с пользователями. Также проводились многократные наблюдения процесса оцифровки (почему бы и нет, если есть такая возможность). Мы, имею в виду я с командой R&D, разработчиками и техническим директором, не раз выезжали в поля и оцифровывали документы своими руками (это нормальная практика, тут нечего долго объяснять). Ниже представлены барьеры и гипотезы для улучшения.

Барьеры

1. Маленькая область работы со скан-копиями после повторного сканирования с целью замены какого-то скана.

2. Ручное переименование номеров сканов.

3. Отсутствие счетчика/количества сканов.

4. Неудобный процесс работы с несколькими документами.

5. Непонятность функционала сложных инструментов.

6. Долгая работа сложных инструментов при обработке изображений.

7. Отсутствие возможности работать с уже сформированными PDF-файлами.

8. Неудобная работа со сценариями, отсутствие возможности их корректировки.

9. Неудовлетворительное выравнивание геометрии как при сканировании, так и у уже отсканированных страниц.

10. Отсутствие объединения изображений пиксель в пиксель.

3-й шаг: выбраны фокусные барьеры для первого цикла разработки и сгенерированы решения к ним

4-й шаг: тестирование гипотез проблем (барьеров) и решений будем следующим образом

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. Эти инновации не только делают процесс работы эффективнее, но и открывают новые горизонты для креативных идей. Будем рады поделиться с вами тем, как технологии и дизайн могут объединяться для создания выдающегося пользовательского опыта.

Ваши мысли важны для нас, так что не стесняйтесь делиться своими вопросами и идеями!