Страница курсов
Главная страница
Каталог курсов
Направления спрятаны в выпадающий список. Если на странице курсов нет блока о живописи, категория все равно отображается в списке.
Страницы курса, профессии, практикума, лекции, пакета сильно отличаются между собой. Длительность курса отображена на некоторых страницах в одном месте, на других — в другом. Кнопка "купить курс" скачет в размерах.
Дизайн система
Мы предлагаем сделать единую базу всех компонентов. Все виджеты курсов /видеолекций должны на всех устройствах выглядеть максимально одинаково и предсказуемо.
Нужно привести всю контентную информацию в один общий вид. Категории могут между собой отличаться. Но это не должно вводить пользователя в заблуждение! На странице пакета нужно показать, сколько средств пользователь экономит, покупая данный пакет. Стоимость видеолекций без пакета / в пакете.
ЛЕКЦИИ/ПАКЕТЫ
КУРСЫ/ПРАКТИКУМЫ
ПРОФЕССИИ
Мы очень любим сервисы miro и notion, у них простой дизайн, но в тоже время он отражает лицо бренда. Все страницы выдержаны в одном стиле. На всех разрешениях сайт ведет себя максимально предсказуемо.
Пример дизайн системы:
С помощью дизайн-системы увеличивается скорость разработки продукта, а также эффективность поддержки существующих компонентов.
На данный момент, когда пользователь первый раз заходит на сайт, он не понимает, почему блоки курсов/видеолекций отличаются по дизайну.
Наша задача постараться облегчить жизнь пользователю за счет стандартизации UI.
В дизайн-систему входит визуальный язык со всеми компонентами и стилевыми особенностями бренда, кодовые решения и дизайн-паттерны для разных устройств. Все это оформлено в виде отдельного сайта-справочника, что позволяет каждому дизайнеру сверяться с таким «руководством» и находить ответы на возможные вопросы в любое время.
Что входит в дизайн-систему:
В работе над дизайном в Figma используется функция "Auto Layout". Мы один раз задаём базовые правила на рефакторинге дизайн-концепции и собираем остальные страницы, как в конструкторе. Меньше рутины — больше времени на погружение в проект.
Мы уделяем внимание абсолютно всем страницам, не имеет значения, какая это страница, главная или второстепенная. Мы продумываем все и склеиваем их между собой.
Это только мобильная версия. Для десктопа получится примерно такая же картина
Фильтр по направлениям лучше сделать открытым. Если какой-то категории нет в курсах, то она, соответственно, не должна отображаться.
Личный кабинет
В личном кабинете виджеты отличаются от тех, что представлены в каталогах курсов и видеолекций. Это немного дезориентирует пользователя.
Нужно добиться такого результата, чтобы все виджеты в разных местах имели общий вид, но с отличительными особенностями по категориям.
На карточке курсов слиплись две кнопки "подробнее" и "купить". Кнопка "подробнее" выделяется более явно, хотя по логике, кнопка "купить" играет главную роль.

Стоит поразмыслить, нужны ли эти кнопки вообще. Так как при нажатии на саму плашку, пользователь в любом случае должен переходить на страницу с курсом. Также нужно ознакомиться со статистикой, как часто пользователи покупают курс непосредственно в каталоге. Ведь это не товар, с которым пользователь хорошо знаком. Нужно перейти на страницу курса, изучить его, и уже потом принять решение. Возможно, стоит разработать кнопку "добавить в избранное", чтобы пользователь отобрал себе в закладки интересующие курсы/лекции и у него был быстрый доступ к ним.
На главной странице нет четкого позиционирования того, что можно найти на платформе. Сразу нас встречает баннер, который не представляет особой конструктивной ценности.
1.


2.


3.


4.


5.
Мы предлагаем на странице каталога курсов вывести под шапкой направления. При переключении, например, на "живопись", пользователю будет доступен для прочтения заголовок, сопровождающийся небольшим описание под ним.

Карточку курса мы предлагаем выводить одну в ряд. Таким образом, на всех устройствах карточка будет иметь один вид.

От кнопки "подробнее" отказаться. Длительность курса/видеолекции, цену, записаться на курс выводить рядом.
Покупка курса
Форма покупки курса перенесена с Tilda, но c небольшими доработками. Большие отступы между блоков располагают кнопку "купить" слишком низко. Чтобы добраться до нее на маленьких экранах, нужно скроллить.

Лучше сделать все более компактно и на отдельной странице.
Использование баннера лучше оставить под какие-нибудь акции или специальные предложения.

После шапки следует написать, что такое "Правое полушарие интроверта", и чем оно может помочь человеку.

Далее — отобразить основные направления, которые предлагает платформа.

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

Показать статистику в цифрах: сколько курсов/видеолекций доступно для изучения. В том числе, сколько человек прошло курсы.
Стоимость часа работы
Разработчик flutter (senior)
Этапы работ
3 200 руб.
Разработчик angular (middle)
2 800 руб.
UX|UI figma (senior)
3 000 руб.
Руководитель проекта
3 500 руб.
1
Сбор данных о продукте, интервью.
2
Анализ веб статистики сайта.
3
Анализ целевых аудиторий и лучших практик.
4
Создание архитектуры продукта.
5
Разработка концепции интерфейса.
6
Проектирование всех пользовательских сценариев продукта на основных устройствах.
7
Согласование MVP и плана внедрения продукта.
8
Верстка страниц.
9
Front end разработка SPA.
10
Тестирование продукта.
11
Релиз.
Инструменты
Сбор данных, анализ и создание архитектуры продукта miro
UX|UI и прототипирование figma
Постановка задач и взаимодействие gitlab
Контроль версий gitlab
ci|cd gitlab