Case Study: портал «Культура Южного Урала»

Ruslan Vovchenko
Jul 24, 2019 · 8 min read

Это история про создание дизайна сайта cultureural.ru
Кейс с визуалами можно посмотреть тут

Зимой мои хорошие друзья, связанные с министерством культуры Челябинской области, попросили создать новый портал с культурными событиями города, чтобы «популяризировать культуру среди молодежи». Так как я скромно считаю себя человеком близким к искусство, и это отличный шанс привнести что-то в родной город, я согласился.

Проблема

Как говорят некоторые, дизайн это решение проблем, поэтому перед тем как браться за дело, я провел анализ проблем.

Глобальная проблема — молодежь редко ходит в театры, музеи и т.д. Решить эту проблему одним лишь новым сайтом довольно сложно, но на неё буду ориентироваться.

Более приземленная проблема: как выяснилось, уже существовал сайт-афиша с мероприятиями, но он больше был похож на афишу санатория.

Главная страница старого сайта

Основная проблема в том, что акцент в старом сайте сделан на новостях региона, а не на афише. Это скорее СМИ, новостной портал чем афиша. Она тут тоже присутствует:

Страница Афиши

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

Очевидно, этим никто не пользовался. В среднем на старом сайте было около 50 посетителей в день.

Но почему бы тогда людям не пользоваться другими продуктами? Афиша.ру, Яндекс.Афиша и т.д. Как показало дальнейшее исследование, люди ими пользуются, но есть один нюанс. Такие глобальные продукты не охватывают полностью культурную жизнь Челябинской области. Небольшие городские фестивали, выставки местных художников, малоизвестные мероприятия остаются незамеченными.

Итого: существующий продукт устарел, позиционируется в другой нише (СМИ), а также другие сервисы не полностью освещают городскую жизнь.

Цель продукта

Для себя я поставил цель создать инструмент для поиска культурного досуга в Челябинске. В первую очередь удобный и красивый. Как говорил Артем Горбунов, дизайн не обязан быть красивым. Но он может быть красивым, если для этого есть рациональная причина у дизайнера. И здесь я хочу, чтобы сайт был красивым, чтобы привлечь молодежь. Которым будут пользоваться, чтобы решить, куда пойти вечером.

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

План действий (мои задачи)

Дизайн-процесс при работе над продуктом у меня такой:

  • Определить аудиторию;
  • Провести исследование, понять как люди выбирают досуг;
  • Определить задачи пользователя, составить User persona;
  • Если появятся гипотезы, проверить их на начальном этапе;
  • Прототипирование;
  • Тестирование;
  • Визуал;
  • Релиз;
  • Пост-релизная работа.

Аудитория

Выше я написал, что заказчик ставит главной задачей популяризацию культуры среди молодежи. Поэтому основной аудиторией будут являться люди 16–35 лет. Что на самом деле проще мне, потому что я сам из этой возрастной группы :)

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

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

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

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

Я собрал 63 ответа на следующие вопросы:

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

В общем, самым главным тут был последний вопрос. Большинство заходят сразу на сайт театра или кинотеатра. Когда я спрашивал у некоторых, почему так, отвечали: без наценок, надежно, сразу можно купить билет, сразу видно всё что идет, удобно.

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

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

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

User Journey Map

На основе всех данных я составил две user persona. Скорее даже два сценария использования сервиса: поиск досуга на выходные и на сегодня. Разница между ними только в том, что второй тип в спешке и использует телефон. В терминологии JTBD, jobs и outcome одинаковые, но контекст разный.

Поиск на выходные

  • Контекст: Выбор досуга на выходные (просмотр с компьютера)
  • Мотивация: Хочется интересного культурного времяпрепровождения, потому что выбор досуга в Челябинске ограничен стандартными развлечениями (кино/кафе), которые надоели
  • Болевые точки: Информация разрознена по разным порталам, неудобно планировать
  • Мысленная модель: «В конце рабочей недели хочу посетить культурное мероприятие, правда заранее желательно узнать где, какое будет»

Решение боли : подборки, куда сходить на выходные (возможно, рассылка).

UJM тех, кто ищет досуг на выходные

Поиск на сегодня

  • Контекст: Выбор досуга на сегодня (просмотр с телефона)
  • Мотивация: Сегодня есть свободное время, хочется его заполнить чем-нибудь.
  • Болевые точки: Информация разрознена, решение нужно принять сейчас и сразу
  • Мысленная модель: «У меня есть свободное время сегодня вечером и надо бы куда-куда-нибудь сходить, времени искать на каждом сайте нету, хочется посмотреть сейчас и сразу, что есть сегодня в городе»

Решение боли: вкладка «сегодня».

UJM тех, кто ищет досуг на сегодня

Благодаря этим моделям, появилось две полезные фичи

Референсы

Посмотрим на конкурентов. И начнем с афиши.ру, ей пользуются многие из опроса.

Понравилось:

  • Сразу выдает контент;
  • Есть подборки;
  • Есть теги;
  • В календаре удобное деление на сегодня-завтра-выходные;

Не понравилось

  • Неочевидная карточная система;
  • Вопросы к контенту: московские мероприятия, в основном на сайте кино.

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

Понравилось:

  • Сама концепция культурной афиши;
  • Как реализована сортировка по типу и дате в афише.

Не понравилось

  • Огромное меню со стрелкой снизу;
  • Странное меню-бургер;
  • Из-за квадратных плиток визуальные артефакты между ними;

В принципе довольно странный сайт, мутные иконки (очеивдно с полупикселями), неочевидная навигация. Но задумка нравилась заказчику.

И ещё одна интересная продуктовая находка:

Крутое решение с календарем

На старом сайте был календарь для фильтра афиши и заказчик хотел его оставить, но мне казалось что это ненужное решение. Удобнее было бы сделать как у Fiesta, с человеческим фильтром «сегодня—на неделе—на выходных». В повседневной жизни мы ориентируемся во времени по дням недели («встретимся в четверг», «давай сходим куда-нибудь на выходные»), а не по датам («давай соберемся 21го числа»). Про числа обычно говорят, когда есть важное событие в эту дату — начало отпуска или праздник. Либо если работа человека связана с датами, например, сотрудники почты, или бухгалтера.

Однако это гипотеза, я решил её проверить и провел еще несколько интервью, опросив 10 знакомых. Когда я в разговоре узнавал, куда последний раз ходил человек, я спрашивал: как он запланировал этот поход?

  • 6/10 респондентов сказали, что решили в этот же день — подумали, что сегодня есть свободное время, открыли афишу, выбрали мероприятие.
  • 2/10 планировали во время недели, куда сходить на выходных. Причем выбирали, отталкиваясь от интересности мероприятия, а не от свободности дат. То есть, если ничего интересного нет — то никуда не идут. Я сделал вывод, что цели заполнить дату досугом не было, была цель именно найти интересное мероприятие;
  • Остальные 2е человек шли на конкретное мероприятие, которое спланировали давно.

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

Прототипы

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

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

  • страница со списком событий/новостей/мест
  • страница с контентом описание события/текст новости/описание места

Такая структура проста для разработки и понятна пользователю.

Визуал

В поисках визуала я пробовал разные варианты и в итоге пришел к последнему:

Некоторые варианты визуала. На 2й картинке ещё есть календарь

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

Кусочек мудборда

В итоге, я решил что сайт должен выглядеть как глянцевый театральный журнал об искусстве. Темная тема и золотой цвет. По типографике: основной шрифт неогротеск PT Root UI, моноширный шрифт от Paratype, и антиква Playfair из Google Fonts, для акциденции и стилистики.

Это пример страницы с описанием мероприятия.

Ширина в 70 знаков для комфортного чтения.

Элементы оформления статьи: заголовок, подзаголовки, цитата и фото.

Слева экрана фиксированый блок с краткой информацией о мероприятии и ссылкой на билеты, если есть (в исследовании я выяснил что это важно пользователю)

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

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

Остальные страницы предельно похожи, так как строятся по одной схеме.

Весь визуал и анимации можно посмотреть тут.

Релиз и дизайн-ревью

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

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

Пример новости с сайта

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

Заключение

За 3 месяца был создан портал о городской жизни cultureural.ru. Конечный продукт получился не совсем такой, каким я его видел изначально, но свою функцию он выполняет хорошо, заказчик остался доволен работой.

Регулярно возвращаемся к работе над сайтом, чтобы исправить косячки, баги, потому что продукт живет и становится видно, что можно улучшить (как пример—фото в новости).

Спасибо за внимание!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade