Kyivstar

Соблюдение гайдлайнов

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

Для лендингов использовался шрифт Museo Sans. Цвет и размер заголовков с текстом соответствует гайдлайнам.

Структура страниц

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

Изображения для продуктов

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

Иконки

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

Особенности верстки

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

Анимация

При верстке лендингов мы применяли два вида CSS-анимаций: Transitions и Animations. Чтобы создать простые визуальные эффекты и плавные переходы, использовались Transitions. Для более сложных сцен были применены Animations; каждая из таких анимаций была описана с помощью @keyframes. Javascript — только для запуска анимации при скролле страницы, что дало возможность существенно снизить нагрузку на браузер при загрузке страницы.

Эффективность продаж

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

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

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