Kyivstar
https://shop.kyivstar.ua/Киевстар — крупнейший телекоммуникационный оператор Украины, который предоставляет услуги связи и передачи данных. Кроме этого, компания расширила направление бизнеса и открыла интернет-магазин на корпоративном сайте, shop.kyivstar.ua, который специализируется на смартфонах, планшетах, телефонах, телевизорах и т.д.
Компания Киевстар имеет высокие требования к качеству, поэтому был проведен тендер на выбор исполнителя, в котором участвовало более 10 компаний-разработчиков. По итогам выполнения тестового задания наша компания была признана лучшим исполнителем, и мы приступили к сотрудничеству.
Наша задача заключалась в том, чтобы сделать ряд лендингов для данной продукции, тем самым повысив эффективность продаж.

Соблюдение гайдлайнов
Kyivstar — это уже сформированный бренд, у которого есть свой стиль. Поэтому, перед началом работ мы тщательно изучили сайт kyivstar.ua и ознакомились с брендбуком компании.
Для лендингов использовался шрифт Museo Sans. Цвет и размер заголовков с текстом соответствует гайдлайнам.
Структура страниц
С целью ускорения процесса работы дизайнера и верстальщика для лендингов изначально была разработана универсальная структура. Но, поскольку в магазине очень широкий выбор смартфонов, аксессуаров и техники, то впоследствии было решено использовать индивидуальную структуру для каждого производителя. Таким образом, мы разнообразили и разделили внешний вид продуктов разных компаний. А для более удобного просмотра лендингов с телефона были разработаны их адаптивные версии.

Изображения для продуктов
Перед нами стояла задача использовать не только изображения с официальных сайтов производителя, но и добавить немного красок: нарисовать часть изображений, подходящих по контексту для товаров из магазина shop.kyivstar.ua.

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

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

Анимация
При верстке лендингов мы применяли два вида CSS-анимаций: Transitions и Animations. Чтобы создать простые визуальные эффекты и плавные переходы, использовались Transitions. Для более сложных сцен были применены Animations; каждая из таких анимаций была описана с помощью @keyframes. Javascript — только для запуска анимации при скролле страницы, что дало возможность существенно снизить нагрузку на браузер при загрузки страницы.
Эффективность продаж
Для каждого владельца интернет-магазина главной целью является повысить эффективность продаж с сайта, по-этому максимальные усилия всегда направлены на увеличение количества пользователей и оптимизацию конверсии посещений. Именно для этих целей мы разработали новый блок описания товара, совершив переход от его стандартного текстового вида к интегрированным лендингам с визуальной презентацией всех товарных характеристик.
Внедрение лендингов для товаров значительно повысило эффективность продаж и обеспечило рост таких показателей, как количество посещений сайта, время пребывания пользователей на сайте и объем продаж.
Таким образом, наша команда создала решение, которое существенно оптимизировало работу сайта shop.kyivstar.ua и помогло компании получить новых клиентов и повысить лояльность уже существующих.
Над проектом работали:
-
Дима Ремигайло
Руководитель проектов
-
Максим Нестерук
Дизайнер
-
Юлия Колянова
Дизайнер
-
Саша Пахолюк
Дизайнер
-
Руслан Хомяк
Front-end разработчик
-
Андрей Ляшок
Front-end разработчик