Москва

ул. Ленинская Слобода, 19
БЦ Омега Плаза, офис 21И

+7 495 255–03–37

hello@itech-group.ru

Ульяновск

ул. Ватутина, 49/2а
офис ITECH.group

+7 8422 24–88–88

hello@itech-group.ru

Краснодар

ул. Красных партизан, 152
БЦ Сенат, офис 904

+7 495 255–03–37

hello@itech-group.ru

Лондон

International House,
24 Holborn Viaduct, EC1A 2BN

+44 203 608 0407

hello@itech.agency

WWF России: разработка корпоративного сайта и платформы администрирования

WWF России

WWF России или Всемирный фонд природы — это национальная российская природоохранная организация, которая реализовала более 200 полевых проектов в 40 регионах России.

Клиент
WWF России
Экспертиза
Проектирование, дизайн, разработка
ДАТА ЗАПУСКА
февраль 2017
new.wwf.ru

Всемирный фонд дикой природы (WWF) — одна из крупнейших независимых международных природоохранных организаций, объединяющая около 5 миллионов постоянных сторонников и работающая более чем в 100 странах. В 1989 году WWF выделил средства на создание в России заповедника «Большой Арктический». Это был первый проект фонда в нашей стране.

WWF России с 2004 года работает в статусе национальной российской организации. В нашей стране у фонда более 17 000 единомышленников, более 30 компаний также, как и мы, являются членами корпоративного клуба и финансируют проекты WWF России.

Цели
  • Увеличить число сторонников WWF России
  • Рассказать о проектах фонда
  • Привлечь внимание к экологическим акциям
  • Укрепить имидж успешной природоохранной организации
  • Фандрайзинг - сбор средств на проекты
Решение
Структурирование информации
Создание удобной, интуитивно понятной навигации
Создание многофункциональ­ной платформы администрирования сайта
Оптимизация скорости загрузки сайта
Создание базы данных сторонников WWF, контактов СМИ и компаний
Мы детально обсудили цели проекта с коллегами из WWF, поделились своими выводами и идеями, убедились, что наше видение совпадает, сформулировали ключевые задачи и приступили к реализации.
Структурировать информацию
первая и определяющая задача

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

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

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

  • O WWF
    O WWF
    WWF и бизнес
    традиционные части корпоративного сайта
  • Как помочь?
    Как помочь?
    Это интересно
    разделы для сторонников, в них попала информация о проектах и способах помочь
  • Материалы
    Материалы
    большой раздел с информацией от пресс-центра
  • Наши работы
    Наши работы
    Регионы
    информацию о регионах работы и проектах фонда мы организовали по принципу промосайтов
Сделать сайт удобным и понятным

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

photo1
Мария Гусева
программист

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

Меньше уровней навигации — важнее роль подачи контента на главной странице и страницах разделов. Ведь информации осталось также много и ее нужно структурировать.
Мы решили использовать виджеты, для чего разработали систему компонентов с набором типовых визуальных и текстовых блоков.
Виджеты
Всего мы создали 31 вид виджетов с различными комбинациями типовых компонентов. Они помогли расставить акценты на важной информации и стали дополнительными элементами навигации по разделам.
Еще один плюс такого решения — администраторы сайта теперь могут самостоятельно создать новую разводящую страницу в 3 простых шага: выбрать типы и размеры виджетов, добавить контент, задать их порядок на странице.
Но, конечно, виджеты не решали часть задач других разделов, связанных, например, с поддержкой проектов фонда, новостями и публикациями. Мы разработали для них полноценные шаблоны страниц с заранее определенными набором и порядком блоков. И предложили объединить шаблонную структуру с виджетами: реализовали возможность добавлять на любую контентную страницу разные типы виджетов. Их можно использовать как элементы call to action или как дополнительные элементы навигации и отправлять пользователей на нужные страницы сайта.
Надежда Сальникова
Надежда Сальникова
руководитель группы контент-менеджеров

Совместно с коллегами из WWF мы провели по-настоящему большую работу с контентом: подготовили, структурировали и разместили в соответствии с созданными шаблонами огромный объем информации. Чтобы заполнить одну страницу на сайте, необходимо было создать минимум 3 элемента основной части страницы и дополнительно от 4 до 12 элементов контента и виджетов правой колонки. Мы создали множество вариантов виджетов, которые должны были сложиться в единую страницу при разных разрешениях экрана. В тесной работе с дизайнерами подбирали изображения и тексты для каждого виджета, изображения для бэкграунда каждой страницы. В Битриксе было создано более 20 000 элементов. В итоге получилось более 500 текстовых страниц, не считая новостей и публикаций.

Плат­форма адми­нист­ри­ро­ва­ния сайта

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

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

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

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

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

Планы развития проекта

Сейчас мы проводим a/b-тестирование нового проекта, делаем интерфейс еще лучше и удобнее, и готовим новый релиз, который облегчит работу с базой сторонников WWF, СМИ и компаний-партнеров.

Другие проекты для

WWF России

2017
Час Земли
2017
Международная экологическая акция
РАЗРАБОТКА — Сопровождение — Хостинг
 
2016
1% россиян
Фандрайзинговая кампания с участием звёзд
РАЗРАБОТКА — Сопровождение
Час Земли
2016
Самая масштабная экологическая акция WWF в мире
РАЗРАБОТКА — Сопровождение — Хостинг
2015
Тест: На какое животное вы будете похожи в 2016 году?
Развлекательная акция для привлечения новых сторонников
РАЗРАБОТКА — Сопровождение
Бореальная лесная платформа
Открытая дискуссионная площадка для компаний, ведущих лесное хозяйство
РАЗРАБОТКА — Сопровождение
Тест: На какое животное вы похожи, когда знакомитесь?
Развлекательная акция для привлечения новых сторонников
РАЗРАБОТКА — Сопровождение
Леопард возвращается на Кавказ
Кампания по восстановлению популяции леопардов на Кавказе
РАЗРАБОТКА — Сопровождение
Час Земли
2015
Самая масштабная международная экологическая акция
РАЗРАБОТКА — Сопровождение — Хостинг
2014
Тест: На кого ты будешь похож 1 января?
Развлекательная акция для сторонников WWF России
РАЗРАБОТКА — Сопровождение
Помоги амурскому тигру
Кампания в защиту амурского тигра
РАЗРАБОТКА — Сопровождение
Тест: На какое животное вы похожи?
Развлекательная акция для привлечения новых сторонников
РАЗРАБОТКА — Сопровождение