← Назад Медитации

Медитации без лишнего шума

MobileWellnessMVP
Макет мобильного приложения для медитаций

Проблема

Бизнес:

Люди быстро теряют интерес к приложению, перестают выполнять практики и бросают его

Пользователь:

Человеку сложно отслеживать изменения состояния и собственный прогресс, поэтому снижается мотивация продолжать занятия

Задача

Создать мобильное приложение, которое делает эффект от регулярных медитаций заметным и поддерживает мотивацию к занятиям

Решение

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

Результат

  • Бенчмаркинг и User Flow
  • Концепт и UI-дизайн
  • Сценарии от онбординга до профиля
  • Прототип и UI-kit

Процесс

  1. Исследование и визуальное направление

    Проект начался с постановки задачи от PM и изучения пользовательских сценариев. Я провела бенчмаркинг приложений для медитации и wellness, а также собрала референсы для поиска подходящего визуального стиля

  2. Поиск концепции

    Сначала разработала несколько экранов онбординга и протестировала разные визуальные решения. После нескольких итераций с PM был выбран стиль, который стал основой всего интерфейса

  3. Ключевые сценарии

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

  4. UI Kit

    По мере проектирования экранов сформировала компактный UI Kit, собрала основные компоненты и стили, проработала состояния интерфейса

  5. Финальные материалы

    После завершения интерфейса разработала материалы для публикации приложения в App Store: иконку и набор маркетинговых скриншотов

  6. Передача в разработку

    Подготовила финальные макеты и спецификации для команды разработки и передала проект в реализацию

Wireframes

Наброски, которые мне передал ПМ для работы

Wireframe первого экрана приложения
Wireframe второго экрана приложения
Wireframe третьего экрана приложения
Wireframe четвёртого экрана приложения

Benchmarking

Референсы помогли определить характер интерфейса:
чистую композицию, спокойную типографику и понятные сценарии

stoic.Минимализм
Stoic: выбор эмоционального состояния
HeadspaceЧистота визуала
и простота
Headspace: выбор языка
Тёплые оттенки
Headspace: опыт медитации
Таймлайн и прогресс
Headspace: таймлайн пробного периода
Ten Percent HappierПозитив
Градиенты,
песочный и розовый
Ten Percent Happier: стартовый экран
Округлые, спокойные
шрифты без засечек
Ten Percent Happier: источник знакомства с приложением
1 действие на экран
Прогресс и плитки
Ten Percent Happier: выбор целей
Медитация
Calm SleepАбстрактные формы,
лёгкие градиенты
Calm Sleep: экран медитации
AheadАбстрактные формы,
персонаж
Ahead: экран медитации с персонажем
SnapchatЯркость, позитив,
простота
Snapchat: яркий экран мини-медитации
Рефлексия
AtomsИспользование смайлов
для градации
Atoms: рефлексия с градацией через эмодзи
Me+Использование смайлов
для градации
Me+: рефлексия с эмоциональной шкалой

User Flow

Схема пользовательского пути в приложении для медитаций

Макеты основных экранов

Онбординг
Макеты онбординга приложения для медитаций

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

Главная
Главный экран приложения для медитаций

На главной расположены карточки с медитациями: 2 открытые и остальные — по подписке. У медитации есть 2 режима: короткая и длинная

Экран трекинга медитаций, пейвол и профиль
Экран трекинга медитаций, пейвол и профиль приложения

На экран отслеживания практик добавлена возможность поделиться аффирмацией для органического роста. На пейволе сначала ещё раз рассказываем пользователю о ценности, которую он получит, занимаясь практиками, показываем положительные отзывы и FAQ

Наверх Дальше На главную