Интерактивная версия Годового отчета ОТЛК ЕРА за 2023 год

Главное о кейсе

Компания АО «ОТЛК ЕРА» обратилась в Praxis Group для разработки дизайна годового отчета за 2023 год. Цель отчета, помимо раскрытия результатов финансовых и операционных показателей для обеспечения открытости компании и повышения лояльности аудитории,- повышение метрик официального сайта utlc.com и привлечение целевой аудитории. В связи с этим перед агентством была поставлена задача: повысить вовлеченность целевой аудитории и сделать так, чтобы работать с информацией было легко, удобно и интересно.

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

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

Как проект изменил жизнь пользователей

Мы стремились сделать информацию доступной для любых категорий читателей.

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

Для сотрудников компании — показали сферу их деятельности через новые для них цветовые и «материальные» решения (большинство объектов — 3D-модели из матового стекла с мягкой подсветкой).

Чтобы заинтересовать посетителей, пришедших на сайт без какой-либо конкретной цели, — наполнили отчет красочными блоками.

Бизнес-задача и ее решение

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

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

время на сайте: +13%
количество отказов: −4%
просмотры: +35%
визиты: +36 %
посетители: +5%

Крафт (мастерство), реализация, технические детали

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

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

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

2. Разделы годового отчета сопровождаются 3D-иллюстрациями, построенными на простых геометрических объектах, таких как кубы, цилиндры, а также их комбинациях. При этом все иллюстрации обладают интертекстуальностью, совмещая в себе сюжеты из мира логистики и символические образы. Так, например, в разделе «Корпоративное управление» дорога с перекрестком и выраженной симметрией напоминает организационную структуру компании, представленную в соответствующей схеме отчета. А иллюстрация в «Стратегическом отчете» олицетворяет взгляд в перспективу будущего и в то же время напоминает железнодорожную станцию в момент, когда человек видит множество поездов, зрительно сходящихся в одной точке.

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

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

Основными инструментами разработки дизайна стали программы: Figma — для дизайна и верстки, Cinema 4D и Adobe Illustrator — для создания иллюстраций и иконографики. Сайт разработан на базе технологий HTML и CSS и адаптирован под различные устройства.

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

Скриншоты

Комментарий заказчика

В этом году компания АО «ОТЛК ЕРА» разработала и опубликовала 6-й по счету документ Годового отчета за прошлый отчетный период. Как и в предыдущие годы, проект стал вызовом для всей рабочей группы из 25 сотрудников Общества. Трудоемкость и сложность процесса каждый раз заключается в оперативном сборе данных (многие операционные и финансовые показатели финально подсчитывают лишь к концу февраля), перекрестной проверки департаментами информации «наживую» уже собранного текста отчета, а также верстки (сюда же внесение новых и новых правок), подготовка и вычитка сверстанного отчета, сокращение (удаление чувствительной информации),перевод сокращенной версии на английский и китайский языки, и финальное - подготовка интерактивный версии на трех языках, включая 3 мобильные версии.

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


Я, как куратор и ответственная за подготовку годовых отчетов в АО "ОТЛК ЕРА", хотела сказать еще раз спасибо Праксис Адванс за весь сложный, трудоемкий и непростой процесс подготовки документа, который длился больше полугода.