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

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

Задача

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

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

Cделали редизайн главной и нескольких дополнительных страниц

Собрали несколько вариантов стилистики, чтобы выбрать направление. Остановились на варианте с градиентными пятнами и карточками кейсов.

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

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

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

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

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

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

Новый фирменный стиль и сайт для платформы Teachbase

Работали над проектом

Подробнее

Подробнее

Давайте познакомимся и обсудим вашу задачу

Встретимся и поговорим про проблемы и цели, после вернёмся с вариантами решения, договоримся о составе работ, пожмём руки и запустим проект.