Краткое руководство по редизайну некоммерческого веб-сайта [+ Передовой опыт]

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

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

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

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

Давайте погрузимся.

6 этапов успешного проекта некоммерческого веб-сайта

1. Открытие

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

Определите свои цели

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

Понимание аудитории

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

Оцените содержание

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

Аудит сайта

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

SEO-аудит

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

Вот лишь несколько вещей, которые следует учитывать во время SEO-аудита:

• Поддерживает ли ваш сайт структуру хлебных крошек?
• Имеет ли смысл ваша навигация?
• Легко ли пользователям находить важный и актуальный контент на вашем сайте?
• Доходит ли контент до нужной аудитории и нацелен ли он на важные ключевые слова?
• Имеются ли на сайте правильные метаданные? Теги заголовков?
• Есть ли ошибки сервера на вашем сайте?

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

2. Стратегия

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

Контент-стратегия

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

Во время изучения вашей контент-стратегии критически важно учитывать все этапы пользовательского пути аудитории. Как привлечь новых посетителей на ваш сайт и как вы можете облегчить жизнь постоянным посетителям?

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

Информационная архитектура

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

3. UX и дизайн

По мере того, как вы переходите к пользовательскому опыту (UX) и этапу проектирования, вы воплотите в жизнь все свои открытия и стратегию с визуальными эффектами. Удерживая внимание аудитории на этом этапе, вы сможете максимально эффективно удовлетворить ее потребности.

Далее следует дизайн взаимодействия с пользователем (UX), часто в виде прототипов или каркасов, чтобы обеспечить визуальную структуру для каждой страницы. Иногда эти макеты также включают в себя условный текст, который представляет собой краткие фрагменты текста, указывающие на такие вещи, как «Заголовок о нашей благотворительной программе идет здесь». Это может быть полезно для последующих усилий по копирайтингу контента сайта.

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

4. Реализация

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

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

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

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

5. Тестирование обеспечения качества

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

Тестирование QA может проверить, что сайт хорошо отображается на всех устройствах, соответствует стандартам доступности, оптимизирован для скорости и работает в соответствии с требованиями.

6. Доступность

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

Помните, что доступность означает приспособление для всех видов инвалидности, а не только для тех, которые очевидны. Более 13% населения США имеют нарушения зрения. Осознанный переход к обеспечению доступности вашего сайта состоит из небольших изменений, таких как использование правильных цветов, тегов H1/H2 для программ чтения с экрана и добавления замещающего текста ко всем изображениям и графике. Установив эти флажки, вы поможете всем получить положительный опыт на вашем сайте.

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

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

Вот несколько примеров отличных некоммерческих веб-сайтов без кода и с низким кодом.

Примеры некоммерческих веб-сайтов без кода

1. 50 штатов, 50 грантов

Становится лучше: 50 штатов. 50 грантов. Кампания 5000 голосов была построена с использованием веб-флоу. Несмотря на то, что веб-сайт построен на основе шаблона, он по-прежнему отличается большим движением и вовлеченностью и представляет собой более индивидуальный веб-сайт.

Область проблемы: ЛГБТКИА+

Платформа веб-сайта: Webflow

Сайт: https://www.50states50grants.com/

2. Маркетинговая стипендия RiseUP

RiseUP Marketing Fellowship — это целенаправленная маркетинговая стипендия, которая работает над увеличением разнообразия, доступа и ощутимого социального воздействия в маркетинговой и рекламной отраслях.

Область проблемы: занятость

Платформа сайта: Squarespace

Сайт: https://www.riseupfellows.com/

Примеры некоммерческих веб-сайтов на основе кода

1. ОПС

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

Область проблемы: Окружающая среда

Платформа сайта: WordPress

Сайт: https://www.opsociety.org/

2. Выезд в США

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

Область проблемы: образование

Платформа сайта: WordPress

Сайт: https://www.outwardbound.org/

3. Миссия Герсона

Миссия Института Герсона заключается в обучении еде как лекарстве, снижении токсического воздействия и создании более здорового мира, в котором Терапия Герсона является не просто жизнеспособным вариантом, но основой лечения хронических заболеваний.

Область проблемы: здоровье

Платформа сайта: WordPress

Сайт: https://gerson.org/

Распространенные ошибки некоммерческого веб-сайта

1. Отслеживание и конверсии

Слишком часто организации забывают перенести и/или настроить отслеживание на новом веб-сайте. По крайней мере, убедитесь, что ваш Диспетчер тегов Google и Google Analytics опубликованы при выпуске веб-сайта.

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

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

2. SEO

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

Как вы ожидаете, что ваши сторонники, волонтеры и защитники найдут вас, если вы не инвестируете в свою стратегию SEO и контента? Примерно 53% людей говорят, что они всегда проводят исследование, прежде чем что-то купить, чтобы убедиться, что они делают наилучший выбор. Это ничем не отличается для некоммерческих организаций.

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

3. Доступность

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

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

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

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

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