Разбор приложения Smart Score (сервис для спортивных событий)

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

Автор работы Артем, подписчик DL PRO

Кейс на Behance

Какие ключевые вопросы по работе у тебя есть к менторам?
Какие правильно было провести исследование в данном случае? Пытался провести интервью с друзьями, из-за того, что не смог сформулировать вопросы, получил размытые ответы...

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

Привет, Артем!

Большое спасибо, что поделился своей работой.

Что понравилось в работе

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

Логика

Самое важное, когда ты работаешь над дизайн-задачей — определить цель и держать ее в голове. Правильное понимание цели приложения снимает кучу лишних вопросов. Мы уже разбирали фитнес-приложение, где была трудность с определением цели самого проекта. Давай теперь рассмотрим на твоём примере.

Твоя задача звучала следующим образом:

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

Звучит ли здесь цель? В твоей формулировке недостает конкретики, она состоит из общих слов. Давай попробуем ее декомпозировать. Первое предложение говорит нам о тематике приложения. Второе — о том, какой функционал должен быть обязательно реализован. И все же остаётся много вопросов. Какая информация? Какая сортировка? Что такое «простое восприятие»? Все эти вопросы стоит задать тому, кто ставил тебе задачу. Раз это тестовое, можно было напрямую уточнить эти вещи, а также запросить данные по ЦА у потенциального работодателя. Не нужно бояться задавать вопросы. Это снимает неопределённость.

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

Когда ты начал работать с конкурентами, то прошёлся лишь по аналогам из этой сферы, а есть ещё много других приложений, которые будут закрывать те же потребности клиентов: приложение лиги, клубов, соцсети и странички команды, аналитические компании и их отчёты. Ищи не только близких конкурентов. Пример: для футбольной команды ЦСКА конкурентом будет не только Спартак и Локомотив, но и баскетбольный ЦСКА, хоккейные команды Москвы и даже Торговый центр, кино, театр. Поход на матч — это про развлечение и отдых, а не только про спорт. Тогда бы на матчах не было таких крутых шоу и развлекательных зон.

С чего можно начать исследование

Первое — это анализ конкурентов. Шаг выбрал верный. В результатах анализа конкурентов мы должны получить ответы на следующие вопросы (это можно показать в таблице, схемах или текстом):

Каковы результаты анализа конкурентов (выводы)?
Какие фичи нашёл в каждом приложении?
Сильные и слабые стороны приложения?
В чём они похожи? В чём отличаются?
Какие отзывы у каждого приложения?
Про какие слабые места, проблемы пишут пользователи?
Что им нравится в приложении?

Первое: на этапе исследования важно понять, кто ваш клиент. В какие моменты и для чего он использует приложение. Так кто они? Фанаты, просто любители спорта, ставочники, отслеживают один вид спорта или несколько (какие и почему)? Может, кто-то ещё? Второй вопрос: какую потребность пользователи закрывают приложением? Быть в курсе событий, отслеживать результаты матчей, любимого клуба, ставить на матчи, посмотреть расширенную статистику после матча? И третий: когда они им пользуются? До события, после, в моменте, в конце сезона, в начале? Более детальное понимание клиента поможет тебе делать сервис лучше, а также правильно создавать опросы и качественно проводить интервью.

Советуем изучить JTBD и конкурентный анализ (даже не в рамках дизайна). Это поможет тебе делать проекты «для людей». Не забывай, что за любым продуктом стоит человек, который его потребляет.

Бизнес

Нарезки моментов — это тот уникальный контент, который интересен клиентам. Однако здесь есть узкое место с точки зрения бизнеса. Правами на трансляцию владеет лига, даже не клуб. Лига делает им финансовые отчисления из прибыли, заработанной на перепродаже трансляции. Кто же покупает трансляцию и видео? Телеканалы (Первый канал и трансляция Олимпийский игр в Токио, под которые был реализован отдельный проект), стриминговые сервисы (DAZN), аналитические компании, занимающиеся профессиональной спортивной статистикой (InStat, WiseHockey и др.), букмекеры (клиента проще привлечь к ставкам, если ты предоставляешь ему сервис для просмотра игр) и другие.

Чтобы лучше понять бизнесовую составляющую, надо заглянуть в исследования от крупных аналитических компаний. Это тоже один из этапов хорошего исследования для дизайна. Пример: Российская Премьер-Лига, Комплексное исследование экономики российского футбола (сезон-2019/2020).

Самый эффективный спортивный рынок — американский. В ТОП-50 самых дорогих команд мира по мнению Forbes первые места занимают представители лиг, созданных в США (NFL, MLB, NBA). Недалеко от них футбольные клубы Европы. Спорт — это про «хлеба и зрелищ». Не зря команда по американскому футболу занимает 1 место в этом рейтинге, а самая дорогая реклама во время Super Bowl.

В SMM все новинки идут из Америки. Последнее время лига NBA вводит трендовые приёмы в спортивной сфере. Такого визуала нет ни у каких других лиг в мире. NBA также сконцентрирована на создании новых продуктов, что видно по их быстрому входу в NFT и сферу AR. Один из ярчайших проектов для болельщиков — трансляция с AR-технологией, Clippers CourtVision.

Ищи вдохновение у тех, кто ведёт рынок за собой. Там тренды, там новинки, там много исследований, на основе которых они постоянно совершенствуют свои продукты и создают новые.

Визуал

Футбол — это очень интересная тема. Болельщики — особая категория людей, и они разные: старые или молодые, богатые или бедные. Даже те, кто не является поклонником игры, знают, что это страсть, это общность людей, это азарт, это особое настроение и подъем, когда болеют за наших. Футбол — это сильные эмоции. А что если посмотреть на приложение как на футбол, какие ориентиры нам это даст?

Давай поразмышляем:

Я как болельщик хочу получить от приложения не только информацию, но и эмоции. Хочу получить больше ожидаемого.

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

Футбол — это общение с болельщиками, это обсуждение и чувство общности.

В твоем тестовом задании задачи по визуальной части были описаны так:
«Качественная работа с типографикой, эффектами объема, пространства и глубиной, внимание к мелким деталям, фону и общей композиции. Красивый, цепляющий, удобный дизайн, соответсвующий тенденциям. Более удобные и красивые решения».

Мудборд и референсы

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

https://www.pinterest.ru/search/pins/?q=sports%20design&rs=typed&term_meta[]=sports%7Ctyped&term_meta[]=design%7Ctyped

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

Типографика

Сейчас в макете очень спокойная типографика, не побуждающая к действиям.

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

Попробуй найти хорошие решения и вдохновение)

https://www.pinterest.ru/search/pins/?q=спорт%20типографика&rs=typed&term_meta[]=спорт%7Ctyped&term_meta[]=типографика%7Ctyped

Композиция

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

Цвет

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

Но большое спасибо тебе за внимание к деталям: футболочки и мячик отлично поддерживают тему.

Команда

Компоненты, стили есть в твоем макете. Советую прокачать автолейаут и больше использовать компоненты для повторяющегося контента. Это увеличит скорость твоей работы и позволит более гибко вносить изменения. А значит успешнее креативить)

Стоит проверять макет на контрастность с помощью плагина. Это поможет скорректировать цвета.

Общее

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

У этой задачи нет жестких ограничений, можно проявить фантазию. Например, применить метод трех стульев Уолта Диснея, он поможет придумать новую идею или фишку проекта (надеюсь, у нас у всех хорошая фантазия 😉). Метод заключается в том, что нужно примерить на себя роли: сначала побыть мечтателем, потом реалистом и в конце концов критиком.

Для каждой роли выделите себе отдельное место и поставьте туда стул или представьте, что у вас есть такое место и вы это делаете. На стуле мечтателя мы должны рассматривать и придумывать самые фантастичные и невероятные идеи. Например, «а что будет если приложение будет само со мной разговаривать после 4 бутылок пива😄». Или «а что если приложение будет огромным полем, по которому можно перемещаться в любую точку и все глубже детализировать информацию: узнавать не только общую информацию о игроках, но и их физические параметры, да можно даже посмотреть марку кроссовок, в которых ходит любимый игрок и заказать их». Придумываем как можно больше интересных идей.

Затем пересаживайтесь на стул реалиста и проверяйте ваши идеи на практичность и возможность реализации, отсеивайте ненужные.

На стуле критика ищите, что мешает удобству использования вашего решения, какие трудности в нем существуют и рационально ли внедрять какие-то фишки. Оцените трудности и риски вашего решения.

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

Что посмотреть

Почитай о принципах Уолта Диснея, многие из них применимы в работе дизайнера: https://turumburum.ua/blog/disney-i-ux/

Метод трех стульев Уолта Диснея: https://flaming.codes/ru/posts/the-disney-method-being-creative-by-system

Я советую подробно изучить советы про Таблицы, это сильно поможет пониманию того, как визуализировать информацию: https://bureau.ru/bb/soviet/found/таблицы

Справочник издателя и автора тоже очень полезен для любого, кто работает с информацией: https://www.artlebedev.ru/izdal/spravochnik-izdatelya-i-avtora-2017/

Правило внутреннего и внешнего

Успехов в будущих проектах!

Работу разобрали Ольга Чухаленко и Алана Белоглазова.

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров:

https://pro.dsgnline.ru/