«Мои грани»
Чтение — 6 минут
Мои грани — это агрегатор, который объединяет учеников, педагогов, продавцов и владельцев площадок. Педагоги могут организовать свои занятия, получить доступ к интерактивному расписанию занятий, автоматическим уведомлениям и контролю оплат, удобному чату с учениками и их родителями, и многое другое, а ученики найти своего преподавателя , который раскроет их талант. Продавцы могут получить доступ к широкой аудитории «теплых клиентов» и увеличить объем продаж. Арендодатели могут представить свои площадки тщательно отобранной целевой аудитории, повысить заполняемость своих площадок и эффективно взаимодействовать с тренерами и преподавателями.
UX/UI дизайнер в составе команды дизайна/выполнял часть функций тимлида.
Ориентиры:
Важные наблюдения, мысли, факты
Задача была провести глубокий редизайн продукта на основе готовых маркетинговых исследований и ограничений существующей айдентики. Сохранили основу бренда: логотип и фирменную палитру и аналитику по ЦА, но полностью перепроектировали логику взаимодействия, оптимизировали пользовательские сценарии и создали новый визуальный язык.
Примеры главных страниц до редизайна и после редизайна:
02. Мои задачи
Типографика
Первым шагом стала разработка типографики. Специфика детского интерфейса требовала дружелюбного и мягкого визуального языка — геометрических, пластичных и выразительных форм. Я их ассоциировал с детскими игрушками: кубиками, конструкторами. Дополнительным важным критерием выбора была лицензия — шрифты должны быть полностью бесплатными для коммерческого использования. Несмотря на юридические нюансы бесплатных лицензий (их оказалось больше, чем я ожидал), мне удалось собрать выверенную шрифтовую пару, идеально передающую характер продукта.
Интеграция маскота
В основе бренд-айдентики продукта лежал готовый образ персонажа-кубика. Моей задачей было интегрировать его в UI-среду и превратить в полноценного проводника по интерфейсу.
Я разработал серию уникальных целевых состояний маскота. Каждая иллюстрация адаптирована под контекст блока. Это не просто декоративный элемент, а инструмент геймификации и эмоционального дизайна, который очеловечивает интерфейс и делает общение с продуктом интуитивно понятным.
маскоты, в выборе направления занятия
ТЕЛО
Не стремись стать лучше других, стремись стать лучше себя!
РАЗУМ
Расширяй грани своего разума вместе с нами!
ЭМОЦИИ
Покори удивительный мир творчества и распахни душу для ярких эмоций!
Маскоты, по видам спорта
Иконографика
Иконографика и навигация для выбора занятий была подобрана из кастомного сета плоских иконок. Все пиктограммы объединены общим пластическим языком: плотный белый силуэт, скругленные углы и чистая геометрия, которая идеально рифмуется с формой самих плиток. Благодаря высокой контрастности и однозначным визуальным метафорам, каждый может легко ориентироваться в разделах даже без детального чтения подписей.
Архитектура платформы и проектирование личных кабинетов
Основной и самой объемной частью работы на проекте стало детальное проектирование многопользовательской экосистемы. Платформа объединяла четыре ролевые модели с абсолютно разными паттернами поведения и задачами: ученик, педагог, арендодатель и продавец.
На основе информационной архитектуры, разработанной нашим тимлидом, мне предстояло развернуть масштабный функционал в работающий интерфейс. Самой комплексной задачей стал ЛК Учителя — огромный хаб, совмещающий функции CRM-системы, календаря, расписания, коммерческого блока (управление тарифами и арендой площадок) и социально-контентной платформы (блоги, клубы).
Опираясь на функциональное древо проекта, я пошагово самостоятельно разрабатывал детальные сценарии взаимодействия для модулей, над которыми работал в моменте. Было важно просчитать все развилки, ошибки и состояния экранов, чтобы превратить сложную структуру данных в интуитивно понятные интерфейсные шаги.
информационная архитектура (дерево ЛК педагога)
Для демонстрации логики личного кабинета рассмотрим модуль «Мои группы» — один из ключевых рабочих инструментов педагога. Проектирование этого раздела велось с упором на эргономику данных и минимизацию количества кликов для совершения ежедневных операций.
Модуль «Мои группы»
Страница 1. Дашборд управления и трекинг успеваемости. Экран спроектирован по принципу «от общего к частному». В верхней части расположены созданные группы. Клик на группу мгновенно разворачивает под ней детальный список участников. В карточках учеников выведены важные для преподавателя метрики: статус присутствия на платформе, процент посещаемости и быстрые действия — возможность мгновенно отправить сообщение или выдать награду («Достижения»).
Страница 2. Cоздания группы. Чтобы сделать процесс регистрации новой группы быстрым и безошибочным, форма разделена на два функциональных потока. Левая колонка отдана под интерактивный менеджмент участников: быстрый поиск и чекбоксы для пакетного добавления учеников в один клик. Правая колонка собирает ключевые параметры: текстовые инпуты для нейминга и выпадающие списки для привязки предмета и тарифной сетки.
Страница 3. Экран фиксации результата — финальный шаг сценария, который выполняет функцию позитивного фидбека от системы.
Лк педагога
Практически весь личный кабинет педагога был моей задачей.
Спустя полгода работы брал на себя часть функций тимлида, представлял команду на рабочих созвонах, защищая дизайн-решения. Также мы тесно взаимодействовали с разработчиками, учитывали их требования к макетам, для передачи их в разработку.
В целом я самостоятельно разрабатывал структуру интерфейсов на основе поставленных задач, контента и функционала, определяя логику представления информации и взаимодействия с пользователем. Работал в рамках единого визуального стиля и существующей логики проекта, используя готовые UI-решения и поддерживая консистентность интерфейсов.
Ведение практики
В рамках работы в «Мои грани» был период, когда я вёл практику для студентов, которые не имели опыта в дизайне и UX/UI. Задача заключалась не только в контроле выполнения проекта, но и в том, чтобы сначала дать им необходимую базу для самостоятельной работы.
Я объяснял основы UX/UI и визуального дизайна, показывал принципы построения интерфейсов и параллельно обучал работе в Figma — от базовых инструментов до использования Auto Layout и подготовки макетов. После этого курировал выполнение практических задач, отвечал на возникающие вопросы и давал обратную связь по результатам работы.
В качестве практического задания студенты создавали сайт для организации спортивных выездов, это был наш смежный проект. Таким образом, обучение проходило непосредственно на реальном проекте и полученные знания сразу применялись при разработке интерфейса.
Подробнее с проектом Вы можете ознакомится в figma. Там представлена часть работ, над которыми работал только я
