Типология проекта — И ещё одна
Название кейса в две строчки, потому что можем в две
Задача: коротко рассказать о задаче
Задача
Название задачи
Teachbase уже входит в реестр Российского ПО, работает с СИБУРом, Сбербанком, Озоном и другими крупнейшими компаниями России, а сайт не обновляли несколько лет. Маркетологи решили, что пора соответствовать уровню.
Проблема
Сайт, на котором клиенты узнают о продукте, устарел
Teachbase уже входит в реестр Российского ПО, работает с СИБУРом, Сбербанком, Озоном и другими крупнейшими компаниями России, а сайт не обновляли несколько лет. Маркетологи решили, что пора соответствовать уровню.
- Оля, TeachbaseСейчас сайт не отвечает на все вопросы пользователей, а ещё он сделан на платформе, которую сложно обновлять. Мы подробно прописали структуру страниц и путь пользователя, теперь хотим переехать на Тильду и нам нужен новый дизайн.
- СашаНи слова больше, работаем!
Решение
Фирменный стиль с нуля, графичные иллюстрации и вёрстка на Тильде
Мы сделали редизайн главной и нескольких дополнительных страниц, дальше дизайнеры Teachbase использовали их как шаблоны и продолжают развивать стилистику.
Использовали много кастомных решений для вёрстки и микроанимаций в Тильде.
Нескучная вёрстка
Придумали, как иллюстрировать ценности продукта, не усложняя восприятие.
Узнаваемые иллюстрации
Специально для сайта разработали фирменный стиль, сделали узнаваемый язык бренда.
Фирменный стиль
Шаг первый
Изучаем компанию и конкурентов, подбираем референсы, собираем первые концепты
- Оля, TeachbaseСайты конкурентов-LMS довольно похожи. Мы в маркетинге сделали продуманную структуру, которая отвечает на все вопросы посетителей и помогает быстро найти нужное. Теперь хочется, чтобы сайт запоминался среди прочих. Здесь у нас нет строгих гайдлайнов, только логотип и фирменный зелёный цвет.
- СашаУзнаваемость может быть за счёт ярких цветов, типографики, микроанимаций, акцентных элементов. Подбираем референсы, чтобы найти своё направление и собираем первые концепты, чтобы утвердить с Teachbase.
Какое-то описание изображения
Конкуренты
Первые концепты
Светлая гамма с зелёными акцентами, фокус на интерфейс
Тёмная основа, крупная типографика и карточки
Градиенты, полупрозрачность, фото живых людей
Иконки в карточках кейсов, пробуем разные композиции главного экрана
Линейные иллюстрации и типографика
Собираем примеры сайтов, от которых нужно максимально отстроиться стилистически
Референсы
Ищем примеры и идеи подходящей стилистики
Собираем первые варианты, чтобы выбрать направление.
- Оля, TeachbaseДавайте брать вариант с градиентными пятнами и карточками кейсов. Только карточек сделаем поменьше и анимируем.
- СашаОтлично! Теперь прорабатываем стилистику главной страницы, дальше будем расшивать её на весь сайт и верстать.
Макет
Выносим главные кейсы в начало и анимируем карточки, чтобы они сразу привлекали к себе внимание. Успокаиваем акцентные цвета и паттерны.
Отзывы
Показываем больше отзывов за раз, чтобы блок лучше работал на задачу подкрепить пользу продукта.
- Оля, TeachbaseВсё хорошо, давайте добивать этот вариант. Ещё есть беспокойство насчёт иллюстраций. Стоковые фото не хотим, а интерфейсы часто не информативные — и их используют все. Что-то можем придумать?
- СашаБез проблем, подумаем, что можно сделать.
Шаг второй
Ищем решение для иллюстраций и шлифуем стилистику сайта
- СашаС иллюстрациями есть две проблемы. С одной стороны, хочется показывать живых людей, которые пользуются продуктом. Фотографии со стоков сразу «дешевят» сайт, остаётся неприятный осадок, что ты уже десять раз видел этих людей на других сайтах.
С другой, LMS — это диджитал-продукт, хочется показывать, как он устроен изнутри: экраны, функции, меню, предпросмотр. Проблема в том, что такие иллюстрации мало что говорят на сайте, сложно понять, что именно на них показывают. Проще показать демо, чтобы люди сами прокликали эти экраны.
Пробуем разные варианты.