Как создать ведущий веб-сайт для продукта, который ранее никогда не существовал? Это была наша задача при разработке адаптивного веб-сайта для Preception.io: как проектировать для пользователей, которым присуще недоверие к незнакомым.
Прежде чем мы начнем, немного о Preception:
Preception это программа когнитивных тренировок, предназначенная для повышения пространственной осведомленности спортсменов и процессов принятия решений в реальной командной среде. Это инструмент, использующий портативную технологию для измерения фактора «это», который ощущают тренеры при поиске наиболее перспективных спортсменов, и никак не может его измерить… до сих пор.
Так в чем же подвох?
Preception все еще находится на стадии альфа-прототипирования. Цель нашего клиента состояла в том, чтобы привлечь больше инвесторов и осведомленности о Preception, однако мы не смогли поделиться какими-либо эмпирическими данными о его эффективности из соображений конфиденциальности.
Бизнес-цели и цели проекта
После встречи с нашим клиентом мы смогли определить бизнес-цели для Preception: привлечь инвесторов. Однако из-за большого объема контента, который мы не смогли использовать, целью нашего проекта было создание платформы, которая вызвала бы достаточный интерес у пользователей, чтобы обратиться к Preception и связаться с командой.
Мы хотели создать разговорный сайт, где у пользователей может быть достаточно ответов на вопросы, чтобы завоевать доверие команды. Нам также нужно было сохранить достаточно тайны, чтобы побудить пользователей дотянуться и узнать больше, а с ограничениями по содержанию моя команда и я стремились к этому вызову.
Исследования
К счастью, наш клиент пришел с множеством ранее проведенных исследований. Он предоставил нам сравнительный / конкурентный анализ, сделанный на ранних стадиях идеи Preception, который мы затем дополнили нашим собственным исследованием.
Конкуренты Preception (перечислены вверху) имеют цветовую кодировку, соответствующую специфическая область промышленности, в которой они живут.
В двух областях была высокая плотность конкурентов: спортивная психология для отдельных людей и сила и подготовка для элитных команд. Заповедь заполняет пробел, проводя когнитивную подготовку для про / элитных команд.
Интервью и опросы
К сожалению, мы не смогли получить много ответов от нашего опроса. Мы отправили по электронной почте спортивные организации, отправили сообщения в различные группы Reddit для тренеров и спортивных энтузиастов, а также установили личные связи в отрасли. Из-за очень специфической ниши, в которой находится наш клиент, было трудно услышать от нашей целевой аудитории в широком масштабе.
При этом 17 ответов, которые мы получили, дали нам некоторые ключевые идеи:
Мы провели 3 интервью с предыдущими клиентами / нынешними инвесторами и спросили их, каковы основные мотивы, которые заставили их инвестировать. Мы заметили, что доверие было важным фактором при принятии решения инвестировать в Preception.
Одна инвестор упомянула, что после прочтения книги нашего клиента относительно программы, она сразу же покачнулась. Она провела собственное исследование, и после встречи с нашим клиентом у него появилось чувство доверия к нему и продукту.
Еще один фактор, который возник, заключался в том, насколько оригинальной была идея. Как упоминалось в анализе CC, была высокая плотность организаций, сосредоточенных на различных секторах отрасли, в основном с физическими лицами и в области спортивной психологии. Программа Preception восполнила пробел, о котором мало кто даже знал, и который заинтриговал инвесторов.
«На рынке нет такого продукта, как этот»
«Это ультрасовременный… никто не делает этого ! »
« Покажите мне, что он делает, данные и анализ, а также улучшение игрока (ов) »
После разговора с нашими контактами последовательно возник другой фактор: Чтобы привлечь других инвесторов, нам нужно было показать им, как именно Preception работает, используя факты и данные.
После того, как мы опросили наших целевых пользователей, мы знали наши пользовательские цели:
Доски настроения
Во время этого проекта мы также отвечали за часть пользовательского интерфейса. Это было захватывающее испытание, так как ранее мы фокусировались исключительно на элементах UX в прошлых проектах.
Работая в тесном контакте с нашими коллегами, сфокусированными на пользовательском интерфейсе, у нас было четкое понимание различных вовлеченных аспектов. На этапе планирования мы встретились с нашим клиентом во второй раз и подарили ему наши доски с надписями и стилями.
С самого начала нашего дизайна нам приходилось придумывать модные слова, цвета и чувства, которые мы чувствовали себя заключенными в духе Приятия. Доска настроения — это набор изображений, которые изображают чувства, которые мы хотим выявить на сайте. Это также происходит, когда мы начинаем играть с цветами и выяснять, как мы хотим, чтобы общая эстетика выглядела.
Плитки стилей
Плитка стилей — это снимок того, как страницы могут выглядеть, когда экраны высокой четкости завершены. Цветовая схема более или менее укреплена, и вы начинаете выбирать различные шрифты, а также любую иконографию или графику. Мы представили два различных направления дизайна нашему клиенту, выбирая между более минималистичным дизайном — с большим количеством белого пространства и золотыми акцентами — и более затемненной плиткой, наполненной темным синим и геометрическими формами.
Нашему клиенту понравился «Острое» ощущение темного блюза, так что это направление, в котором мы решили пойти при разработке наших экранов высокой четкости.
Affinity Diagram
Теперь, когда у нас есть все наши качественные данные из опросов и интервью, мы можем организовать их в диаграмму сходства. Это помогает нам находить закономерности и константы в данных, выяснять, что действительно важно для наших пользователей, и как бороться с этими проблемами с помощью нашего веб-сайта.
Это помогло нам визуализировать различные важные элементы. Переходя к этапу планирования, теперь у нас были определенные функции, которые мы хотели включить в сайт, чтобы соединить эти разные цели:
- Сильный рассказ
- Данные
- Отзывы
- Командные фотографии и краткие описания их ролей (для повышения доверия)
- Контактная форма
Планирование
Персона и Раскадровка
Теперь, когда мы провели наше исследование, мы смогли придумать персону; вымышленный пользователь с целями и болевыми точками на основе нашего исследования.
Без лишних слов, познакомьтесь с Энтони!
Энтони Макдональд — бывший тренер UBC Thunderbirds, а теперь инвестор в различные спортивные организации. Он расстроен, потому что его команды не улучшаются достаточно быстро и постоянно проигрывают в играх, и ему трудно найти эффективную учебную тактику.
В приведенной ниже раскадровке показаны болевые точки Энтони и то, как Preception поможет ему в этом. его цели. Раскадровки — это инструмент, помогающий нам сочувствовать нашим пользователям и, подобно персонам, помогающий нам помнить аудиторию при разработке интерфейсов.
Поток пользователей
Поток пользователей — это идеальный способ перемещения нашего пользователя по сайту; какую информацию они будут искать в первую очередь, какие страницы они будут посещать и в каком порядке и т. д. Наш поток пользователей был довольно простым для этого сайта с пятью основными этапами:
- Войти на домашнюю страницу
- Прочитайте о четырехэтапном процессе Preception: наблюдать, ориентироваться, решать, действовать. Процесс, который они обучают своих спортсменов выполнять более быстрым и эффективным способом посредством строгой тренировки
- Читать о системе Preception On Demand. Сюда входят их основные методы обучения и оценки: аппаратные средства, программное обеспечение и аналитика.
- Прочитайте о показателях производительности Preception (т.е. какие аспекты они оценивают, наблюдая за своими спортсменами и анализируя их производительность)
- Наконец, после прочтения предыдущих страниц они уверенно связывались с Preception, чтобы получить больше информации.
Проектирование и тестирование
Перед запуском наших каркасов мы сначала собрал нашу команду и провел групповое упражнение под названием «студия дизайна». Во время этого упражнения каждому члену команды понадобилось бы две минуты, чтобы молча набросать свое представление о том, как будут выглядеть определенные экраны. После того, как время истекло, команда по очереди обсуждает свой эскиз и то, что им нравится и не нравится в каждом экране.
Студия дизайна — отличный способ убедиться, что каждый член команды находится на одной странице. при разработке бумажных прототипов.
Мы хотели постараться сделать наши страницы максимально простыми, что не оказалось слишком сложно, учитывая, что у нас было ограниченное количество полезного контента для начала.
Мы закончили тем, что создали несколько страниц, однако, домашняя страница была длинной прокруткой, которая содержала краткий обзор каждой другой страницы (с CTA для поощряйте пользователя «узнавать больше»).
Однако, когда мы тестировали прототипы, мы обнаружили несколько элементов, которые вводили пользователей в заблуждение:
На странице метрик производительности для мобильных экранов, мы обнаружили, что тестерам не было ясно, что каждая строка была прочитай описание. В итоге мы сделали линии более похожими на кнопки, чтобы тестерам стало понятнее, что они могут нажимать на них.
Кнопки тестировались с пользователями гораздо лучше, поскольку они с готовностью нажимали на них, однако они были не в состоянии увидеть понимание, которое появилось в нижней части экрана. Для борьбы с этим мы открыли кнопки в стиле аккордеона, чтобы информация была легко доступна пользователям (см. Ниже).
На странице Preception On Demand System (POD System), изначально Идея заключалась в создании кликабельных значков, которые затем можно было бы развернуть, чтобы показать описания каждого элемента, аналогично системе метрик данных. Однако, благодаря различным итерациям, значки никогда не были понятны пользователям, что они были кликабельны, даже после тестирования hi-fi и добавления раскраски. Чтобы бороться с этим, мы закончили тем, что поместили весь текст на одной странице и оставили изображение в виде не кликабельных значков (показано ниже).
Будущие соображения
Если бы у нас было больше времени с этим проектом, мы могли бы кое-что улучшить или добавить:
- Больше изображений и / или видео о технологии Preception в действии. Мы не смогли использовать их для этого проекта, однако добавили бы их в будущем, чтобы повысить доверие к пользователям, поскольку это было очень важным вопросом в ходе наших исследований.
- Твердые данные. Наш клиент получил несколько количественных результатов от тестирования, которое он ранее проводил, но мы не смогли добавить их в настоящее время. Как только будет проведено дополнительное тестирование и результаты станут более стабильными, их можно будет добавить на веб-сайт.
- Цена продукта.
С этими изменениями мы ' Мы уверены, что сможем повысить доверие пользователей к продукту и, в процессе, достичь бизнес-целей нашего клиента и привлечь инвесторов.
Этот сайт было непросто создать из-за ограничений в содержании, однако благодаря нашему Тестирование и итерации позволили нам создать продукт, который преодолел разрыв между нашими тремя целями: интуитивно понятный и обучающий веб-сайт для нашего клиента, чтобы привлечь инвесторов и повысить узнаваемость бренда Preception.
Загрузка...
