Дизайн мобильного приложения ViewEvo

1. Вводная задача от заказчика, проблематика, цели

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

UX/UI-аудит

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Результаты сотрудничества

Результаты

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

Проект в цифрах

• 3 месяца работы над проектом
• 1 дизайнер
• 280+ макетов экранов приложения

Технологии: Figma, Photoshop, After Effect

Александр Лигер

Генеральный директор, ViewEvo

Мы начали сотрудничать с SimbirSoft в начале 2022 года, когда нам понадобился дизайнер для разработки интерфейса мобильного приложения. Специалист с самого старта проекта влился в нашу команду, так что мы быстро наладили контакт и дальнейшее взаимодействие было комфортным и продуктивным. Он предлагал идеи по развитию продукта и комплексно подходил к решению задач. Мы довольны как процессом, так и результатом нашей совместной работы, которая сейчас продолжается. Благодарим SimbirSoft за плодотворное сотрудничество!