Экопроект «Великий пластиковый океан»
Лонгрид о проблеме загрязнения Мирового океана. Ресерч, сторителлинг и визуальные метафоры.
Задача
Разработать сайт о проблеме загрязнения Мирового океана пластиком:
- рассказать о глобальности проблемы и способах ее решения;
- о том, что даже за счет небольших действий каждый человек может внести вклад в решение этой проблемы;
- привлечь внимание пользователя с помощью понятной структуры и визуальных средств.
О проблеме:
Загрязнение океана влияет на здоровье и качество жизни человека + критически влияет на окружающую среду. Поэтому важно обратить внимание людей на этой проблему и начать решать ее более интенсивно.
Какие задачи решала в рамках проекта
- Составление аватаров пользователей;
- Ресерч;
- Разработка структуры сайта;
- Проработка текстов;
- Разработка дизайна;
- Верстка сайта на Tilda.
С чего я начала
Изучила существующие сайты на эту тему.
Полноценных сайтов на русском языке на эту тему я не нашла. Только статьи на информационных порталах, которые не удерживают внимание пользователя:
- размещены единым полотном текста,
- изредка разбавляются фотографиями,
- почти нет визуальных триггеров.
Таким образом, люди видят сложные статьи в виде длинных текстов. Чтобы получить информацию, им нужно долго вникать в текст, вычитывать его и выделять главное. Создается логическая цепочка: сложные статьи = сложная проблема.
Нужно было сделать сайт:
- доступным и легко считываемым;
- визуально привлекательным, чтобы удерживать интерес пользователя;
- сразу показать на сайте примеры конкретных действий, многие из которых не сложны в выполнении.
Составление аватаров пользователей
Я решила адаптировать лонгрид под 2 основных направления:
1) Повседневная жизнь. Внедрение небольших привычек, которые помогут улучшить ситуацию, в обычную жизнь.
2) Направление бизнеса. Если у человека есть свой бизнес, или он работает в компании, то он может влиять на проблему в рамках своей деятельности. От маленьких действий (по типу установки корзин для раздельного сбора мусора) до проведения акций и экологических проектов.
Мне хотелось показать конкретные примеры действий для обоих направлений.
1) Повседневная жизнь. Внедрение небольших привычек, которые помогут улучшить ситуацию, в обычную жизнь.
2) Направление бизнеса. Если у человека есть свой бизнес, или он работает в компании, то он может влиять на проблему в рамках своей деятельности. От маленьких действий (по типу установки корзин для раздельного сбора мусора) до проведения акций и экологических проектов.
Мне хотелось показать конкретные примеры действий для обоих направлений.
Опрос
Дальше я провела опрос среди людей, которые заинтересованы в данной проблеме и хотели бы решать ее на бытовом уровне или на уровне своей деятельности.
Что сделала после опроса:
Дальше я провела опрос среди людей, которые заинтересованы в данной проблеме и хотели бы решать ее на бытовом уровне или на уровне своей деятельности.
Что сделала после опроса:
- составила 2 основных портрета пользователей;
- выявила их ключевые страхи и потребности.
Страхи:
- Ситуацию уже нельзя изменить / сложно изменить
- На инф. порталах будет сложно воспринимать информацию (текст будет написан научным языком, будет однообразным неструктурированным без визуального подкрепления);
- Будет текст только о проблеме, не будет сведений о ее решении на конкретных примерах;
- Не получится быстро найти информацию;
- Текст на сайте не будет иметь доказательной базы.
Потребности:
- Узнать больше о проблеме загрязнения океана, чтобы улучшить качество своей жизни и жизни близких;
- Найти информацию о том, как сделать свой бизнес/компанию более экологичной;
- Найти организацию, которой можно помогать;
- Найти визуально приятный современный ресурс, который будет интересно читать, где информация понятным языком без воды.
Структура сайта и тексты
На основе собранной информации составила структуру сайта. Я решила погружать пользователя в проблему через формат сторителлинга.
Для этого выделила следующие шаги:
Для этого выделила следующие шаги:
- Обозначаю тему сайта для понимания, о чем дальше пойдет речь.
- Ввожу в контекст: рассказываю, об истоках проблемы, снабжаю раздел фактами в цифрах.
- Глубже погружаю в историю: рассказываю о рисках, которые могут произойти, если и дальше ничего не делать. Поселяю чувство напряжения и тревоги.
- Успокаиваю. Рассказываю о способах решения проблемы на конкретных примерах, понятных каждому.
- Привожу доказательную базу: успешный опыт других людей и организаций. Это позволяет показать, что предложенные методы решения правда работают + создается чувство общности (вместе с тобой проблему решает огромное сообщество людей).
- Призыв к действию: показываю, как другие люди привлекают внимание к проблеме, призываю присоединиться к ним и начать действовать.
По итогу человек понимает опасность проблемы, умеренно тревожится, но при этом уверен в себе, т.к. имеет четкий план действий с примерами и ощущает поддержку общества.
Дальше провела ресерч и собрала достоверную информацию о проблеме, вычитала тексты и переработала под формат сайта.
Дальше провела ресерч и собрала достоверную информацию о проблеме, вычитала тексты и переработала под формат сайта.
Визуал
Цветовое решение
В каждом разделе сайта цвет передает определенное настроение.
1. Глубокий синий фон для раздела «Истоки проблемы» – цвет, отсылает к глубинам океана, вызывает эмоциональное напряжение, призывает «нырнуть глубже» и узнать о проблеме больше.
2. Серый цвет для раздела «Последствия проблемы» – метафора на то, что нас ждет, если не решать проблему – увядание жизни, гибель природы. Цвет усиливает ощущение тревоги.
В каждом разделе сайта цвет передает определенное настроение.
1. Глубокий синий фон для раздела «Истоки проблемы» – цвет, отсылает к глубинам океана, вызывает эмоциональное напряжение, призывает «нырнуть глубже» и узнать о проблеме больше.
2. Серый цвет для раздела «Последствия проблемы» – метафора на то, что нас ждет, если не решать проблему – увядание жизни, гибель природы. Цвет усиливает ощущение тревоги.
3. Небесно-голубой фон для раздела «Решение проблемы» — яркий светлый цвет как символ того, какая яркая жизнь нас ждет, если начать действовать. Также это отсылка к воздушной стихии — именно здесь, над водой, живут люди, в чьих руках решение проблемы. Цвет успокаивает пользователя, передает ощущение, что проблема решаема.
4. Заканчивается сайт снова глубоким синим — чтобы снова ввести человека в небольшое напряжение, напомнить о серьезности проблемы, призвать собраться с силами, не откладывать и действовать уже сейчас.
4. Заканчивается сайт снова глубоким синим — чтобы снова ввести человека в небольшое напряжение, напомнить о серьезности проблемы, призвать собраться с силами, не откладывать и действовать уже сейчас.
Дизайн-элементы сайта
Мне хотелось передать на сайте ощущение, что здесь пользователь сможет легко вникнуть в проблему и найти для себя подходящие решения – здесь не будет чего-то слишком сложного и непосильного.
Поэтому для сайта я выбрала стилистику некого комикса или тетради с рукописными пометками. Для этого в качестве графических элементов я использовала иллюстрации с эффектом dot screen (чтобы они выглядели как стикеры) и рукописный шрифт для «пометок на полях».
Мне хотелось передать на сайте ощущение, что здесь пользователь сможет легко вникнуть в проблему и найти для себя подходящие решения – здесь не будет чего-то слишком сложного и непосильного.
Поэтому для сайта я выбрала стилистику некого комикса или тетради с рукописными пометками. Для этого в качестве графических элементов я использовала иллюстрации с эффектом dot screen (чтобы они выглядели как стикеры) и рукописный шрифт для «пометок на полях».
Чтобы подчеркнуть проблему загрязнения пластиком я использовала пластиковые текстуры на фоне. Также иллюстрации с dot screen, особенно на фоне реальных фотографий, создают ощущение искажения, чужеродности и неестественности.
*В блоке «Последствия проблемы», в отличие от остальных блоков, цветных фотографий нет – это сделано, чтобы усилить ощущение риска гибели всего живого.
*В блоке «Последствия проблемы», в отличие от остальных блоков, цветных фотографий нет – это сделано, чтобы усилить ощущение риска гибели всего живого.
Для донесения ключевой информации я использовала крупную типографику, а важные пункты и статистику оформила в виде карточек.
Итог
Для меня этот проект — про то, как через визуал и структуру можно работать со сложными темами: делать их доступными и мотивировать пользователя.
Я постаралась разработать не просто сайт с фактами, а создать целостную эмоциональную коммуникацию:
Я постаралась разработать не просто сайт с фактами, а создать целостную эмоциональную коммуникацию:
- провела ресерч;
- продумала структуру;
- выстроила сторителлинг;
- использовала визуальные метафоры.
