К этому моменту задачи были:

• отразить на сайте новое позиционирование: от набора курсов к онлайн-университету,
• упростить навигацию, чтобы пользователи не терялись,
• снять с фаундеров рутину по Тильде.

запрос

решение

Обновили сайт онлайн-школы для ветеринаров

Через знакомых Полина увидела наш концепт сайта для университетского кампуса: «Я услышала, что кто-то работал с классной командой, зашла в ваш Telegram-канал, посмотрела сайт. Увидела один из кейсов и поняла — вот оно».

Vet_workshop — онлайн-школа ветеринарных профессий. Они создают мини-курсы и полноценные программы для ветеринаров. Зачем? Университет не готовит к работе в городских клиниках: в вузах учат лечить коров и лошадей, а не кошек и собак. А еще некоторые учебные программы в вузах устарели. Vet_workshop вместе с лучшими ветврачами СНГ и методистами создают курсы на основе доказательной медицины и последних исследований — все с фокусом на реальные кейсы и практику.

визуальный стиль

Изучили рынок и конкурентов. Оказалось, что курсов для ветеринаров в СНГ много, но все выглядят печально. Мы начали работу с обновления главной страницы. У vet_workshop на сайте было 50 + страниц, поэтому важно было сохранить логику текущей архитектуры и учесть будущие обновления.

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

Структуру главной страницы Полина и Катя уже набросали в Google Docs. Мы перенесли ее в прототип, расставили акценты.

дизайн главной страницы

Главный вызов — объединить медицинскую строгость и современный подход к обучению.

Мы двигались постепенно:

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

После финального согласования адаптировали стиль для всей страницы.

С начала проекта фаундеры vet_workshop Полина и Катя делали сайт сами. Когда поток студентов увеличился, тратить время на сайт было больно и дорого. «Нужно было срочно найти кого-то, кто умеет круто собирать на Тильде, у кого есть нужный опыт и знания, кто разбирается в диджитал и трендах».

У vet_workshop не было собственных фотографий, поэтому мы подбирали стоковые изображения с женщинами-ветеринарами (80% ца — это женщины). Для hero-блока, например, перебрали более 30 фото, пока не нашли идеальное.

Иллюстрации мы разработали новые — более минималистичные. При этом они хорошо сочетались с иллюстрациями на старых страницах сайта.

иллюстрации и фото

Начали с брифа

Меню второго уровня реализовано через зеро-блок в попапе. Вычислили, в каком месте должен стоять выпадающий список, и установили z-index (относительное положение блоков к другим блокам). При вычислении z-index учли также, что на сайте почти всегда висит баннер над хедером.

верстка на Тильде

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

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

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

дизайн-поддержка

Еще в процессе верстки главной страницы Полина и Катя предложили нам работать дальше.

За месяц мы создали:

• каталог курсов (о нем уже рассказали выше),
• каталог профессий,
• шаблон страницы профессии.

А после стали полноценной дизайн-поддержкой vet_workshop:

• разработали фирстиль, подготовили мерч и материалы для онлайн-конференции СО. ВЕТ,
• запускали спецпроекты к Черной пятнице и Новому году: лендинги, дизайн для SMM, сертификаты, рекламные баннеры,
• запустили еще несколько страниц профессий,
• разработали буклеты, рабочие тетради для студентов, несколько дропов мерча, подарки для клиентов и партнеров.

Несмотря на ограничения Тильды, все задумки реализовались. Вот несколько самых сложных для реализации кейсов на сайте: У Tilda есть стандартные блоки для меню второго уровня ME601. Но у него есть ограничения: даже с CSS-стилизацией дизайн не соответствовал макету.

1. Разгрузили фаундеров. Теперь мы не тратим время на работу с сайтом и можем сосредоточиться на бизнесе.

Работа с vet_workshop — 100% метч по видению и формату работы. Уже почти год совместной работы мы в прямом эфире наблюдаем, как растет vet_workshop, как все больше ветеринаров доверяют им! И очень рады быть частью этого роста!

От лица всей команды онлайн-школы vet_workshop хотим поблагодарить команду busy за прекрасную работу!

Во-первых, команда busy не просто сделала для нас современный и яркий дизайн, но и смогла решить нашу давнюю проблему по оформлению каталога-фильтра товаров на сайте за один (!) день! Ни одна из компаний, с которыми мы работали ранее, не могла предложить удачный вариант. Радости не было предела.

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

Не можем не отметить прекрасную коммуникацию со всеми членами команды busy — уверены, что именно о таком метче и такой слаженной работе мечтают все предприниматели.

Если вы по какой-то причине еще не работаете с busy — вы упускаете невероятного партнера!

А мы обязательно продолжим работать с busy, за дизайном всего-всего теперь только к ним ❤️

2. Сайт стал выглядеть профессионально. Клиенты — как частные лица, так и клиники — заходят и сразу видят, что всё сделано серьёзно. Раньше были проблемы: на планшете что-то «улетало», текст превращался в абракадабру, пользователь спотыкался. Теперь таких ошибок нет.

3. Удобство для пользователей. Стало проще находить нужную информацию, сайт работает быстрее. Раньше могли потерять клиента просто потому, что страница не загрузилась. Сообщения вроде «не могу найти страницу» или «сайт не грузится» перестали приходить. Теперь мы не переживаем, что клиент наткнётся на баги или недоработки.

4. Сайт стал не просто визиткой, а полноценным инструментом продаж. Так как мы онлайн-школа, то сайт — единственная точка контакта с клиентами, и сейчас она на высоте. Конверсия в покупку значительно увеличилась. Люди стали дольше оставаться на сайте, чаще переходить между страницами и взаимодействовать с контентом.

О результатах рассказывают фаундеры vet_workshop, Катя и Полина.

результат

Автор — Мария Ярцева,
арт-директор студии wearebusy

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

Каталог курсов. Изначально клиент хотел реализовать каталог курсов через 3 других каталога. Чтобы добраться до нужной страницы, пользователю необходимо сделать 3 клика. Мы предложили вариант проще: убрали посредническую страницу и собрали одну страницу-каталог, где сразу лежат все наборы лекций, фильтрация по специализациям и возможность добавить в корзину необходимую лекцию сразу.

в нашем тг-канале больше о том, чем мы заняты

в нашем
тг-канале больше о том, чем мы заняты