Real Language Club — онлайн-школа для изучения иностранных языков
Figma
Auto layout
Components
Design System
Лендинги
Дэшборд
Роль: UI/UX дизайнер в команде
Команда: 2 дизайнера
О проекте
Real Language Club — это онлайн-школа для изучения иностранных языков. До нашего участия у клиента уже был сайт, но не выполнял двух главных задач: а) не вовлекал, б) не конвертировал. Структура сбивала с толку, визуальный стиль мешал обучению, и пользователь терялся в хаосе страниц, разрозненной информации и бессистемности.
Нам предстояло не просто «обновить сайт», а переосмыслить весь опыт взаимодействия пользователя: от первого клика до момента, когда человек решает — да, я хочу учиться именно здесь.
- Мы начали с архитектуры: выстроили логичную и масштабируемую структуру для десятков разделов — от регистрации и карточек курсов до образовательных модулей, тестов, блога, подписки и личного кабинета.
- Параллельно — заново собрали визуальный стиль. Нам важно было уйти от ощущений «сайт на коленке» и создать образ современного, дружелюбного и профессионального продукта.
- Всё это мы зафиксировали в единой дизайн-системе в Figma: с сетками, компонентами, стилями и адаптивами. Это дало возможность не просто красиво рисовать, а быстро масштабировать и развивать платформу дальше — без дизайнерского хаоса.
- Цель всей работы, по итогу, заключалась в том, чтобы на любом устройстве, с любого экрана пользователь чувствовал: ему здесь удобно, понятно и хочется остаться.
До: что было не так со старым сайтом
До редизайна (а после, мы назовём это — «реконструкции») сайт Real Language Club вызывал недоумение у новых пользователей: в нём не ощущалось ни образовательной направленности, ни системности подачи материала. Оказалось, цвета, шрифты и графика — малое из всех бед.
Главная страница не вовлекала — было неясно, куда нажимать, с чего начать, как выбрать курс и что вообще предлагает платформа. Сам по себе контент на сайте (имеется в виду, текста) был неплох, но терялся засчёт неструктурированной подачи: пользователь мог уйти, так и не поняв, куда попал и зачем ему здесь оставаться.
В конечном итоге, складывалось впечатление, будто сайт «собирался по частям». Речь шла уже не просто «про косметику», а про полную реконструкцию ресурса: одним внешним видом проблема не решалась — сам пользовательский опыт был сломан подчистую.
Структура и визуальный стиль
Первым делом мы полностью разобрали старую структуру и начали выстраивать новую — от логики до микронавигации.
- Начали с архитектуры. Каждый шаг был продуман: от первого визита на главную до выбора курса, прохождения уроков и отслеживания прогресса.
- Создали масштабную UI-систему — более 400 компонентов в Figma. В неё вошло всё: карточки, попапы, состояния кнопок, формы, списки, адаптивные сетки и вложенные страницы. Система стала фундаментом для чистой, гибкой и быстрой разработки.
- Сформировали свежую палитру: мягкие, обволакивающие оттенки с яркими акцентами. Визуал стал контрастным, но не агрессивным — с сохранённым ощущением интеллигентности и академичности.
- Обновили типографику и иконки: шрифты стали легче, иконки — чище, визуальный язык — понятнее. Уже на этом этапе интерфейс обещал быть дружелюбнее, динамичнее и мотивирующим к взаимодействию.
Создание главной страницы
Как мы писали ранее, исходная главная страница так и напрашивалась на ярлык «абсолютно неконверсионная»: пользователь не понимал, что за платформа перед ним, зачем оставлять заявку и что вообще происходит.
Мы в срочном порядке занялись исправлением всех недоразумений:
- Перестроили акценты: сделали фокус на человеке, а не на тексте, добавили дружелюбные иллюстрации, яркие цвета и живые лица.
- Чётко и кратко ответили на три вопроса: что это? зачем мне это? и что я получу?
- Добавили блок выбора языка, преимущества, методики, отзывы и удобные входы в курсы — всё на одной странице, логично, по шагам.
- Убрали сложные формулировки, добавили призывы к действию и понятный визуальный ритм — так, чтобы хотелось только не скроллить, но и нажимать, взаимодействовать.
Контентные страницы и разделы курсов
После проработки визуальной базы мы перешли к самому объёмному этапу — развёртыванию контентных страниц.
- Создали десятки типов страниц: лендинги по отдельным языкам, описания методик, карточки преподавателей, страницы с отзывами, программа курсов по уровням и направлениям.
- Продумали структуру так, чтобы каждая страница работала как самостоятельная точка входа, а не просто зависела от главной.
- Реализовали гибкие модульные блоки, чтобы команда клиента могла комбинировать их под разные задачи и кампании: от акций до спецпредложений по направлениям.
Результаты
Так, мы построили не просто интерфейс, а удобную среду, где изучение языков начинается с первого клика.
400+ UI-компонентов собраны в масштабную Figma-систему, готовую к развитию и масштабированию
200+ экранов спроектировано и задизайнено в рамках одного визуального языка
Понравился проект?
Другие проекты
AI Platform
Дизайн
Figma
Nexa AI
Ed-tech
Редизайн
Figma
Real Language Club
E-commerce
Разработка
Webflow
Shopify
JavaScript
API
***** Group
Ed-tech
Редизайн
Разработка
Creatium
JavaScript
API
Вебхуки
GetAnalyst
