Новый онбординг. Keemoji keyboard

Новый онбординг
Keemoji keyboard
Что? Зачем? Как?

Что такое онбординг?
Это стартовые экраны при установке приложения. По мере прохождения которых пользователь активирует клавиатуру и знакомится с основными возможностями клавиатуры.

Дефолтный онбординг
Наш дефолтный онборд состоит из 4-х экранов (1 маркетинговый и 3 системных)

Кастомизация (Android)
Так как у нас множество партнерских сборок, то основное требование к онбордингу это широкие возможности кастомизации под партнера и простота имплементации дизайна в разработке.

IOS версия

Вертикальный
и горизонтальный вид

Возможности кастомизации
Кастомизируемые элементы: фон, шрифт, цвет, лого.

Возможности кастомизации
Примеры кастомизаций

Зачем было что-то менять?

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

Итерация 1
Привнесли новые элементы в старую логику. Рестайлинг.

Итерация 1
Привнесли новые элементы в старую логику. Рестайлинг.

Итерация 1
Привнесли новые элементы в старую логику. Рестайлинг.

Итерация 1
Привнесли новые элементы в старую логику. Рестайлинг.

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

UX-исследования

Анализ конкурентов

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

UX Keemoji keyboard

UI-
решения

UI Keemoji keyboard
Максимум анимаций

UI Keemoji keyboard
Примеры анимации экранов

UI Keemoji keyboard
Микроанимации
Большое количество микро-анимаций ограничивает возможности кастомизации дизайна
Анимации имеют ограничения при конвертации в JSON (не поддерживаются сложные выражения и многосоставные анимации

Оптимальное решение

UI Keemoji keyboard
Анимированный сплеш экран под каждого партнера.
С простыми анимациями фейд ин и фейд аут.

UI Keemoji keyboard
Маркетинговые экраны лучше сделать статичными изображениями

UI Keemoji keyboard
Маркетинговые экраны лучше сделать статичными изображениями

UI Keemoji keyboard
Анимируем только шаг 1 и шаг 2