Как повысить продажи на своем сайте за 1 мес + десятки рабочих кейсов из каждой отрасли для директоров и маркетологов. Подписывайся
Как повысить продажи на своем сайте за 1 мес + десятки рабочих кейсов из каждой отрасли для директоров и маркетологов. Подписывайся
Каждый новый кейс – очередное интересное приключение. Это может быть разработка стратегического маркетинга, мобильного приложения, визуального наполнения сайта. Сегодня поговорим о дизайнерском проекте в области «диджитал» по созданию UI/UX для стриминговой платформы.
Клиент предоставил информацию, что его бизнес связан со спортом, точнее с тремя его разновидностями: конный, теннис, падел-теннис. Пользователи, которые будут пользоваться ресурсом, смогут просматривать прямые трансляции соревнований, стримы, архивы видеоданных. За счет этого перед разработчиками поставлена первостепенная задача – создать тестовую версию проекта (MVP), со всем функционалом и «админкой» для правильного распределения контента.
Вначале необходимо определить последовательность выполнения этапов разработки дизайна. Также необходимо выявить, каким способом платформа будет приносить прибыль заказчику? В нашем случае это доход от подписок. Таким образом весь контент, включая дизайнерское решение должен подталкивать потенциального клиента к совершению этого действия – покупки ПРО-аккаунта.
Эти сведения позволяют выявить следующие несколько этапов работ:
В итоге должен получиться кликабельный прототип, презентация которого будет предоставлена заказчику. Этот алгоритм действий не является строгим, и наверняка в процессе разработки придется несколько раз его переделывать, вносить правки, объединять или разбивать некоторые пункты на отдельные группы.
Исследование
Этот пункт начинается с аудита сайтов конкурентов и специализированных платформ, которые основываются на стриме видов спорта, которые клиент указал в самом начале разработки. На основании полученных сведений разрабатывается блок-схема с релевантными компонентами.
Информационная архитектура
Аналитические данные конкурентных платформ также имеют значение и в выстраивании информационной системы. Это структура, вокруг которой строятся основные и дополнительные элементы будущего интерфейса. Без разработки данного пункта гораздо сложнее построить правильные алгоритмы предстоящих работ. IA значительно упрощает процесс разработки дизайна, а также разработку отдельных компонентов участвующей в этом команде.
Вайрфрейминг
Создание дизайнерского скелета сайта – неотъемлемый этап любой разработки веб-ресурса. Вначале необходимо определить, где будут располагаться все компоненты и отдельные блоки. Вначале необходимо прикинуть, как это все будет смотреться. Далее создается макет в черно-белом исполнении. Этот этап подразумевает разное исполнение. Страницы могут быть выполнены с мелкой детализацией для разметки блоков или же с высокой, практически финишной точностью, где прорабатывается каждая отдельная деталь. На этом этапе разрабатывается много предварительных макетов, которые согласовываются впоследствии с клиентом.
Визуал
После согласования вайрфрейминга и правок необходимо подобрать единый стиль для всей платформы. Это могут быть топовые оттенки, которые в тренде на сегодня. Главной задачей, которую должен решить дизайнер на этом этапе является создание визуального контента, который будет побуждать пользователя совершить нужные действия. В нашем случае – это подписка на Премиум-аккаунт.
Деятельность заказчика непосредственно связана со спортом, поэтому можно выбрать яркие, энергичные цвета как в качестве основного фона, так и дополнительного. Например, оранжевый, который вызывает ассоции с потоками энергии, бодрости, силы.
Цветовую гамму можно дополнить сеткой. Она позволяет организовать структурную целостность веб-ресурса, задавая ему ритмическую атмосферу и логическую расположение всех элементов. Примером может служить колонная сетка с интервалом. Значение в макете играет расстояние между колонками, что влияет на передачу динамики и драйва.
Дизайн макетов
После наработки вайрфрейма в черно-белом стиле необходимо его «разукрасить». При разработке визуальных композиций необходимо учитывать то, что их впоследствии придется «оживить». Это принесет пользователю пользу, а также подтолкнет к активным действиям на площадке.
Кроме единой цветовой схемы платформа должна иметь максимальное юзабилити – удобство пользования ресурсом. Нужно в деталях продумать каждый элемент, его расположение и наполнение, функционал и прочее. Рассмотрим некоторые из компонентов, которые обязаны присутствовать на сайте для удобства юзера.
Главная страниц веб-сайта
Этот элемент имеет значение, так как является домашней страницей всего интернет-ресурса. Она формирует первое впечатление пользователя от сайта, рассказывает о преимуществах сервиса, дает понять, какую пользу получит юзер, если останется на ресурсе. Домашняя страница отвечает также за время нахождения пользователя на сайте и подталкивает к совершению покупки.
Поисковый сервис
Строка поиска – это также важный элемент всей конструкции сайта. Она приводит человека на ту целевую страницу, которая будет интересна. Так, как и остальные информативные элементы, поиск должен быть понятен пользователям и иметь легкое заполнение. Для этого можно добавить в базу популярные запросы юзеров и высокочастотные запросы в поисковых системах. Таким образом строка поиска будет заполняться автоматически, что также повысит юзабилити веб-ресурса.
События
Все мероприятия, происходящие на сайте должны освещаться. Согласно тематике платформы, события можно разбить на три группы: это соревнования, которые были в прошлом времени, спортивные трансляции в режиме онлайн, а также афиша на будущее. Таким образом захватывается все, относящиеся к теме конного спорта и тенниса, происшествия, которые были, идут или планируются.
Для прошлых событий создается блок «Архив», где будут храниться записи прошедших спортивных мероприятий. Для будущих соревнований разрабатывается календарь с внесением в него всех дат. Из него пользователь будет переходить на баннер, афишу или превью будущего события.
Просмотр забегов и матчей в режиме онлайн будет осуществляться в формате видеотрансляции. Однако, так как мы хотим, чтобы площадка приносила прибыль, необходимо предусмотреть два типа видеопотока. Первый в режиме широкоформатного экрана, который смогут просматривать пользователи с ВИП-статусом, и бесплатная версия в миниатюрном окне.
Фильтры
Чтобы юзер не запутался в страницах и информации, размещенной на них, предусматривается система фильтрации. С ее помощью пользователь сможет отсеивать ненужные ему данные. Например, если ему интересен контент только про конный спорт, установив специальные фильтры, он не будет видеть информацию о теннисе.
Форма регистрации
Этот этап выполняет сразу несколько задач. Во-первых, человек вносит свои данные в систему, которая сохраняет их в качестве потенциального покупателя. Во-вторых, персонализация повышает ценность бренда и число зрителей.
Избранное и скаченное видео
Зачастую юзер не ищет что-то новое, ему достаточно посмотреть то, что уже было скачано и просмотрено или то, что вызвало интерес и обозначено как избранное. Эти функции позволяют просматривать видеоконтент на разных устройствах, что также удерживает пользователя на веб-платформе для стрима.
Подписка и техническая поддержка
Задача веб-разработчиков и дизайнеров заключается в том, чтобы подтолкнуть пользователя к покупке. В нашем случае к приобретению платной подписки. Блок помощи будет содержать справочную информацию, как получить ВИП-статус. Также в функционал веб-ресурса можно добавить онлайн-чат для непосредственной связи с менеджером.
Оплата
Любой пользователь боится потерять свои деньги. Исходя из этого необходимо сделать процесс оплаты доступным и понятным. Таким образом люди смогут видеть процесс транзакции по каждому отдельному этапу. В итоге юзер получает уведомление о завершении операции.
Административная панель
С ее помощью настраивается контент, создаются новые блоки и страницы. Желательно создавать сразу несколько таких элементов, чтобы заказчик мог выбирать между разными дизайнами и функциональностью.
Чтобы добиться успеха в разработке дизайна UL/UX для стриминговой платформы, необходимо «услышать» клиента. Таким образом разработчик сможет учесть все пожелания и требования заказчика. Не надо бояться согласовывать свои новые идеи, а также вносить корректировки по мере выявления проблем и недочетов.
А если вы не знаете, как это сделать, то обратитесь к нам! Заполните форму ниже и наши специалисты смогут помочь Вам в создании UI/UX дизайна для стриминговой платформы и развитию Вашего бизнеса!
Прямо сейчас консультируем
клиентов
