01

Цели проекта

Real Language Club — это онлайн-школа для изучения иностранных языков. До нашего участия у клиента уже был сайт, но не выполнял двух главных задач: а) не вовлекал, б) не конвертировал. Структура сбивала с толку, визуальный стиль мешал обучению, и пользователь терялся в хаосе страниц, разрозненной информации и бессистемности.

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

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

02

До: что было не так со старым сайтом

До редизайна (а после, мы назовём это — «реконструкции») сайт Real Language Club вызывал недоумение у новых пользователей: в нём не ощущалось ни образовательной направленности, ни системности подачи материала. Оказалось, цвета, шрифты и графика — малое из всех бед.

Главная страница не вовлекала — было неясно, куда нажимать, с чего начать, как выбрать курс и что вообще предлагает платформа. Сам по себе контент на сайте (имеется в виду, текста) был неплох, но терялся засчёт неструктурированной подачи: пользователь мог уйти, так и не поняв, куда попал и зачем ему здесь оставаться.

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

03

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

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

• Начали с архитектуры. Каждый шаг был продуман: от первого визита на главную до выбора курса, прохождения уроков и отслеживания прогресса.
• Создали масштабную UI-систему — более 400 компонентов в Figma. В неё вошло всё: карточки, попапы, состояния кнопок, формы, списки, адаптивные сетки и вложенные страницы. Система стала фундаментом для чистой, гибкой и быстрой разработки.
• Сформировали свежую палитру: мягкие, обволакивающие оттенки с яркими акцентами. Визуал стал контрастным, но не агрессивным — с сохранённым ощущением интеллигентности и академичности.
• Обновили типографику и иконки: шрифты стали легче, иконки — чище, визуальный язык — понятнее. Уже на этом этапе интерфейс обещал быть дружелюбнее, динамичнее и мотивирующим к взаимодействию.

04

Создание «главной»

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

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

05

Контентные страницы и разделы курсов

После проработки визуальной базы мы перешли к самому объёмному этапу — развёртыванию контентных страниц.

• Создали десятки типов страниц: лендинги по отдельным языкам, описания методик, карточки преподавателей, страницы с отзывами, программа курсов по уровням и направлениям.
• Продумали структуру так, чтобы каждая страница работала как самостоятельная точка входа, а не просто зависела от главной.
• Реализовали гибкие модульные блоки, чтобы команда клиента могла комбинировать их под разные задачи и кампании: от акций до спецпредложений по направлениям.