Персона: Марина Ковалёва

Возраст: 34 года | Профессия: менеджер по маркетингу | Город: Казань Семья: муж, двое детей (3 и 7 лет)

Цели и мотивация

• Экономить время на бытовых задачах
• Покупать свежие и качественные продукты без поездки в магазин
• Контролировать семейный бюджет на еду

Боли и фрустрации

• Не успевает в магазин после работы -- к вечеру разбирают свежее
• Раздражает, когда подменяют товары без предупреждения
• Сложно планировать меню на неделю
• Детское питание часто нет в наличии

Типичный день

7:00 -- подъём и сборы детей. 8:30 -- офис. Обеденный перерыв -- единственное окно для личных дел. 18:30 -- забрать младшего из сада. Вечером -- ужин, уроки, укладывание. Заказ продуктов -- между делами с телефона.

Отношение к технологиям

Уверенный пользователь смартфона. Использует 3-4 приложения для доставки, выбирает по скорости и наличию нужных товаров. Не готова тратить больше 2 минут на оформление заказа.

«Мне не нужно 10 000 товаров -- мне нужны мои 30 товаров, и чтобы они были в наличии каждый раз».

Jobs-to-be-Done

1. Когда я еду с работы домой, я хочу быстро заказать продукты с телефона, чтобы к моему приезду всё было у двери.
2. Когда я планирую меню на неделю, я хочу сохранить список и повторить заказ, чтобы не собирать корзину каждый раз заново.
3. Когда нужного товара нет, я хочу сама выбрать замену из предложенных вариантов, чтобы не получить то, что не подходит детям.

User Journey Map: первый перевод в мобильном банке

Ключевые инсайты:

• Критический барьер -- этап верификации: 40% отвалов в индустрии
• Момент восторга -- мгновенный перевод по номеру телефона
• Рекомендация: сократить регистрацию до 3 шагов, добавить прогресс-бар

Jobs-to-be-Done: приложение для медитации

JTBD 1: Быстрое снятие стресса

Когда у меня напряжённый день и до следующей встречи 10 минут, я хочу быстро снять напряжение, чтобы вернуться к работе со свежей головой.

• Функциональный: 5-минутная дыхательная практика с таймером
• Эмоциональный: чувство контроля над своим состоянием
• Социальный: «Я человек, который умеет управлять стрессом»

JTBD 2: Засыпание

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

• Функциональный: аудио-медитация для сна с таймером отключения
• Эмоциональный: спокойствие, ощущение «отпускания» контроля
• Социальный: «Я забочусь о своём здоровье»

JTBD 3: Формирование привычки

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

• Функциональный: напоминания, серии (streaks), статистика
• Эмоциональный: гордость за последовательность
• Социальный: «Я уже 30 дней медитирую» -- можно показать друзьям

JTBD 4: Понять, как медитировать

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

• Функциональный: курс из 7 коротких уроков с пояснениями
• Эмоциональный: уверенность, что делаю правильно
• Социальный: «Я развиваюсь, пробую новое»

JTBD 5: Фокус перед важным событием

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

• Функциональный: 3-минутная практика фокусировки
• Эмоциональный: спокойная уверенность
• Социальный: «Я выгляжу собранным и профессиональным»

Микротексты для приложения доставки еды

1. Пустая корзина

Заголовок: Тут пока пусто Описание: Загляните в меню -- там точно есть что-то вкусное для вас Кнопка: Выбрать блюда Альтернатива: Перейти в меню

2. Успешный заказ

Заголовок: Заказ принят! Описание: Ресторан уже готовит. Курьер будет у вас примерно к 19:45 Кнопка: Следить за заказом Альтернатива: Отлично, спасибо

3. Задержка заказа

Заголовок: Курьер немного задерживается Описание: Извините, доставка займёт на 15 минут дольше. Новое время: 20:00 Кнопка: Хорошо, жду Альтернатива: Связаться с поддержкой

4. Ошибка оплаты

Заголовок: Оплата не прошла Описание: Похоже, на карте недостаточно средств. Попробуйте другую карту Кнопка: Выбрать другую карту Альтернатива: Попробовать ещё раз

5. Онбординг

Заголовок: Добро пожаловать! Описание: Найдите любимый ресторан и закажите доставку за пару минут Кнопка: Начать Альтернатива: Что тут есть?

6. Запрос push-уведомлений

Заголовок: Не пропустите скидки Описание: Расскажем о спецпредложениях и статусе ваших заказов Кнопка: Включить уведомления Альтернатива: Не сейчас

7. CTA оформления

Кнопка: Оформить за 899 ₽ Альтернатива: Заказать доставку

5 вариантов сообщения об ошибке (файл > 10 МБ)

Вариант 1 (рекомендуемый) Текст: Файл слишком большой -- максимум 10 МБ Подсказка: Сожмите файл или отправьте ссылкой через облако Оценка: 5/5 -- лаконично, понятно, сразу решение

Вариант 2 Текст: Не получилось загрузить -- размер файла превышает 10 МБ Подсказка: Попробуйте сжать изображения или разделить архив на части Оценка: 4/5 -- корректно, чуть длиннее

Вариант 3 Текст: Файл весит больше 10 МБ. Попробуем иначе? Подсказка: Поделитесь ссылкой из Google Drive или Яндекс Диска Оценка: 4/5 -- дружелюбно, но «попробуем» может звучать несерьёзно

Вариант 4 Текст: Размер файла: 24 МБ. Лимит: 10 МБ Подсказка: Используйте TinyPNG для сжатия или загрузите в облако Оценка: 3/5 -- технично, подходит для IT-команд, но сухо для общего использования

Вариант 5 Текст: Ой, файл великоват! Подсказка: Максимальный размер -- 10 МБ. Попробуйте уменьшить или отправить ссылкой Оценка: 2/5 -- слишком неформально для корпоративного мессенджера

{
  "color": {
    "primary": {
      "50": { "value": "#EEF2FF", "usage": "фон выделенных областей" },
      "100": { "value": "#DBE4FF", "usage": "фон hover-состояния" },
      "500": { "value": "#3B5BDB", "usage": "основные кнопки, ссылки" },
      "600": { "value": "#2B4ACB", "usage": "hover на кнопках" },
      "700": { "value": "#1E3A8A", "usage": "текст на светлом фоне (контраст 7.1:1)" }
    },
    "neutral": {
      "0": { "value": "#FFFFFF", "usage": "фон карточек" },
      "50": { "value": "#F8FAFC", "usage": "фон страницы" },
      "200": { "value": "#E2E8F0", "usage": "разделители, бордеры" },
      "500": { "value": "#64748B", "usage": "вторичный текст (контраст 4.6:1)" },
      "900": { "value": "#0F172A", "usage": "основной текст (контраст 15.4:1)" }
    },
    "semantic": {
      "success": { "value": "#16A34A", "usage": "положительные метрики, +рост" },
      "warning": { "value": "#CA8A04", "usage": "пороговые значения" },
      "error": { "value": "#DC2626", "usage": "ошибки, отрицательные метрики" },
      "info": { "value": "#2563EB", "usage": "информационные подсказки" }
    }
  },
  "typography": {
    "heading-1": { "size": "30px", "lineHeight": "36px", "weight": 700 },
    "heading-2": { "size": "24px", "lineHeight": "32px", "weight": 600 },
    "heading-3": { "size": "20px", "lineHeight": "28px", "weight": 600 },
    "body": { "size": "16px", "lineHeight": "24px", "weight": 400 },
    "body-small": { "size": "14px", "lineHeight": "20px", "weight": 400 },
    "caption": { "size": "12px", "lineHeight": "16px", "weight": 500 }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px",
    "lg": "24px",
    "xl": "32px",
    "2xl": "48px",
    "3xl": "64px"
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "12px",
    "full": "9999px"
  },
  "shadow": {
    "sm": "0 1px 2px rgba(0,0,0,0.05)",
    "md": "0 4px 6px rgba(0,0,0,0.07)",
    "lg": "0 10px 15px rgba(0,0,0,0.1)"
  }
}

Примечания к контрасту: primary-700 на white -- 7.1:1 (AAA). neutral-500 на white -- 4.6:1 (AA). Все semantic-цвета проверены на белом фоне: контраст >= 4.5:1.

Button

Кнопка инициирует действие. Используйте кнопки для основных и второстепенных действий на странице.

Когда использовать

• Отправка формы
• Подтверждение действия в диалоге
• Навигация к следующему шагу
• Запуск операции (скачивание, экспорт)

Варианты

Размеры

Состояния

• Default: базовый вид
• Hover: фон затемняется на 10%
• Active (pressed): фон затемняется на 20%
• Focus: outline 2px primary-500, offset 2px
• Disabled: opacity 0.5, cursor not-allowed
• Loading: спиннер заменяет текст, ширина сохраняется

Анатомия

[Icon (опц.)] [Label] [Icon (опц.)]

Правила

Do: используйте глагол в тексте кнопки (Сохранить, Удалить, Отправить). Один primary button на экран. Don't: не используйте кнопку как ссылку. Не ставьте два primary рядом. Не пишите «Нажмите сюда».

Accessibility

• Минимальный контраст текста: 4.5:1 (WCAG AA)
• Минимальная область нажатия: 44x44px
• aria-label если кнопка содержит только иконку
• aria-busy="true" в состоянии loading
• Поддержка навигации через Tab и активации через Enter/Space

Юзабилити-аудит: оформление заказа

Эвристика 1: Видимость статуса системы

Нарушение: Нет индикатора шагов -- пользователь не знает, сколько осталось до завершения. Серьёзность: 3 (серьёзная) Рекомендация: Добавить прогресс-бар: Корзина → Доставка → Оплата → Готово. Подсвечивать текущий шаг.

Эвристика 3: Пользовательский контроль и свобода

Нарушение: Нет возможности вернуться к корзине. Пользователь «заперт» в форме. Серьёзность: 3 (серьёзная) Рекомендация: Добавить ссылку «← Вернуться в корзину» и кликабельные шаги в прогресс-баре.

Эвристика 6: Узнавание, а не вспоминание

Нарушение: Placeholder вместо label -- при вводе текста пользователь забывает, какое это поле. Серьёзность: 3 (серьёзная) Рекомендация: Добавить постоянные label над полями. Placeholder использовать только для примеров (напр. «ул. Ленина, д. 5, кв. 12»).

Эвристика 5: Предотвращение ошибок

Нарушение: Нет валидации в реальном времени -- пользователь узнает об ошибке только после отправки. Серьёзность: 2 (средняя) Рекомендация: Inline-валидация: проверка email при потере фокуса, маска для телефона, автодополнение адреса.

Эвристика 4: Согласованность и стандарты

Нарушение: Кнопка «Оплатить» серого цвета -- выглядит как disabled. Сумма мелким шрифтом в углу. Серьёзность: 4 (катастрофа) Рекомендация: Яркая CTA-кнопка (зелёная/синяя), полная ширина на мобильных. Итого -- крупно, рядом с кнопкой.

Эвристика 7: Гибкость и эффективность

Нарушение: Адрес в одном текстовом поле -- неудобно, нет автодополнения, сложно парсить. Серьёзность: 2 (средняя) Рекомендация: Разделить на: город, улица, дом, квартира. Или интеграция с DaData/КЛАДР для автодополнения.

Общая оценка: 4 из 10

Критическая проблема -- неразличимая CTA-кнопка. Приоритет исправлений: CTA → label → прогресс-бар → валидация → адрес.

Accessibility-аудит формы регистрации

Проблема 1: Нет label для полей ввода

WCAG: 1.3.1 Info and Relationships (A) Что не так: Поля используют только placeholder -- скринридер не сообщит назначение поля. Placeholder исчезает при вводе. Исправление:

<label for="name">Имя</label>
<input id="name" type="text" placeholder="Иван Иванов">

Проблема 2: Недостаточный контраст подсказки

WCAG: 1.4.3 Contrast Minimum (AA) Что не так: #999 на белом фоне -- контраст 2.85:1 (нужно минимум 4.5:1 для текста 11px). Исправление:

<div style="color: #595959; font-size: 14px;">Минимум 8 символов</div>
<!-- #595959 на белом = 7:1 -->

Проблема 3: Нет связи подсказки с полем

WCAG: 1.3.1 Info and Relationships (A) Что не так: Подсказка о пароле визуально рядом, но программно не связана с полем. Исправление:

<input id="password" type="password" aria-describedby="password-hint">
<div id="password-hint">Минимум 8 символов</div>

Проблема 4: Нет указания обязательных полей

WCAG: 3.3.2 Labels or Instructions (A) Что не так: Непонятно, какие поля обязательны. Исправление:

<label for="email">Email <span aria-label="обязательное поле">*</span></label>
<input id="email" type="email" required aria-required="true">

Проблема 5: input type="text" для email

WCAG: 1.3.5 Identify Input Purpose (AA) Что не так: type="text" вместо type="email" -- нет клавиатуры с @ на мобильных, нет автозаполнения. Исправление:

<input id="email" type="email" autocomplete="email">

Итого найдено: 5 проблем (3 уровня A, 2 уровня AA). Форма не проходит WCAG 2.1 AA.

Дизайн-бриф: редизайн страницы тарифов

1. Бизнес-цель

Увеличить конверсию страницы тарифов с 2.1% до 4% (переход к оформлению подписки). Вторичная метрика: увеличить долю Pro-подписок с 35% до 50%.

2. Целевая аудитория

Владельцы малого бизнеса, 30-50 лет

• Не разбираются в технических деталях -- им важна понятность
• Сравнивают 2-3 решения, ключевой фактор -- соотношение цены и возможностей
• Боятся «скрытых» платежей и сложных условий
• Решение о покупке принимают сами, но могут советоваться с бухгалтером

3. Требования к дизайну

• Визуально выделить тариф Pro как рекомендуемый (бейдж «Популярный»)
• Чёткое сравнение функций между тарифами (таблица или чеклист)
• Показать экономию при годовой оплате (переключатель мес/год)
• Добавить social proof: количество клиентов, логотипы компаний, отзыв
• Блок FAQ внизу (5-7 вопросов о тарифах)
• CTA с указанием цены: «Начать за 990 ₽/мес»

4. Ограничения

• Брендбук: основной цвет #2563EB, шрифт Inter
• Технические: адаптивность (mobile-first), страница на Nuxt.js
• Юридические: указать НДС, условия возврата, ссылку на оферту
• Не использовать: манипулятивные паттерны (скрытые условия, ложная срочность)

5. Референсы

• Stripe Pricing -- чистота и ясность
• Linear Pricing -- минимализм и фокус на CTA
• AmoCRM (конкурент) -- что улучшить: перегруженная таблица, мелкий текст

6. Критерии приёмки

• Пользователь за 5 секунд понимает разницу между тарифами
• CTA-кнопка видна без скролла на десктопе и мобильных
• Контраст текста WCAG AA
• Скорость загрузки < 2 секунд (LCP)
• A/B-тест готов к запуску

7. Timeline

• Неделя 1: исследование + wireframes
• Неделя 2: UI-дизайн + ревью
• Неделя 3: прототип + юзабилити-тест (5 пользователей)
• Неделя 4: финализация + передача в разработку

10 концепций лендинга языковой школы

1. «Взлётная полоса»

Метафора: карьерный взлёт через язык Цвета: #1E3A5F (тёмно-синий), #F59E0B (янтарный), #F8FAFC (белый) Hero: анимированная взлётная полоса, текст «Ваш английский -- ваш билет наверх», CTA «Начать путь» Tone of voice: мотивирующий, профессиональный Референс: Skyeng (карьерный фокус)

2. «Разговорное кафе»

Метафора: уютное место для общения Цвета: #6B4226 (кофейный), #F5E6D0 (кремовый), #2D5016 (зелёный) Hero: иллюстрация в стиле кафе, люди беседуют, речевые пузыри на английском Tone of voice: тёплый, дружелюбный Референс: Duolingo (дружелюбность) + Headspace (уют)

3. «Код доступа» (нестандартная)

Метафора: английский как пароль к мировым возможностям Цвета: #0F0F0F (чёрный), #00FF88 (неоновый зелёный), #FFFFFF (белый) Hero: терминальный стиль, текст набирается как код: > unlock_career("english"), CTA «Получить доступ» Tone of voice: технологичный, дерзкий Референс: Linear, Vercel

4. «Карта мира»

Метафора: английский открывает мир Цвета: #1B4B73 (океан), #E8D5B7 (песочный), #D4463C (акцент) Hero: интерактивная карта с точками: «Собеседование в Google London», «Конференция в Нью-Йорке» Tone of voice: вдохновляющий, амбициозный Референс: Airbnb (путешествия)

5. «Спортзал для мозга» (нестандартная)

Метафора: тренировка навыка, как мышцы Цвета: #FF4500 (энергетический красный), #1A1A2E (тёмный), #EAEAEA (светло-серый) Hero: прогресс-бар «Level 1 → Fluent», счётчик «сегодня: 3 тренировки», CTA «Начать тренировку» Tone of voice: энергичный, спортивный Референс: Nike Training Club

6. «До и после»

Метафора: трансформация через обучение Цвета: #6C63FF (фиолетовый), #F0F0F0 (серый), #2D2D2D (тёмный) Hero: слайдер «до/после»: слева -- растерянное лицо на созвоне, справа -- уверенная презентация Tone of voice: честный, результатоориентированный Референс: кейсы на Dribbble

7. «Таймлайн»

Метафора: путь от нуля до результата Цвета: #0EA5E9 (голубой), #F1F5F9 (фон), #334155 (текст) Hero: горизонтальная линия: месяц 1 → месяц 3 → месяц 6 с конкретными результатами Tone of voice: конкретный, прозрачный Референс: Linear (продуктовый подход)

8. «Субтитры к жизни» (нестандартная)

Метафора: мир «со включёнными субтитрами» Цвета: #000000 (чёрный), #FFD700 (жёлтый субтитров), #FFFFFF (белый) Hero: фотография рабочей ситуации с жёлтыми субтитрами поверх, как в кино Tone of voice: кинематографичный, ироничный Референс: Netflix

9. «Конструктор»

Метафора: собираешь язык по кирпичикам Цвета: #FF6B6B (коралловый), #4ECDC4 (бирюзовый), #FFE66D (жёлтый) Hero: 3D-блоки складываются в слова, анимация Tone of voice: игровой, лёгкий Референс: Lego + Notion

10. «Переговорная»

Метафора: бизнес-переговоры на английском Цвета: #1F2937 (графит), #D4AF37 (золотой), #F9FAFB (белый) Hero: стильная переговорная комната, текст: «Говорите на языке бизнеса» Tone of voice: премиальный, деловой Референс: McKinsey, Bain

[
  {
    "element": "Поля формы",
    "heuristic": "6. Узнавание, а не вспоминание",
    "severity": "major",
    "issue": "Placeholder вместо label — при вводе пользователь не видит назначение поля",
    "recommendation": "Добавить постоянные label над каждым полем ввода",
    "wcag": "1.3.1 Info and Relationships (A)"
  },
  {
    "element": "Текст подсказки пароля",
    "heuristic": "8. Эстетичный и минималистичный дизайн",
    "severity": "major",
    "issue": "Цвет #999 на белом фоне: контраст 2.85:1, нужно 4.5:1",
    "recommendation": "Изменить цвет на #595959 (контраст 7:1)",
    "wcag": "1.4.3 Contrast Minimum (AA)"
  },
  {
    "element": "Навигация",
    "heuristic": "3. Пользовательский контроль и свобода",
    "severity": "critical",
    "issue": "Нет кнопки возврата — пользователь не может отменить действие",
    "recommendation": "Добавить ссылку 'Назад' или breadcrumbs вверху страницы",
    "wcag": null
  }
]