IT-решение российского стартапа ViewEvo распознает товары на фото и видео – а главное, находит их в интернет-магазинах. Мы в SimbirSoft разработали дизайн мобильного приложения ViewEvo, чтобы «подружить» пользователей с инновационным умным алгоритмом.

Продукт

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

Цель

Разработать удобный и визуально приятный интерфейс мобильного приложения для iOS и Android на русском и английском языках.

Что сделали

UX/UI-аудит

Мы начали с UX/UI-аудита уже готового, более раннего решения. Нашли в интерфейсе несколько недостатков, которые могли создавать препятствия для пользователей, например:

• низкая контрастность экрана;
• отсутствие единого подхода к расположению текста;
• избыточные элементы на экране.

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

Из-за подобных моментов работа алгоритма была непрозрачной, и это могло оттолкнуть пользователей. При проектировании нового решения интерфейса мы учли все недоработки предыдущей версии и вместе с заказчиком определили необходимые изменения.

Разработка интерфейса

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

• Главный экран. Основные возможности: загрузка фото для распознавания товаров; навигация по разделам (видео, новости, избранное); выход в меню, где доступен личный кабинет, техническая поддержка и другие настройки.
• Видео. В этом разделе пользователь может смотреть партнерские телеканалы в прямом эфире и уже выпущенные сюжеты с видеоплатформ. Для некоторых видео составлены готовые подборки образов.
• Новости. Здесь можно найти различные статьи с подборками образов и релевантными новостями. Позже в разделе будут доступны категории: ТВ, Кино/сериалы, Соцсети.
• Избранное. В разделе отображаются «Товары» и «Кадры», которые сохранил пользователь.

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

Как это работает

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

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

Продуктовый подход к разработке

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

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

Дополнительные инструменты

Разработка интерфейса приложения – один из многих этапов нашего сотрудничества с клиентом. Мы создали лендинг о технологиях ViewEvo, которые использованы в приложении и могут стать основой для новых IT-продуктов. На сайте на двух языках описаны основные модули:

• распознавание контента по звуку,
• поиск похожих товаров,
• ПО для ручной разметки контента и непосредственно само приложение ViewEvo.

Мы реализовали интерфейс виджета для встраивания в медиаплееры. Он будет доступен в процессе трансляции телеканалов и позволит зрителям подобрать образ, не отрываясь от просмотра.

Результаты

• Разработали полный комплект макетов и состояний приложения – более 280 экранов;
• сформировали дизайн-систему с UI-Kit для быстрого и оптимального взаимодействия между дизайнерами и командой разработки;
• создали макеты для AppStore и Google Play, которые видят пользователи перед скачиванием мобильного приложения;
• создали лендинг продукта;
• разработали интерфейс виджета для медиаплееров;
• реализовали интерфейс легкой веб-версии приложения, в том числе десктопной.

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