Kyivstar

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

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

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

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

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

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

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

Иконки

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

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

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

Анимация

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

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

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

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

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