Кейс| Разработка дизайна для YarDRV

ФЛ

Yardrv

образовательные приложения
с игровым подходом

Ситуация

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

Цель:

Создать дизайн-макет в Figma, который:

• Реализует все разделы и функции, описанные в ТЗ (рейтинг, история решений, игра, магазин, кабинет).

• Обеспечивает высокую пользовательскую вовлеченность за счет яркого и современного интерфейса.

• Интегрирует интерактивность (анимации, переходы, подсказки) для улучшения UX.

ВЫПОЛНЕННЫЕ ДЕЙСТВИЯ

1. Анализ ТЗ и сбор требований:

Изучены все разделы и подразделы приложения: рейтинг, история, игра, магазин, кабинет.
Выявлены ключевые элементы: динамические списки, интерактивные окна, иконки, таймеры, прогрессы, цветовые акценты.
Определены приоритеты: удобство навигации, четкая визуальная иерархия, соответствие современным трендам дизайна.

2. Проектирование архитектуры приложения:

Создана структура экранов и навигации между ними.
Разработаны wireframe-макеты для каждого раздела (рейтинг, история, игра, магазин, кабинет).
Продуманы пути пользователя: от решения задач к просмотру истории, покупкам и проверке статистики.

3. Дизайн экранов:

Рейтинг:
Вертикальный список с 100 позициями, выделение топ-3 цветами (золото, серебро, бронза).
Отображение баланса токенов пользователя, подсветка его места в рейтинге.

История:
Архив задач с тремя подразделами: текстовые задачи, графики, терминология.
Цветовые индикаторы правильности решений (зеленый/красный), интерактивные окна с деталями.

Игра:
Поле ввода текста с иконками "Enter", "Полноэкранный режим", "Прикрепить файл".
Отображение ответов бота и пользователя в виде блоков с кликабельными заголовками.

Задания&Магазин:
Три подраздела: магазин (бустеры, бонусы), еженедельные задания, специальные задания.
Дизайн плашек заданий с заголовками, наградами, таймерами, прогресс-бары для многошаговых задач.

Кабинет:
Подразделы: приобретенные предметы, статистика, подписка.
Отображение статуса бустеров (активный/ожидает активации), реального времени обновления статистики.

4. Интеграция интерактивности:

Анимации при переходе между экранами (плавные эффекты).
Динамические изменения статусов элементов.
Подсказки и уведомления.

5. Тестирование и оптимизация:

Проверка макетов на соответствие ТЗ.
Корректировка цветов, шрифтов, размеров элементов для улучшения читаемости и эстетики.

Экран рейтинга с выделением топ-3 и индикацией места пользователя.

Раздел истории с фильтрацией по типам задач и цветовой индикацией результатов.

Раздел магазина с бустерами и плашки еженедельных заданий с таймерами.

Личный кабинет с управлением бустерами, статистикой и подпиской.

Игровой интерфейс с полем ввода, ответами и элементами управления.

Результаты (достигнутые показатели):

1. Полное соответствие ТЗ: Все разделы и функции реализованы в макете.
2. Высокая вовлеченность: Интерактивные элементы и яркий дизайн стимулируют активность пользователей.
3. Удобство навигации: Четкая структура экранов и интуитивно понятные элементы управления.
4. Готовность к разработке: Макеты подготовлены для передачи в команду разработчиков с точными инструкциями по реализации.

ВЫВОД

Дизайн-макет, созданный в Figma, полностью соответствует техническому заданию и обеспечивает баланс между функциональностью и эстетикой. Реализованные интерактивные элементы и четкая визуальная структура повысят пользовательскую вовлеченность и упростят навигацию.