Онлайн-платформа спортивного харчування та продуктів для здоров’я

У межах довгострокової співпраці з нашим партнером Icebreaker ми працювали над оновленням інтернет-магазину спортивного харчування, вітамінів та товарів для здорового способу життя.

Попередня версія сайту вже не відповідала потребам бізнесу та очікуванням покупців. Сайт виглядав застарілим, у великому каталозі було складно знаходити потрібні товари, а користуватися магазином зі смартфона було незручно.

Наше завдання

Потрібно було створити сучасний інтернет-магазин, у якому покупцеві легко знайти потрібний товар, зрозуміти його характеристики та швидко оформити покупку.

Основні завдання:

• спростити пошук і вибір товарів;
• зробити великий каталог зрозумілим та зручним;
• показувати основні характеристики товару ще до переходу на його сторінку;
• оновити зовнішній вигляд сайту та зробити його більш впізнаваним;
• забезпечити зручну роботу сайту на комп’ютерах, планшетах і смартфонах;
• підготувати всі сторінки та елементи сайту для подальшої розробки.

01. Структура та зручність сайту

Роботу розпочали з аналізу існуючого сайту, конкурентів та того, як покупці обирають спортивне харчування, вітаміни й товари для здоров’я.

Особливу увагу приділили інформації, яка найбільше впливає на рішення про покупку: категорії товару, його призначенню, характеристикам, ціні, оцінкам покупців та можливості швидко перейти до замовлення.

Після аналізу ми переглянули структуру сайту та створили схеми всіх основних сторінок. Це дозволило спочатку визначити, де повинна знаходитися важлива інформація та як покупець буде рухатися сайтом, а вже потім переходити до оформлення.

На цьому етапі ми визначили:

• структуру каталогу та головного меню;
• вигляд сторінки окремого товару;
• способи фільтрації та сортування товарів;
• порядок подання інформації;
• розташування основних кнопок покупки та замовлення;
• місця для акцій, спеціальних пропозицій та супутніх товарів;
• структуру сторінок для великих і малих екранів.

Такий підхід дозволив ще до оформлення сайту перевірити його логіку та зробити шлях покупця максимально простим.

02. Новий зовнішній вигляд сайту

Після затвердження структури ми перейшли до оформлення інтернет-магазину.

За основу взяли існуючий логотип, фірмові кольори та побажання клієнта, але зробили загальний вигляд сайту сучаснішим, чистішим і більш виразним.

Кольори та стиль

Основним став глибокий темно-зелений колір, який доповнили яскравим салатовим акцентом.

Таке поєднання добре відповідає тематиці здоров’я, спорту та активного способу життя. Яскравий колір також допомагає виділяти важливі кнопки, ціни, акції та інші елементи, на які потрібно звернути увагу покупця.

Каталог і картки товарів

Окрему увагу приділили карткам товарів. Покупець повинен мати можливість швидко зрозуміти, що перед ним за товар, скільки він коштує і чи підходить йому, не відкриваючи кожну позицію окремо.

У картках передбачили:

• назву та категорію товару;
• ціну;
• оцінку покупців;
• основні характеристики;
• позначення акцій та спеціальних пропозицій;
• можливість швидко додати товар у кошик.

Для великого асортименту розробили зрозумілу систему фільтрів і сортування. Вона допомагає покупцеві швидше звузити вибір за потрібними параметрами та перейти до відповідного товару.

Корисні матеріали та блог

Окрім самого магазину, ми продумали розділ зі статтями, категоріями та зручним пошуком матеріалів.

Такий розділ дозволяє компанії публікувати корисну інформацію про товари, їх застосування, харчування та здоровий спосіб життя. Це також створює додаткові сторінки, через які потенційні покупці можуть знаходити сайт у пошукових системах.

03. Єдина система елементів сайту

Щоб усі сторінки виглядали однаково та надалі сайт було простіше розширювати, ми створили єдиний набір елементів оформлення.

До нього увійшли:

• шрифти та правила оформлення тексту;
• основні та додаткові кольори;
• кнопки;
• поля та форми;
• картки товарів;
• меню та навігація;
• фільтри;
• спливаючі вікна;
• позначки та інформаційні повідомлення;
• піктограми;
• варіанти вигляду елементів у різних ситуаціях.
  

Завдяки цьому однакові елементи не потрібно щоразу створювати заново. Це спрощує розробку сайту, підтримує єдиний зовнішній вигляд і полегшує додавання нових сторінок у майбутньому.

Підготовка до розробки

Команда розробників отримала готові макети всіх основних сторінок інтернет-магазину:

головна сторінка · каталог · сторінка товару · блог · акційні сторінки · версії для смартфонів

Усі сторінки побудовані за єдиними правилами та використовують однакові елементи. Завдяки цьому розробникам простіше перенести дизайн у готовий сайт і надалі підтримувати його.

Результат

У результаті застарілий сайт отримав нову структуру та сучасний зовнішній вигляд. Інтернет-магазин став зрозумілішим для покупців і краще підготовленим до подальшого розвитку бізнесу.

Новий сайт:

• спрощує пошук товарів у великому каталозі;
• допомагає покупцеві швидше порівнювати пропозиції та приймати рішення;
• робить важливі кнопки та інформацію помітнішими;
• зручний для використання зі смартфона;
• формує цілісний та впізнаваний образ компанії;
• дозволяє легко додавати нові товари, категорії та сторінки в майбутньому.

Разом із готовими макетами команда розробки отримала єдину систему елементів сайту та правила їх використання. Це створило зрозумілу основу для запуску та подальшого розвитку інтернет-магазину.