КЕЙС

Заячий стон

Многостраничный сайт для независимого комедийного театра в коллажном стиле.
В кейсе: о том, как использовать 100+ ответов аудитории для структуры сайта, как мы 2 раза переделывали дизайн и финальный, яркий результат.

Задача

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

Ключевые запросы

  • Хочется, чтобы сайт отражал юмор и яркость спектаклей
  • Коллажная стилистика
  • Понятная и логичная структура сайта
  • Упростить покупку билетов

Этап 1. Анализ

Начинаю разработку с анализа конкурентов и целевой аудитории.

Я составила два опроса для зрителей театра:

  • Один для холодной аудитории в соцсетях
  • Другой — для лояльной аудитории, которая лично общается с администрацией театра
Опросы отличались глубиной ответов на вопросы. В опросе для холодной аудитории было больше закрытых вопросов, для теплой — больше открытых.
Мы получили 108 ответов.

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

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

Этап 2. Прототип

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

На нем я размещаю информацию в том порядке, в котором она будет идти на сайте и размещаю примерные тексты — их в последствии финализирует копирайтер.
Так выглядит полный прототип сайта
А это — прототип главной страницы поближе
Это не финальный дизайн сайта, а возможность оценить логику экранов и выстроить понятный сторителлинг на сайте для достижения ключевого действия: покупки билетов.
Например, тут я показываю, что у нас будет зафиксированное верхнее меню и отдельная выделенная кнопка под «Купить билет» — чтобы пользователь всегда видел эту кнопку и мог, как следствие, купить билет в любом месте сайта.
Здесь я объясняю, как будут формироваться отзывы зрителей
Тут продумала логику для конструктора мерча и по-экранно ее показала
Результат этапа прототипа
  • Продуманная логика страниц и скелет для дальнейшего дизайна
  • Четкое ТЗ для копирайтера в виде ч/б ПДФ-ок: он сразу понимает контекст, где будет стоять текст и примерный объем. Это облегчает ему работу.

Этап 3. Визуальное направление

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

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

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

Этап 4. Дизайн-концепции

Я предоставила на выбор 3 дизайн-концепции: я их делаю на примере первых двух блоков сайта.
Концепции показываю сразу в десктопной и мобильной версии, чтобы понимать, как будет масштабироваться дизайн.
Но эти дизайн-концепции клиент не принял: это окей, так бывает. Мы созвонились и спокойно выявили, что нужно доработать:
  • Не нравится массивный шрифт заголовка на первом экране.
  • Хочется включить в дизайн округлый шрифт из логотипа, чтобы было единообразие визуальной коммуникации.
  • Кажется, что нет юмора и изюминки. Все-таки это комедийный театр.
  • Хочется добавить больше цвета. Не только красный и ч/б, но и какие-то яркие цвета. Например, очень нравится сочетание красного и зеленого.
  • Нужно дать понять посетителю театра, что буквы З и С в начале слов Заячий Стон — это ушки и попка заячика из логотипа.
  • Хочется, чтобы сайт был анимированный, а на макетах абсолютно не понятно, как этот дизайн будет выглядеть и жить на сайте: будет ли это такое же статичное полотно или будет какая-то анимация, и если да — то какая?
Но что понравилось тоже, все-таки, было:
  • Идея с софитом из первой концепции. Хотелось бы ее сохранить.
  • Маркерные и карандашные рисунки поверх фото.
По итогу я презентовала 3 обновленные дизайн-концепции: учла все комментарии и сразу заверстала их на Тильде, чтобы показать клиенту анимацию концепций. Это гораздо облегчило понимание анимации.
Мы утвердили 1 концепцию с небольшими доработками.
Сделала изображение черно-белым, добавила яркий зеленый акцент и поменяла рукописный шрифт на более задорный и «дурашливый»
Результат этапа дизайн-концепции
  • Креативная концепция, облаченная в дизайн, и задающая визуальный код для всего сайта.

Этап 5. Дизайн всего сайта

После утверждения дизайн-концепции, клиент предоставил мне готовый текст и я приступила к отрисовке всего сайта.

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

Этап 6. Верстка на Tilda

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

Я использовала как уникальный дизайн, так и стандартные блоки Тильды и стилизовала их с помощью CSS.
Стандартные блоки были нужны для формирования расписания, отзывов, новостей и событий, которые постоянно меняются. Нужно было сохранить удобство пользования и красоту — именно поэтому здесь пригодился CSS-код.

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

Отзывы

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

Все четко: продуманные страницы, очень крутой дизайн, анимация. В общем, кайф, нам все очень понравилось
Если хотите получить такой же классный результат — оставьте заявку на бесплатную консультацию
Мы созвонимся на 30+ минут, обсудим вашу задачу, а я подготовлю предложение по цене и срокам, рассчитанное индивидуально под вас.
Сообщение об успешной отправке!