Разработали дизайн нового корпоративного сайта для международной компании в сфере солнечной энергетики. В работе опирались на проведенную аналитику и задачи бизнеса.
Со стороны UX:
— Проработали структуру сайта, чтобы она давала полное представление о компании, ее деятельности и продуктах.
— При проектировании страниц учли мультиязычность ресурса (сайт доступен на 5 языках).
— Детально проработали контент продуктовых лендингов, чтобы информация закрывала потребности целевой аудитории.
Со стороны UI:
— Подготовили две дизайн-концепции разной направленности, взяв за основу лишь логотип компании и фирменный зеленый цвет.
— Разработали уникальную графику, которая подчеркивает технологичность продукции.
— Продумали анимации, которые дополняют дизайн, акцентируют внимание на важной информации.
_______________________
We developed the design of a new corporate website for an international solar energy company. The work was based on analytics and business objectives.
Works on UX:
- We worked out the structure of the site to give a complete picture of the company, its activities and products.
- When designing the pages, we took into account the multi-lingual nature of the resource (the site is available in 5 languages).
- We worked out the content of product lendings in detail, so that the information covered the needs of the target audience.
Works on UI:
- We prepared two different design concepts, based on the company's logo and corporate green color alone.
- We developed unique graphics that emphasize the technological nature of the products.
- We developed animations that complement the design and emphasize important information.
Как проект изменил жизнь пользователей
Предыдущая версия сайта содержала всего несколько страниц: главная, о компании, новости, контакты. Информации было мало, а контент представлен только на русском языке.
Основная доля целевой аудитории Unigreen Energy — зарубежные клиенты и партнеры. Прежний сайт не отвечал их запросам, не давал информацию о продуктах и возможностях компании.
Новый сайт представляет собой полноценный ресурс с разветвленной структурой. Содержит необходимые разделы и страницы с нужной пользователям информацией о Unigreen Energy. Проработанный раздел «Что мы делаем» включает не только продукты, но и решения, услуги, проекты компании, информацию о производстве, используемых технологиях, научно-техническом центре. Страницы помогают закрывать информационные ожидания целевой аудитории и позиционируют Unigreen Energy как передовую, динамично развивающуюся компанию.
Сайт запущен в 2023 году. Сейчас продолжаются технические доработки, наполняется контент и собирается метрика для дальнейшего цикла улучшения.
_______________________
The previous version of the site contained only a few pages: the main page, about the company, news, and contacts. There was little information, and the content was presented only in Russian.
The bulk of Unigreen Energy's target audience is foreign clients and partners. The previous site did not meet their needs and did not provide information about the company's products and capabilities.
The new site is a full-fledged resource with a branched structure. It contains necessary sections and pages with necessary information about Unigreen Energy. The elaborate section "What we do" includes not only products, but also solutions, services, projects of the company, information about production, technologies used, scientific and technical center. The pages help to meet informational expectations of the target audience and position Unigreen Energy as an advanced, dynamically developing company.
The website was launched in 2023. We keep honing it from the technological point of view, the content is being added and metrics are being collected for a further cycle of improvement.
Бизнес-задача и ее решение
Unigreen Energy — международная компания в сфере солнечной энергетики. Специализируется на производстве и поставке солнечных ячеек/модулей, кремниевых пластин, строительстве солнечных станций, парков и продаже их электроэнергии.
Основная целевая аудитория компании — зарубежные клиенты и партнеры. Прошлый сайт не отвечал бизнес-задачам компании: состоял из нескольких страниц на русском языке и не содержал информацию о продуктах Unigreen Energy.
Нам предстояло:
— разработать логичную структуру разделов и страниц, чтобы дать пользователям всю необходимую информацию;
— проработать контент продуктовых лендингов;
— учесть при проектировании и адаптации страниц мультиязычность сайта;
— через контент и дизайн отобразить ключевые ценности компании, подчеркнуть ее технологичность.
Процесс разработки сайта состоял из следующих этапов:
— предпроектная аналитика (серия бизнес-интервью, конкурентный анализ, информационная архитектура),
— проектирование,
— разработка дизайн-концепции и дизайна внутренних страниц.
Фронтенд- и бэкенд-разработку взял на себя наш партнер по альянсу — Extyl.
Начали с бизнес-анализа. Провели серию интервью с представителями разных направлений компании-заказчика. Собрали информацию о деятельности компании, ее целевой аудитории. Определили требования к сайту, продукцию и услуги, которые будут размещены.
В работе над конкурентным анализом сравнивали не только контентные страницы, но и сквозные элементы. Отдельно изучали контент и блоки, которые встречались чаще других. В результате выделили тренды корпоративных сайтов. Например, все компании делают ставку на устойчивое развитие и ESG-повестку: отводят этой теме отдельные страницы или блоки на сайтах.
На основе данных, которые получили в интервью и в результате конкурентного анализа, составили информационную архитектуру. Она соединила в себе карту сайта и требования к интерфейсу.
Прототипы делали на английском языке. Параллельно с проектированием, по готовности главной страницы, запустили работу над дизайн-концепциями. В работе над макетами уделили особое внимание презентации продуктов и гетероструктурной технологии создания солнечных панелей.
_______________________
Unigreen Energy is an international solar energy company. It specializes in the production and supply of solar cells/modules, silicon wafers, construction of solar stations, parks, while selling the electricity from these parks as well.
The company's main target audience is overseas customers and partners. The previous website did not meet the company's business objectives: it consisted of several pages in Russian and did not contain information about Unigreen Energy products.
We had to:
— Develop a logical structure of sections and pages to give users all the information they needed;
— to work out the content of the product lendings;
— take into account the multi-lingual nature of the website when designing and adapting the pages;
— to reflect the company's key values and emphasize its technological strength through content and design.
The website development process consisted of the following stages:
— Pre-design analytics (series of business interviews, competitive analysis, information architecture),
— prototypes design,
— creation of the design concept and design of internal pages.
Frontend and backend development was undertaken by our partner Extyl.
We started with business analysis. We conducted a series of interviews with representatives from different departments of the client company. We gathered information about the company's activities and its target audience. We determined the requirements for the site, products and services to be presented.
While doing the competitive analysis we compared not only content pages, but also end-to-end elements. We studied separately the content and blocks that were more frequent than others. As a result, we identified trends in corporate websites. For example, all companies focus on sustainable development and ESG agenda: they devote separate pages or blocks on their sites to this topic.
Based on the data we obtained from the interviews and competitive analysis, we created an information architecture. It combined the site map and interface requirements.
Prototypes were made in English. Simultaneously with the prototypes, when the main page was ready, we started working on design concepts. In working on the layouts, we paid special attention to product presentation and to heterostructural technology for creating solar panels.
1. Разработка дизайн-концепции
Задача стояла нестандартная — разработать два принципиально разных варианта. Работу над концепциями разделили между двумя дизайнерами.
Первая концепция представляла компанию как серьезное, современное и технологичное производство. Это прослеживается в статичных формах, сетке и ритме элементов. В качестве интересного стилизующего элемента выбрали скошенные углы карточек, которые повторяют форму солнечных ячеек.
Вторая концепция была более яркой и эмоциональной. Использовали образ раскрывающегося подсолнуха, который напоминает работу солнечной ячейки. Добавили третий (сиреневый) цвет, чтобы придать дизайну больше ярких акцентов. Задача концепции — эмоционально зацепить пользователя.
Клиенту понравились обе концепции, но для сайта он выбрал сдержанную, которая соответствует имиджу компании.
2. Продуктовые лендинги
Спроектировали гибкий шаблон для продуктовых страниц. Продумали блоки и их наполнение, чтобы дать пользователям полную информацию о продукции: от этапов производства до наглядного графика сравнений используемых технологий.
3. Уникальная графика
Главное преимущество компании — использование гетероструктурной технологии, — это современный способ производства ячеек, который делает их более эффективными в сравнении с другими солнечными панелями.
Одной из задач дизайна было сделать акцент на этом, показать многослойность и технологичность ячейки. Для этого отрисовали уникальную графику для продуктов в стиле инженерных схем, геометрию переиспользовали в иконках, а модульность заложили в дизайн-концепцию сайта.
4. Анимации
Продумали и прописали технические задания на анимации, чтобы итоговый результат соответствовал задумке дизайнера. Например, описывали правила использования:
— параллакса при скролле;
— зума изображений при наведении;
— анимации графики для преимуществ и продуктов.
Для иконок и иллюстраций сделали анимацию в lottie.
_______________________
1. Design concept development
The task was non-standard — to develop two fundamentally different variants. The work on the concepts was divided between two designers.
The first concept represented the company as a serious, modern and technological manufacturer. This idea was conveyed through the static shapes, grid and rhythm of the elements. To make the cards more interesting ve used angled edges, which repeat the shape of solar cells.
The second concept was more vivid and emotional. We used the image of an unfolding sunflower, which resembles the work of a solar cell. We added a third (lilac) color to give the design more highlights. The goal of the concept was to hook the user emotionally.
The client liked both concepts, but chose the understated one for the website, which matches the company's image.
2. Product lendings
We designed a flexible template for product pages. We designed the blocks and their content to give users complete information about the products: from production stages to a visual graph comparing the employed technologies.
3. Unique graphics
The company's main advantage is the use of heterostructural technology — a modern way of producing cells that makes them more efficient than other solar panels.
One of the design challenges was to emphasize this, to show the multi-layered and technologically advanced nature of the cell. For this purpose we drew unique graphics for the products in the style of engineering diagrams, their geometry was reused in icons, and the module structure was incorporated into the design concept of the website.
4. Animations
We thought through and wrote technical specifications for animations, so that the final result corresponded to the designer's idea. For example, we described the rules of use:
— parallax while scrolling;
— zoom of the images upon hover;
— animation of graphics that represent benefits and products.
For icons and illustrations we made animation in lottie.
Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком
В процессе работы над сайтом, несмотря на имеющееся техническое задание и объемную аналитику, пару раз пришлось вернуться к предыдущим шагам.
#1. На этапе разработки информационной архитектуры
В ходе аналитики выяснилось, что состав страниц должен быть не таким, как в первоначальном техническом задании. Их должно быть больше, чтобы закрыть информационные ожидания целевой аудитории. Несколько раз созванивались с клиентом и штурмили разделы, по которым у нас или у клиента были сомнения. После нескольких итераций нашли золотую середину — и информационная архитектура приобрела свой итоговый вид.
#2. На этапе проектирования
Работая над прототипами внутренних страниц, возвращались к обсуждению отдельных разделов и их наполнения. Вместе с командой со стороны клиента искали оптимальные варианты организации контента. Нужно было не только корректно презентовать продукты и услуги компании, но и учесть интересы представителей всех направлений деятельности «Юнигрин» (внутренних стейкхолдеров). Несмотря на то, что на предыдущем этапе архитектура и базовое наполнение сайта были согласованы, такие ситуации случаются. Это нормальная история, ведь в процессе аналитики и сам клиент начинает смотреть на свой продукт под другим углом. В таких случаях мы инициируем общие созвоны и предлагаем наиболее оптимальные решения, которые учитывают приоритеты клиента и дедлайны по проекту.
_______________________
While working on the website, we had to go back to the previous steps a couple of times, despite the available terms of reference and extensive analytics.
#1. At the stage of information architecture development
In the course of analytics it became clear that the composition of pages should not be the same as in the original terms of reference. It was necessary to introduce more pages to cover the information expectations of the target audience. We held several conferences with the client and brain-stormed the sections that we or the client had doubts about. After several iterations, we found a golden mean — and the information architecture took its final form.
#2. At the design stage
Working on the prototypes of internal pages, we returned to the discussion of individual sections and their content. Together with the client's team, we looked for optimal options for organizing content. It was necessary not only to present the company's products and services correctly, but also to take into account the interests of representatives of all the Unigrin's departments (internal stakeholders). Despite the fact that the architecture and basic content of the site were agreed upon at the previous stage, such situations happen. This is normal, because while the analysis is carried out, the client himself starts to look at his product from a different angle. In such cases, we invite all the stakeholders to a conference call and offer the optimal solutions that take into account the client's priorities, as well as the project deadlines.