Ecodeposit: сайт с рисованными анимациями для зеленых инвестиций

1. Вводная задача от заказчика, проблематика, цели

Задачи проекта

• «Зацепить» потенциального инвестора с первого скролла.
• Реализовать на сайте калькулятор инвестиций.
• Сделать форму заявки на инвестиции простой и удобной.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Дизайн: ручная работа

Мы решили показать рост инвестиций со временем буквально — и отрисовали анимацию превращения семечки в плодовое дерево: на этапе посадки оно стоит 100 $, в подрощенном состоянии — 520 $, а когда начинает плодоносить — уже 700 $.

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

Анимацией дело не ограничилось: на сайте много отрисованных вручную иллюстраций.

3. Результаты сотрудничества

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

Калькулятор вложений

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

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

Форма заявки

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

Дмитрий

Разработчик, Сибирикс

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

Как только мы навели порядок в формулах, всё стало максимально прозрачно: формулу запрограммировали, а табличные данные внесли в админку — заказчик может дополнять их, если нужно. Например, задать граничные значения для полей (минимальный/максимальный год и т. д.).

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