Благотворительный фонд «Выручаем» учрежден Х5 и помогает людям с низкими доходами: одиноким пожилым, семьям с детьми, людям с особыми потребностями, а также тем, кто оказался в чрезвычайной ситуации. Главный инструмент — продуктовая помощь: от классических наборов с крупами и консервами до цифровых сертификатов, которыми можно расплатиться в торговых сетях «Пятёрочка» и «Перекрёсток».

Фонд поручил нам несколько задач:

• создать годовой отчет за 2025 год в формате лендинга — собрать и структурировать большой объем информации, разработать дизайн;
• сделать на основе лендинга буклет для партнеров;
• разработать к конференции мини-игру, которая расскажет о целях фонда.

Для лендинга нужно было переработать огромный массив данных — в 2025 году фонд провел десятки акций, помог 1 млн+ людей, активно сотрудничал с бизнес-партнерами и НКО. Мы превратили эту информацию в связный, живой и при этом структурированный текст. А потом — упаковали его в дизайн, который не даст читателю утонуть в деталях и при этом понятно расскажет о работе фонда. Рассказываем подробнее.

Собрали информацию и написали текст

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

Например, руководитель направления «Продуктовая помощь» рассказала о цифровых сертификатах, фудшеринге, логистике и масштабах — в 2025 году помощь фонда охватила 75 регионов. А руководитель направления «Комфортная и безопасная среда» Анна Гусейнова поделилась проектами для уязвимых групп: «Островки безопасности» с «Лизой Алерт», «Ясные рецепты» для людей с ментальными особенностями, «С днём рождения, ба!» для одиноких пожилых.

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

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

Сделали дизайн лендинга

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

Чтобы читать большой отчет было не утомительно, мы добавили на лендинг много «воздуха». Заголовки и подзаголовки, разноцветные блоки хорошо разбивают длинные истории. Еще мы использовали различные приемы, чтобы визуально сократить длинную ленту: раскрывающиеся окна, листалки, карточки-перевертыши, тексты под катом и слайдеры.

После согласования основного макета в формате для десктопа разработали еще три: для десктопа меньшего размера, планшета и мобильного телефона и передали для верстки на стороне подрядчика.

Годовой отчет нужен был не только в цифре. Фонду требовался сокращенный печатный вариант — вручать бизнес-партнерам, представителям НКО и другим заинтересованным лицам на встречах и мероприятиях.

Фонд пришел с готовой идеей — референсом складывания буклета и исходным макетом, который не прошел внутреннее согласование.

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

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

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

На оборотной стороне использовали бенто-дизайн со светлым фоном в виде подноса и разместили по блокам всю необходимую информацию. Иллюстрации в блоке «Кому мы помогаем» заменили на реальные фотографии, увеличили шрифт, выделили названия программ плашками — стало гораздо удобнее читать.

Всего типография напечатала 200 таких буклетов на бумаге плотностью 200 г/м2. Нам фонд тоже отправил несколько штук!

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

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

Придумали название и механику игры

Мы предложили одиннадцать вариантов названия для игры. В итоге остановились на «Выручай-корзина» — оно емкое, легко запоминается и сразу дает понять, о чем игра: нужно собрать продуктовую корзину и помочь тем, кто в этом нуждается.

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

В углу работает таймер, отсчитывая две минуты. Сбоку расположена панель корзины, куда складываются выбранные продукты. Можно кликать на отделы, открывать полки и класть продукты в корзину. Игра завершается после окончания установленного времени или при нажатии игроком кнопки «На кассу».

Написали тексты и нарисовали игру

Написали стартовое приветствие и правила, тексты на финальные экраны для двух исходов — перебор и попадание в бюджет. Закончили игру благодарностью для тех, кто оставляет почту.

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

Готовые макеты передали разработчикам

Дизайнеры за две недели разработали макеты под горизонтальный планшет. Планировалось, что представители БФ «Выручаем» будут предлагать сыграть в игру участникам различных офлайн мероприятий, в которых участвует фонд.

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