Корпоративный сайт Unigreen Energy

Корпоративный сайт Unigreen Energy

UI-дизайн
Time & Material
Бизнес-анализ
Корпоративный сайт

О клиенте

Юнигрин Энерджи (Unigreen Energy) — международная компания в сфере солнечной энергетики. Специализируется на производстве и поставке солнечных ячеек/модулей, кремниевых пластин, строительстве солнечных станций и парков, продаже их электроэнергии. Есть собственное производство в России, и строится крупный завод в Калининграде.

logo-lanta

Задача

Разработать мультиязычный (5 языков) корпоративный сайт для презентации продукции и деятельности компании с акцентом на привлечение зарубежных клиентов и партнёров.

Видео

Аналитика

Бизнес-интервью

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

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

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

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

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

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

Конкурентный анализ

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

Юнигрин точно знал, с кем он конкурирует на рынке. Более того, нам дали список, в котором было более 30 компаний по разным направлениям деятельности. Для анализа выбрали 5 конкурентов: по два для разных направлений деятельности компании и один из смежной сферы.

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

Информационная архитектура

В этом проекте архитектура соединяет в себе карту сайта и требования к интерфейсу. Кроме построения иерархии страниц мы фиксировали и контент на этих страницах.

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

Для себя выписали содержание сквозных элементов сайта: шапки и футера. Такой подход помогает решать вопросы на берегу: легче внести изменения в 1–2 пункта в схемах, чем править на этапе проектирования.

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

Проектирование

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

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

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

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

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

Дизайн-концепция

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

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

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

Дизайнеры работали параллельно и принципиально друг к другу не подглядывали, чтобы случайно не повториться. В концепциях нужно было использовать корпоративные цвета компании (зелёный и оранжевый), но, как и ожидалось, в двух вариантах акценты были расставлены по-разному.

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

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

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

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

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

Дизайн

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

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

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

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

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

Разработка

Эту часть работы взял на себя наш партнёр — ИТ-интегратор Extyl.

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

В такой работе важны совместно выстроенные процессы, менеджмент и регулярные синхронизации. С Экстилом у нас есть фреймворк, который позволяет нам работать как единое целое. Мы знаем как, в каком объёме и формате передавать всю информацию по проекту, чтобы команда разработки оперативно приступала к своей части работы, без лишних созвонов и презентаций. Для клиента — это бесшовный процесс. Он знает ответственных с двух сторон, и этого достаточно для решения возникающих вопросов.

На проекте Юнигрин работа по написанию технического задания началась сразу с проектирования и продолжалась на всём этапе подготовки дизайн-макетов. Их передавали на вёрстку по готовности для оптимизации времени на разработку. О том, как проходили этапы вёрстки и программирования, можно прочитать в кейсе на сайте Extyl. Кстати, недавно они обновили сайт, дизайн и анимации для которого делали мы :)

Над проектом работали

icon
Евгения
Аккаунт-менеджер
icon
Аня
Руководитель проектов
icon
Маша
UX-аналитик
icon
Таня
UX-аналитик
icon
Стёпа
UX/UI-дизайнер
icon
Рома
UI-дизайнер
icon
Данила
UI-дизайнер
icon
Extyl
Разработка

Другие кейсы

Корпоративный сайт для «Сибирской горно-металлургической компании»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1

Продуктовый листинг и товарный лендинг для «Ангстрема»

UX-проектирование
UI-дизайн
E-commerce
+ ещё 3

Лендинг к 10-летию Российского научного фонда

UI-дизайн
Спецпроект
Анимации
+ ещё 2

Корпоративный сайт для «Нового Втормета»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Сайт для новой государственной компании «Роскадастр»

Сайт для новой государственной компании «Роскадастр»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Обсудить проект