Как мы вместо сайта случайно сделали фирстиль. Кейс: лендинг для бегового клуба из Петербурга
Привет! Это «Е–Б Эдженси» и сегодня мы хотим показать, как мы делали сайт для клуба PapaRun. Расскажем, как транслировать семейные ценности через дизайн, что общего у зеленого с красным и сколько новых людей можно привести на тренировки через лендинг (спойлер — не так уж много, но это не главное).
В двух словах про задачу
К нам обратилась Анна, соосновательница Бегового клуба ПапаРан с запросом на редизайн существующего сайта клуба. Сайт хотелось сделать более современным и конкурентоспособным. Главная бизнес-задача — привлечь в клуб новых спортсменов и увеличить размеры тренировочных групп.
Куда run этот папа?
Papa Run — беговой клуб в Санкт-Петербурге, сама тёплая особенность которого в том, что его основали отец и дочь. В клуб ходят разные люди: есть начинающие бегуны, которые хотят поправить здоровье и найти новое хобби, а есть профессиональные спортсмены, которым важно не терять форму и тренироваться под надзором опытного тренера.
Таких, казалось бы очень разных людей, и объединяет Papa Run — участники вместе тренируются два раза в неделю, улучшают технику бега, вместе участвуют в забегах, ставят рекорды и просто классно (и полезно) проводят время вместе.
Что было сделано
- Изучили ключевых конкурентов — другие беговые клубы Санкт-Петербурга
- Провели подробное интервью с Анной
- Написали новые тексты
- (не запланировано) Придумали новый фирменный стиль клуба
- Нашли дизайн-концепцию
- Сделали адаптивную вёрстку на Тильде
- Настроили и наполнили личные кабинеты для спортсменов
Что было до нас
Папа Ран пришёл к нам с существующим сайтом. В начале работы мы проанализировали его, чтобы понять ошибки, которые точно не нужно повторять.
- Сайт до редизайна был безликим и немного мрачным из-за темных фотографий. Ощущение, будто клуб бегает только ночью по мрачной лесополосе, а не свежим субботним утром по солнечному парку.
- Сайт был хорошим по смыслам, но вся информация подана хаотично и не структурировано: вот мы только говорим, что у нас есть клуб, вот уже показываем расписание тренировок, потом почти сразу рассказываем про доп. услуги (а пользователь даже не успел понять, зачем ему вообще наш беговой клуб).
- Из-за всего этого неясно, чем клуб отличается от конкурентов — причины выбрать его среди других нет, преимущества не подсвечены.
- Вместо дизайна — стандартные блоки Тильды, сайт скучный и невыразительный.
Работа со смыслами
Работу над текстом мы начали с часового интервью с Анной. За один созвон мы узнали всё о клубе: почему Анна с папой решили его открыть, в чем их мотивация и ценности.
Ключевой инсайт лежал в главной фишке клуба — семейности. Клуб основали отец и дочь (отсюда и название), многие ходят заниматься в клуб буквально семьями — например, среди участников есть семейная пара, родители с детьми и даже братья-близнецы 😁
Клуб, как настоящая семья, объединяет у себя самых разных людей — в нем одинаково комфортно начинающим, которые только добавляют бег в свою жизнь, так и опытным спортсменам, за плечами которых — марафоны и впечатляющие рекорды.
Визуальная концепция
Перед тем, как перейти к дизайну страницы, мы обнаружили интересную концептуальную особенность бега. Бег — это очень контрастный вид спорта. Он объединяет динамичные, но при этом плавные движения. Типичный стадион объединяет контрастные цвета. Бег — это напряжение в процессе и одновременно с тем радость и легкость на финише.
Главным визуальным референсом проекта стала фотография обычного спортивного стадиона: отталкиваясь от неё мы определили контрастное сочетание красного и зелёного (в котором ещё много дополнительных слоев и смыслов), а ещё плавные линии, которые дополнили графический стиль сайта.
Основной стиля стали «несочетаемые» многозначные цвета — сочетание красного и зелёного.
Красный — это динамика, движение, цвет дорожки стадиона.
Зеленый — это спокойствие, здоровье, цвет газона и парка, в котором проходят пробежки.
Дизайн-концепция
Сложив все визуальные элементы вместе, мы получили динамичный концепт с яркими акцентами.
Ещё одно важное решение сайта — геймификация. В первом блоке вместо одной кнопки мы ставим сразу две — они ведут на один и тот же блок (с немного отличающимся текстом), но при этом мотивируют пользователя позалипать и подумать, чего он хочет — просто научиться бегать или поставить свой личный рекорд.
Как мы отделяемся от конкурентов?
🏃♂ Посвящаем целый блок сторителлингу об основании клуба
Он помогает раскрыть миссии и ценности основателей — и привлечь к участию таких же людей. В этом блоке даже фото подобраны не специально: по центру фотография Анны с отцом, слева — вся их семья (Анна, отец и младший брат, который тоже занимается бегом), а справа — дочки одного из участников, поддерживающие папу на забеге. Мы ждем в клубе тех, кто как и мы — разделяет семейные ценности и здоровый образ жизни.
🎁 Делаем блок про бонусы для участников
Тем, кто занимается в клубе больше 3 месяцев, положена стильная клубная футболка. А для тех, кто бегает вместе с ПапаРан целый год — клуб оплачивает участие в любом забеге на выбор. Мелочи, но приятно.
🦾 Показываем, что мы — про людей, а не про беговых киборгов
Для этого в блоке отзывов вместо шаблонного «Я Наташа, клуб класс» мы вводим точки А — показываем, что к нам приходят люди разного уровня (кто-то вообще не бегал, кто-то занимался другим спортом), и показываем точки Б: почти все пробежали марафон или полумарафон и поставили свои личные беговые рекорды.
Личный кабинет
Внутри сайта «прячется» личный кабинет для спортсменов. После покупки абонемента каждый участник регистрируется в ЛК, где может отслеживать свой прогресс и скачивать личный план тренировок на неделю. Мы переработали структуру существующего ЛК, адаптировали его для мобильного телефона.
В личный кабинет мы добавили еще одну геймификацию, создав блок с «достижениями», похожими на ачивки в играх. Эти достижения открываются для спортсменов по мере того, как участники будут ставить свои новые рекорды.
Мобильная версия
Отдельное внимание уделили мобильной версии сайтов — большинство спортсменов посещает сайт именно с телефона, поэтому было важно сделать адаптив удобным и понятным.
А что потом?
🏆 Проект попал в подборку лучших сайтов на Тильде.
💪 У клуба появился фирменный стиль
Визуальные решения сайта легли в основу нового фирменного стиля клуба: в этом стиле ведутся соцсети и блог на сайте, в нём же задизайнена и отшита новая беговая форма для членов клуба.
🏃♂ 8 новых спортсменов
За полгода в клуб пришло 8 новых бегунов, половина — по заявке с сайта. Учитывая, что зимний период — не сезон, результат хороший.
Кто это сделал?
Мы делали этот проект в самом начале зарождения Е-Б Эдженси: нас было всего двое :)
Мария Ищенко — тексты, логотип, дизайн-концепция, вёрстка
Елена Бобина — тексты, дизайн-концепция, анимации
Анна Толкунова — соосновательница PapaRun, без которой бы всего этого не было :)
Очень интересно и увлекательно описали кейс. Прочитал в один забег
Вообще интересно с фирстилем вышло:
по цветам футболки очень похожи на флаг Эмиратов, куда я собственно и переехала в итоге и откуда управляю сейчас клубом 😂
Поэтому фотосессию с футболками мы делали в пустыне. И на забегах в Дубае принимают за своих, спрашивают в каком районе базируемся 😅 Есть куда расширять географию))
Кейс офигенный, прочитала на одном дыхании
Кайф, очень интересно
Офигенный кейс, а фирстиль кайф
Как курто, что можно узнать, как шел ход мыслей. Очень интересно читать, взяла несколько мыслей на заметку. Сайт получился очень кайфовым и хочется его рассматривать постоянно)
Как все осмысленно, продуманно и гармонично получилось!