Кейс

Сайт системы дистанционного обучения Teachbase

Разработали новый фирменный стиль и провели полный редизайн сайта.

Проблема

Сайт, на котором клиенты узнают о продукте, устарел

Teachbase уже входит в реестр Российского ПО, работает с СИБУРом, Сбербанком, Озоном и другими крупнейшими компаниями России, а сайт не обновляли несколько лет. Маркетологи решили, что пора соответствовать уровню.

Оля, Teachbase

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

Саша, co-founder и руководитель продакшена

Ни слова больше, работаем!

Решение

Разработать фирменный стиль и сделать узнаваемый язык бренда Teachbase

Мы сделали редизайн главной и нескольких дополнительных страниц, дальше дизайнеры Teachbase использовали их как шаблоны и продолжают развивать стилистику.

Фирменный стиль

Специально для сайта разработали фирменный стиль, сделали узнаваемый язык бренда.

Узнаваемые иллюстрации

Придумали, как иллюстрировать ценности продукта, не усложняя восприятие.

Нескучная вёрстка

Использовали много кастомных решений для верстки и микроанимаций в Тильде.

стилистика

Изучаем компанию и конкурентов, подбираем референсы, собираем первые концепты

Сайты конкурентов-LMS довольно похожи. Маркетологи Teachbase сделали продуманную структуру, которая отвечает на все вопросы посетителей и помогает быстро найти нужное. Теперь хочется, чтобы сайт запоминался среди прочих. Здесь у заказчика нет строгих гайдлайнов, только логотип и фирменный зелёный цвет. Мы подобрали референсы, чтобы найти правильное направление и собирали первые концепты, чтобы утвердить их с Teachbase.

Конкуренты

Собрали примеры сайтов, от которых нужно максимально отстроиться стилистически.

Референсы

Нашли примеры и идеи подходящей стилистики.

Первые концепты

Собрали первые варианты, чтобы выбрать направление

акценты

Примеряем выбранную стилистику и расставляем акценты

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

Кейсы

Выносим главные кейсы в начало и анимируем карточки, чтобы они сразу привлекали к себе внимание. Успокаиваем акцентные цвета и паттерны.

Отзывы

Показываем больше отзывов за раз, чтобы блок лучше работал на задачу подкрепить пользу продукта.

графика

Найти решение для иллюстраций

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

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

Пробуем разные варианты.

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

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

Фотографии

Выбираем фотографии, которые не выглядят совсем стоковыми.

дизайн

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

Для каждой страницы ищем удачные стилистические и UX-решения. Готовим шаблоны для повторяющихся страниц, скриншотов, блоков с тарифами и отзывами.

Доработка нюансов

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

Шаблоны

Для типовых дополнительных страниц делаем шаблон, чтобы команда Teachbase легко сама делала новые страницы.

Доработка нюансов

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

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

Результат

Обновлённый сайт Teachbase

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

01

Обновленный сайт помог
в 3 раза увеличить число MQL (Marketing Qualified Leads) параллельно
с другими маркетинговыми активностями

02

Клиенты Teachbase положительно отреагировали на новый дизайн сайта

03

Сайт создан на конструкторе Tilda, поэтому контент на нем теперь можно легко обновлять

Сайт не перегружен деталями и «оживлен» с помощью анимаций и акцентного оранжевого цвета

Использовали для оформления иллюстрации, которые не похожи на обычные стоковые

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

Команда

ПОМОГЛИ решить бизнес-задачУ  И НАЙти общий язык с пользователями

Саша, co founder

Разрабатывала общую стилистику сайта и концепции иллюстраций

Наиль, co founder

Следил за сроками и общался по организационным вопросам

Даша, web designer

Реализовывала все задумки на Тильде, придумывала и настраивала анимации

Саша, co-founder

Разрабатывала общую стилистику сайта и концепции иллюстраций

Наиль, co-founder

Следил за сроками и общался по организационным вопросам

Даша, web-designer

Реализовывала все задумки на Тильде, придумывала и настраивала анимации

форма связи

Расскажите о вашей задаче

Расскажите о вашей задаче

Получили вашу заявку!

Наш менеджер скоро напишет или позвонит, чтобы обсудить детали. А пока вы можете почитать полезные посты в наших соцсетях
Oops! Something went wrong while submitting the form.

01

Свяжемся с вами, чтобы договориться об онлайн-встрече

02

После встречи предложим решение и оценим состав работ

03

После утверждения подпишем договор и начнем работу

Делимся новыми кейсами и полезными статьями в письмах
Получили вашу заявку!
Oops! Something went wrong while submitting the form.

*нажимая на кнопку, вы соглашаетесь c политикой конфиденциальности и разрешаете обрабатывать персональные данные

© 2018-2022 Tetraform. All right resrved.

Подпишитесь на нас, чтобы не потерять

Расскажите о вашей задаче

Получили вашу заявку!

Наш менеджер скоро напишет или позвонит, чтобы обсудить детали. А пока вы можете почитать полезные посты в наших соцсетях
Oops! Something went wrong while submitting the form.