Мобильное приложение NE pigments для мастеров перманентного макияжа
Приложение помогает мастерам подбирать цвет пигмента с учётом фототипа кожи и упрощает работу при нанесении перманентного макияжа. За это отвечают встроенный AI и специальные инструменты «Симметрия» и «Подбор пигментов».
NE pigments — это компания по производству пигментов и других средств для перманентного макияжа.
Основатель — автор курсов по перманентному макияжу и фаундер клуба INKUBATOR для бьюти-мастеров Елена Нечаева.
Задача
1
Создать приложение для бьюти-мастеров перманентного макияжа по автоматическому подбору пигментов и определения асимметрии лица
2
Выбрать оптимальную нейросеть для подбора цвета пигмента под фототип кожи, внедрить и обучить её
3
Разработать редактор для нанесения линий симметрии на фото модели
4
Добавить возможность перехода из приложения в магазин NE pigments
5
Сделать приложение максимально удобным и понятным для пользователей
6
Создать инструкцию по использованию с анимированными иллюстрациями
Результат
1
Разработали приложение под две платформы: iOS и Android. На русском и английском языках
2
Создали визуальный стиль. Разработали интуитивно понятный интерфейс и удобную навигацию
3
Внедрили AI-инструмент для подбора пигментов и корректоров
4
Создали инструмент «Симметрия» — для работы с формой бровей
5
Создали обучающие инструкции и около 30-ти анимированных иллюстраций к ним
6
Добавили возможность перейти в магазин NE pigments, и приобрести подобранные пигменты
Функциональность
AI-инструмент для подбора подходящих пигментов и корректоров для бровей по фотографии клиента с учётом его фототипа
Инструмент необходим для построения линий симметрии на фото, это помогает определить асимметрию на лице, которую необходимо скорректировать
Особенности проекта
1
Взаимодействие с клиентом
Обычно мы показываем промежуточные результаты работы по видеосвязи каждые 1-2 недели. Но в этот раз клиент попросил записывать их на видео: наш дизайнер собирал интерактивные анимированные
прототипы дизайна, проходил пользовательские сценарии, комментировал и отправлял на согласование. Так заказчик мог просматривать их в любое удобное время на комфортной для него скорости. Обратную связь мы получали таким же способом.
2
Обучение нейросети
В начале NE pigments хотели использовать ChatGPT, но в процессе внедрения выяснилось, что он часто даёт нерелевантные результаты. Поэтому решили подобрать и обучить другую нейросеть
3
Минимализм в интерфейсе
По просьбе клиента сделали упор на интуитивно понятном дизайне и по-максимуму отказались от текста
4
Создание кастомной камеры
Интерфейс камеры разрабатывали с нуля, потому что из-за особенностей работы стандартной камеры iPhone, нейросеть не могла правильно обрабатывать полученные с неё фото. Поэтому, чтобы приложение распознало лицо и передавала данные AI корректно, провели огромное число вычислений. Также добавили звук затвора камеры, а для имитации вспышки использовали фонарик.
Максим (ios-разработчик)
«В двух словах про интерфейс камеры для iOS: каждый раз, когда приложение получает изображение с камеры iPhone, оно фактически заново его отрисовывает, тем самым создавая новое изображение.»
Результат — всё выглядит настолько реалистично, что пользователи не замечают разницы
5
Когда пользователь получает подборку подходящих пигментов, он также видит фрагмент загруженной фотографии в верхней части экрана. Для реализации этой небольшой детали наши разработчики приложили немало усилий — опять-таки, провели множество вычислений, чтобы приложение автоматически определяло и кадрировало участок c бровями
AI-инструмент подбора пигментов и корректоров
Принцип работы:
нейросеть обрабатывает фотографию и распознаёт фототип, а приложение подбирает подходящее средство на основе этих данных.
Нейросети подбирали, настраивали и обучали специально под NE pigments. В процессе обучения загрузили более 1600 фотографий лиц, чтобы научить различать фототипы и определять наличие перманента.
Фотографию можно сделать прямо в приложении или загрузить из галереи устройства.
Зелёный цвет маски сигнализирует о том, что лицо пользователя находится в наиболее удачной позиции для снимка фотографии.
Нейросеть определяет фототип, а затем распознаёт наличие перманентного макияжа.
Если его нет — приложение подбирает варианты подходящих пигментов. Если есть — показывает подходящие средства для коррекции или предлагает удалить пигмент лазером.
При необходимости приложение предлагает смешать два средства для достижения подходящего цвета.
Инструмент состоит из четырёх нейросетей:
Первая нейросеть определяет фототип по шкале Фитцпатрика
Третья — наличие и цвет старого перманентного татуажа
Четвёртая — подбирает подходящие средства для коррекции
Обнаружен перманент
Подбор корректоров по цвету перманента
Перманент не обнаружен
Подбор пигментов по фототипу
Фильтры
На экранах результатов подбора пигментов нужно было вписать в лаконичный дизайн фильтры с пёстрой гаммой цветов всех пигментов и корректоров, наш дизайнер отлично справился с этой задачей.
Инструмент «Симметрия»
Задача:
Сделать управление профессиональным инструментом простым и понятным, упростить работу по нанесению перманентного макияжа, помочь определить асимметрию на лице, которую необходимо скорректировать.
Полезно начинающим мастерам.
Для работы с симметрией внедрили разные жесты, исключив при этом их наложение друг на друга. Касание экрана одним пальцем — для управления линиями, двумя — для зума и поворота фотографии.
Возможности:
Сделайте фото в приложении или загрузите готовое из галереи устройства, начните работу с инструментом, выставьте по центру лица основные оси симметрии, далее перемещайте горизонтальные и вертикальные линий в нужные позиции.
Фото можно вращать, двигать, масштабировать, когда завершите масштабирование фотографии, зафиксируйте её для удобной работы с линиями. Если хотите начать строить симметрию заново, просто нажмите «Сброс изменений».
Готовое изображение можно сохранить на устройство и переслать.
Создание интерфейса для инструмента «Симметрия» стало одной из самых непростых и интересных задач — мы добивались того, чтобы пользователи интуитивно и без подсказок понимали, как им пользоваться
Дизайн
Фирменный стиль
Дизайн создавали на основании фирменного стиля бренда и предпочтений клиента. Использовали фирменные цвета NE pigments — лавандовый и белый.
COLORS
FONT
Иллюстрации
Клиент просил представлять информацию в виде иконок, без текста.
Но был один нюанс: изображения на иконках были рассчитаны на узких специалистов и поэтому оказались малопонятны для широкой аудитории. Мы предложили клиенту добавить короткие текстовые подсказки, чтобы сделать интерфейс более понятным.
Анимация интерфейса
Идет загрузка изображения
Идет обработка данных ИИ
Подгружается результат
Технические шоколадки
Разверните устройство горизонтально
Ошибка
Обновите приложение
Подходящие пигменты не найдены
Анимация инструкций Симметрия
Когда пользователь впервые видит инструмент в приложении, на экране всплывает пошаговая инструкция с анимированными иллюстрациями. При дальнейшей работе с инструментом инструкцию всегда можно просмотреть, нажав на иконку «Информация»
О приложении
Здесь пользователь может ознакомиться с правовой информацией, оставить отзыв о приложении или написать в чат поддержки, а в разделе Помощь посмотреть информацию о всех функциях приложения.
Обнаружен перманент
Перманент не обнаружен
следующая