Интернет-магазин для компании
"Народный дом Украина"

En Uk Ru

Технологии

Designer

Project manager

Frontend

Backend

Период

Июнь 2024 — Сентябрь 2024

О компании

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

20.7К

Подписчиков в Инстаграм

Задача

Перед командой Asabix была задача создать быстрый, современный сайт с лаконичным дизайном, который будет правильно доносить нужное сообщение бренда. Он должен корректно отображаться на всех устройствах, иметь хороший уровень защиты, две языковые версии и возможность оплаты в разных валютах.

Этапы работы

Проектирование

В начале мы разработали четкую стратегию того, каким будет будущий сайт. На Intro call мы обсудили цели бизнеса и какой именно будет нужен функционал. Разработали техническую документацию, где зафиксировали все требования к проекту, после чего согласовали смету проекта и сроки реализации каждого из этапов разработки.

Концепция дизайна

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

Мы разработали два отточенных макета в Figma, с адаптивными версиями и UI Kit, и клиент выбрал один из них. Готовый дизайн стал будто полотном, на котором развернулись яркие детали, и в первые дни запуска мы получили хорошие отзывы от клиентов "Narodniy Dim Ukraina".

Разработка

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

Интеграции

На этом этапе мы подключили внешние API служб доставки и оплаты. Мы также подключили маркетинговые сервисы, чтобы бренд мог наладить свои точки соприкосновения с аудиторией: SMS сообщения, персональные емейл рассылки и отдельные специальные сервисы.

Также мы интегрировали автоматические фиды для рекламных кампаний на Facebook Ads Manager, Google Merchant и Google Ads. Фиды автоматически обновляются при любых изменениях в интернет-магазине: цен, названий или позиций. Это удобное управление рекламными кампаниями без ручного вмешательства, что значительно экономит время.

Дополнительно подключили schema.org. Google Tag Manager, Google Analytics, Google e-commerce, Facebook Pixel, Google's reCAPTCHA.

SEO-оптимизация

Мы улучшили интернет-магазин для SEO на уровне кода: оптимизировали изображения через технологии WebP, предотвратили дублирование страниц благодаря тегу Canonical, внедрили микроразметку Schema.org для лучшей индексации сайта, сформировали файлы robots.txt и sitemap.xm, настроили 301 редирект и прочее.

Тестирование

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

Передача проекта

Передача проекта включает в себя обучение представителей заказчика пользованию панелью администрирования, передачу всех исходных файлов, размещение проекта на сервере и прочее.

Дизайн

FFFFFF

F1EDEC

FBF9F3

9B9191

000000

Montserrat Regular

Text styles

Ag h1 32/auto

Ag h1 mobile 24/auto

Ag h2 mobile 20/auto

Ag BTNs 16/140

Ag paragraph 16/188

Ag small 12/auto

Технические детали

Верстка была выполнена с использованием препроцессоров Pug (для HTML разметки) и Sass (для файлов стилей), что позволило лучше структурировать код и сделать его более качественным. Были выполнены все требования сервисов Google, чтобы сайт занимал высокие SEO-позиции.

Сам интернет-магазин мы разработали на основе Laravel, мощного PHP-фреймворка, с использованием шаблонизатора Blade. JavaScript добавил функциональности, а для сборки и оптимизации мы использовали Gulp и Webpack. Эти инструменты помогают адаптировать код также для старых браузеров, несколько уменьшить его объем и оптимизировать изображения без потери качества, улучшая быстродействие сайта. Благодаря кэшированию с помощью Redis и Memcached мы значительно уменьшили нагрузку на базу данных, что тоже хорошо сказалось на производительности интернет-магазина.

Особое внимание мы уделили безопасности. Laravel предоставляет встроенные механизмы защиты, как защита от CSRF-атак и SQL-инъекций. Для хранения паролей использовали Bcrypt, что делает их устойчивыми к взломам, а также правильно настроили уровни авторизации и аутентификации пользователей.

Все использованные технологии сделали интернет-магазин качественным, быстрым и защищенным.

Финальный функционал:

Карточка товара с различными цветами и размерами;

Простой поиск товаров и SEO фильтр;

Список любимых товаров;

Удобный механизм обработки заказов;

Интеграция с внешними платежными системами и службами доставки;

Управление контентом и SEO-продвижением;

Поддержка нескольких языков и валют;

Автоматические фиды для рекламных кампаний;

Расширенная аналитика (Google Analytics, Facebook Pixel);

Автоматизированные маркетинговые инструменты (SMS, email-рассылки);

Система управления учетными записями пользователей.

Преимущества интернет-магазина, разработанного Asabix

Не задачи, а продукт

Мы подготовили интернет-магазин для успешного запуска и корректной работы с самого начала, сделав даже больше, чем у нас заказали. Мы добавили страницы 404, "спасибо за покупку" и другие, внедрили процесс логирования, добавили правильную реализацию URL и многое другое.

Код от разработчика к разработчику

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

Идеальный UX

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

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

Часы

Эффективность в числах

50 ч

Дизайн

340 ч

Фронтенд

320 ч

Бэкенд

80 ч

Менеджмент и QA

Результаты

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

Интуитивно понятный интерфейс для покупателей;

Стильный и адаптивный дизайн;

Наглядная админпанель для управления контентом и товарами;

Высокие SEO-позиции благодаря оптимизации и интеграции микроразметки;

Качественный код и архитектура, которые станут основой для будущего масштабирования.