Как повысить продажи на своем сайте за 1 мес + десятки рабочих кейсов из каждой отрасли для директоров и маркетологов. ПодписывайсяТелеграм

8 (800) 551-77-04

Кейс по Digital-дизайну: этапы создания UI/UX для стриминговой платформы

В статье рассказывается:
Кейс по Digital-дизайну: этапы создания UI/UX для стриминговой платформы
2024-01-17
511
Нет времени читать?
Отправить материалы на почту

Каждый новый кейс – очередное интересное приключение. Это может быть разработка стратегического маркетинга, мобильного приложения, визуального наполнения сайта. Сегодня поговорим о дизайнерском проекте в области «диджитал» по созданию UI/UX для стриминговой платформы.

Задача

Клиент предоставил информацию, что его бизнес связан со спортом, точнее с тремя его разновидностями: конный, теннис, падел-теннис. Пользователи, которые будут пользоваться ресурсом, смогут просматривать прямые трансляции соревнований, стримы, архивы видеоданных. За счет этого перед разработчиками поставлена первостепенная задача – создать тестовую версию проекта (MVP), со всем функционалом и «админкой» для правильного распределения контента.

Этапы работ


Этапы создания UX дизайна.png

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

Эти сведения позволяют выявить следующие несколько этапов работ:

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

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

Исследование

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

Информационная архитектура

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

Вайрфрейминг

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

Визуал

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

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

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

Дизайн макетов

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

Структурные элементы

Cтруктура.png

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

Главная страниц веб-сайта

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

Поисковый сервис

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

События

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

Для прошлых событий создается блок «Архив», где будут храниться записи прошедших спортивных мероприятий. Для будущих соревнований разрабатывается календарь с внесением в него всех дат. Из него пользователь будет переходить на баннер, афишу или превью будущего события.

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

Фильтры

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

Форма регистрации

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

Избранное и скаченное видео

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

Подписка и техническая поддержка

Задача веб-разработчиков и дизайнеров заключается в том, чтобы подтолкнуть пользователя к покупке. В нашем случае к приобретению платной подписки. Блок помощи будет содержать справочную информацию, как получить ВИП-статус. Также в функционал веб-ресурса можно добавить онлайн-чат для непосредственной связи с менеджером.

Оплата

Любой пользователь боится потерять свои деньги. Исходя из этого необходимо сделать процесс оплаты доступным и понятным. Таким образом люди смогут видеть процесс транзакции по каждому отдельному этапу. В итоге юзер получает уведомление о завершении операции.

Административная панель

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

Чтобы добиться успеха в разработке дизайна UL/UX для стриминговой платформы, необходимо «услышать» клиента. Таким образом разработчик сможет учесть все пожелания и требования заказчика. Не надо бояться согласовывать свои новые идеи, а также вносить корректировки по мере выявления проблем и недочетов.

А если вы не знаете, как это сделать, то обратитесь к нам! Заполните форму ниже и наши специалисты смогут помочь Вам в создании UI/UX дизайна для стриминговой платформы и развитию Вашего бизнеса!


Самое важное и интересное для вас!
Подпишитесь на ежемесячную рассылку от Dial и заряжайтесь интересными идеями!
Нажимая кнопку "Отправить" я даю согласие на обработку персональных данных
Новые
Отправить материалы на почту
Нажимая кнопку "Отправить" я даю согласие на обработку персональных данных

Оставьте заявку — поможем разобраться с вашими задачами

Прямо сейчас консультируем
клиентов

Яндекс цитирования Участник проекта CMS Magazine