Экосистема зоопарка
Задача
Зоопарк решил стать экосистемой и ему нужно помочь спроектировать полноценную платформу. Через сайт можно оформить донат любому животному и подписка пойдёт на нужды подопечного.
Критерии решения
Показать путь пользователя, в результате которого он сможет оформить подписку или донат и помочь животным
🚨 Важное примечание
В реальности такой сервис содержит полноценный сайт, я решила задизайнить только страницу опекунства
Процесс работы
1. Погружение и сбор данных о задаче
Изучаю текущие решения, анализирую как это реализовано у других, читаю открытые статьи, определяю аудиторию
2. Дизайн исследование
Собираю путь пользователя User Flow, делаю Screen Flow + IA
3. Low-Fidelity прототипы
Дизайн первой итерации в Figma, сборка прототипов по сценарию
4. Вторая итерация
Анализирую предложенное решение, вношу улучшения
5. Тесты
Беру респондентов, даю им задание, наблюдаю за ними и улучшаю дизайн
0. Презентация и оформление
Делаю сразу в процессе, чтобы всё не забыть
Немного рассуждений перед началом работы
Для начала подробнее описала ключевые моменты, чтобы не возникало путаницы:
Донат - нет комиссии при оформлении; можно выбрать любое, но только 1(!) животное
Подписка - имеет несколько тарифов; списывается раз в месяц; всегда фикса, но зависит от подопечного; есть доп. донаты - оплачиваются отдельно
Тариф - разный для животного без и с особенностями; можно попросить присылать отчеты на почту; раз в месяц можно поменять подопечного ИЛИ донатить сразу нескольким
Погружение и сбор данных о задаче
📈Цели бизнеса
Сбор средств: привлечение донатов для улучшения условий содержания животных, их питания и ветеринарного ухода
Повышение осведомлённости и укрепление связи с обществом: распространение информации о животных среди широкой аудитории, увеличение вовлеченности пользователей в жизнь зоопарка
Развитие экосистемы: создание устойчивой модели финансирования и поддержки зоопарка
💪Мотивация пользователей
Признание: получение благодарностей и возможных поощрений
Эмоциональная связь: возможность выбрать конкретное животное для поддержки, что создаёт эмоциональную привязанность
Образовательная ценность: информация о животных и их потребностях, возможность узнать больше о природе
Помощь животным: желание помочь животным и улучшить их условия жизни
Аудитория
Просто любители животных, зоо-активисты, местные жители
Текущие решения
В России около 40 зоопарков, и у каждого из них есть программа опеки над животными. Чтобы мотивировать пользователей помогать животным, зоопарки предлагают различные плюшки — сертификаты, карты преимуществ, табличку с именем опекуна возле животного, бесплатные посещения.
Оформить опекунство можно только по телефону или почте, т.к. Составляется полноценный договор о пожертвованиях, однако в договоре указано, что средства могут тратиться на других животных или другие цели, что может сильно отпугнуть потенциальных опекунов
Job Story
Я решила написать джобы пользователей, которые лягут в основу интерфейса:
— Когда я хочу оформить опеку над животным, я хочу найти подробную информацию о возможностях опеки, чтобы сделать осознанный выбор и внести вклад в благополучие конкретного животного
— Когда я хочу оформить опеку над животным, я хочу быть уверена в том, что все деньги пойдут именно на него, а не на что-то другое, иначе я буду чувствовать себя обманутой
— Когда я хочу оформить опеку над животным, я хочу увидеть подробные профили животных, включая их истории и особенности, чтобы выбрать животное, с которым я ощущаю наибольшую эмоциональную связь
— Когда я хочу оформить опеку над животным, я хочу оформить разовое пожертвование, потому что я не уверена, что смогу тратить n-сумму каждый месяц
— Когда я хочу оформить опеку над животным, я хочу сразу оформить опеку конкретного животного, без лишней волокиты, чтобы ни с кем не взаимодействовать
User flow + описание экранов
Благотворительностью занимаются не только обычные люди, но и многие компании. Далее я рассматриваю только путь физ. лиц
Прототипы
Я решила что наиболее выгодным решением будет сайт, поскольку это требует меньших затрат по сравнению с разработкой приложения. На сайте similarweb я посмотрела статистику, что почти 80% потенциальных пользователей заходят на сайты с мобильных устройств. Поэтому я буду проектировать сайт, используя подход mobile-first
Вначале я отрисовала грубые прототипы 4-х основных экранов
Мудборд / Референсы
Далее я решила собрать цветовой мудборд и референсы интерфейсных решений. Для мудборда я подобрала цвета, которые эффективно передают атмосферу и миссию этого учреждения. Лично у меня с зоопарком больше всего ассоциируются зеленый (леса, джунгли) и желтые (саванны, пустыни) цвета
Интерфейсные решения искала на обычных сайтах
Первая итерация
Отталкиваясь от прототипа я глубже проработала все экране. Всего сделала дизайн двумя итерациями. Первая итерация была более детализированным вариантом чернового прототипа, со своими недочетами и с отсутствием некоторых функций.
Вторая итерация — это финальное решение, проработанное до деталей. За основу я взяла готовую фигмовскую дизайн-систему Simple Design System немного поменяв её под себя и создав свой ui-кит
Финальное дизайн решение
Иконки решила первый раз в жизни сгенерировать и в Recraft AI
Страница всех животных
Страница вида животных
Страница животных
Страница доната
Страница подписки
Страница оплаты
Страницы успешной оплаты
UI Kit
Хотя дизайн делала на основе готовой дизайн системы, я все равно внесла немного изменений в карточки и общий конечный визуал
Дальнешие действия
Проверить на тестах предложенное решение и протестировать на пользователях
Сделать десктоп версию сайта
Спрятать текст на странице вида животных за dropdown, чтобы не перегружать сайт
Итоги
Задачей было показать путь пользователя, в результате которого он сможет оформить донат и помочь животным. Мое решение предлагает возможность любому пользователю легко помочь нуждающимся животным — от единоразового пожертвования до ежемесячной помощи
Таймлайн проекта: 1 неделя, август 2024 г.
