К этому моменту задачи были:
  • отразить на сайте новое позиционирование: от набора курсов к онлайн-университету,
  • упростить навигацию, чтобы пользователи не терялись,
  • снять с основательниц рутину по Тильде.
запрос
решение
Обновили сайт онлайн-школы для ветеринаров
Через знакомых Полина увидела нашу концепцию сайта для университетского кампуса: «Я услышала, что кто-то работал с классной командой, зашла в ваш Telegram-канал, посмотрела сайт. Увидела один из кейсов и поняла — вот оно».
Vet_workshop — онлайн-школа ветеринарных профессий. Они создают мини-курсы и полноценные программы для ветеринаров. Зачем? Университет не готовит к работе в городских клиниках: в вузах учат лечить коров и лошадей, а не кошек и собак. А еще некоторые учебные программы в вузах устарели. Vet_workshop вместе с лучшими ветврачами СНГ и методистами создают курсы на основе доказательной медицины и последних исследований — все с фокусом на реальные кейсы и практику.
визуальный стиль
Изучили рынок и конкурентов. Оказалось, что курсов для ветеринаров в СНГ много, но все выглядят печально. Мы начали работу с обновления главной страницы. У vet_workshop на сайте было 50 + страниц, поэтому важно было сохранить логику текущей архитектуры и учесть будущие обновления.
Полина и Катя разбираются в диджитал и дизайне (а Полина еще и иллюстратор), поэтому пришли с четкими примерами, что они хотят увидеть. Мы оттолкнулись от их и собрали 3 доски с разными направлениями и вместе выбрали минималистичный стиль с яркими акцентами.
Структуру главной страницы Полина и Катя уже набросали в Google Docs. Мы перенесли ее в прототип, расставили акценты.
дизайн главной страницы
Главный вызов — объединить медицинскую строгость и современный подход к обучению.
Мы двигались постепенно:
  • набросали несколько концепций,
  • объединили удачные находки в финальную концепцию,
  • показали клиенту 3 варианта с разными подходами к иллюстрациям.
После финального согласования адаптировали стиль для всей страницы.
С начала проекта основательницы vet_workshop Полина и Катя делали сайт сами. Когда поток студентов увеличился, тратить время на сайт было больно и дорого. «Нужно было срочно найти кого-то, кто умеет круто собирать на Тильде, у кого есть нужный опыт и знания, кто разбирается в диджитал и трендах»
У vet_workshop не было собственных фотографий, поэтому мы подбирали изображения с женщинами-ветеринарами (80% целевой аудитории — это женщины). Для первого экрана, например, перебрали более 30 фото, пока не нашли идеальное.
Иллюстрации мы разработали новые — более минималистичные. При этом они хорошо сочетались с иллюстрациями на старых страницах сайта.
иллюстрации и фото
Начали с брифинга
Так получилась удобная страница с навигацией, по которой можно сразу найти необходимую лекцию, добавить ее в корзину или перейти на страницу и узнать подробности.
верстка на Тильде
На мобилке сделали раскрывающийся список. Реализовано тоже все кастомно с помощью модификаций и кода. При этом на странице только 2 дополнительных блока с кодом, которые были оптимизированы, чтобы не перегружать страницу.
дизайн-поддержка
Еще в процессе верстки главной страницы Полина и Катя предложили нам работать дальше.
За месяц мы создали:
  • каталог курсов (о нем уже рассказали выше),
  • каталог профессий,
  • шаблон страницы профессии.
А после стали полноценной дизайн-поддержкой vet_workshop:
  • разработали фирстиль, подготовили сувенирную продукцию и материалы для онлайн-конференции СО. ВЕТ,
  • запускали спецпроекты к Черной пятнице и Новому году: посадочные страницы, дизайн для социальных сетей, сертификаты, рекламные баннеры,
  • запустили еще несколько страниц профессий,
  • разработали буклеты, рабочие тетради для студентов, несколько серий сувенирной продукции, подарки для клиентов и партнеров.
Несмотря на ограничения Тильды, все задумки реализовались. Вот несколько самых сложных для реализации кейсов на сайте.
У Tilda есть стандартные блоки для меню второго уровня ME601. Но у него есть ограничения: даже с CSS-стилизацией дизайн не соответствовал макету.
Для навигации мы запланировать сделать многоуровневое меню в хедере. Мы решили сделать меню в Zero block, где есть все необходимые элементы: навигация по курсам, переход в личный кабинет и открытие сайта для слабовидящих.
Меню второго уровня реализовано через Zero block во всплывающем окне. Вычислили, в каком месте должен стоять выпадающий список, и установили z-index (относительное положение блоков к другим блокам). При вычислении z-index учли также, что на сайте почти всегда висит баннер над хедером.
1. Разгрузили основательниц. Теперь мы не тратим время на работу с сайтом и можем сосредоточиться на бизнесе.
Работа с vet_workshop — 100% совпадение по видению и формату работы. Уже почти год совместной работы мы в прямом эфире наблюдаем, как растет vet_workshop, как все больше ветеринаров доверяют им! И очень рады быть частью этого роста!
Мария Ярцева,
генеральный директор wearebusy
Катя и Полина,
соосновательницы vet_workshop
От лица всей команды онлайн-школы vet_workshop хотим поблагодарить команду busy за прекрасную работу!

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

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

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

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

А мы обязательно продолжим работать с busy, за дизайном всего-всего теперь только к ним ❤️
2. Сайт стал выглядеть профессионально. Клиенты — как частные лица, так и клиники — заходят и сразу видят, что всё сделано серьёзно. Раньше были проблемы: на планшете что-то «улетало», текст превращался в абракадабру, пользователь спотыкался. Теперь таких ошибок нет.
3. Удобство для пользователей. Стало проще находить нужную информацию, сайт работает быстрее. Раньше могли потерять клиента просто потому, что страница не загрузилась. Сообщения вроде «не могу найти страницу» или «сайт не грузится» перестали приходить. Теперь мы не переживаем, что клиент наткнётся на недоработки.
4. Сайт стал не просто визиткой, а полноценным инструментом продаж. Так как мы онлайн-школа, то сайт — единственная точка контакта с клиентами, и сейчас она на высоте. Конверсия в покупку значительно увеличилась. Люди стали дольше оставаться на сайте, чаще переходить между страницами и взаимодействовать с контентом.
О результатах рассказывают основательницы vet_workshop, Катя и Полина.
результат
Автор — Мария Ярцева,
арт-директор студии wearebusy
Можно было сделать это с помощью «Магазина» на Tilda, но там нельзя сделать свои, уникальные карточки. Поэтому мы сделали Zero block с фильтрами для карточек и много блоков с самими карточками. Работает так: нажимаешь на нужный фильтр, открывается необходимый блок, а остальные блоки скрываются.
Каталог курсов. Изначально клиент хотел реализовать каталог курсов через 3 других каталога. Чтобы добраться до нужной страницы, пользователю необходимо сделать 3 клика. Мы предложили вариант проще: убрали страницу-посредника и собрали одну страницу-каталог, где сразу лежат все наборы лекций, фильтрация по специализациям и возможность добавить в корзину необходимую лекцию сразу.
в нашем тг-канале больше о том, чем мы заняты
в нашем
тг-канале больше о том, чем мы заняты
читайте также наши другие статьи