Simi

Про проєкт

Simi.ua — мережа магазинів формату convenience store. Сайт розроблявся повністю з нуля: від дослідження аудиторії та проектування структури до дизайну, верстки та бекенд-розробки. До розробки дизайну проєкту була залучена команда партнерів з Revend Group. 

Послуги, надані на проєкті

• Розробка сайту
• UX/UI-дизайн

Цілі та завдання, поставлені клієнтом

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

Етапи роботи

Аналіз вимог і дослідження аудиторії. На старті проєкту вивчили цільову аудиторію, поведінкові сценарії покупців convenience store та вимоги клієнта. Це стало основою для всіх подальших рішень — структурних, дизайнерських і технічних.

Проектування sitemap і структури сайту. Розробили sitemap і разом із клієнтом узгодили структуру, кількість сторінок і розподіл контенту. Структура сайту охопила головну сторінку, каталог їжі та напоїв, промо-розділ із підсторінками (листівка, «Разом дешевше», «Отримай більше», сети, новинки), новини, послуги, про нас, співпрацю, контакти та інтерактивний пошук маркетів.

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

UX/UI-дизайн. Інтегрували всі напрацювання та створили повноцінний інтерфейс. Дизайн орієнтований на швидкий і зручний досвід користувача. Оскільки більше 56% відвідувачів заходять із мобільних пристроїв, особлива увага приділялась адаптивності та зручності на малих екранах.

Адаптивна кросбраузерна верстка. Зверстали всі сторінки та компоненти сайту відповідно до затвердженого дизайну з допустимим відхиленням не більше 10%. Верстка коректно працює в усіх основних браузерах (Chrome, Firefox, Opera, Safari, IE) та на всіх платформах (Windows, macOS, Linux) як у десктопній, так і в мобільній версії.

Зверстані сторінки та блоки: хедер і футер; головна сторінка з банерами, табами, промо-слайдером, банерною сіткою, відеопрезентацією, блоком послуг, соцмережами та блоком «Знайти нас»; сторінки категорій з гридом товарів і пагінацією; промо-сторінки (листівка, новинки, сети, акції); сторінка новин із гридом і пагінацією та окрема новина з банером, слайдером, текстом, фотогридом і блоком рекомендацій; сторінка Tosim із банерами та FAQ; послуги та контакти з модальними вікнами; сторінка «Знайти маркет» з пошуком і фільтрами.

Бекенд-розробка на CMS. Розробили окрему тему та шаблони для всіх типів сторінок і контентних блоків (хедер, футер, сторінки, категорії, товари, новини, новинки, банери) — щоб увесь контент можна було створювати та редагувати через адмінку без участі розробників. Підключили контактні форми, модальні вікна та слайдери.

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

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

Результат

Замовник отримав повноцінний сайт, розроблений з нуля під специфіку мережі магазинів формату convenience store. Сайт адаптований під мобільні пристрої та коректно відображається в усіх основних браузерах і операційних системах.

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