Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / Дизайн мобильного интерфейса и авторское сопровождение

2019

Дизайн мобильного интерфейса и авторское сопровождение

Помогли Деду Морозу запустить мобильное приложение с поздравлениями

Цена

~ 950 000 ₽

Сроки

Результат

Убрали из публичного доступа
Дизайн мобильного интерфейса и авторское сопровождение

У заказчика уже был сайт. К нам он пришел разработать приложение.

Белая борода, мешок подарков и мобильное приложение

Дед Мороз старый, но вовсе не отсталый. Откуда мы это знаем? А мы помогали ему сделать мобильное приложение для видеопоздравлений. Сайт, между прочим, у него уже есть.

Сам Дед Мороз классный — детям нравится (и вообще, вы посмотрите на эту бороду!) И поздравления настолько хороши, что дети их даже летом пересматривают. Дед и по имени ребенка назовет, и за школьные и прочие успехи похвалит, и куча всего еще.

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

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

Дизайн приложения для Деда Мороза | SobakaPav.ru Из пожеланий клиента: новогоднее настроение круглый год

Как мы интерфейс для дедушки рисовали

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

Логика интерфейса приложения для Деда Мороза | SobakaPav.ru

Логика интерфейса приложения для Деда Мороза | SobakaPav.ru

Логика интерфейса приложения для Деда Мороза | SobakaPav.ru

Логика интерфейса приложения для Деда Мороза | SobakaPav.ru

Так мы могли показывать заказчику не отдельные картинки, а целые сценарии в действии.

Начало сценария «Создать поздравление». Приложение для Деда Мороза | SobakaPav.ru Начало сценария «Создать поздравление»

Продумав и утвердив логику интерфейса, мы занялись визуальными решениями.

Визуальные решения. Приложение для Деда Мороза | SobakaPav.ru Ищем визуальное решение

Предложили заказчику несколько дизайн-концептов, он выбрал один. Доработали концепт, начали детализировать интерфейс и делать прототип.

Визуальные решения. Приложение для Деда Мороза | SobakaPav.ru Уточняем визуальное решение

И вот что получилось. Интерфейс для родителей

Основной родительский сценарий — создать поздравление в конструкторе.

Если это первое поздравление, нужно заполнить анкету ребенка. Выбрать имя из списка или добавить новое, если нужного нет. Если пол не очевиден по имени — уточнить. Если указать день рождения, Дед Мороз потом сможет поздравить ребенка еще и с ним.

Сценарий создания поздравления в конструкторе. Приложение для Деда Мороза | SobakaPav.ru Анкета ребенка

В анкете — постоянная информация о ребенке. Конкретное поздравление можно детализировать еще сильнее.

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

Сценарий создания поздравления в конструкторе. Приложение для Деда Мороза | SobakaPav.ru Можно добавить детали, которые сделают подарок личным

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

Сценарий сохранения поздравления в конструкторе. Приложение для Деда Мороза | SobakaPav.ru Подарок готов, можно дарить

Что еще может понадобиться родителям от этого интерфейса? Выбрать поздравление в магазине. Подарить поздравление ребенку друзей. Удалить или восстановить видео.

Магазин видеопоздравлений. Приложение для Деда Мороза | SobakaPav.ru

Видеопоздравление для нескольких детей. Приложение для Деда Мороза | SobakaPav.ru

Как видите, это уже не просто конструктор поздравлений, а чуть более сложная штука.

Но ведь приложением будут пользоваться не только родители, но и дети.

Нужен отдельный детский интерфейс.

И вот что получилось. Интерфейс для детей

Плохой детский интерфейс — как фальшивая елочная игрушка. Разобраться-то в нем ребенок разберется, но радости никакой.

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

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

Навигация — настолько простая, насколько это вообще возможно. У нас вот — только кнопки «Вперед» и «Назад» и свайп.

Еще, кстати, дети держат телефоны не так, как взрослые.

Как дети держат мобильные телефоны | SobakaPav.ru Вот так. И надо убедиться, что до любого контрола при этом легко дотянуться

В первом релизе детский режим реализовать не успели. Но дизайн интерфейса для него мы уже сделали.

Детский интерфейс. Главный экран и онбординг. Приложение для Деда Мороза | SobakaPav.ru Детский интерфейс. Главный экран и онбординг

В детском режиме — личная комната ребенка.

В комнате ребенка хранятся поздравления. Детям нравится их пересматривать даже летом.

Детский интерфейс. Комната ребенка, в которой хранятся видеопоздравления. Приложение для Деда Мороза | SobakaPav.ru Детский интерфейс. Комната ребенка, в которой хранятся видеопоздравления

Что за маленькая неинтересная кнопка в верхнем углу? А это для взрослых — переход в родительский интерфейс.

Погодите, это еще не все

Мы передали этот проект в разработку, но до самого запуска будем продолжать авторское сопровождение.

К примеру, нужен дизайн страниц приложения в AppStore и GooglePlay — рисуем дизайн страниц.

Страница приложения в AppStore. Приложение для Деда Мороза | SobakaPav.ru Страница приложения в AppStore

Или заказчик предлагает скорректировать логику интерфейса: убрать регистрацию «по умолчанию». Разумно — люди не любят регистрироваться без особой на то причины.

Сценарий авторизации. Приложение для Деда Мороза | SobakaPav.ru Пускай приложение предлагает пользователю не зарегистрироваться, а создать видео. А поскольку поздравления строго индивидуальны, регистрация и заполнение анкеты не раздражают. Для них есть ясная причина, а не «нам нужно больше, больше регистраций»

Реализуем новую логику в дизайне, корректируем макеты — и так пока приложение не выйдет.

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

Смысл

  1. В этом проекте самое для нас интересное — детский интерфейс. Тем более что мы делали его впервые. Теперь знаем: надо как для взрослых, только лучше.
  2. Авторское сопровождение — не роскошь, а нормальная часть рабочего процесса.
  3. Дорогой Дедушка, если ты это читаешь, подари мне, пожалуйста, котенка.

Ничего страшного, если концепция меняется на лету. Поймаем и сделаем.

Цена

~ 950 000 ₽

Сроки

Результат