Дизайн мобильного приложения ViewEvo
IT-решение российского стартапа ViewEvo распознает товары на фото и видео – а главное, находит их в интернет-магазинах. Мы в SimbirSoft разработали дизайн мобильного приложения ViewEvo, чтобы «подружить» пользователей с инновационным умным алгоритмом.
По данным исследования TAdviser, с 2018 по 2023 год объем рынка CV (computer vision, компьютерное зрение) в России увеличится почти в 5 раз. Одним из факторов роста станет широкое применение CV в розничной торговле.
Продукт
Наш партнер реализует технологию для интерактивного взаимодействия с видеоконтентом. Алгоритм позволяет выделить и распознать на фото, видео- или телетрансляции различные товары: одежду, обувь, аксессуары. После этого находит товары из кадра или подобные им в интернет-магазинах партнеров. Составить модный образ, найти увиденные гаджеты и любые другие товары теперь как никогда просто.
Цель
Разработать удобный и визуально приятный интерфейс мобильного приложения для iOS и Android на русском и английском языках.
Что сделали
UX/UI-аудит
Мы начали с UX/UI-аудита уже готового, более раннего решения. Нашли в интерфейсе несколько недостатков, которые могли создавать препятствия для пользователей, например:
- низкая контрастность экрана;
- отсутствие единого подхода к расположению текста;
- избыточные элементы на экране.
С точки зрения пользовательского опыта мы обнаружили узкие места, которые затрудняли понимание приложения.
Из-за подобных моментов работа алгоритма была непрозрачной, и это могло оттолкнуть пользователей. При проектировании нового решения интерфейса мы учли все недоработки предыдущей версии и вместе с заказчиком определили необходимые изменения.
Так до изменений выглядел раздел распознавания кадров. Когда пользователь нажимал на нижнюю центральную кнопку, попадал на представленный слева экран. При этом не возникало понимания, что именно происходит, пока не появлялось предупреждение ошибки поиска (справа).
Разработка интерфейса
Чтобы сделать использование приложения более простым и интуитивно понятным, мы переработали ключевые разделы мобильного приложения.
- Главный экран. Основные возможности: загрузка фото для распознавания товаров; навигация по разделам (видео, новости, избранное); выход в меню, где доступен личный кабинет, техническая поддержка и другие настройки.
- Видео. В этом разделе пользователь может смотреть партнерские телеканалы в прямом эфире и уже выпущенные сюжеты с видеоплатформ. Для некоторых видео составлены готовые подборки образов.
- Новости. Здесь можно найти различные статьи с подборками образов и релевантными новостями. Позже в разделе будут доступны категории: ТВ, Кино/сериалы, Соцсети.
- Избранное. В разделе отображаются «Товары» и «Кадры», которые сохранил пользователь.
В любой момент доступна желтая кнопка, которая позволяет найти нужный кадр с образом.
Как это работает
Предположим, человек хочет распознать предмет одежды или аксессуар на герое фильма или ТВ-шоу. Для этого нужно нажать на желтую кнопку в нижней части экрана приложения. На экране появятся изображения товаров, найденных в интернет-магазинах.
Пользователь может кликнуть на карточку, перейти в каталог товара, настроить фильтры поиска: например, по бренду или типам товаров. Приложение также предлагает оценить, соответствует ли товар запросу.
Продуктовый подход к разработке
После подготовки макетов мы провели тестирование нового интерфейса, после чего внесли дополнительные корректировки. Например, сделали еще более контрастными неактивные пункты меню, чтобы пользователь сразу понимал, где он сейчас находится.
В завершении мы реализовали онбординг – приветственный экран-знакомство. Здесь пользователь узнает, как работает приложение и для чего оно нужно.
«Изначально мы создали интерфейс под iOS, а параллельно адаптировали его под Android. После отрисовки большинства экранов мы реализовали англоязычный вариант. Для удобства разработчиков визуально отразили переходы между экранами в Figma и добавили вспомогательные комментарии».
Владимир, арт-директор SimbirSoft
Дополнительные инструменты
Разработка интерфейса приложения – один из многих этапов нашего сотрудничества с клиентом. Мы создали лендинг о технологиях ViewEvo, которые использованы в приложении и могут стать основой для новых IT-продуктов. На сайте на двух языках описаны основные модули:
- распознавание контента по звуку,
- поиск похожих товаров,
- ПО для ручной разметки контента и непосредственно само приложение ViewEvo.
Мы реализовали интерфейс виджета для встраивания в медиаплееры. Он будет доступен в процессе трансляции телеканалов и позволит зрителям подобрать образ, не отрываясь от просмотра.
Результаты
- Разработали полный комплект макетов и состояний приложения – более 280 экранов;
- сформировали дизайн-систему с UI-Kit для быстрого и оптимального взаимодействия между дизайнерами и командой разработки;
- создали макеты для AppStore и Google Play, которые видят пользователи перед скачиванием мобильного приложения;
- создали лендинг продукта;
- разработали интерфейс виджета для медиаплееров;
- реализовали интерфейс легкой веб-версии приложения, в том числе десктопной.
Новый интерфейс помогает пользователю ориентироваться в приложении и облегчает его использование. Все продукты клиента созданы в одном уникальном стиле, который позволяет ассоциировать их между собой.
Технологии
Figma, Photoshop, After Effect