15.06.2018
47

Содержание:

 

Часть 1. С чего начинается: что такое продукт, какие есть примеры успешных проектов, почему не всегда нужен сайт и как продавать без него. Главное про идею и теоретическую подготовку перед стартом.

 

Часть 2. UX проектирование.

 

К UX-проектированию можно приступать, когда у вас есть готовый продукт — о нем мы рассказывали в первой части. UX — это User Experience, дословно «опыт пользователя». То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом.

 

С чего стартовать и куда двигаться — в этой статье на примере создания сервиса бьюти-боксов по подписке WOW! TOUCH.

 

Шаг 1. Портреты пользователей

 

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

 

Чтобы понять эти потребности и проблемы, нужно составить портрет целевой аудитории — той группы людей, для которой работает бизнес. В целевой аудитории обычно есть ядро — это самые «вкусные» клиенты, которые заказывают регулярно, требуют низких затрат ресурсов со стороны предпринимателя и приносят прибыль. Это ядро — это несколько типовых групп людей.

 

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

 

Вот как выглядит целевая аудитория в общем на нашем проекте-примере:

 

Возраст: от 20 до 50 лет.

Пол: Женщины.

 

Характеристики:

  • хотят всегда быть в тренде, поэтому сам проект должен быть и ценностным в плане пользы, и очень модным/трендовым;
  • сидят в инстаграме — важно купить хороший продукт и красиво его запостить, чтобы получить социальное одобрение у своего окружения;
  • для них важен баланс между «быть» и «казаться»: продукт должен выделять их уникальность и давать реальную пользу;
  • обращают внимание и на дизайн, и на пользу продукта, и на отдельные детали;
  • принимают решение о покупке эмоционально, важна сопричастность к крутому проекту.

 

Доход: средний и выше среднего (от 300 $/мес).

 

Болевые точки:

  • нет времени на работу с косметологом;
  • нет денег на индивидуальную работу с косметологом;
  • бессистемный подход к уходу за кожей;

 

Мы создавали портреты в Google Таблицах — так легко упорядочить разноплановую информацию.

 

Сначала выделили основные параметры, которые нужны для анализа — под каждый отведен свой 1 столбец:

параметры ЦА

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

 

Получилось так:

персонаж покупателя touch

На этом этапе важно как можно детальнее расписать общую целевую аудиторию и выделить персонажей. Подробно об этом этапе мы писали в статье «Целевая аудитория и персонаж покупателя: что, как, зачем» — почитайте ее, прежде чем продолжать.

 

Шаг 2. Информационная структура

 

Дальше — ментальная (она же информационная) карта — Mind map. Майндмэппинг помогает продумать разные сценарии поведения пользователя и на основе этого пути дать клиенту то, что нужно.

 

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

 

Удобный инструмент для майндмэппинга — mindmup.com. Он бесплатный, с простым понятным интерфейсом и возможностью импорта карты на Google Диск.

 

Вот как выглядит информационная структура для нашего проекта:

информационная структура

Дополнительно пропишите прогнозируемый путь от входа на сайт до закрытия сделки:

от входа на сайт до закрытия сделки

Шаг 3. Создание бумажного прототипа

 

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

 

На этом этапе закладывается основа поведенческих факторов:

  • расположение УТП;
  • меню, расположение кнопок;
  • формат и размещение форм (открытого и закрытого типа);
  • порядок блоков на посадочной странице.

 

К сожалению, бумажных прототипов для WOW! Touch не сохранилось 🙁

прототипа не сохранилось

Но вот как они могут выглядеть:

бумажный прототип сайта

Шаг 4. Интерактивный прототип

 

Заключительный этап UX-проектирования — создание интерактивного прототипа, то есть оцифровка того, что мы на прошлом этапе рисовали карандашиком на бумаге.

 

Для создания интерактивного прототипа рекомендуем десктопную программу Axure RP: у нее широкий функционал для web- и mobile-разработки и тарифы от 29$/месяц с 10-дневным бесплатным trial-периодом.

 

Вот как выглядит интерактивный прототип, на основе которого дальше будет создаваться сам сайт:

интерактивный прототип сайта

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

 

Слева отображается структура прототипа — вот она:

структура прототипа

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

 

Дальше материалы по UX-проектированию передаются UI-дизайнеру. Он отвечает за финальные физические характеристики проекта: условно говоря, какого цвета будет сайт, удобно ли будет кликать по кнопочкам и читать текст.

 

UI-дизайнер доведет наработки «до кондиции» для начала реализации — но только от UX-проектирования зависит, каким будет «фундамент» веб-сайта. Не пренебрегайте этим этапом, и конечный результат вас порадует.

 

До скорого!

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться



В версии 2.0

  • Существенно доработан интерфейс
  • Появилась возможность добавлять фразы
  • Добавлена поддержка "serpstat.com"
  • Добавлена возможность выгрузить слова через запятую
  • Добавлена возможность выгрузить фразы в кавычках
  • Появилась кнопка "Добавить" из буфера обмена, копируйте и вставляйте в расширение ранее собранные списки
  • Добавлена возможность закрепить окно расширения или скрыть его для вашего удобства
  • В analytics.google.com расширение больше не работает

Обновлены комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • ALT + LeftMouseClick - для сбора фраз