Многостраничный сайт заповедника

Продукт:
многостраничный сайт
Роль:
проектирование, дизайн и сборка сайта на Tilda
Срок работы:
3 недели
Адаптивы:
desktop / tablet / mobile
Перейти на сайт

Кратко о кейсе:

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

Главная страница десктопной версии

Результат

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

Задача и контекст

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

Страница с мерчем заповедника

Результаты проведённого анализа

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

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

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

В ходе анализа конкурентов я обратила внимание на длину строк: в одном из текстовых блоков она составляла 121 символ. Для сравнения, согласно исследованию Baymard Institute, оптимальная длина строки для основного текста составляет 50–75 символов. Слишком длинные строки затрудняют чтение и могут снижать желание пользователя знакомиться с контентом.

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

Я запустила опрос в Google Forms, чтобы понять, что важно молодой аудитории при взаимодействии с заповедником.

В опросе приняли участие 21 человек, 85,7% — в возрасте 17–30 лет. Для 66,7% тема охраны природы интересна на 3–5 баллов. При этом 61,9% заинтересованы в возможности помочь конкретному животному, а 57,1% хотят понимать, на что пойдут их деньги.

Реализованные решения

1. Адаптация фирменного стиля под веб

Задача:

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

Как я это сделала:

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

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

Результат:

На основе существующего гайдлайна была сформирована целостная визуальная система сайта с едиными принципами оформления интерфейса.

2. Проработка пользовательских сценариев

Задача:

Перевести интерес пользователя в конкретное действие — выбор экскурсии и регистрацию на неё.

Как я это сделала:

Я построила User Flow и предусмотрела три точки входа в сценарий регистрации на экскурсию:

  1. С главной страницы — через кнопку «Регистрация на экскурсию».
  2. Через раздел «О нас» — пользователь может выбрать экскурсию в блоке с маршрутами.
  3. Через страницу конкретной экскурсии — после знакомства с подробной информацией сразу перейти к регистрации.

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

Результат:

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

3. Повышение вовлечённости молодой аудитории

Задача:

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

Как я это сделала:

На основе результатов опроса я разработала концепцию нового блока «Опекунство». Его идея — сделать поддержку заповедника более персональной и дать пользователю возможность наблюдать за животным, которому он помогает.

Пользователь оставляет электронную почту и после пожертвования получает персональный ID. С его помощью он может получить доступ к камерам заповедника и наблюдать за животным в реальном времени.

Также я добавила раздел «Мерч», где пользователь может выбрать и приобрести товары заповедника онлайн.

Результат:

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

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

Состояния и края

В проекте я предусмотрела основные состояния, с которыми пользователь может столкнуться при взаимодействии с сайтом:

  • страница ошибки
  • успешная отправка формы обратной связи
  • неправильно заполненные поля формы

Рефлексия

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

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

Инструменты

  • Tilda
  • Figma
  • Photoshop
  • Nano Banana
  • ChatGPT