Как мы создали веб-сайт SaaS, который люди действительно понимают

Пару месяцев назад мы с моей командой наконец взялись за проект, который отделы маркетинга по всему миру (включая наш собственный) продолжают откладывать: мы перестроили наш веб-сайт.

А затем мы увидели рост лидогенерации на 93%.

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

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

1. Устранение препятствий: ограниченное количество заинтересованных сторон и надежный MVP

Самый большой недостаток любого проекта с высокими ставками - слишком много поваров на кухне.

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

Кроме того, чтобы бороться с крайним перфекционизмом, который я часто наблюдал при планировании маркетинговых проектов, мы позаимствовали опыт нашего продукта и настаивали на постепенном выпуске продукта с MVP (минимально жизнеспособным продуктом) и этапами для каждой страницы. Это позволило нам работать быстрее, но также дало возможность постоянно совершенствоваться.

• Работайте в обратном направлении - начните с (реалистичной) даты выпуска и работайте в обратном направлении, чтобы все команды адаптировались к графику, а не давали чрезмерно осторожные оценки.
• Назначьте отдельных заинтересованных лиц - убедитесь, что у вас есть заинтересованное лицо для каждой области, в нашем случае это означает дизайн, контент и продукт. Собирайте отзывы широко, но ограничивайте принятие решений этими людьми.
• Выберите одного владельца проекта - у проекта в целом должен быть один владелец. Этот человек будет нести ответственность за принятие решений в случае конфликта (и будет конфликт).
• Не ждите идеального продукта - создайте MVP для каждой страницы, следите за тем, чтобы он двигал иглу, и рассчитывайте на поэтапный выпуск.
• Разберитесь в деталях и быстро реагируйте - используйте все свои инструменты аналитики и UX, чтобы быстро понять реакцию на выпускаемые вами страницы и повторить их.

2. Важные показатели: постановка целей и ключевые показатели эффективности.

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

Мы определили, что единственный способ выполнить тщательную работу в разумные сроки - это определить ключевые страницы, над которыми нужно работать. Для нас это означало сосредоточить внимание на:

• Домашняя страница
• Выберите страницы продуктов
• Страница с ценами
• Страницы с тематическими исследованиями
• Создание страницы клиентов

Это также означало отказ от нескольких страниц, которые мы хотели обработать, чтобы проект был запущен вовремя.

Чтобы отслеживать успех, мы ставим следующие цели и ключевые показатели эффективности:

• Повышение конверсии в лиды и улучшение качества лидов
• Повышение показателя отказов и увеличение времени на сайте и количества страниц за сеанс
• Улучшение восприятия бренда
• Создание лучшей навигации по сайту
• Обеспечение лучшей экспозиции наших различных продуктов
• Увеличение органического трафика
• Настройка инфраструктуры сайта, которую легко масштабировать

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

• Удовлетворяйте потребности разных компаний - такие показатели, как коэффициент конверсии, показатель отказов и т. Д., - это еще не все. Получите качественные отзывы о сайте от вашей HR-команды, бренд-менеджера, отдела продаж и генерального директора.
• A / B-тест - Да, это кажется очевидным, и вы, вероятно, спешите выпустить свой новый сайт, но вы не хотите избавляться от всего, что хорошо работает. Так что обязательно выпустите все с помощью A / B-теста и внимательно посмотрите на результаты.
• Установите основной KPI - наличие единственной основной метрики поможет вам принимать решения в случае конфликта, в нашем случае это был коэффициент конверсии в лид.
• Выпуск по этапам. Перестройка всего веб-сайта сразу представляет собой риск. Начните с простых и ценных страниц, а затем изучите и адаптируйте свой план.
• Постройте аналитическую инфраструктуру - заранее создайте измерительную инфраструктуру, чтобы вы могли отслеживать влияние на каждый ключевой показатель эффективности.

3. Вдохновляйтесь: есть чему поучиться у каждого.

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

Подумайте о том, сколько сайтов SaaS вы посетили и покинули, не имея реального представления о том, чем занимается компания. «Что-то связано со службой поддержки клиентов? Может быть, электронный маркетинг? » Это то, чего мы пытались избежать. Итак, мы начали с определения того, что нужно посетителям, чтобы по-настоящему понять Yotpo.

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

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

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

4. Что первично: дизайн или контент?

Наш продукт супервизуален, настолько, что посетители должны понимать 70% продукта, даже не прочитав ни слова. Речь шла не только о том, чтобы найти правильный слоган, но и о том, чтобы показать, а не рассказать.

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

Наш замечательный контент-маркетолог Мел использовал фреймворк, ориентированный на дизайн, чтобы усовершенствовать контент-стратегию сайта и разобраться в том, что наиболее важно для потенциальных клиентов: как Yotpo может им помочь. Она провела исследование, чтобы полностью понять индустрию электронной коммерции и типичные болевые точки. Затем она представила решения в быстром и удобном для чтения формате, который дополнил структуру дизайна, а также побудил пользователей предпринять действия, чтобы узнать больше о наших продуктах.

Результатом является прямой, ориентированный на ценность контент, который соответствует характеру и миссии Yotpo, помогая брендам добиться успеха.

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

5. За кадром: страница с ценами

Цели страницы:

Для нас было важно сделать наши цены доступными для понимания. Мы решили сгруппировать наши премиальные планы под одним зонтом, а наш бесплатный - под другим. Таким образом, посетители, заинтересованные в нашей платной подписке, могли легко поговорить с отделом продаж, чтобы узнать больше, а те, кто заинтересовался бесплатным планом, могли сразу начать. Мы также хотели включить подробный FAQ, чтобы задать любые вопросы, которые могут возникнуть у посетителей.

Наша талантливая дизайн-студия - особенно наш арт-директор Шири и старший дизайнер продуктов Элико - взяли эти цели и пошли вместе с ними. В этом и следующих разделах они объяснят стратегию дизайна каждой из ключевых страниц нового веб-сайта.

Стратегия дизайна:

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

6. За кулисами: страницы продуктов

Цели страницы:

Каждая страница продукта, включенная в редизайн, то есть «Обзоры и рейтинги» и «Визуальный маркетинг», должна была объяснять все функции сверхсложного продукта так, чтобы люди могли понять их за пару секунд. Мало того, мы хотели показать разные варианты использования каждого продукта. Например, на странице «Обзоры и рейтинги» это означало объяснение всех аспектов, от того, как работает создание контента до интеграции с Google и Facebook. Хотя страница длинная и всеобъемлющая, на ней мало текста и много визуальных элементов.

Стратегия дизайна:

Мы быстро пришли к выводу, что макеты наших продуктов в действии - это самый простой способ показать посетителям, как они работают. Хотя изначально мы хотели использовать видео, мы придерживались MVP, чтобы своевременно выпускать первые версии страниц.

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

Дизайн «сначала макет» отвечает на ряд других практических вопросов. Во-первых, макеты удобны для мобильных устройств по своей природе как из-за их размера, так и из-за их способности передавать большой объем информации в минималистском формате. В целом, проектирование с учетом мобильных устройств заставляет задуматься о том, что необходимо, а что нет, и это, безусловно, верно в отношении макетов. Мало того, этот формат также легко масштабируется для страниц будущих продуктов по мере роста нашего предложения.

7. За кадром: страница клиентов

Цели страницы:

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

Стратегия дизайна:

Мы хотели рассказать историю о том, как эти бренды росли вместе с Yotpo, а также о том, насколько важен пользовательский контент в целом. Основная часть этих историй - логотипы клиентов и видео-тематические исследования, каждое из которых занимает значительную часть страницы. Кроме того, мы создали новый шаблон тематического исследования, который встроен в эту страницу, чтобы быть максимально гибким, чтобы он мог рассказывать уникальную историю каждого бренда вместо того, чтобы просто включать вопросы и ответы для печенья.

8. За кадром: домашняя страница

Цели страницы:

Прежде всего, цель домашней страницы заключалась в том, чтобы посетители быстро и легко понимали, что делает Yotpo, прежде чем прокручивать страницу вниз. Мы также хотели представить наше многопрофильное предложение и продемонстрировать наш главный актив - наших клиентов. Наконец, домашняя страница должна была служить в качестве шлюза, который побуждал посетителей узнать больше о наших продуктах.

Чтобы убедиться, что мы достигли этих целей, мы усадили сотрудников перед другими домашними страницами SaaS и, пока они перемещались по странице, мы спрашивали их, какой элемент они хотели бы видеть дальше. Основываясь на их ответах, мы поняли, что поток, который нужен большинству людей с домашней страницы, следующий:

Стратегия дизайна:

Нашей самой большой проблемой для домашней страницы было сразу привлечь внимание посетителей. Наше исследование показало, что сегодня многие SaaS-сайты используют красивые иллюстрации для привлечения посетителей, но нам нужно было что-то более существенное, чтобы посетители были вовлечены.

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

В итоге получается страница, которая дает своего рода «крупный план» или обзор продукта с высоты птичьего полета, побуждая посетителей перейти на страницы продукта, чтобы узнать больше.

Наш технический стек

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

• Прототипирование и дизайн - Balsamiq, InVision, Sketch, Photoshop, Illustrator и After Effects
• Аналитика и преобразование - Drift, VWO, Mixpanel, Amplitude, Hotjar, FullStory
• Управление проектами - Smartsheet, Trello

Когда дело дошло до разработки, наш мастер-разработчик Дэвид работал с нашей командой дизайнеров, чтобы оживить сайт. Он использовал компоненты многократного использования по всему сайту и сделал упор на четкость изображения, включив изображения сетчатки почти для всех изображений и по возможности предпочитая SVG (масштабируемую векторную графику) файлам PNG. Он также много работал в SCSS, чтобы получить доступ к большему количеству опций при разработке сайта.

Вывод

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

1. Назначьте одного владельца проекта и сведите к минимуму количество заинтересованных сторон.
2. Определите реалистичный масштаб проекта.
3. Оцените, какие страницы следует удалить, а не переделывать.
4. Ставьте четкие цели и ключевые показатели эффективности.
5. Выберите единственный основной KPI.
6. Черпайте вдохновение с других сайтов.
7. Поймите самый простой и эффективный способ объяснить ваш продукт.
8. Руководствуйтесь дизайном везде, где это возможно. Контент может следовать за ним и станет сильнее.
9. Пойдите для постепенного освобождения.
10. A / B тестируйте все.

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