Лендинги для Kyivstar
https://shop.kyivstar.ua/Киевстар — крупнейший телекоммуникационный оператор Украины, который предоставляет услуги связи и передачи данных. Компания также расширила направление бизнеса и открыла интернет-магазин на корпоративном сайте, shop.kyivstar.ua, который специализируется на смартфонах, планшетах, телефонах, телевизорах и т.д.
Компания Киевстар имеет высокие требования к качеству, поэтому был проведен тендер на выбор исполнителя, в котором участвовало более 10 компаний-разработчиков. По итогам выполнения тестового задания наша компания была признана лучшим исполнителем, и мы приступили к сотрудничеству.
Наша задача заключалась в том, чтобы сделать ряд лендингов для данной продукции, тем самым повысив эффективность продаж.
![](https://storage.stfalcon.com/uploads/images/5979cc40d7e88.webp)
Соблюдение гайдлайнов
Kyivstar — это уже сформированный бренд, у которого есть свой стиль. Поэтому, перед началом работ мы тщательно изучили сайт kyivstar.ua и ознакомились с брендбуком компании.
Для лендингов использовался шрифт Museo Sans. Цвет и размер заголовков с текстом соответствует гайдлайнам.![](https://storage.stfalcon.com/uploads/images/5979cc7ae59f2.webp)
Структура страниц
С целью ускорения процесса работы дизайнера и верстальщика для лендингов изначально была разработана универсальная структура. Но, поскольку в магазине очень широкий выбор смартфонов, аксессуаров и техники, то впоследствии было решено использовать индивидуальную структуру для каждого производителя. Таким образом, мы разнообразили и разделили внешний вид продуктов разных компаний. А для более удобного просмотра лендингов с телефона были разработаны их адаптивные версии.
![](https://storage.stfalcon.com/uploads/images/5979cce630a79.webp)
Изображения для продуктов
Перед нами стояла задача использовать не только изображения с официальных сайтов производителя, но и добавить немного красок: нарисовать часть изображений, подходящих по контексту для товаров из магазина shop.kyivstar.ua.
![](https://storage.stfalcon.com/uploads/images/5979cd276f43c.webp)
Иконки
Пакет иконок был предоставлен компанией. Но разнообразный контент не всегда давал возможность выбора подходящей иконки из пака, поэтому часть иконок мы рисовали сами в соответствии с гайдлайнами Киевстар.
![](https://storage.stfalcon.com/uploads/images/5979cd54acdd9.webp)
Особенности верстки
Универсальная структура разметки страниц позволила быстро и эффективно создавать лендинги для любого производителя телефонов, включая адаптив, где использовались брейкпоинты для основных разрешений экранов.
![](https://storage.stfalcon.com/uploads/images/5979cce630a79.webp)
Анимация
При верстке лендингов мы применяли два вида CSS-анимаций: Transitions и Animations. Чтобы создать простые визуальные эффекты и плавные переходы, использовались Transitions. Для более сложных сцен были применены Animations; каждая из таких анимаций была описана с помощью @keyframes. Javascript — только для запуска анимации при скролле страницы, что дало возможность существенно снизить нагрузку на браузер при загрузке страницы.
Эффективность продаж
Для каждого владельца интернет-магазина главной целью является повысить эффективность продаж с сайта, по-этому максимальные усилия направлены на увеличение количества пользователей и оптимизацию конверсии посещений. Для этих целей мы разработали новый блок описания товара, совершив переход от его стандартного текстового вида к интегрированным лендингам с визуальной презентацией всех товарных характеристик.
Внедрение лендингов для товаров повысило эффективность продаж и обеспечило рост количества посещений сайта, времени пребывания пользователей на сайте и объем продаж.
Таким образом, наша команда создала эффективное решение по оптимизации работы сайта shop.kyivstar.ua. Это помогло компании получить новых клиентов и повысить лояльность уже существующих.
Над проектом работали:
- Дима Ремигайло
Руководитель проектов
- Максим
Дизайнер
- Юлия
Дизайнер
- Саша Пахолюк
Дизайнер
- Руслан
Front-end разработчик
- Андрей
Front-end разработчик