Приложение - инструкция,
которое помогает пользователю правильно использовать бытовую технику с помощью
AR-технологий.
Smart Manual mobile App
Case study
Mobile First Design
КОМАНДА
Kupriyanova
design lead
арт-директор
product менеджер
frontend-разработчик
Разработка дизайна продукта с 0.
Создать фичу, которая поможет увеличить метрику retention rate + учесть в функционале приложения возможность партнерских взаимодействий (монетизации).
ЗАДАЧА
РОЛЬ
UX/UI Design
UX Исследования
СТРАТЕГИЯ
Smart Manual - это электронная версия всех бумажных инструкций к бытовой технике,
но с технологией AR. Оно легко помогает получить доступ к настройкам и режимам, ответит на частые вопросы, а также поможет выбрать и настроить режим для вашей бытовой техники.
По статистике, больше половины людей после покупки новой техники даже не открывают идущую с ней в комплекте инструкцию для пользователя.
А основная часть тех, кто все таки читает, доходит только до этапа распаковки установки и настройки техники. Остальная информация остается не востребованной, пока не начнут появляться проблемы и неисправности.
Проработка такого интерфейса сама по себе достаточно сложная затея.
Много тонкостей и нестандартных деталей. Нет никаких базовых исследований
со стороны клиента и неконкретное ТЗ. Поэтому главный челлендж был в том чтобы понять аудиторию и создать простой и удобный продукт,
с большим функционалом.
ЧЕЛЛЕНДЖ
ИССЛЕДОВАНИЯ
Перед проектирование дизайна интерфейса я всегда провожу исследования
и конкурентный анализ. Нужно было "прощупать" аудиторию, понять будет ли вообще
данное приложение актуальным, а также выделить боль ЦА.
Поэтому я провела опросы.
Опрос подтвердил большинство моих гипотез. 65% опрошенный скачали бы приложение и один раз точно его бы использовали. А 60% людей позитивно отозвались о AR - технологии.
Из опроса стало понятно что основная боль - "много и долго читать, слишком сложно написано". Поэтому одной из основных задач для проектирование интерфейса стало обеспечение легкого и быстрого доступа
к инструкции и переосмысление (редактирование) стандартной и неудобной подачи информации в бумажных инструкциях.
Ведь главное - это доступность информации и простота.
Провести конкурентный анализ было сложно. На русском рынке такой продукт совсем один и не в лучшей форме, поэтому прежде чем приступать к проектированию, еще раз был проведен опрос аудитория о дополнительном функционале приложения, о том как по их мнению должна выглядеть идеальная инструкция для техники. Я получила много инсайтов)
Изначально планируемый функционал после опросов пополнился двумя вещами:

Была придумана фича - интеллектуального подбора режима (например стирки) с советами по средствам для стирки. Эта фича получила 86% позитивного фидбэка.
Была добавлена функция поиска модели техники по фото
Уже на этапе исследования стало понятно,
что у такого продукта впереди много исследований, потому что он новый на рынке, но важно было разработать дизайн и минимальный функционал, который в будущем будет проходить итерации.
После опроса аудитории
я приступила к разработке персон, ориентированных
на достижение цели, прописала user story.
CJM
Было интересно определять проблемы и их решения, возникающие на разных этапах взаимодействия с продуктом. Стало явно понятно, что впереди нас с командой ждут большой пласт качественных исследований, но сначала нужно сделать тестовые макеты.
USER FLOW
Для создания макетов, я выбрала основной пользовательский путь - зашел - нашел инструкцию - читаешь, затем + еще два пути - это поиск модели по фото и использование фичи
WIREFRAMES
Варфреймы и информационную архитектура я рисовала от руки, я люблю так делать, потому что мой мозг в этот момент работает по-другому и эффективнее.
Тестирование lo fi варфреймов мы проивзели внутри команды и небольшой фокус группы. Было весело, варфреймы от руки, всегда имеют некий милый флер, но это нам не помешало нажимать на кнопочки) Для этого я слегка анимировали свои каракули в Фигме.
ВИЗУАЛЬНЫЙ СТИЛЬ
Повторюсь: сложно строить продукт с нуля, когда конкурент только один на рынке, но я пошла таким путем - обратила внимание на интерфейс - решения приложений "умный дом". И взяла некоторые решения интерфейса у них)
Manrope Regular - основной
Open Sans Semi Bold - гротеск для заголовков
ТИПОГРАФИКА
Никаких засечек, шрифты подбирала в первую очередь для удобного чтения информации. Manrope своей "бесхараткерностью" и минималистичностью хорошо подчеркивает гротеск Open Sans.
ЦВЕТ
Цвет как и всегда был долгим предметом обсуждений внутри команды, мы изначально хотели синий и все подобные оттенки, но чем больше мы обсуждали, тем больше склонялись к ощущениям от цвета и эмоциям от взаимодействия. Я предложила команде, оранжевый, но не ярко насыщенный, а приглушенный, ближе к ржавому.
Оранжевый цвет радости и энергии. Мы создаем продукт, который будет работать на человека и инструкция и без того скучная, должна радовать, а не заставлять ощущать спокойствие и уныние со своим синим цветом. Мы проголосовали и утвердили с клиентом.
ДИЗАЙН
ТЕСТИРОВАНИЕ
ЮЗАБИЛИТИ ТЕСТИРОВАНИЕ
Мы провели несколько Юзабилити-тестирований которые позволили нам выявить, какие элементы дизайна были непонятными, а какие нужно было подчеркнуть
ВЫЗОВЫ И РЕШЕНИЯ
  • Анализ конкурентов. Как я и говорила, конкурент прямой был только один, поэтому приходилось искать другие схожие по функционалу приложения чтобы извлечь какие-то интерфейсные решения, чтобы оптимизировать пользовательский опыт и перенять лучшее. Я называю это: "искать параллельное".
  • Также было весьма большим вызовом для меня - это переосмысление инструкции и ее структуры. Важно было как можно проще отобразить процесс настройки оборудования, а значит на каждый шаг настройки нужна была иллюстрация, исходя из опросов. Зачастую в инструкциях просто нет картинок, а значит это дополнительная задача и работа с художником.
  • Для меня стало открытием, насколько важно конкретизировать вопросы для опроса пользователей. И важно задавать один вопрос, а не два в одном)
  • В проекте был типичных дух стартапа - у нас было ТЗ, но недостаточно подробное, мне приходилось многие моменты переодически уточнять через продакта. Либо принимать решения самой вместе с лидом. Так было с цветовой палитрой. А также и переделывать в случае неудачи всегда мне самой, поэтому мне было важно установить личный контакт с клиентом, на встречах. Очень помогла моя интуиция и некоторый опыт в психологии взаимодействия.
  • Этот проект однозначно для меня стал уроком того, что постоянный рост во всех сферах это залог успеха. Потому что неожиданно для себя я обнаружила, то что не так важно обладать суперскими хард скиллами, как важно уметь договориться.
ПЕРСПЕКТИВЫ РАЗВИТИЯ
Что еще мы планировали доделать, но в силу обстоятельств не успели:
  • доработать бэкграунд стартовых экранов, анимацию первого входа, лого, иллюстрации к инструкции
  • проверить одну из важных гипотез: а нужен ли маскот? увеличит и это лояльность и ощущение от продукта? И много всего другого))
  • был создан mvp и базовый UI kit. В котором отображено 3 пользовательских пути, и самый важный функционал.
В будущем по плану, нужно провести А/Б тестирование, юзабилити тесты и А/А тесты. Нужно доработать экраны "отзывы" и продумать механику чат-помощи. В планах в это приложение клиент хотел добавить авто и другую спецтехнику, чтобы расширить целевую аудиторию и использовать приложение не только в домашних условиях.
Сейчас проект из-за отсутствия финансирования в заморозке.
KATERINA KUPRIYANOVA
UX/UI DESIGNER
LINKEDIN
TELEGRAM
WHATSAPP
На главную
KUPRIYANOVA